More theme stuff

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

@@ -1,9 +1,9 @@
 import { Color } from '../color';
 import type { YaakTheme } from '../window';
 
-const catppuccinLatte: YaakTheme = {
+export const catppuccinLatte: YaakTheme = {
   name: 'Catppuccin Latte',
-  id: 'catppuccin-light',
+  id: 'catppuccin-latte',
   background: new Color('#eff1f5', 'light'),
   foreground: new Color('#4c4f69', 'dark'),
   foregroundSubtle: new Color('#6c6f85', 'light'),
@@ -31,9 +31,9 @@ const catppuccinLatte: YaakTheme = {
   },
 };
 
-const catppuccinMacchiato: YaakTheme = {
+export const catppuccinMacchiato: YaakTheme = {
   name: 'Catppuccin Macchiato',
-  id: 'catppuccin-Macchiato',
+  id: 'catppuccin-macchiato',
   background: new Color('#1e2030', 'dark'),
   foreground: new Color('#cad3f5', 'dark'),
   foregroundSubtle: new Color('#a5adcb', 'dark'),
@@ -77,7 +77,7 @@ const catppuccinMacchiato: YaakTheme = {
   },
 };
 
-const catppuccinFrappe: YaakTheme = {
+export const catppuccinFrappe: YaakTheme = {
   name: 'Catppuccin Frappé',
   id: 'catppuccin-frappe',
   background: new Color('#292c3c', 'dark'),

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

@@ -34,22 +34,22 @@ const githubDark: YaakTheme = {
   },
 };
 
-const githubLight: YaakTheme = {
+export const githubLight: YaakTheme = {
   id: 'github-light',
   name: 'GitHub',
   background: new Color('#ffffff', 'light'),
-  backgroundHighlight: new Color('#e8ebee', 'light'),
-  backgroundHighlightSecondary: new Color('#f6f8fa', 'light'),
+  backgroundHighlight: new Color('hsl(210,15%,92%)', 'light'),
+  backgroundHighlightSecondary: new Color('hsl(210,29%,94%)', 'light'),
   foreground: new Color('#1f2328', 'light'),
   foregroundSubtle: new Color('#636c76', 'light'),
   foregroundSubtler: new Color('#828d94', 'light'),
   colors: {
     primary: new Color('#8250df', 'light'),
     secondary: new Color('#6e7781', 'light'),
-    info: new Color('#0969da', 'light'),
-    success: new Color('#1a7f37', 'light'),
-    notice: new Color('#9a6700', 'light'),
-    warning: new Color('#bc4c00', 'light'),
+    info: new Color('hsl(212,92%,48%)', 'light'),
+    success: new Color('hsl(137,66%,32%)', 'light'),
+    notice: new Color('hsl(40,100%,40%)', 'light'),
+    warning: new Color('hsl(24,100%,44%)', 'light'),
     danger: new Color('#d1242f', 'light'),
   },
 };

src-web/lib/theme/themes/monokai-pro.ts

@@ -1,7 +1,7 @@
 import { Color } from '../color';
 import type { YaakTheme } from '../window';
 
-const monokaiProDefault: YaakTheme = {
+export const monokaiProDefault: YaakTheme = {
   id: 'monokai-pro',
   name: 'Monokai Pro',
   background: new Color('#2d2a2e', 'dark'),

src-web/lib/theme/themes/rose-pine.ts

@@ -1,7 +1,7 @@
 import { Color } from '../color';
 import type { YaakTheme } from '../window';
 
-const rosePineClassic: YaakTheme = {
+export const rosePineDefault: YaakTheme = {
   id: 'rose-pine',
   name: 'Rosé Pine',
   background: new Color('#191724', 'dark'),
@@ -105,4 +105,4 @@ const rosePineDawn: YaakTheme = {
   },
 };
 
-export const rosePine = [rosePineClassic, rosePineDawn, rosePineMoon];
+export const rosePine = [rosePineDefault, rosePineDawn, rosePineMoon];

src-web/lib/theme/window.ts

@@ -180,7 +180,7 @@ function placeholderCSS(color: ColorName, colors?: Partial<RootColors>): string
   }
 
   return [
-    variablesToCSS(`.x-theme-placeholder-widget--${color}`, placeholderColorVariables(cssColor)),
+    variablesToCSS(`.x-theme-placeholder--${color}`, placeholderColorVariables(cssColor)),
   ].join('\n\n');
 }
 
@@ -219,7 +219,8 @@ export function getThemeCSS(theme: YaakTheme): string {
   } catch (err) {
     console.error(err);
   }
-  return themeCSS;
+
+  return [`/* ${theme.name} */`, `[data-theme="${theme.id}"] {`, themeCSS, '}'].join('\n');
 }
 
 export function addThemeStylesToDocument(theme: YaakTheme) {
@@ -230,20 +231,16 @@ export function addThemeStylesToDocument(theme: YaakTheme) {
   }
 
   styleEl.setAttribute('data-theme', theme.id);
-  styleEl.textContent = [
-    `/* ${theme.name} */`,
-    `[data-theme="${theme.id}"] {`,
-    getThemeCSS(theme),
-    '}',
-  ].join('\n');
+  styleEl.textContent = getThemeCSS(theme);
 }
 
 export function setThemeOnDocument(theme: YaakTheme) {
   document.documentElement.setAttribute('data-theme', theme.id);
 }
 
-export function getPreferredAppearance(): Appearance {
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+export async function getPreferredAppearance(): Promise<Appearance> {
+  const a = await getCurrent().theme();
+  return a ?? 'light';
 }
 
 export function subscribeToPreferredAppearanceChange(
@@ -252,7 +249,10 @@ export function subscribeToPreferredAppearanceChange(
   const container = { unsubscribe: () => {} };
 
   getCurrent()
-    .onThemeChanged((t) => cb(t.payload))
+    .onThemeChanged((t) => {
+      console.log('THEME CHANGED', t);
+      cb(t.payload);
+    })
     .then((l) => {
       container.unsubscribe = l;
     });