From ca03d13d2554732249cf64a54c301597283e76be Mon Sep 17 00:00:00 2001
From: yz778 <2322981+yz778@users.noreply.github.com>
Date: Tue, 8 Jul 2025 00:20:23 -0700
Subject: [PATCH 1/5] feat: add all themes available

---
 src/components/OmniBar.tsx       | 55 ++++++++++--------------
 src/components/ThemeSelector.tsx |  9 ++--
 src/core/setting/SettingModel.ts |  9 ++--
 tailwind.config.ts               | 74 ++++++++++++++++----------------
 4 files changed, 69 insertions(+), 78 deletions(-)

diff --git a/src/components/OmniBar.tsx b/src/components/OmniBar.tsx
index a22e9aa3..eafc50a8 100644
--- a/src/components/OmniBar.tsx
+++ b/src/components/OmniBar.tsx
@@ -16,6 +16,7 @@ import { chatStore } from '~/core/chat/ChatStore'
 import { connectionStore } from '~/core/connection/ConnectionStore'
 
 import { messageTable } from '~/core/message/MessageTable'
+import themes from 'daisyui/src/theming/themes'
 
 const isSelected = ({ parent, id }: ActionImpl) => {
   if (parent === 'theme') {
@@ -87,6 +88,27 @@ export function RenderResults() {
 }
 
 const useRegisterThemeActions = () => {
+  const themeNames = Object.keys(themes)
+
+  const themeActions = themeNames.map(theme => ({
+    id: theme,
+    name: theme.charAt(0).toUpperCase() + theme.slice(1),
+    keywords: `${theme} theme`,
+    section: 'Theme',
+    perform: async () => settingStore.update({ theme }),
+    parent: 'theme',
+  }))
+
+  // Optionally add a "System" theme
+  themeActions.push({
+    id: '_system',
+    name: 'System',
+    keywords: 'system theme',
+    section: 'Theme',
+    perform: async () => settingStore.update({ theme: '_system' }),
+    parent: 'theme',
+  })
+
   useRegisterActions([
     {
       id: 'theme',
@@ -94,38 +116,7 @@ const useRegisterThemeActions = () => {
       keywords: 'interface color dark light',
       section: 'Preferences',
     },
-    {
-      id: 'dark',
-      name: 'Dark',
-      keywords: 'dark theme',
-      section: 'Theme',
-      perform: async () => settingStore.update({ theme: 'dark' }),
-      parent: 'theme',
-    },
-    {
-      id: 'dracula',
-      name: 'Dracula',
-      keywords: 'dracula theme',
-      section: 'Theme',
-      perform: async () => settingStore.update({ theme: 'dracula' }),
-      parent: 'theme',
-    },
-    {
-      id: '_system',
-      name: 'System',
-      keywords: 'system theme',
-      section: 'Theme',
-      perform: async () => settingStore.update({ theme: '_system' }),
-      parent: 'theme',
-    },
-    {
-      id: 'garden',
-      name: 'Light',
-      keywords: 'light garden theme',
-      section: 'Theme',
-      perform: async () => settingStore.update({ theme: 'garden' }),
-      parent: 'theme',
-    },
+    ...themeActions,
   ])
 }
 
diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
index ac01a554..7ca6fea5 100644
--- a/src/components/ThemeSelector.tsx
+++ b/src/components/ThemeSelector.tsx
@@ -4,11 +4,14 @@ import { twMerge } from 'tailwind-merge'
 import { settingStore } from '~/core/setting/SettingStore'
 import { Select, SelectItem } from '@heroui/react'
 
+import allThemes from 'daisyui/src/theming/themes'
+
 const themes = {
   _system: 'System theme',
-  dark: 'Dark',
-  dracula: 'Dracula',
-  garden: 'Light',
+  ...Object.keys(allThemes).reduce<Record<string, string>>((acc, key) => {
+    acc[key] = key.charAt(0).toUpperCase() + key.slice(1)
+    return acc
+  }, {}),
 }
 
 const ThemeSelector = () => {
diff --git a/src/core/setting/SettingModel.ts b/src/core/setting/SettingModel.ts
index c3a34386..e4a0a2b7 100644
--- a/src/core/setting/SettingModel.ts
+++ b/src/core/setting/SettingModel.ts
@@ -1,15 +1,12 @@
 import z from 'zod'
 import moment from 'moment'
+import allThemes from 'daisyui/src/theming/themes'
 
 export const CURRENT_DB_TIMESTAMP = moment('Oct 28 24', 'MMM DD YY')
 export const CURRENT_DB_TIMESTAMP_MILLISECONDS = CURRENT_DB_TIMESTAMP.valueOf()
 
-const ThemeOptions = z.union([
-  z.literal('_system'),
-  z.literal('dark'),
-  z.literal('dracula'),
-  z.literal('garden'),
-])
+const themeKeys = ['_system', ...Object.keys(allThemes)] as const
+const ThemeOptions = z.enum(themeKeys)
 
 export const SettingModel = z.object({
   // setting row will only have one field
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3125c150..9bf6cc98 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,54 +1,54 @@
 /** @type {import('tailwindcss').Config} */
 
-import { heroui } from "@heroui/react"
+import { heroui } from '@heroui/react'
 import themes from 'daisyui/src/theming/themes'
 
 const errorColor = 'oklch(51% 0.17 22.1)'
 
+const allThemes = Object.entries(themes).map(([name, theme]) => {
+  if (name === 'garden') {
+    return {
+      [name]: {
+        ...theme,
+        primary: 'oklch(62.45% 0.1947 3.83636)',
+        error: errorColor,
+      },
+    }
+  }
+
+  return {
+    [name]: {
+      ...theme,
+      error: errorColor,
+    },
+  }
+})
+
 module.exports = {
-  content: [
-    'src/**/*.{js,ts,jsx,tsx}',
-    "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ['src/**/*.{js,ts,jsx,tsx}', './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {},
   },
   darkMode: 'class',
-  plugins: [require('@tailwindcss/typography'), require('daisyui'), heroui({
-    themes: {
-      light: {
-        colors: {
-          danger: errorColor
-        }
-      },
-      dark: {
-        colors: {
-          danger: errorColor
-        }
-      }
-    }
-  })],
-  daisyui: {
-    themes: [
-      {
-        garden: {
-          ...themes['garden'],
-          primary: 'oklch(62.45% 0.1947 3.83636)',
-          error: errorColor
+  plugins: [
+    require('@tailwindcss/typography'),
+    require('daisyui'),
+    heroui({
+      themes: {
+        light: {
+          colors: {
+            danger: errorColor,
+          },
         },
-      },
-      {
         dark: {
-          ...themes['dark'],
-          error: errorColor
-        },
-      },
-      {
-        dracula: {
-          ...themes['dracula'],
-          error: errorColor
+          colors: {
+            danger: errorColor,
+          },
         },
       },
-    ],
+    }),
+  ],
+  daisyui: {
+    themes: allThemes,
   },
 }

From 1d734a894b41cbfb9bf9c45e0371c6a618b43154 Mon Sep 17 00:00:00 2001
From: djohnson <mr.demarcus.johnson@gmail.com>
Date: Tue, 8 Jul 2025 09:11:20 +0200
Subject: [PATCH 2/5] fix: sidebar flickers when closing

the flicker is still there but its during the closing animation instead of after
---
 src/containers/SideBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/SideBar.tsx b/src/containers/SideBar.tsx
index 24332f1b..33d164c9 100644
--- a/src/containers/SideBar.tsx
+++ b/src/containers/SideBar.tsx
@@ -51,7 +51,7 @@ export const SideBar = () => {
     <nav className={twMerge('group/sidebar relative h-full', width)}>
       <div
         className={twMerge(
-          'flex h-full flex-1 flex-col flex-nowrap gap-2 self-stretch bg-base-300 p-2 transition-opacity duration-300 ease-in-out',
+          'flex h-full flex-1 flex-col flex-nowrap gap-2 self-stretch bg-base-300 p-2 transition-opacity duration-150 ease-in-out',
           isSidebarOpen || isMobile ? 'opacity-100' : 'pointer-events-none -z-10 opacity-0',
         )}
       >

From d3289ba0a1c56be13dfc8e5ada30fc286504e7ed Mon Sep 17 00:00:00 2001
From: yz778 <2322981+yz778@users.noreply.github.com>
Date: Tue, 8 Jul 2025 00:46:13 -0700
Subject: [PATCH 3/5] chore: return undefined instead of throwing error if
 value is invalid

---
 src/core/BaseTable.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/core/BaseTable.ts b/src/core/BaseTable.ts
index 04b8e1e6..95dd7d69 100644
--- a/src/core/BaseTable.ts
+++ b/src/core/BaseTable.ts
@@ -95,7 +95,13 @@ export abstract class BaseTable<
 
     if (!entity) return undefined
 
-    return this.cache.put(this.schema.parse(entity), false)
+    const result = this.schema.safeParse(entity)
+
+    if (result.success) {
+      return this.cache.put(result.data, false)
+    } else {
+      return undefined
+    }
   }
 
   async findByIds(ids: string[]): Promise<Output[]> {

From 0af7889f5c5d6e3e5633754e516040340f63cca2 Mon Sep 17 00:00:00 2001
From: yz778 <2322981+yz778@users.noreply.github.com>
Date: Tue, 8 Jul 2025 02:34:41 -0700
Subject: [PATCH 4/5] feat: improve theme config

---
 src/components/OmniBar.tsx              |  19 +--
 src/components/ThemeSelector.tsx        |  11 +-
 src/containers/DaisyUiThemeProvider.tsx |  10 +-
 src/core/setting/SettingModel.ts        |   4 +-
 src/utils/themeConfig.ts                | 159 ++++++++++++++++++++++++
 tailwind.config.ts                      |  29 +----
 6 files changed, 181 insertions(+), 51 deletions(-)
 create mode 100644 src/utils/themeConfig.ts

diff --git a/src/components/OmniBar.tsx b/src/components/OmniBar.tsx
index eafc50a8..e9f9a6e0 100644
--- a/src/components/OmniBar.tsx
+++ b/src/components/OmniBar.tsx
@@ -16,7 +16,7 @@ import { chatStore } from '~/core/chat/ChatStore'
 import { connectionStore } from '~/core/connection/ConnectionStore'
 
 import { messageTable } from '~/core/message/MessageTable'
-import themes from 'daisyui/src/theming/themes'
+import { getThemeKeys, getThemeDisplayNames } from '~/utils/themeConfig'
 
 const isSelected = ({ parent, id }: ActionImpl) => {
   if (parent === 'theme') {
@@ -88,27 +88,18 @@ export function RenderResults() {
 }
 
 const useRegisterThemeActions = () => {
-  const themeNames = Object.keys(themes)
+  const themeKeys = getThemeKeys()
+  const themeDisplayNames = getThemeDisplayNames()
 
-  const themeActions = themeNames.map(theme => ({
+  const themeActions = themeKeys.map(theme => ({
     id: theme,
-    name: theme.charAt(0).toUpperCase() + theme.slice(1),
+    name: themeDisplayNames[theme],
     keywords: `${theme} theme`,
     section: 'Theme',
     perform: async () => settingStore.update({ theme }),
     parent: 'theme',
   }))
 
-  // Optionally add a "System" theme
-  themeActions.push({
-    id: '_system',
-    name: 'System',
-    keywords: 'system theme',
-    section: 'Theme',
-    perform: async () => settingStore.update({ theme: '_system' }),
-    parent: 'theme',
-  })
-
   useRegisterActions([
     {
       id: 'theme',
diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
index 7ca6fea5..f44b24f8 100644
--- a/src/components/ThemeSelector.tsx
+++ b/src/components/ThemeSelector.tsx
@@ -3,16 +3,9 @@ import { twMerge } from 'tailwind-merge'
 
 import { settingStore } from '~/core/setting/SettingStore'
 import { Select, SelectItem } from '@heroui/react'
+import { getThemeDisplayNames } from '~/utils/themeConfig'
 
-import allThemes from 'daisyui/src/theming/themes'
-
-const themes = {
-  _system: 'System theme',
-  ...Object.keys(allThemes).reduce<Record<string, string>>((acc, key) => {
-    acc[key] = key.charAt(0).toUpperCase() + key.slice(1)
-    return acc
-  }, {}),
-}
+const themes = getThemeDisplayNames()
 
 const ThemeSelector = () => {
   const selectedTheme = settingStore.setting.theme
diff --git a/src/containers/DaisyUiThemeProvider.tsx b/src/containers/DaisyUiThemeProvider.tsx
index dbe0c5b6..7fd13798 100644
--- a/src/containers/DaisyUiThemeProvider.tsx
+++ b/src/containers/DaisyUiThemeProvider.tsx
@@ -2,15 +2,19 @@ import { useEffect, useMemo, type PropsWithChildren } from 'react'
 import useMedia from 'use-media'
 
 import { settingStore } from '~/core/setting/SettingStore'
+import { resolveThemeAlias, systemThemeConfig } from '~/utils/themeConfig'
 
 const DaisyUiThemeProvider = ({ children }: PropsWithChildren) => {
   const selectedTheme = settingStore.setting.theme
   const prefersDarkMode = useMedia('(prefers-color-scheme: dark)')
 
   const theme = useMemo(() => {
-    if (selectedTheme !== '_system') return selectedTheme
-
-    return prefersDarkMode ? 'dark' : 'garden'
+    if (selectedTheme === '_system') {
+      const systemTheme = prefersDarkMode ? systemThemeConfig.dark : systemThemeConfig.light
+      return resolveThemeAlias(systemTheme)
+    } else {
+      return resolveThemeAlias(selectedTheme)
+    }
   }, [selectedTheme, prefersDarkMode])
 
   useEffect(() => {
diff --git a/src/core/setting/SettingModel.ts b/src/core/setting/SettingModel.ts
index e4a0a2b7..54b04c43 100644
--- a/src/core/setting/SettingModel.ts
+++ b/src/core/setting/SettingModel.ts
@@ -1,11 +1,11 @@
 import z from 'zod'
 import moment from 'moment'
-import allThemes from 'daisyui/src/theming/themes'
+import { getThemeKeys } from '~/utils/themeConfig'
 
 export const CURRENT_DB_TIMESTAMP = moment('Oct 28 24', 'MMM DD YY')
 export const CURRENT_DB_TIMESTAMP_MILLISECONDS = CURRENT_DB_TIMESTAMP.valueOf()
 
-const themeKeys = ['_system', ...Object.keys(allThemes)] as const
+const themeKeys = getThemeKeys() as [string, ...string[]]
 const ThemeOptions = z.enum(themeKeys)
 
 export const SettingModel = z.object({
diff --git a/src/utils/themeConfig.ts b/src/utils/themeConfig.ts
new file mode 100644
index 00000000..4ca51c32
--- /dev/null
+++ b/src/utils/themeConfig.ts
@@ -0,0 +1,159 @@
+import allThemes from 'daisyui/src/theming/themes'
+
+export const colors = {
+  error: 'oklch(51% 0.17 22.1)',
+}
+
+export const systemThemeConfig = { light: 'light', dark: 'dark' }
+
+export const themeConfig = {
+  enabledThemes: [
+    'acid',
+    'aqua',
+    'autumn',
+    'black',
+    'bumblebee',
+    //'business',
+    'cmyk',
+    'coffee',
+    //'corporate',
+    'cupcake',
+    'cyberpunk',
+    'dark',
+    'dim',
+    'dracula',
+    //'emerald',
+    //'fantasy',
+    'forest',
+    'garden',
+    //'halloween',
+    //'lemonade',
+    { light: 'garden' }, // alias: light -> garden
+    //{ 'Light (Original)': 'light' }, // original light theme
+    'lofi',
+    //'luxury',
+    'night',
+    'nord',
+    'pastel',
+    'retro',
+    'sunset',
+    'synthwave',
+    'valentine',
+    'winter',
+    'wireframe',
+  ],
+
+  defaultTheme: 'dracula',
+
+  customizations: {
+    // Regex patterns for multiple themes (examples)
+    // '^dark.*': { /* customizations for themes starting with 'dark' */ },
+    // '.*night.*': { /* customizations for themes containing 'night' */ },
+    // '(dracula|dark|night|black)': { /* customizations for dark-themed themes */ },
+    // '^(light|garden|cupcake)$': { /* customizations for specific light themes */ },
+
+    '*': {
+      error: colors.error,
+    },
+
+    garden: {
+      primary: 'oklch(62.45% 0.1947 3.83636)',
+    },
+  },
+}
+
+export const getThemeKeys = (): string[] => {
+  const themes: string[] = []
+
+  themes.push('_system')
+  themeConfig.enabledThemes.forEach(theme => {
+    if (typeof theme === 'string') {
+      themes.push(theme)
+    } else {
+      themes.push(Object.keys(theme)[0]) // push alias as theme
+    }
+  })
+
+  return themes
+}
+
+export const getThemeDisplayNames = (): Record<string, string> => {
+  const themes: Record<string, string> = {}
+
+  themes['_system'] = 'System Theme'
+  themeConfig.enabledThemes.forEach(theme => {
+    if (typeof theme === 'string') {
+      themes[theme] = theme.charAt(0).toUpperCase() + theme.slice(1)
+    } else {
+      const [alias] = Object.keys(theme)
+      themes[alias] = alias.charAt(0).toUpperCase() + alias.slice(1)
+    }
+  })
+
+  return themes
+}
+
+export const resolveThemeAlias = (themeKey: string): string => {
+  if (themeKey === '_system') return '_system'
+
+  for (const theme of themeConfig.enabledThemes) {
+    if (typeof theme === 'object') {
+      const [alias, actualTheme] = Object.entries(theme)[0]
+      if (alias === themeKey) {
+        return actualTheme
+      }
+    }
+  }
+
+  return themeKey
+}
+
+export const getEnabledDaisyThemes = () => {
+  const enabledThemes: Record<string, any> = {}
+
+  themeConfig.enabledThemes.forEach(theme => {
+    let actualThemeName: string
+
+    if (typeof theme === 'string') {
+      actualThemeName = theme
+    } else {
+      // It's an alias object, get the actual theme name
+      const [alias, actualTheme] = Object.entries(theme)[0]
+
+      // Skip _system theme as it's not a real DaisyUI theme
+      if (alias === '_system') return
+
+      actualThemeName = actualTheme as string
+    }
+
+    if ((allThemes as any)[actualThemeName]) {
+      let themeCustomizations = { ...(allThemes as any)[actualThemeName] }
+
+      // Apply customizations in order of specificity (least to most specific)
+      Object.entries(themeConfig.customizations).forEach(([pattern, customization]) => {
+        if (pattern === '*') {
+          // Global wildcard - applies to all themes
+          themeCustomizations = { ...themeCustomizations, ...customization }
+        } else if (pattern === actualThemeName) {
+          // Exact theme name match - most specific, applied last
+          themeCustomizations = { ...themeCustomizations, ...customization }
+        } else {
+          // Try regex pattern matching
+          try {
+            const regex = new RegExp(pattern)
+            if (regex.test(actualThemeName)) {
+              themeCustomizations = { ...themeCustomizations, ...customization }
+            }
+          } catch (e) {
+            // Invalid regex pattern, skip silently
+            console.warn(`Invalid regex pattern in theme customizations: ${pattern}`)
+          }
+        }
+      })
+
+      enabledThemes[actualThemeName] = themeCustomizations
+    }
+  })
+
+  return enabledThemes
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 9bf6cc98..dcfee5fc 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,28 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 
 import { heroui } from '@heroui/react'
-import themes from 'daisyui/src/theming/themes'
+import { getEnabledDaisyThemes, colors } from './src/utils/themeConfig'
 
-const errorColor = 'oklch(51% 0.17 22.1)'
-
-const allThemes = Object.entries(themes).map(([name, theme]) => {
-  if (name === 'garden') {
-    return {
-      [name]: {
-        ...theme,
-        primary: 'oklch(62.45% 0.1947 3.83636)',
-        error: errorColor,
-      },
-    }
-  }
-
-  return {
-    [name]: {
-      ...theme,
-      error: errorColor,
-    },
-  }
-})
+const allThemes = Object.entries(getEnabledDaisyThemes()).map(([name, theme]) => ({
+  [name]: theme,
+}))
 
 module.exports = {
   content: ['src/**/*.{js,ts,jsx,tsx}', './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'],
@@ -37,12 +20,12 @@ module.exports = {
       themes: {
         light: {
           colors: {
-            danger: errorColor,
+            danger: colors.error,
           },
         },
         dark: {
           colors: {
-            danger: errorColor,
+            danger: colors.error,
           },
         },
       },

From 57b3d89bb60e395f485d00d14b8af8895baabb0a Mon Sep 17 00:00:00 2001
From: yz778 <2322981+yz778@users.noreply.github.com>
Date: Tue, 8 Jul 2025 11:24:41 -0700
Subject: [PATCH 5/5] fix: only add nord and synthwave

---
 src/utils/themeConfig.ts | 28 ----------------------------
 1 file changed, 28 deletions(-)

diff --git a/src/utils/themeConfig.ts b/src/utils/themeConfig.ts
index 4ca51c32..c40dc3d0 100644
--- a/src/utils/themeConfig.ts
+++ b/src/utils/themeConfig.ts
@@ -8,39 +8,11 @@ export const systemThemeConfig = { light: 'light', dark: 'dark' }
 
 export const themeConfig = {
   enabledThemes: [
-    'acid',
-    'aqua',
-    'autumn',
-    'black',
-    'bumblebee',
-    //'business',
-    'cmyk',
-    'coffee',
-    //'corporate',
-    'cupcake',
-    'cyberpunk',
     'dark',
-    'dim',
     'dracula',
-    //'emerald',
-    //'fantasy',
-    'forest',
-    'garden',
-    //'halloween',
-    //'lemonade',
     { light: 'garden' }, // alias: light -> garden
-    //{ 'Light (Original)': 'light' }, // original light theme
-    'lofi',
-    //'luxury',
-    'night',
     'nord',
-    'pastel',
-    'retro',
-    'sunset',
     'synthwave',
-    'valentine',
-    'winter',
-    'wireframe',
   ],
 
   defaultTheme: 'dracula',