Remove COLOR_SCHEME affection in useTheme.ts

app/components/ui/internal/ThemeSelector.vue

@@ -1,6 +1,6 @@
 <template>
     <Select v-model="selectedPreset" @update:model-value="handleThemeChange">
-        <SelectTrigger class="w-[180px]">
+        <SelectTrigger class="w-48">
             <SelectValue placeholder="Select theme..." />
         </SelectTrigger>
         <SelectContent>

app/composables/useTheme.ts

@@ -10,23 +10,15 @@ export type ThemePreset =
     | 'sunset' | 'supabase' | 't3chat' | 'tangerine' | 'twitter'
     | 'vercel' | 'vintage' | 'violet'
 
-interface ThemeState {
-    colorScheme: ColorScheme
-    themePreset: ThemePreset
-}
-
-const DEFAULT_COLOR_SCHEME: ColorScheme = 'system'
 const DEFAULT_THEME_PRESET: ThemePreset = 'default'
 const COLOR_SCHEME_KEY = 'vite-ui-color-scheme'
 const THEME_PRESET_KEY = 'vite-ui-theme-preset'
 
 export const useTheme = () => {
-    const colorScheme = ref<ColorScheme>(DEFAULT_COLOR_SCHEME)
     const themePreset = ref<ThemePreset>(DEFAULT_THEME_PRESET)
 
     const initFromStorage = () => {
         if (import.meta.client) {
-            colorScheme.value = (localStorage.getItem(COLOR_SCHEME_KEY) as ColorScheme) || DEFAULT_COLOR_SCHEME
             themePreset.value = (localStorage.getItem(THEME_PRESET_KEY) as ThemePreset) || DEFAULT_THEME_PRESET
             applyTheme()
         }
@@ -38,13 +30,6 @@ export const useTheme = () => {
         const root = document.documentElement
         root.classList.remove('light', 'dark')
 
-        let effectiveScheme = colorScheme.value
-        if (effectiveScheme === 'system') {
-            effectiveScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-        }
-
-        root.classList.add(effectiveScheme)
-
         const link = document.createElement('link')
         link.rel = 'stylesheet'
         link.href = `/themes/${themePreset.value}.css`
@@ -72,9 +57,7 @@ export const useTheme = () => {
 
         const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
         const handleChange = () => {
-            if (colorScheme.value === 'system') {
+            applyTheme()
-                applyTheme()
-            }
         }
 
         mediaQuery.addEventListener('change', handleChange)
@@ -82,7 +65,6 @@ export const useTheme = () => {
     }
 
     const setColorScheme = (scheme: ColorScheme) => {
-        colorScheme.value = scheme
         if (import.meta.client) {
             localStorage.setItem(COLOR_SCHEME_KEY, scheme)
             applyTheme()
@@ -103,7 +85,6 @@ export const useTheme = () => {
     })
 
     return {
-        colorScheme: readonly(colorScheme),
         themePreset: readonly(themePreset),
         setColorScheme,
         setThemePreset