From 868ac6b61bc8b50eee0e86fbf24be14f7594e95d Mon Sep 17 00:00:00 2001 From: Supra4E8C Date: Sun, 22 Mar 2026 17:28:17 +0800 Subject: [PATCH] feat(theme): update theme colors and improve theme resolution logic --- src/components/layout/MainLayout.tsx | 8 ++++---- src/i18n/locales/en.json | 4 ++-- src/i18n/locales/ru.json | 4 ++-- src/i18n/locales/zh-CN.json | 4 ++-- src/stores/useThemeStore.ts | 21 +++++++++++++++------ 5 files changed, 25 insertions(+), 16 deletions(-) diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx index 53307aa..8572de7 100644 --- a/src/components/layout/MainLayout.tsx +++ b/src/components/layout/MainLayout.tsx @@ -160,11 +160,11 @@ const THEME_CARDS: Array<{ key: 'auto', labelKey: 'theme.auto', colors: { - bg: 'linear-gradient(135deg, #faf9f5 0 50%, #151412 50% 100%)', - card: 'linear-gradient(135deg, #f0eee8 0 50%, #1d1b18 50% 100%)', - border: '#bdb6ae', + bg: 'linear-gradient(135deg, #ffffff 0 50%, #111111 50% 100%)', + card: 'linear-gradient(135deg, #ffffff 0 50%, #1a1a1a 50% 100%)', + border: '#bdbdbd', text: '#2d2a26', - textMuted: 'linear-gradient(135deg, #a29c95 0 50%, #9c958d 50% 100%)', + textMuted: 'linear-gradient(135deg, #c9c9c9 0 50%, #5a5a5a 50% 100%)', }, }, { diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index aea5f59..973132f 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -1449,10 +1449,10 @@ }, "theme": { "switch": "Theme", - "light": "Light", + "light": "Wool Paper", "white": "Pure White", "dark": "Dark", - "switch_to_light": "Switch to light mode", + "switch_to_light": "Switch to wool paper mode", "switch_to_dark": "Switch to dark mode", "auto": "Follow system" }, diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json index bf77223..59dec8d 100644 --- a/src/i18n/locales/ru.json +++ b/src/i18n/locales/ru.json @@ -1454,10 +1454,10 @@ }, "theme": { "switch": "Тема", - "light": "Светлая", + "light": "Шерстяная бумага", "white": "Чисто-белая", "dark": "Тёмная", - "switch_to_light": "Переключиться на светлую тему", + "switch_to_light": "Переключиться на тему «Шерстяная бумага»", "switch_to_dark": "Переключиться на тёмную тему", "auto": "Следовать системе" }, diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json index 351251c..646b7c9 100644 --- a/src/i18n/locales/zh-CN.json +++ b/src/i18n/locales/zh-CN.json @@ -1449,10 +1449,10 @@ }, "theme": { "switch": "主题", - "light": "亮色", + "light": "羊毛纸", "white": "纯白", "dark": "暗色", - "switch_to_light": "切换到亮色模式", + "switch_to_light": "切换到羊毛纸模式", "switch_to_dark": "切换到暗色模式", "auto": "跟随系统" }, diff --git a/src/stores/useThemeStore.ts b/src/stores/useThemeStore.ts index 0f2976b..40e4768 100644 --- a/src/stores/useThemeStore.ts +++ b/src/stores/useThemeStore.ts @@ -9,6 +9,7 @@ import type { Theme } from '@/types'; import { STORAGE_KEY_THEME } from '@/utils/constants'; type ResolvedTheme = 'light' | 'dark'; +type AppliedTheme = ResolvedTheme | 'white'; interface ThemeState { theme: Theme; @@ -25,9 +26,17 @@ const getSystemTheme = (): ResolvedTheme => { return 'light'; }; -const resolveTheme = (theme: Theme): ResolvedTheme | 'white' => { +const resolveAutoTheme = (): AppliedTheme => { + return getSystemTheme() === 'dark' ? 'dark' : 'white'; +}; + +const normalizeResolvedTheme = (theme: AppliedTheme): ResolvedTheme => { + return theme === 'dark' ? 'dark' : 'light'; +}; + +const resolveTheme = (theme: Theme): AppliedTheme => { if (theme === 'auto') { - return getSystemTheme(); + return resolveAutoTheme(); } if (theme === 'white') { return 'white'; @@ -35,7 +44,7 @@ const resolveTheme = (theme: Theme): ResolvedTheme | 'white' => { return theme; }; -const applyTheme = (resolved: ResolvedTheme | 'white') => { +const applyTheme = (resolved: AppliedTheme) => { if (resolved === 'dark') { document.documentElement.setAttribute('data-theme', 'dark'); return; @@ -60,7 +69,7 @@ export const useThemeStore = create()( applyTheme(resolved); set({ theme, - resolvedTheme: resolved === 'white' ? 'light' : resolved, + resolvedTheme: normalizeResolvedTheme(resolved), }); }, @@ -87,9 +96,9 @@ export const useThemeStore = create()( const listener = () => { const { theme: currentTheme } = get(); if (currentTheme === 'auto') { - const resolved = getSystemTheme(); + const resolved = resolveAutoTheme(); applyTheme(resolved); - set({ resolvedTheme: resolved }); + set({ resolvedTheme: normalizeResolvedTheme(resolved) }); } };