fix: theming issues & all included themes are builtin

src/components/pages/settings/parts/SettingsOAuth/index.tsx

@@ -37,6 +37,8 @@ const names = {
 function OAuthButton({ provider, linked }: { provider: OAuthProviderType; linked: boolean }) {
   const t = useMantineTheme();
 
+  console.log(t);
+
   const unlink = async () => {
     const { error } = await fetchApi<Response['/api/auth/oauth']>('/api/auth/oauth', 'DELETE', {
       provider,
@@ -66,7 +68,7 @@ function OAuthButton({ provider, linked }: { provider: OAuthProviderType; linked
     leftSection: icons[provider],
     color: linked ? 'red' : `${provider.toLowerCase()}.0`,
     style: {
-      '--z-bol-color': darken(t.colors[provider.toLowerCase()][0], 0.2, t),
+      '--z-bol-color': darken(t.colors?.[provider.toLowerCase()]?.[0] ?? '', 0.2, t),
     },
     className: !linked ? styles.button : undefined,
   };

themes/black_dark.theme.json → src/lib/theme/builtins/black_dark.theme.json

@@ -1,5 +1,6 @@
 {
   "name": "Black Dark",
+  "id": "builtin:black_dark",
   "colorScheme": "dark",
   "colors": {
     "dark": [

src/lib/theme/builtins/catppuccin_frappe.theme.json

@@ -0,0 +1,33 @@
+{
+  "name": "Catppuccin Frappé",
+  "id": "builtin:cat_frappe",
+  "colorScheme": "dark",
+  "colors": {
+    "blue": [
+      "#FFFFFF",
+      "#b8caf4",
+      "#a2baf1",
+      "#7599ea",
+      "#5f89e7",
+      "#8c99ee",
+      "#8ca1ee",
+      "#8cb2ee",
+      "#8cbaee",
+      "#8caaee"
+    ],
+    "dark": [
+      "#c6d0f5",
+      "#949cbb",
+      "#838ba7",
+      "#737994",
+      "#626880",
+      "#51576d",
+      "#414559",
+      "#303446",
+      "#292c3c",
+      "#232634"
+    ]
+  },
+  "primaryColor": "blue",
+  "mainBackgroundColor": "var(--mantine-color-dark-9)"
+}

themes/catppuccin_latte.theme.json → src/lib/theme/builtins/catppuccin_latte.theme.json

@@ -1,5 +1,6 @@
 {
   "name": "Catppuccin Latte",
+  "id": "builtin:cat_latte",
   "colorScheme": "light",
   "colors": {
     "blue": [

src/lib/theme/builtins/catppuccin_macchiato.theme.json

@@ -0,0 +1,33 @@
+{
+  "name": "Catppuccin Macchiato",
+  "id": "builtin:cat_macchiato",
+  "colorScheme": "dark",
+  "colors": {
+    "blue": [
+      "#FFFFFF",
+      "#a1bdf6",
+      "#729cf1",
+      "#5b8cef",
+      "#899bf4",
+      "#89a4f4",
+      "#89acf4",
+      "#89b5f4",
+      "#89bef4",
+      "#8aadf4"
+    ],
+    "dark": [
+      "#cad3f5",
+      "#8087a2",
+      "#8087a2",
+      "#6e738d",
+      "#5b6078",
+      "#494d64",
+      "#363a4f",
+      "#24273a",
+      "#1e2030",
+      "#181926"
+    ]
+  },
+  "primaryColor": "blue",
+  "mainBackgroundColor": "var(--mantine-color-dark-9)"
+}

themes/catppuccin_mocha.theme.json → src/lib/theme/builtins/catppuccin_mocha.theme.json

@@ -1,5 +1,6 @@
 {
   "name": "Catppuccin Mocha",
+  "id": "builtin:cat_mocha",
   "colorScheme": "dark",
   "colors": {
     "blue": [

themes/dark_blue.theme.json → src/lib/theme/builtins/dark_blue.theme.json

@@ -1,5 +1,6 @@
 {
   "name": "Dark Blue",
+  "id": "builtin:dark_blue",
   "colorScheme": "dark",
   "colors": {
     "blue": [

themes/light_blue.theme.json → src/lib/theme/builtins/light_blue.theme.json

@@ -1,5 +1,6 @@
 {
   "name": "Light Blue",
+  "id": "builtin:light_blue",
   "colorScheme": "light",
   "colors": {
     "blue": [

src/lib/theme/file.ts

@@ -5,12 +5,22 @@ import { exists } from '../fs';
 
 import dark_gray from './builtins/dark_gray.theme.json';
 import light_gray from './builtins/light_gray.theme.json';
+import black_dark from './builtins/black_dark.theme.json';
+
+import light_blue from './builtins/light_blue.theme.json';
+import dark_blue from './builtins/dark_blue.theme.json';
+
+import cat_frappe from './builtins/catppuccin_frappe.theme.json';
+import cat_latte from './builtins/catppuccin_latte.theme.json';
+import cat_macchiato from './builtins/catppuccin_macchiato.theme.json';
+import cat_mocha from './builtins/catppuccin_mocha.theme.json';
+
 import { log } from '../logger';
 
 const THEMES_DIR = './themes';
 const logger = log('theme');
 
-export async function readThemes(includeBuiltins: boolean = true): Promise<ZiplineTheme[]> {
+export async function readThemes(): Promise<ZiplineTheme[]> {
   const themes = await readThemesDir();
   const parsedThemes = await parseThemes(themes);
 
@@ -25,19 +35,22 @@ export async function readThemes(includeBuiltins: boolean = true): Promise<Zipli
           : 'color-mix(in srgb, var(--mantine-color-gray-9), black 45%)'; // darken(--mantine-color-gray-9 45%)
     }
 
-    parsedThemes[i] = await handleOverrideColors(parsedThemes[i]);
+    parsedThemes[i] = handleOverrideColors(parsedThemes[i]);
   }
 
-  if (includeBuiltins) {
-    parsedThemes.push(
-      await handleOverrideColors(dark_gray as ZiplineTheme),
-      await handleOverrideColors(light_gray as ZiplineTheme),
-    );
-  }
+  parsedThemes.push(
+    handleOverrideColors(dark_gray as ZiplineTheme),
+    handleOverrideColors(light_gray as unknown as ZiplineTheme),
+    handleOverrideColors(black_dark as unknown as ZiplineTheme),
+    handleOverrideColors(light_blue as unknown as ZiplineTheme),
+    handleOverrideColors(dark_blue as unknown as ZiplineTheme),
+    handleOverrideColors(cat_frappe as unknown as ZiplineTheme),
+    handleOverrideColors(cat_latte as unknown as ZiplineTheme),
+    handleOverrideColors(cat_macchiato as unknown as ZiplineTheme),
+    handleOverrideColors(cat_mocha as unknown as ZiplineTheme),
+  );
 
-  logger.debug('loaded themes', {
-    themes: parsedThemes.map((t) => t.id),
-  });
+  console.log(parsedThemes);
 
   return parsedThemes;
 }
@@ -66,7 +79,7 @@ export async function parseThemes(themes: string[]): Promise<ZiplineTheme[]> {
   return parsedThemes;
 }
 
-export async function handleOverrideColors(theme: ZiplineTheme) {
+export function handleOverrideColors(theme: ZiplineTheme) {
   return {
     ...theme,
     colors: {