summaryrefslogtreecommitdiff
path: root/frontend/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/lib')
-rw-r--r--frontend/src/lib/theme.ts28
-rw-r--r--frontend/src/lib/utils.ts6
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));
}