Publish updated WeChat Radar

2026-09-10 02:58:29 +09:00 · 2026-05-26 09:10:04 +08:00
parent 8abb29e13e
commit de7ec99fed
44 changed files with 2900 additions and 746 deletions
@@ -0,0 +1,98 @@
+'use client';
+
+import { Moon, Sun } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+const STORAGE_KEY = 'wechat-radar-theme-v1';
+
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState<Theme>(() => {
+    if (typeof window === 'undefined') return 'light';
+    return localStorage.getItem(STORAGE_KEY) === 'dark' ? 'dark' : 'light';
+  });
+
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+
+  const toggle = () => {
+    const next = theme === 'dark' ? 'light' : 'dark';
+    setTheme(next);
+  };
+
+  const title = theme === 'dark' ? '切换到浅色主题' : '切换到深色主题';
+  const Icon = theme === 'dark' ? Sun : Moon;
+
+  return (
+    <button
+      type="button"
+      className="control-surface inline-flex h-8 w-8 items-center justify-center rounded-md text-[var(--text-2)] transition-colors hover:border-[var(--accent)] hover:text-[var(--accent)]"
+      onClick={toggle}
+      aria-label={title}
+      title={title}
+    >
+      <Icon size={15} />
+    </button>
+  );
+}
+
+function applyTheme(theme: Theme) {
+  document.documentElement.dataset.theme = theme;
+  document.body.dataset.theme = theme;
+  document.documentElement.style.colorScheme = theme;
+  for (const [key, value] of Object.entries(theme === 'dark' ? DARK_VARS : LIGHT_VARS)) {
+    document.documentElement.style.setProperty(key, value);
+  }
+  localStorage.setItem(STORAGE_KEY, theme);
+}
+
+const LIGHT_VARS = {
+  '--bg': '#f1efea',
+  '--bg-2': '#e8e5de',
+  '--surface': '#faf9f6',
+  '--surface-2': '#f1eee8',
+  '--surface-3': '#e5dfd6',
+  '--border': '#d8d2c8',
+  '--border-soft': 'rgba(46, 42, 34, 0.12)',
+  '--text': '#171814',
+  '--text-2': '#5e6459',
+  '--text-3': '#8b8b80',
+  '--accent': '#28745b',
+  '--accent-2': '#3a9d71',
+  '--accent-soft': 'rgba(40, 116, 91, 0.12)',
+  '--warn': '#9c6728',
+  '--warn-soft': 'rgba(156, 103, 40, 0.12)',
+  '--danger': '#b34242',
+  '--danger-soft': 'rgba(179, 66, 66, 0.12)',
+  '--shadow': '0 18px 55px rgba(55, 47, 34, 0.09)',
+  '--chrome-bg': 'rgba(250, 249, 246, 0.86)',
+  '--sidebar-bg': 'rgba(248, 246, 239, 0.92)',
+  '--control-bg': 'rgba(250, 249, 246, 0.78)',
+  '--input-scheme': 'light',
+};
+
+const DARK_VARS = {
+  '--bg': '#080b0a',
+  '--bg-2': '#0d1110',
+  '--surface': '#111511',
+  '--surface-2': '#171c17',
+  '--surface-3': '#20261f',
+  '--border': '#293029',
+  '--border-soft': 'rgba(175, 190, 167, 0.13)',
+  '--text': '#eef2eb',
+  '--text-2': '#b6bdb1',
+  '--text-3': '#80887d',
+  '--accent': '#7dd3a8',
+  '--accent-2': '#46b978',
+  '--accent-soft': 'rgba(125, 211, 168, 0.13)',
+  '--warn': '#d5a253',
+  '--warn-soft': 'rgba(213, 162, 83, 0.14)',
+  '--danger': '#df6b6b',
+  '--danger-soft': 'rgba(223, 107, 107, 0.14)',
+  '--shadow': '0 18px 48px rgba(0, 0, 0, 0.34)',
+  '--chrome-bg': 'rgba(8, 11, 10, 0.84)',
+  '--sidebar-bg': 'rgba(8, 11, 10, 0.9)',
+  '--control-bg': 'rgba(17, 22, 18, 0.86)',
+  '--input-scheme': 'dark',
+};