Custom font sizes and better zoom

src-web/lib/theme/appearance.ts

@@ -0,0 +1,31 @@
+import { getCurrent } from '@tauri-apps/api/webviewWindow';
+import type { Appearance } from './window';
+
+export function getCSSAppearance(): Appearance {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export async function getWindowAppearance(): Promise<Appearance> {
+  const a = await getCurrent().theme();
+  return a ?? getCSSAppearance();
+}
+
+/**
+ * Subscribe to appearance (dark/light) changes. Note, we use Tauri Window appearance instead of
+ * CSS appearance because CSS won't fire the way we handle window theme management.
+ */
+export function subscribeToWindowAppearanceChange(
+  cb: (appearance: Appearance) => void,
+): () => void {
+  const container = { unsubscribe: () => {} };
+
+  getCurrent()
+    .onThemeChanged((t) => {
+      cb(t.payload);
+    })
+    .then((l) => {
+      container.unsubscribe = l;
+    });
+
+  return () => container.unsubscribe();
+}

src-web/lib/theme/color.ts

@@ -41,22 +41,10 @@ export class Color {
     return this.theme === 'dark' ? this._darken(mod) : this._lighten(mod);
   }
 
-  lowerTo(value: number): Color {
-    return this.theme === 'dark'
-      ? this._darken(1)._lighten(value)
-      : this._lighten(1)._darken(1 - value);
-  }
-
   lift(mod: number): Color {
     return this.theme === 'dark' ? this._lighten(mod) : this._darken(mod);
   }
 
-  liftTo(value: number): Color {
-    return this.theme === 'dark'
-      ? this._lighten(1)._darken(1 - value)
-      : this._darken(1)._lighten(value);
-  }
-
   translucify(mod: number): Color {
     const c = this.clone();
     c.alpha = c.alpha - c.alpha * mod;

src-web/lib/theme/themes/yaak.ts

@@ -31,10 +31,10 @@ export const yaakLight: YaakTheme = {
 export const yaakDark: YaakTheme = {
   id: 'yaak-dark',
   name: 'Yaak',
-  background: new Color('hsl(244,23%,13%)', 'dark'),
+  background: new Color('hsl(244,23%,14%)', 'dark'),
   backgroundHighlight: new Color('hsl(244,23%,23%)', 'dark'),
   backgroundHighlightSecondary: new Color('hsl(244,23%,20%)', 'dark'),
-  foreground: new Color('hsl(245,23%,86%)', 'dark'),
+  foreground: new Color('hsl(245,23%,80%)', 'dark'),
   foregroundSubtle: new Color('hsl(245,20%,65%)', 'dark'),
   foregroundSubtler: new Color('hsl(245,18%,50%)', 'dark'),
 

src-web/lib/theme/window.ts

@@ -1,5 +1,3 @@
-import { getCurrent } from '@tauri-apps/api/webviewWindow';
-import { indent } from '../indent';
 import { Color } from './color';
 
 export type Appearance = 'dark' | 'light' | 'system';
@@ -238,24 +236,9 @@ export function setThemeOnDocument(theme: YaakTheme) {
   document.documentElement.setAttribute('data-theme', theme.id);
 }
 
-export async function getPreferredAppearance(): Promise<Appearance> {
-  const a = await getCurrent().theme();
-  return a ?? 'light';
-}
-
-export function subscribeToPreferredAppearanceChange(
-  cb: (appearance: Appearance) => void,
-): () => void {
-  const container = { unsubscribe: () => {} };
-
-  getCurrent()
-    .onThemeChanged((t) => {
-      console.log('THEME CHANGED', t);
-      cb(t.payload);
-    })
-    .then((l) => {
-      container.unsubscribe = l;
-    });
-
-  return () => container.unsubscribe();
+export function indent(text: string, space = '    '): string {
+  return text
+    .split('\n')
+    .map((line) => space + line)
+    .join('\n');
 }