diff options
Diffstat (limited to 'frontend/src/lib')
| -rw-r--r-- | frontend/src/lib/theme.ts | 28 | ||||
| -rw-r--r-- | frontend/src/lib/utils.ts | 6 |
2 files changed, 31 insertions, 3 deletions
diff --git a/frontend/src/lib/theme.ts b/frontend/src/lib/theme.ts new file mode 100644 index 0000000..ad949a4 --- /dev/null +++ b/frontend/src/lib/theme.ts @@ -0,0 +1,28 @@ +// 主题切换(round3):默认 mint;.theme-amber 类挂 <html> 切到 amber 变量组。 +// 两套 token 都是 app.css 里的 CSS 变量组,本模块只负责持久化与挂类。 + +export type BrandTheme = 'mint' | 'amber'; +const KEY = 'sl-brand-theme'; + +export function currentTheme(): BrandTheme { + if (typeof document === 'undefined' || typeof localStorage === 'undefined') return 'mint'; + const stored = localStorage.getItem(KEY); + return stored === 'amber' ? 'amber' : 'mint'; +} + +export function applyTheme(t: BrandTheme): void { + if (typeof document === 'undefined') return; + if (t === 'amber') document.documentElement.classList.add('theme-amber'); + else document.documentElement.classList.remove('theme-amber'); + if (typeof localStorage !== 'undefined') localStorage.setItem(KEY, t); +} + +export function toggleTheme(): BrandTheme { + const next: BrandTheme = currentTheme() === 'mint' ? 'amber' : 'mint'; + applyTheme(next); + return next; +} + +if (typeof document !== 'undefined') { + applyTheme(currentTheme()); +} diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts index 55b3a91..8048253 100644 --- a/frontend/src/lib/utils.ts +++ b/frontend/src/lib/utils.ts @@ -1,7 +1,7 @@ -import { clsx, type ClassValue } from "clsx"; -import { twMerge } from "tailwind-merge"; +import { clsx, type ClassValue } from 'clsx'; +import { twMerge } from 'tailwind-merge'; -export function cn(...inputs: ClassValue[]) { +export function cn(...inputs: ClassValue[]): string { return twMerge(clsx(inputs)); } |
