feat: add comic/doodle theme style (#603)

* feat: add comic/doodle theme style with local font

Add a new "comic" theme style that applies hand-drawn aesthetics (Comic Neue
font, bold borders, heavy font weight) while keeping the original light/dark
background colors. Font files are bundled locally to avoid Google Fonts CDN
dependency.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* fix: update DisplaySettings to use renamed theme API and update brand assets

Rename mode/setMode/ThemeMode to brightness/setBrightness/BrightnessMode
to match the refactored useTheme composable. Update favicon and logo.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

packages/client/src/styles/global.scss

@@ -1,6 +1,22 @@
 @use 'variables' as *;
 @use 'code-block';
 
+@font-face {
+  font-family: 'Comic Neue';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/ComicNeue-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Comic Neue';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/ComicNeue-Bold.ttf') format('truetype');
+}
+
 *,
 *::before,
 *::after {
@@ -9,6 +25,13 @@
   box-sizing: border-box;
 }
 
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+}
+
 :root {
   --vh: 1vh;
 }
@@ -45,6 +68,21 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+html.comic body {
+  font-weight: var(--comic-font-weight, 700);
+}
+
+html.comic button,
+html.comic input,
+html.comic select,
+html.comic textarea,
+html.comic a,
+html.comic span,
+html.comic div,
+html.comic label {
+  font-weight: var(--comic-font-weight, 700);
+}
+
 code, pre, .mono {
   font-family: $font-code;
 }

packages/client/src/styles/theme.ts

@@ -146,6 +146,15 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
   },
 }
 
-export function getThemeOverrides(isDark: boolean): GlobalThemeOverrides {
-  return isDark ? darkThemeOverrides : lightThemeOverrides
+export function getThemeOverrides(isDark: boolean, isComic?: boolean): GlobalThemeOverrides {
+  const base = isDark ? darkThemeOverrides : lightThemeOverrides
+  if (!isComic) return base
+  const comicFont = "'Comic Neue', 'Comic Sans MS', cursive, sans-serif"
+  return {
+    ...base,
+    common: {
+      ...base.common!,
+      fontFamily: comicFont,
+    },
+  }
 }

packages/client/src/styles/variables.scss

@@ -1,6 +1,6 @@
 // 黑白水墨 — Pure Ink
 // 纯黑白灰，无彩色
-// 支持 light / dark 双主题
+// 支持 light / dark / comic 三主题
 
 // ─── CSS Custom Properties ─────────────────────────────────────
 
@@ -108,6 +108,28 @@
   --accent-info-rgb: 107, 163, 214;
 }
 
+.comic {
+  // Borders — bold comic outlines
+  --border-color: #1a1a1a;
+  --border-light: #555555;
+  --msg-system-border: #1a1a1a;
+
+  // Comic-specific
+  --font-ui: 'Comic Neue', 'Comic Sans MS', cursive, sans-serif;
+  --comic-border-width: 2.5px;
+  --comic-shadow: 3px 3px 0px rgba(0, 0, 0, 0.15);
+  --comic-font-weight: 700;
+}
+
+.dark.comic {
+  // Borders — brighter outlines on dark
+  --border-color: #666666;
+  --border-light: #555555;
+  --msg-system-border: #888888;
+
+  --comic-shadow: 3px 3px 0px rgba(255, 255, 255, 0.08);
+}
+
 // ─── SCSS Variables (delegate to CSS custom properties) ────────
 
 // Backgrounds
@@ -147,7 +169,7 @@ $msg-system-border: var(--msg-system-border);
 $code-bg: var(--code-bg);
 
 // Typography
-$font-ui: 'Inter', system-ui, -apple-system, sans-serif;
+$font-ui: var(--font-ui, 'Inter', system-ui, -apple-system, sans-serif);
 $font-code: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
 
 // Layout