anyame/anyame-frontend-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove COLOR_SCHEME affection in useTheme.ts

Browse Source
This commit is contained in:
bivashy
2026-01-15 22:45:15 +05:00
parent c0524494e9
commit b72fd8a12f
2 changed files with 2 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/composables/useTheme.ts
View File

@ -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