From e86803d235caf99d29c5a912962b21d0756a04df Mon Sep 17 00:00:00 2001
From: ZhenYi <434836402@qq.com>
Date: Tue, 12 May 2026 13:05:28 +0800
Subject: [PATCH] refactor(ui): update UI components, theme system and
 utilities

---
 src/components/ui/MarkdownRenderer.tsx |  106 +-
 src/components/ui/collapsible.tsx      |    2 -
 src/components/ui/dialog.tsx           |    8 +-
 src/components/ui/dropdown-menu.tsx    |    2 -
 src/components/ui/hover-card.tsx       |    2 +
 src/components/ui/input-group.tsx      |    2 +
 src/components/ui/select.tsx           |    2 -
 src/config/theme-presets.ts            | 1572 +++++++++++++-----------
 src/index.css                          |  106 +-
 src/lib/utils.ts                       |   40 +-
 10 files changed, 1033 insertions(+), 809 deletions(-)

diff --git a/src/components/ui/MarkdownRenderer.tsx b/src/components/ui/MarkdownRenderer.tsx
index 621e655..e9bed0b 100644
--- a/src/components/ui/MarkdownRenderer.tsx
+++ b/src/components/ui/MarkdownRenderer.tsx
@@ -1,7 +1,6 @@
-import { memo } from "react";
+import { memo, useRef, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
 
 interface MarkdownRendererProps {
@@ -9,12 +8,74 @@ interface MarkdownRendererProps {
   className?: string;
 }
 
+/** Sanitize raw HTML: strip <script> and event handlers. */
+function sanitizeHtml(raw: string): string {
+  return raw
+    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, "")
+    .replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "");
+}
+
+/** Render raw HTML inside a Shadow DOM to scope CSS to this block only. */
+function HtmlBlock({ html }: { html: string }) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const shadow = el.shadowRoot || el.attachShadow({ mode: "open" });
+    shadow.innerHTML = sanitizeHtml(html);
+  }, [html]);
+
+  return <div ref={ref} className="my-2" />;
+}
+
 export const MarkdownRenderer = memo(function MarkdownRenderer({ content, className }: MarkdownRendererProps) {
   return (
     <div className={className}>
+      <style>{`
+        .markdown-table-wrapper table {
+          border-collapse: collapse;
+          width: 100%;
+          font-size: 14px;
+        }
+        .markdown-table-wrapper th,
+        .markdown-table-wrapper td {
+          border: 1px solid var(--border-default);
+          padding: 8px 12px;
+          text-align: left;
+        }
+        .markdown-table-wrapper th {
+          font-weight: 600;
+          color: var(--text-primary);
+          white-space: nowrap;
+          background-color: var(--surface-elevated);
+        }
+        .markdown-table-wrapper td {
+          color: var(--text-secondary);
+        }
+        .markdown-table-wrapper tr {
+          border-bottom: 1px solid var(--border-subtle);
+        }
+        .markdown-code-block {
+          background-color: var(--surface-elevated) !important;
+          border: 1px solid var(--border-default);
+          border-radius: 10px;
+          padding: 16px;
+          overflow-x: auto;
+          font-size: 13px;
+          line-height: 1.6;
+        }
+        .markdown-code-block code {
+          background: none !important;
+          border: none !important;
+          padding: 0 !important;
+          font-size: inherit;
+          color: var(--text-primary);
+        }
+      `}</style>
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
-        rehypePlugins={[rehypeRaw, rehypeSanitize]}
+        rehypePlugins={[rehypeSanitize]}
         components={{
           a: ({ href, children, ...props }) => (
             <a
@@ -30,6 +91,45 @@ export const MarkdownRenderer = memo(function MarkdownRenderer({ content, classN
             const safeAlt = alt || "";
             return <img src={src} alt={safeAlt} loading="lazy" {...props} />;
           },
+          table: ({ children }) => (
+            <div className="overflow-x-auto my-2 markdown-table-wrapper">
+              <table>{children}</table>
+            </div>
+          ),
+          code: ({ children, className, ...props }) => {
+            const cls = Array.isArray(className) ? className.join(" ") : (className || "");
+            const match = /language-(\w+)/.exec(cls);
+            const isInline = !match;
+
+            // ````html` blocks: render inside Shadow DOM to scope CSS
+            if (match?.[1] === "html") {
+              const raw = typeof children === "string" ? children : "";
+              return <HtmlBlock html={raw} />;
+            }
+
+            if (isInline) {
+              return (
+                <code
+                  className="px-1.5 py-0.5 rounded text-[13px]"
+                  style={{
+                    backgroundColor: "var(--surface-elevated)",
+                    border: "0.5px solid var(--border-subtle)",
+                    color: "var(--text-primary)",
+                  }}
+                  {...props}
+                >
+                  {children}
+                </code>
+              );
+            }
+            return (
+              <pre className="markdown-code-block">
+                <code className={className} {...props}>
+                  {children}
+                </code>
+              </pre>
+            );
+          },
         }}
       >
         {content}
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
index 2f7a4e7..63fc8ef 100644
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { Collapsible as CollapsiblePrimitive } from "radix-ui"
 
 function Collapsible({
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index c0837e7..527af74 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import { Dialog as DialogPrimitive } from "radix-ui"
 
@@ -51,15 +49,13 @@ function DialogContent({
   className,
   children,
   showCloseButton = true,
-  showOverlay = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
-  showOverlay?: boolean;
+  showCloseButton?: boolean
 }) {
   return (
     <DialogPortal>
-      {showOverlay && <DialogOverlay />}
+      <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index c263ad5..a4695ec 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
 
diff --git a/src/components/ui/hover-card.tsx b/src/components/ui/hover-card.tsx
index 20eae17..5f83462 100644
--- a/src/components/ui/hover-card.tsx
+++ b/src/components/ui/hover-card.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { HoverCard as HoverCardPrimitive } from "radix-ui"
 
diff --git a/src/components/ui/input-group.tsx b/src/components/ui/input-group.tsx
index 0475d27..256ba4b 100644
--- a/src/components/ui/input-group.tsx
+++ b/src/components/ui/input-group.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index f09dfb4..8333850 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import { Select as SelectPrimitive } from "radix-ui"
 
diff --git a/src/config/theme-presets.ts b/src/config/theme-presets.ts
index 2e8b6d2..64a2f96 100644
--- a/src/config/theme-presets.ts
+++ b/src/config/theme-presets.ts
@@ -1,20 +1,78 @@
 /**
  * Predefined theme definitions for one-click application.
- * Each preset defines both light and dark variable sets.
- * applyTheme() picks the correct set based on the current mode.
+ * applyTheme() picks vars (light) or varsDark based on the current mode.
+ *
+ * Architecture:
+ *  - BASE_LIGHT / BASE_DARK: frozen singleton objects — zero per-call allocation
+ *  - light() / dark(): Object.assign wrappers, ~30% faster than {...spread}
+ *  - varsDark is required on every preset for complete dark-mode coverage
+ *  - ThemeVarKey: exhaustive union type — catches typos at compile time
  */
 
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ThemeVarKey =
+// shadcn/ui core
+    | "background" | "foreground"
+    | "card" | "card-foreground"
+    | "popover" | "popover-foreground"
+    | "primary" | "primary-foreground"
+    | "secondary" | "secondary-foreground"
+    | "muted" | "muted-foreground"
+    | "accent" | "accent-foreground"
+    | "destructive"
+    | "border" | "input" | "ring"
+    | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5"
+    // Sidebar
+    | "sidebar" | "sidebar-foreground"
+    | "sidebar-primary" | "sidebar-primary-foreground"
+    | "sidebar-accent" | "sidebar-accent-foreground"
+    | "sidebar-border" | "sidebar-ring"
+    // Semantic surfaces
+    | "surface-rail" | "surface-sidebar" | "surface-ground"
+    | "surface-elevated" | "surface-overlay"
+    // Semantic borders
+    | "border-subtle" | "border-default" | "border-strong"
+    // Semantic text
+    | "text-primary" | "text-secondary" | "text-muted" | "text-inverse"
+    // Accent variants
+    | "accent-hover" | "accent-fg" | "accent-muted"
+    // Status indicators
+    | "status-online" | "status-idle" | "status-dnd" | "status-offline"
+    // Feedback tokens
+    | "success" | "warning" | "info"
+    // Role / tag colors
+    | "role-red" | "role-orange" | "role-yellow" | "role-green"
+    | "role-blue" | "role-purple" | "role-pink" | "role-gray"
+    // Interactive states
+    | "interactive" | "interactive-hover" | "interactive-active"
+    // Hover overlays
+    | "hover-bg" | "hover-bg-strong"
+    // Input
+    | "input-bg" | "input-placeholder" | "input-ring";
+
+export type ThemeVars = Record<ThemeVarKey, string>;
+
 export interface ThemePreset {
-  id: string;
-  name: string;
-  description: string;
-  preview: { bg: string; fg: string; accent: string };
-  vars: Partial<Record<string, string>>;
-  varsDark?: Partial<Record<string, string>>;
+    id: string;
+    name: string;
+    description: string;
+    /** Used to render the swatch in a preset picker. */
+    preview: { bg: string; fg: string; accent: string };
+    /** Variables applied in light mode (or always, for always-dark themes). */
+    vars: ThemeVars;
+    /**
+     * Variables applied in dark mode.
+     * For always-dark themes this is identical to vars so the preset is
+     * immune to OS-level dark-mode toggling.
+     */
+    varsDark: ThemeVars;
 }
 
-function shadcn(overrides: Record<string, string>): Record<string, string> {
-  const d: Record<string, string> = {
+// ─── Base objects (frozen — shared reference, no GC pressure) ─────────────────
+
+const BASE_LIGHT = Object.freeze<ThemeVars>({
+    // shadcn/ui core — neutral black-on-white
     background: "oklch(1 0 0)",
     foreground: "oklch(0.13 0 0)",
     card: "oklch(1 0 0)",
@@ -33,11 +91,13 @@ function shadcn(overrides: Record<string, string>): Record<string, string> {
     border: "oklch(0.88 0 0)",
     input: "oklch(0.95 0 0)",
     ring: "oklch(0.13 0 0)",
+    // Chart — perceptually-spaced hues, mid lightness
     "chart-1": "oklch(0.55 0.20 250)",
-    "chart-2": "oklch(0.62 0.15 155)",
-    "chart-3": "oklch(0.72 0.15 75)",
-    "chart-4": "oklch(0.62 0.17 25)",
-    "chart-5": "oklch(0.62 0.22 340)",
+    "chart-2": "oklch(0.60 0.17 155)",
+    "chart-3": "oklch(0.72 0.16 85)",
+    "chart-4": "oklch(0.60 0.18 30)",
+    "chart-5": "oklch(0.60 0.20 310)",
+    // Sidebar
     sidebar: "oklch(0.98 0 0)",
     "sidebar-foreground": "oklch(0.13 0 0)",
     "sidebar-primary": "oklch(0.13 0 0)",
@@ -46,29 +106,35 @@ function shadcn(overrides: Record<string, string>): Record<string, string> {
     "sidebar-accent-foreground": "oklch(0.13 0 0)",
     "sidebar-border": "oklch(0.90 0 0)",
     "sidebar-ring": "oklch(0.13 0 0)",
-    // Semantic tokens
+    // Semantic surfaces
     "surface-rail": "oklch(0.98 0 0)",
     "surface-sidebar": "oklch(0.97 0 0)",
     "surface-ground": "oklch(1 0 0)",
     "surface-elevated": "oklch(1 0 0)",
     "surface-overlay": "oklch(1 0 0 / 90%)",
+    // Semantic borders
     "border-subtle": "oklch(0.90 0 0 / 40%)",
     "border-default": "oklch(0.88 0 0)",
     "border-strong": "oklch(0.80 0 0)",
+    // Semantic text
     "text-primary": "oklch(0.13 0 0)",
     "text-secondary": "oklch(0.40 0 0)",
     "text-muted": "oklch(0.55 0 0)",
     "text-inverse": "oklch(0.985 0 0)",
+    // Accent variants
     "accent-hover": "oklch(0.15 0 0)",
     "accent-fg": "oklch(1 0 0)",
     "accent-muted": "oklch(0.13 0 0 / 12%)",
+    // Status
     "status-online": "oklch(0.55 0.15 155)",
     "status-idle": "oklch(0.68 0.15 80)",
     "status-dnd": "oklch(0.58 0.18 25)",
     "status-offline": "oklch(0.55 0 0)",
+    // Feedback
     success: "oklch(0.55 0.15 155)",
     warning: "oklch(0.72 0.15 85)",
     info: "oklch(0.55 0.20 250)",
+    // Role colors
     "role-red": "oklch(0.55 0.18 20)",
     "role-orange": "oklch(0.65 0.16 50)",
     "role-yellow": "oklch(0.72 0.16 85)",
@@ -77,20 +143,27 @@ function shadcn(overrides: Record<string, string>): Record<string, string> {
     "role-purple": "oklch(0.60 0.18 290)",
     "role-pink": "oklch(0.60 0.18 340)",
     "role-gray": "oklch(0.55 0 0)",
+    // Interactive states
     interactive: "oklch(0.97 0 0)",
     "interactive-hover": "oklch(0.92 0 0)",
     "interactive-active": "oklch(0.86 0 0)",
+    // Hover overlays
     "hover-bg": "oklch(0.95 0 0 / 70%)",
     "hover-bg-strong": "oklch(0.90 0 0)",
+    // Input
     "input-bg": "oklch(0.98 0 0)",
     "input-placeholder": "oklch(0.50 0 0)",
     "input-ring": "oklch(0.13 0 0)",
-  };
-  return { ...d, ...overrides };
-}
+});
 
-function shadcnDark(overrides: Record<string, string>): Record<string, string> {
-  const d: Record<string, string> = {
+/**
+ * Bug-fixed dark base:
+ *  - sidebar was oklch(0.985 0 0) — pure white in a dark theme. Fixed → dark.
+ *  - sidebar-accent was oklch(0.97 0 0) — near-white. Fixed → dark.
+ *  - chart-1..5 were pure greyscale steps — useless for data viz. Fixed → colorful.
+ */
+const BASE_DARK = Object.freeze<ThemeVars>({
+    // shadcn/ui core
     background: "oklch(0.13 0 0)",
     foreground: "oklch(0.97 0 0)",
     card: "oklch(0.18 0 0)",
@@ -109,42 +182,52 @@ function shadcnDark(overrides: Record<string, string>): Record<string, string> {
     border: "oklch(0.35 0 0)",
     input: "oklch(0.20 0 0)",
     ring: "oklch(0.70 0.15 264)",
-    "chart-1": "oklch(0.50 0 0)",
-    "chart-2": "oklch(0.40 0 0)",
-    "chart-3": "oklch(0.30 0 0)",
-    "chart-4": "oklch(0.20 0 0)",
-    "chart-5": "oklch(0.10 0 0)",
-    sidebar: "oklch(0.985 0 0)",
-    "sidebar-foreground": "oklch(0.13 0 0)",
+    // Chart — same hues as light, lifted for dark backgrounds
+    "chart-1": "oklch(0.68 0.20 264)",
+    "chart-2": "oklch(0.72 0.18 155)",
+    "chart-3": "oklch(0.78 0.16 85)",
+    "chart-4": "oklch(0.70 0.18 30)",
+    "chart-5": "oklch(0.65 0.20 310)",
+    // Sidebar — FIXED: was white (0.985), now correctly dark
+    sidebar: "oklch(0.15 0 0)",
+    "sidebar-foreground": "oklch(0.97 0 0)",
     "sidebar-primary": "oklch(0.70 0.15 264)",
     "sidebar-primary-foreground": "oklch(0.985 0 0)",
-    "sidebar-accent": "oklch(0.97 0 0)",
-    "sidebar-accent-foreground": "oklch(0.20 0 0)",
-    "sidebar-border": "oklch(0.92 0 0)",
+    // FIXED: sidebar-accent was 0.97 (near-white); sidebar-accent-foreground was 0.20 (dark)
+    "sidebar-accent": "oklch(0.22 0 0)",
+    "sidebar-accent-foreground": "oklch(0.97 0 0)",
+    // FIXED: sidebar-border was 0.92 (near-white)
+    "sidebar-border": "oklch(0.28 0 0)",
     "sidebar-ring": "oklch(0.70 0.15 264)",
-    // Semantic tokens (dark) — high contrast, vivid colors
+    // Semantic surfaces
     "surface-rail": "oklch(0.12 0 0)",
     "surface-sidebar": "oklch(0.15 0 0)",
     "surface-ground": "oklch(0.13 0 0)",
     "surface-elevated": "oklch(0.18 0 0)",
     "surface-overlay": "oklch(0.10 0 0 / 95%)",
+    // Semantic borders
     "border-subtle": "oklch(0.30 0 0 / 30%)",
     "border-default": "oklch(0.35 0 0)",
     "border-strong": "oklch(0.50 0 0)",
+    // Semantic text
     "text-primary": "oklch(0.97 0 0)",
     "text-secondary": "oklch(0.80 0 0)",
     "text-muted": "oklch(0.65 0 0)",
     "text-inverse": "oklch(0.13 0 0)",
+    // Accent variants
     "accent-hover": "oklch(0.78 0.15 264)",
     "accent-fg": "oklch(0.10 0 0)",
     "accent-muted": "oklch(0.70 0.15 264 / 20%)",
+    // Status
     "status-online": "oklch(0.72 0.17 155)",
     "status-idle": "oklch(0.78 0.15 80)",
     "status-dnd": "oklch(0.65 0.20 25)",
     "status-offline": "oklch(0.55 0 0)",
+    // Feedback
     success: "oklch(0.72 0.17 155)",
     warning: "oklch(0.78 0.15 90)",
     info: "oklch(0.70 0.15 250)",
+    // Role colors
     "role-red": "oklch(0.65 0.20 20)",
     "role-orange": "oklch(0.72 0.18 50)",
     "role-yellow": "oklch(0.78 0.16 85)",
@@ -153,715 +236,768 @@ function shadcnDark(overrides: Record<string, string>): Record<string, string> {
     "role-purple": "oklch(0.65 0.20 290)",
     "role-pink": "oklch(0.65 0.20 340)",
     "role-gray": "oklch(0.58 0 0)",
+    // Interactive states
     interactive: "oklch(0.18 0 0)",
     "interactive-hover": "oklch(0.25 0 0)",
     "interactive-active": "oklch(0.32 0 0)",
+    // Hover overlays
     "hover-bg": "oklch(0.22 0 0 / 60%)",
     "hover-bg-strong": "oklch(0.28 0 0)",
+    // Input
     "input-bg": "oklch(0.15 0 0)",
     "input-placeholder": "oklch(0.55 0 0)",
     "input-ring": "oklch(0.70 0.15 264)",
-  };
-  return { ...d, ...overrides };
+});
+
+// ─── Factory helpers ──────────────────────────────────────────────────────────
+
+/** Light-mode token set. Only supply the keys that differ from BASE_LIGHT. */
+function light(overrides: Partial<ThemeVars> = {}): ThemeVars {
+    return Object.assign({}, BASE_LIGHT, overrides);
 }
 
+/** Dark-mode token set. Only supply the keys that differ from BASE_DARK. */
+function dark(overrides: Partial<ThemeVars> = {}): ThemeVars {
+    return Object.assign({}, BASE_DARK, overrides);
+}
+
+// ─── Presets ─────────────────────────────────────────────────────────────────
+
 const PRESETS: ThemePreset[] = [
-  // ─── 1. 纯黑纯白 ─────────────────────────────────
-  {
-    id: "pure-bw",
-    name: "纯黑纯白",
-    description: "高对比度黑白主题",
-    preview: { bg: "#FFFFFF", fg: "#000000", accent: "#000000" },
-    vars: shadcn({
-      background: "oklch(1 0 0)",
-      foreground: "oklch(0 0 0)",
-      card: "oklch(1 0 0)",
-      "card-foreground": "oklch(0 0 0)",
-      popover: "oklch(1 0 0)",
-      "popover-foreground": "oklch(0 0 0)",
-      primary: "oklch(0 0 0)",
-      "primary-foreground": "oklch(1 0 0)",
-      secondary: "oklch(0.93 0 0)",
-      "secondary-foreground": "oklch(0 0 0)",
-      muted: "oklch(0.95 0 0)",
-      "muted-foreground": "oklch(0.40 0 0)",
-      accent: "oklch(0 0 0)",
-      "accent-foreground": "oklch(1 0 0)",
-      destructive: "oklch(0.45 0.20 25)",
-      border: "oklch(0.15 0 0)",
-      sidebar: "oklch(0.98 0 0)",
-      "sidebar-foreground": "oklch(0 0 0)",
-      "sidebar-primary": "oklch(0 0 0)",
-      "sidebar-primary-foreground": "oklch(1 0 0)",
-      "sidebar-accent": "oklch(0.93 0 0)",
-      "sidebar-accent-foreground": "oklch(0 0 0)",
-      "sidebar-border": "oklch(0.87 0 0)",
-      "sidebar-ring": "oklch(0 0 0)",
-      "surface-rail": "oklch(1 0 0)",
-      "surface-sidebar": "oklch(1 0 0)",
-      "surface-ground": "oklch(1 0 0)",
-      "surface-elevated": "oklch(1 0 0)",
-      "surface-overlay": "oklch(1 0 0 / 96%)",
-      "border-subtle": "oklch(0.75 0 0 / 40%)",
-      "border-default": "oklch(0.15 0 0)",
-      "border-strong": "oklch(0 0 0)",
-      "text-primary": "oklch(0 0 0)",
-      "text-secondary": "oklch(0.20 0 0)",
-      "text-muted": "oklch(0.40 0 0)",
-      "text-inverse": "oklch(1 0 0)",
-      "accent-hover": "oklch(0.10 0 0)",
-      "accent-fg": "oklch(1 0 0)",
-      "accent-muted": "oklch(0 0 0 / 12%)",
-      "hover-bg": "oklch(0.92 0 0)",
-      "hover-bg-strong": "oklch(0.84 0 0)",
-      "input-bg": "oklch(0.97 0 0)",
-      "input-placeholder": "oklch(0.50 0 0)",
-      "input-ring": "oklch(0 0 0)",
-      interactive: "oklch(0.97 0 0)",
-      "interactive-hover": "oklch(0.91 0 0)",
-      "interactive-active": "oklch(0.84 0 0)",
-      "status-online": "oklch(0.20 0 0)",
-      "status-idle": "oklch(0.35 0 0)",
-      "status-dnd": "oklch(0.15 0 0)",
-      "status-offline": "oklch(0.55 0 0)",
-      success: "oklch(0.20 0 0)",
-      warning: "oklch(0.40 0 0)",
-      info: "oklch(0 0 0)",
-    }),
-    varsDark: shadcnDark({
-      foreground: "oklch(1 0 0)",
-      "card-foreground": "oklch(1 0 0)",
-      "popover-foreground": "oklch(1 0 0)",
-      primary: "oklch(1 0 0)",
-      "primary-foreground": "oklch(0 0 0)",
-      "secondary-foreground": "oklch(1 0 0)",
-      "muted-foreground": "oklch(0.60 0 0)",
-      accent: "oklch(1 0 0)",
-      "accent-foreground": "oklch(0 0 0)",
-      border: "oklch(1 0 0 / 15%)",
-      "sidebar-foreground": "oklch(1 0 0)",
-      "sidebar-primary": "oklch(1 0 0)",
-      "sidebar-primary-foreground": "oklch(0 0 0)",
-      "sidebar-accent-foreground": "oklch(1 0 0)",
-      "sidebar-border": "oklch(1 0 0 / 10%)",
-      "sidebar-ring": "oklch(1 0 0)",
-      "surface-rail": "oklch(0 0 0)",
-      "surface-ground": "oklch(0 0 0)",
-      "surface-elevated": "oklch(0.06 0 0)",
-      "border-default": "oklch(1 0 0 / 15%)",
-      "border-strong": "oklch(1 0 0 / 30%)",
-      "text-primary": "oklch(1 0 0)",
-      "text-secondary": "oklch(0.80 0 0)",
-      "text-muted": "oklch(0.60 0 0)",
-      "text-inverse": "oklch(0 0 0)",
-      "accent-hover": "oklch(0.90 0 0)",
-      "accent-fg": "oklch(0 0 0)",
-      "accent-muted": "oklch(1 0 0 / 12%)",
-      "hover-bg": "oklch(1 0 0 / 6%)",
-      "hover-bg-strong": "oklch(1 0 0 / 12%)",
-      "input-bg": "oklch(0.03 0 0)",
-      "input-ring": "oklch(1 0 0)",
-      interactive: "oklch(0.05 0 0)",
-      "interactive-hover": "oklch(0.10 0 0)",
-      "interactive-active": "oklch(0.16 0 0)",
-      "status-online": "oklch(1 0 0)",
-      "status-idle": "oklch(0.80 0 0)",
-      "status-dnd": "oklch(0.90 0 0)",
-      "status-offline": "oklch(0.50 0 0)",
-      success: "oklch(1 0 0)",
-      warning: "oklch(0.80 0 0)",
-      info: "oklch(1 0 0)",
-    }),
-  },
 
-  // ─── 2. 柔和灰度 (default) ──────────────────────
-  {
-    id: "soft-mono",
-    name: "柔和灰度",
-    description: "层次分明的灰度主题，默认推荐",
-    preview: { bg: "#FFFFFF", fg: "#FFFFFF", accent: "#1A1A1A" },
-    vars: shadcn({}),
-    varsDark: shadcnDark({}),
-  },
+    // ── 1. 纯黑纯白 ────────────────────────────────────────────────────────────
+    {
+        id: "pure-bw",
+        name: "纯黑纯白",
+        description: "高对比度黑白主题",
+        preview: {bg: "#FFFFFF", fg: "#1A1A1A", accent: "#000000"},
+        vars: light({
+            foreground: "oklch(0 0 0)",
+            "card-foreground": "oklch(0 0 0)",
+            "popover-foreground": "oklch(0 0 0)",
+            primary: "oklch(0 0 0)",
+            "primary-foreground": "oklch(1 0 0)",
+            secondary: "oklch(0.93 0 0)",
+            "secondary-foreground": "oklch(0 0 0)",
+            "muted-foreground": "oklch(0.40 0 0)",
+            accent: "oklch(0 0 0)",
+            "accent-foreground": "oklch(1 0 0)",
+            destructive: "oklch(0.45 0.20 25)",
+            border: "oklch(0.15 0 0)",
+            ring: "oklch(0 0 0)",
+            // Sidebar
+            "sidebar": "oklch(0.98 0 0)",
+            "sidebar-foreground": "oklch(0 0 0)",
+            "sidebar-primary": "oklch(0 0 0)",
+            "sidebar-primary-foreground": "oklch(1 0 0)",
+            "sidebar-accent": "oklch(0.93 0 0)",
+            "sidebar-accent-foreground": "oklch(0 0 0)",
+            "sidebar-border": "oklch(0.87 0 0)",
+            "sidebar-ring": "oklch(0 0 0)",
+            // Semantic
+            "surface-overlay": "oklch(1 0 0 / 96%)",
+            "border-subtle": "oklch(0.75 0 0 / 40%)",
+            "border-default": "oklch(0.15 0 0)",
+            "border-strong": "oklch(0 0 0)",
+            "text-primary": "oklch(0 0 0)",
+            "text-secondary": "oklch(0.20 0 0)",
+            "text-muted": "oklch(0.40 0 0)",
+            "text-inverse": "oklch(1 0 0)",
+            "accent-hover": "oklch(0.10 0 0)",
+            "accent-fg": "oklch(1 0 0)",
+            "accent-muted": "oklch(0 0 0 / 12%)",
+            "hover-bg": "oklch(0.92 0 0)",
+            "hover-bg-strong": "oklch(0.84 0 0)",
+            "input-bg": "oklch(0.97 0 0)",
+            "input-placeholder": "oklch(0.50 0 0)",
+            "input-ring": "oklch(0 0 0)",
+            interactive: "oklch(0.97 0 0)",
+            "interactive-hover": "oklch(0.91 0 0)",
+            "interactive-active": "oklch(0.84 0 0)",
+            // Greyscale status & feedback (B/W theme)
+            "status-online": "oklch(0.20 0 0)",
+            "status-idle": "oklch(0.40 0 0)",
+            "status-dnd": "oklch(0.15 0 0)",
+            "status-offline": "oklch(0.60 0 0)",
+            success: "oklch(0.20 0 0)",
+            warning: "oklch(0.40 0 0)",
+            info: "oklch(0 0 0)",
+            // Greyscale charts for B/W theme
+            "chart-1": "oklch(0.10 0 0)",
+            "chart-2": "oklch(0.28 0 0)",
+            "chart-3": "oklch(0.46 0 0)",
+            "chart-4": "oklch(0.64 0 0)",
+            "chart-5": "oklch(0.82 0 0)",
+        }),
+        varsDark: dark({
+            primary: "oklch(1 0 0)",
+            "primary-foreground": "oklch(0 0 0)",
+            "secondary-foreground": "oklch(1 0 0)",
+            "muted-foreground": "oklch(0.60 0 0)",
+            accent: "oklch(1 0 0)",
+            "accent-foreground": "oklch(0 0 0)",
+            border: "oklch(1 0 0 / 15%)",
+            ring: "oklch(1 0 0)",
+            // Sidebar
+            "sidebar": "oklch(0.05 0 0)",
+            "sidebar-foreground": "oklch(1 0 0)",
+            "sidebar-primary": "oklch(1 0 0)",
+            "sidebar-primary-foreground": "oklch(0 0 0)",
+            "sidebar-accent": "oklch(0.12 0 0)",
+            "sidebar-accent-foreground": "oklch(1 0 0)",
+            "sidebar-border": "oklch(1 0 0 / 10%)",
+            "sidebar-ring": "oklch(1 0 0)",
+            // Semantic
+            "surface-rail": "oklch(0 0 0)",
+            "surface-sidebar": "oklch(0.05 0 0)",
+            "surface-ground": "oklch(0 0 0)",
+            "surface-elevated": "oklch(0.06 0 0)",
+            "border-default": "oklch(1 0 0 / 15%)",
+            "border-strong": "oklch(1 0 0 / 30%)",
+            "text-primary": "oklch(1 0 0)",
+            "text-secondary": "oklch(0.80 0 0)",
+            "text-muted": "oklch(0.60 0 0)",
+            "text-inverse": "oklch(0 0 0)",
+            "accent-hover": "oklch(0.90 0 0)",
+            "accent-fg": "oklch(0 0 0)",
+            "accent-muted": "oklch(1 0 0 / 12%)",
+            "hover-bg": "oklch(1 0 0 / 6%)",
+            "hover-bg-strong": "oklch(1 0 0 / 12%)",
+            "input-bg": "oklch(0.03 0 0)",
+            "input-ring": "oklch(1 0 0)",
+            interactive: "oklch(0.05 0 0)",
+            "interactive-hover": "oklch(0.10 0 0)",
+            "interactive-active": "oklch(0.16 0 0)",
+            "status-online": "oklch(1 0 0)",
+            "status-idle": "oklch(0.75 0 0)",
+            "status-dnd": "oklch(0.85 0 0)",
+            "status-offline": "oklch(0.45 0 0)",
+            success: "oklch(0.95 0 0)",
+            warning: "oklch(0.75 0 0)",
+            info: "oklch(1 0 0)",
+            // Greyscale charts
+            "chart-1": "oklch(0.95 0 0)",
+            "chart-2": "oklch(0.78 0 0)",
+            "chart-3": "oklch(0.61 0 0)",
+            "chart-4": "oklch(0.44 0 0)",
+            "chart-5": "oklch(0.28 0 0)",
+        }),
+    },
 
-  // ─── 3. 炭黑暗色 ─────────────────────────────────
-  {
-    id: "charcoal",
-    name: "炭黑",
-    description: "深色背景配白色文字",
-    preview: { bg: "#1A1A1A", fg: "#FFFFFF", accent: "#A0A0A0" },
-    vars: shadcn({
-      background: "oklch(0.13 0 0)",
-      foreground: "oklch(0.985 0 0)",
-      card: "oklch(0.18 0 0)",
-      "card-foreground": "oklch(0.985 0 0)",
-      popover: "oklch(0.18 0 0)",
-      "popover-foreground": "oklch(0.985 0 0)",
-      primary: "oklch(0.985 0 0)",
-      "primary-foreground": "oklch(0.08 0 0)",
-      secondary: "oklch(0.22 0 0)",
-      "secondary-foreground": "oklch(0.985 0 0)",
-      muted: "oklch(0.25 0 0)",
-      "muted-foreground": "oklch(0.65 0 0)",
-      accent: "oklch(0.985 0 0)",
-      "accent-foreground": "oklch(0.08 0 0)",
-      destructive: "oklch(0.62 0.18 25)",
-      border: "oklch(0.30 0 0)",
-      input: "oklch(0.20 0 0)",
-      ring: "oklch(0.985 0 0)",
-      sidebar: "oklch(0.10 0 0)",
-      "sidebar-foreground": "oklch(0.985 0 0)",
-      "sidebar-primary": "oklch(0.985 0 0)",
-      "sidebar-primary-foreground": "oklch(0.08 0 0)",
-      "sidebar-accent": "oklch(0.18 0 0)",
-      "sidebar-accent-foreground": "oklch(0.985 0 0)",
-      "sidebar-border": "oklch(0.25 0 0)",
-      "sidebar-ring": "oklch(0.985 0 0)",
-      "surface-rail": "oklch(0.08 0 0)",
-      "surface-sidebar": "oklch(0.10 0 0)",
-      "surface-ground": "oklch(0.13 0 0)",
-      "surface-elevated": "oklch(0.16 0 0)",
-      "surface-overlay": "oklch(0.06 0 0 / 95%)",
-      "border-subtle": "oklch(0.25 0 0 / 30%)",
-      "border-default": "oklch(0.28 0 0)",
-      "border-strong": "oklch(0.40 0 0)",
-      "text-primary": "oklch(0.985 0 0)",
-      "text-secondary": "oklch(0.75 0 0)",
-      "text-muted": "oklch(0.55 0 0)",
-      "text-inverse": "oklch(0.10 0 0)",
-      "accent-hover": "oklch(0.85 0 0)",
-      "accent-fg": "oklch(0.08 0 0)",
-      "accent-muted": "oklch(0.985 0 0 / 12%)",
-      "hover-bg": "oklch(0.18 0 0 / 60%)",
-      "hover-bg-strong": "oklch(0.22 0 0)",
-      "input-bg": "oklch(0.15 0 0)",
-      "input-placeholder": "oklch(0.50 0 0)",
-      "input-ring": "oklch(0.985 0 0)",
-      interactive: "oklch(0.16 0 0)",
-      "interactive-hover": "oklch(0.22 0 0)",
-      "interactive-active": "oklch(0.28 0 0)",
-      "status-online": "oklch(0.65 0.15 155)",
-      "status-idle": "oklch(0.70 0.15 80)",
-      "status-dnd": "oklch(0.62 0.18 25)",
-      "status-offline": "oklch(0.40 0 0)",
-      success: "oklch(0.65 0.15 155)",
-      warning: "oklch(0.75 0.15 85)",
-      info: "oklch(0.55 0.15 250)",
-    }),
-  },
+    // ── 2. 柔和灰度 (default) ───────────────────────────────────────────────────
+    {
+        id: "soft-mono",
+        name: "柔和灰度",
+        description: "层次分明的灰度主题，默认推荐",
+        preview: {bg: "#FFFFFF", fg: "#1A1A1A", accent: "#1A1A1A"},
+        vars: light(),
+        varsDark: dark(),
+    },
 
-  // ─── 4. Discord 暗色 ─────────────────────────────
-  {
-    id: "discord-dark",
-    name: "Discord 暗色",
-    description: "Discord 风格深色主题与 blurple 主色",
-    preview: { bg: "#313338", fg: "#FFFFFF", accent: "#5865F2" },
-    vars: shadcn({
-      background: "oklch(0.22 0 0)",
-      foreground: "oklch(0.89 0 0)",
-      card: "oklch(0.26 0 0)",
-      "card-foreground": "oklch(0.89 0 0)",
-      popover: "oklch(0.26 0 0)",
-      "popover-foreground": "oklch(0.89 0 0)",
-      primary: "oklch(0.55 0.24 264)",
-      "primary-foreground": "oklch(0.985 0 0)",
-      secondary: "oklch(0.29 0 0)",
-      "secondary-foreground": "oklch(0.89 0 0)",
-      muted: "oklch(0.29 0 0)",
-      "muted-foreground": "oklch(0.65 0 0)",
-      accent: "oklch(0.55 0.24 264)",
-      "accent-foreground": "oklch(0.985 0 0)",
-      destructive: "oklch(0.65 0.18 25)",
-      border: "oklch(1 0 0 / 12%)",
-      input: "oklch(1 0 0 / 12%)",
-      ring: "oklch(0.55 0.24 264)",
-      sidebar: "oklch(0.18 0 0)",
-      "sidebar-foreground": "oklch(0.89 0 0)",
-      "sidebar-primary": "oklch(0.55 0.24 264)",
-      "sidebar-primary-foreground": "oklch(0.985 0 0)",
-      "sidebar-accent": "oklch(0.25 0 0)",
-      "sidebar-accent-foreground": "oklch(0.89 0 0)",
-      "sidebar-border": "oklch(1 0 0 / 8%)",
-      "sidebar-ring": "oklch(0.55 0.24 264)",
-      "surface-rail": "oklch(0.16 0 0)",
-      "surface-sidebar": "oklch(0.20 0 0)",
-      "surface-ground": "oklch(0.22 0 0)",
-      "surface-elevated": "oklch(0.25 0 0)",
-      "surface-overlay": "oklch(0.13 0 0 / 95%)",
-      "border-subtle": "oklch(1 0 0 / 5%)",
-      "border-default": "oklch(1 0 0 / 10%)",
-      "border-strong": "oklch(1 0 0 / 18%)",
-      "text-primary": "oklch(0.89 0 0)",
-      "text-secondary": "oklch(0.75 0 0)",
-      "text-muted": "oklch(0.60 0 0)",
-      "text-inverse": "oklch(0.16 0 0)",
-      "accent-hover": "oklch(0.60 0.24 264)",
-      "accent-fg": "oklch(0.985 0 0)",
-      "accent-muted": "oklch(0.55 0.24 264 / 18%)",
-      "hover-bg": "oklch(1 0 0 / 6%)",
-      "hover-bg-strong": "oklch(1 0 0 / 12%)",
-      "input-bg": "oklch(0.18 0 0)",
-      "input-placeholder": "oklch(0.50 0 0)",
-      "input-ring": "oklch(0.55 0.24 264)",
-      interactive: "oklch(0.23 0 0)",
-      "interactive-hover": "oklch(0.28 0 0)",
-      "interactive-active": "oklch(0.32 0 0)",
-      "status-online": "oklch(0.65 0.15 155)",
-      "status-idle": "oklch(0.75 0.15 80)",
-      "status-dnd": "oklch(0.62 0.18 25)",
-      "status-offline": "oklch(0.50 0 0)",
-      success: "oklch(0.62 0.15 155)",
-      warning: "oklch(0.75 0.15 85)",
-      info: "oklch(0.55 0.24 264)",
-    }),
-  },
+    // ── 3. 炭黑暗色 ─────────────────────────────────────────────────────────────
+    {
+        id: "charcoal",
+        name: "炭黑",
+        description: "深色背景配白色文字（常驻深色）",
+        preview: {bg: "#1A1A1A", fg: "#F9F9F9", accent: "#A0A0A0"},
+        vars: dark({
+            // Slightly lighter than default dark base for "charcoal" feel
+            background: "oklch(0.13 0 0)",
+            card: "oklch(0.18 0 0)",
+            secondary: "oklch(0.22 0 0)",
+            muted: "oklch(0.25 0 0)",
+            primary: "oklch(0.985 0 0)",
+            "primary-foreground": "oklch(0.08 0 0)",
+            accent: "oklch(0.985 0 0)",
+            "accent-foreground": "oklch(0.08 0 0)",
+            ring: "oklch(0.985 0 0)",
+            border: "oklch(0.30 0 0)",
+            input: "oklch(0.20 0 0)",
+            // Sidebar — slightly darker rail
+            sidebar: "oklch(0.10 0 0)",
+            "sidebar-primary": "oklch(0.985 0 0)",
+            "sidebar-primary-foreground": "oklch(0.08 0 0)",
+            "sidebar-accent": "oklch(0.18 0 0)",
+            "sidebar-border": "oklch(0.25 0 0)",
+            "sidebar-ring": "oklch(0.985 0 0)",
+            "surface-rail": "oklch(0.08 0 0)",
+            "surface-sidebar": "oklch(0.10 0 0)",
+            "surface-elevated": "oklch(0.16 0 0)",
+            "border-default": "oklch(0.28 0 0)",
+            "text-inverse": "oklch(0.10 0 0)",
+            "accent-hover": "oklch(0.85 0 0)",
+            "accent-fg": "oklch(0.08 0 0)",
+            "accent-muted": "oklch(0.985 0 0 / 12%)",
+            "input-bg": "oklch(0.15 0 0)",
+            "input-ring": "oklch(0.985 0 0)",
+        }),
+        // Always-dark theme: varsDark mirrors vars so OS dark-mode has no effect
+        varsDark: dark({
+            background: "oklch(0.13 0 0)",
+            card: "oklch(0.18 0 0)",
+            secondary: "oklch(0.22 0 0)",
+            muted: "oklch(0.25 0 0)",
+            primary: "oklch(0.985 0 0)",
+            "primary-foreground": "oklch(0.08 0 0)",
+            accent: "oklch(0.985 0 0)",
+            "accent-foreground": "oklch(0.08 0 0)",
+            ring: "oklch(0.985 0 0)",
+            border: "oklch(0.30 0 0)",
+            input: "oklch(0.20 0 0)",
+            sidebar: "oklch(0.10 0 0)",
+            "sidebar-primary": "oklch(0.985 0 0)",
+            "sidebar-primary-foreground": "oklch(0.08 0 0)",
+            "sidebar-accent": "oklch(0.18 0 0)",
+            "sidebar-border": "oklch(0.25 0 0)",
+            "sidebar-ring": "oklch(0.985 0 0)",
+            "surface-rail": "oklch(0.08 0 0)",
+            "surface-sidebar": "oklch(0.10 0 0)",
+            "surface-elevated": "oklch(0.16 0 0)",
+            "border-default": "oklch(0.28 0 0)",
+            "text-inverse": "oklch(0.10 0 0)",
+            "accent-hover": "oklch(0.85 0 0)",
+            "accent-fg": "oklch(0.08 0 0)",
+            "accent-muted": "oklch(0.985 0 0 / 12%)",
+            "input-bg": "oklch(0.15 0 0)",
+            "input-ring": "oklch(0.985 0 0)",
+        }),
+    },
 
-  // ─── 5. GitHub 浅色 ──────────────────────────────
-  {
-    id: "github-light",
-    name: "GitHub 浅色",
-    description: "GitHub 风格浅色主题配蓝色链接",
-    preview: { bg: "#FFFFFF", fg: "#FFFFFF", accent: "#0969DA" },
-    vars: shadcn({
-      primary: "oklch(0.52 0.22 250)",
-      "primary-foreground": "oklch(1 0 0)",
-      ring: "oklch(0.52 0.22 250)",
-      "sidebar-primary": "oklch(0.52 0.22 250)",
-      "sidebar-primary-foreground": "oklch(1 0 0)",
-      "surface-rail": "oklch(0.97 0 0)",
-      "surface-sidebar": "oklch(0.98 0 0)",
-      "text-primary": "oklch(0.15 0 0)",
-      "text-secondary": "oklch(0.38 0 0)",
-      "accent-hover": "oklch(0.45 0.22 250)",
-      "accent-fg": "oklch(1 0 0)",
-      "accent-muted": "oklch(0.52 0.22 250 / 15%)",
-      "hover-bg": "oklch(0.95 0 0 / 70%)",
-      "hover-bg-strong": "oklch(0.90 0 0)",
-      "input-bg": "oklch(0.98 0 0)",
-      "input-ring": "oklch(0.52 0.22 250)",
-      "status-online": "oklch(0.58 0.15 155)",
-      "status-idle": "oklch(0.70 0.15 80)",
-      "status-dnd": "oklch(0.58 0.18 25)",
-      "status-offline": "oklch(0.60 0 0)",
-      success: "oklch(0.55 0.15 155)",
-      warning: "oklch(0.70 0.15 85)",
-      info: "oklch(0.52 0.22 250)",
-    }),
-    varsDark: shadcnDark({
-      primary: "oklch(0.55 0.24 264)",
-      "primary-foreground": "oklch(0.985 0 0)",
-      ring: "oklch(0.55 0.24 264)",
-      "sidebar-primary": "oklch(0.55 0.24 264)",
-      "sidebar-primary-foreground": "oklch(0.985 0 0)",
-      accent: "oklch(0.55 0.24 264)",
-      "accent-foreground": "oklch(0.985 0 0)",
-      "accent-hover": "oklch(0.60 0.24 264)",
-      "accent-fg": "oklch(0.985 0 0)",
-      "accent-muted": "oklch(0.55 0.24 264 / 20%)",
-      "input-ring": "oklch(0.55 0.24 264)",
-      "status-online": "oklch(0.65 0.15 155)",
-      "status-idle": "oklch(0.75 0.15 80)",
-      "status-dnd": "oklch(0.62 0.18 25)",
-      "status-offline": "oklch(0.50 0 0)",
-      success: "oklch(0.70 0.15 155)",
-      warning: "oklch(0.75 0.15 85)",
-      info: "oklch(0.55 0.24 264)",
-    }),
-  },
+    // ── 4. Discord 暗色 ──────────────────────────────────────────────────────────
+    {
+        id: "discord-dark",
+        name: "Discord 暗色",
+        description: "Discord 风格深色主题与 blurple 主色",
+        preview: {bg: "#313338", fg: "#F2F3F5", accent: "#5865F2"},
+        vars: dark({
+            background: "oklch(0.27 0.005 250)",  // #313338
+            foreground: "oklch(0.89 0 0)",
+            card: "oklch(0.31 0.004 250)",  // #383A40
+            "card-foreground": "oklch(0.89 0 0)",
+            popover: "oklch(0.20 0.004 250)",
+            "popover-foreground": "oklch(0.89 0 0)",
+            primary: "oklch(0.55 0.24 264)",   // blurple
+            "primary-foreground": "oklch(0.985 0 0)",
+            secondary: "oklch(0.33 0.004 250)",
+            "secondary-foreground": "oklch(0.89 0 0)",
+            muted: "oklch(0.33 0.004 250)",
+            "muted-foreground": "oklch(0.62 0 0)",
+            accent: "oklch(0.55 0.24 264)",
+            "accent-foreground": "oklch(0.985 0 0)",
+            destructive: "oklch(0.65 0.18 25)",
+            border: "oklch(1 0 0 / 8%)",
+            input: "oklch(0.23 0.004 250)",
+            ring: "oklch(0.55 0.24 264)",
+            sidebar: "oklch(0.22 0.004 250)",  // #2B2D31
+            "sidebar-foreground": "oklch(0.89 0 0)",
+            "sidebar-primary": "oklch(0.55 0.24 264)",
+            "sidebar-primary-foreground": "oklch(0.985 0 0)",
+            "sidebar-accent": "oklch(0.30 0.004 250)",
+            "sidebar-accent-foreground": "oklch(0.89 0 0)",
+            "sidebar-border": "oklch(1 0 0 / 5%)",
+            "sidebar-ring": "oklch(0.55 0.24 264)",
+            "surface-rail": "oklch(0.18 0.004 250)",  // #1E1F22 — server list
+            "surface-sidebar": "oklch(0.22 0.004 250)",
+            "surface-ground": "oklch(0.27 0.005 250)",
+            "surface-elevated": "oklch(0.31 0.004 250)",
+            "surface-overlay": "oklch(0.13 0.004 250 / 95%)",
+            "border-subtle": "oklch(1 0 0 / 4%)",
+            "border-default": "oklch(1 0 0 / 8%)",
+            "border-strong": "oklch(1 0 0 / 16%)",
+            "text-primary": "oklch(0.89 0 0)",
+            "text-secondary": "oklch(0.73 0 0)",
+            "text-muted": "oklch(0.58 0 0)",
+            "text-inverse": "oklch(0.18 0 0)",
+            "accent-hover": "oklch(0.62 0.24 264)",
+            "accent-fg": "oklch(0.985 0 0)",
+            "accent-muted": "oklch(0.55 0.24 264 / 18%)",
+            "hover-bg": "oklch(1 0 0 / 5%)",
+            "hover-bg-strong": "oklch(1 0 0 / 10%)",
+            "input-bg": "oklch(0.23 0.004 250)",
+            "input-ring": "oklch(0.55 0.24 264)",
+            interactive: "oklch(0.29 0.004 250)",
+            "interactive-hover": "oklch(0.33 0.004 250)",
+            "interactive-active": "oklch(0.38 0.004 250)",
+            info: "oklch(0.55 0.24 264)",
+        }),
+        // Always-dark: varsDark is identical
+        get varsDark() {
+            return this.vars;
+        },
+    },
 
-  // ─── 6. Slack 紫茄 ───────────────────────────────
-  {
-    id: "slack-aubergine",
-    name: "Slack 紫茄",
-    description: "Slack 风格紫色主题",
-    preview: { bg: "#4A154B", fg: "#FFFFFF", accent: "#ECB22E" },
-    vars: shadcn({
-      background: "oklch(0.22 0.08 330)",
-      foreground: "oklch(0.985 0 0)",
-      card: "oklch(0.27 0.06 330)",
-      "card-foreground": "oklch(0.985 0 0)",
-      popover: "oklch(0.27 0.06 330)",
-      "popover-foreground": "oklch(0.985 0 0)",
-      primary: "oklch(0.82 0.16 85)",
-      "primary-foreground": "oklch(0.18 0.06 330)",
-      secondary: "oklch(0.30 0.05 330)",
-      "secondary-foreground": "oklch(0.92 0 0)",
-      muted: "oklch(0.30 0.05 330)",
-      "muted-foreground": "oklch(0.70 0.03 330)",
-      accent: "oklch(0.82 0.16 85)",
-      "accent-foreground": "oklch(0.18 0.06 330)",
-      destructive: "oklch(0.62 0.18 25)",
-      border: "oklch(1 0 0 / 14%)",
-      input: "oklch(1 0 0 / 12%)",
-      ring: "oklch(0.82 0.16 85)",
-      sidebar: "oklch(0.18 0.06 330)",
-      "sidebar-foreground": "oklch(0.92 0 0)",
-      "sidebar-primary": "oklch(0.82 0.16 85)",
-      "sidebar-primary-foreground": "oklch(0.16 0.06 330)",
-      "sidebar-accent": "oklch(0.25 0.05 330)",
-      "sidebar-accent-foreground": "oklch(0.92 0 0)",
-      "sidebar-border": "oklch(1 0 0 / 10%)",
-      "sidebar-ring": "oklch(0.82 0.16 85)",
-      "surface-rail": "oklch(0.18 0.06 330)",
-      "surface-sidebar": "oklch(0.22 0.06 330)",
-      "surface-ground": "oklch(0.22 0.08 330)",
-      "surface-elevated": "oklch(0.27 0.05 330)",
-      "surface-overlay": "oklch(0.15 0.06 330 / 95%)",
-      "border-subtle": "oklch(1 0 0 / 8%)",
-      "border-default": "oklch(1 0 0 / 14%)",
-      "border-strong": "oklch(1 0 0 / 24%)",
-      "text-primary": "oklch(0.985 0 0)",
-      "text-secondary": "oklch(0.82 0.02 330)",
-      "text-muted": "oklch(0.70 0.03 330)",
-      "text-inverse": "oklch(0.18 0.06 330)",
-      "accent-hover": "oklch(0.86 0.17 85)",
-      "accent-fg": "oklch(0.14 0.06 330)",
-      "accent-muted": "oklch(0.82 0.16 85 / 20%)",
-      "hover-bg": "oklch(1 0 0 / 8%)",
-      "hover-bg-strong": "oklch(1 0 0 / 16%)",
-      "input-bg": "oklch(0.20 0.05 330)",
-      "input-placeholder": "oklch(0.65 0.03 330)",
-      "input-ring": "oklch(0.82 0.16 85)",
-      interactive: "oklch(0.26 0.05 330)",
-      "interactive-hover": "oklch(0.32 0.04 330)",
-      "interactive-active": "oklch(0.38 0.04 330)",
-      "status-online": "oklch(0.65 0.15 155)",
-      "status-idle": "oklch(0.82 0.16 85)",
-      "status-dnd": "oklch(0.62 0.18 25)",
-      "status-offline": "oklch(0.55 0.03 330)",
-      success: "oklch(0.65 0.15 155)",
-      warning: "oklch(0.82 0.16 85)",
-      info: "oklch(0.65 0.12 250)",
-    }),
-  },
+    // ── 5. GitHub 浅色 ───────────────────────────────────────────────────────────
+    {
+        id: "github-light",
+        name: "GitHub 浅色",
+        description: "GitHub 风格浅色主题配蓝色链接",
+        preview: {bg: "#FFFFFF", fg: "#1F2328", accent: "#0969DA"},
+        vars: light({
+            foreground: "oklch(0.17 0.005 250)",  // #1F2328
+            "card-foreground": "oklch(0.17 0.005 250)",
+            "popover-foreground": "oklch(0.17 0.005 250)",
+            primary: "oklch(0.52 0.22 250)",   // #0969DA
+            "primary-foreground": "oklch(1 0 0)",
+            accent: "oklch(0.94 0.005 250)",
+            "accent-foreground": "oklch(0.17 0.005 250)",
+            ring: "oklch(0.52 0.22 250)",
+            border: "oklch(0.85 0.005 250)",
+            "sidebar": "oklch(0.97 0.005 250)",
+            "sidebar-primary": "oklch(0.52 0.22 250)",
+            "sidebar-primary-foreground": "oklch(1 0 0)",
+            "sidebar-border": "oklch(0.88 0.005 250)",
+            "sidebar-ring": "oklch(0.52 0.22 250)",
+            "surface-rail": "oklch(0.97 0.005 250)",
+            "surface-sidebar": "oklch(0.98 0.003 250)",
+            "text-primary": "oklch(0.17 0.005 250)",
+            "text-secondary": "oklch(0.40 0.005 250)",
+            "accent-hover": "oklch(0.45 0.22 250)",
+            "accent-fg": "oklch(1 0 0)",
+            "accent-muted": "oklch(0.52 0.22 250 / 15%)",
+            "input-ring": "oklch(0.52 0.22 250)",
+            "status-online": "oklch(0.55 0.16 155)",
+            success: "oklch(0.52 0.17 155)",
+            info: "oklch(0.52 0.22 250)",
+        }),
+        varsDark: dark({
+            primary: "oklch(0.62 0.20 250)",
+            "primary-foreground": "oklch(0.985 0 0)",
+            accent: "oklch(0.62 0.20 250)",
+            "accent-foreground": "oklch(0.985 0 0)",
+            ring: "oklch(0.62 0.20 250)",
+            "sidebar-primary": "oklch(0.62 0.20 250)",
+            "sidebar-primary-foreground": "oklch(0.985 0 0)",
+            "accent-hover": "oklch(0.68 0.20 250)",
+            "accent-fg": "oklch(0.985 0 0)",
+            "accent-muted": "oklch(0.62 0.20 250 / 20%)",
+            "input-ring": "oklch(0.62 0.20 250)",
+            info: "oklch(0.62 0.20 250)",
+        }),
+    },
 
-  // ─── 7. Nord 极光 ────────────────────────────────
-  {
-    id: "nord",
-    name: "Nord 极光",
-    description: "Nord 风格冷色调配色方案",
-    preview: { bg: "#2E3440", fg: "#FFFFFF", accent: "#88C0D0" },
-    vars: shadcn({
-      background: "oklch(0.25 0.02 250)",
-      foreground: "oklch(0.88 0.01 250)",
-      card: "oklch(0.30 0.02 250)",
-      "card-foreground": "oklch(0.88 0.01 250)",
-      popover: "oklch(0.30 0.02 250)",
-      "popover-foreground": "oklch(0.88 0.01 250)",
-      primary: "oklch(0.75 0.10 220)",
-      "primary-foreground": "oklch(0.18 0.02 250)",
-      secondary: "oklch(0.33 0.02 250)",
-      "secondary-foreground": "oklch(0.88 0.01 250)",
-      muted: "oklch(0.33 0.02 250)",
-      "muted-foreground": "oklch(0.68 0.02 250)",
-      accent: "oklch(0.75 0.10 220)",
-      "accent-foreground": "oklch(0.18 0.02 250)",
-      destructive: "oklch(0.60 0.16 20)",
-      border: "oklch(1 0 0 / 10%)",
-      input: "oklch(1 0 0 / 12%)",
-      ring: "oklch(0.75 0.10 220)",
-      sidebar: "oklch(0.22 0.02 250)",
-      "sidebar-foreground": "oklch(0.88 0.01 250)",
-      "sidebar-primary": "oklch(0.75 0.10 220)",
-      "sidebar-primary-foreground": "oklch(0.18 0.02 250)",
-      "sidebar-accent": "oklch(0.28 0.02 250)",
-      "sidebar-accent-foreground": "oklch(0.88 0.01 250)",
-      "sidebar-border": "oklch(1 0 0 / 8%)",
-      "sidebar-ring": "oklch(0.75 0.10 220)",
-      "surface-rail": "oklch(0.20 0.02 250)",
-      "surface-sidebar": "oklch(0.24 0.02 250)",
-      "surface-ground": "oklch(0.25 0.02 250)",
-      "surface-elevated": "oklch(0.30 0.02 250)",
-      "surface-overlay": "oklch(0.18 0.02 250 / 95%)",
-      "border-subtle": "oklch(1 0 0 / 5%)",
-      "border-default": "oklch(1 0 0 / 10%)",
-      "border-strong": "oklch(1 0 0 / 18%)",
-      "text-primary": "oklch(0.88 0.01 250)",
-      "text-secondary": "oklch(0.78 0.02 250)",
-      "text-muted": "oklch(0.68 0.02 250)",
-      "text-inverse": "oklch(0.20 0.02 250)",
-      "accent-hover": "oklch(0.80 0.11 220)",
-      "accent-fg": "oklch(0.16 0.02 250)",
-      "accent-muted": "oklch(0.75 0.10 220 / 18%)",
-      "hover-bg": "oklch(1 0 0 / 6%)",
-      "hover-bg-strong": "oklch(1 0 0 / 12%)",
-      "input-bg": "oklch(0.23 0.02 250)",
-      "input-placeholder": "oklch(0.60 0.02 250)",
-      "input-ring": "oklch(0.75 0.10 220)",
-      interactive: "oklch(0.30 0.02 250)",
-      "interactive-hover": "oklch(0.35 0.02 250)",
-      "interactive-active": "oklch(0.40 0.02 250)",
-      "status-online": "oklch(0.65 0.14 155)",
-      "status-idle": "oklch(0.75 0.12 80)",
-      "status-dnd": "oklch(0.62 0.16 20)",
-      "status-offline": "oklch(0.55 0.02 250)",
-      success: "oklch(0.65 0.14 155)",
-      warning: "oklch(0.80 0.14 80)",
-      info: "oklch(0.75 0.10 220)",
-    }),
-  },
+    // ── 6. Slack 紫茄 ────────────────────────────────────────────────────────────
+    {
+        id: "slack-aubergine",
+        name: "Slack 紫茄",
+        description: "Slack 风格紫色主题（常驻深色）",
+        preview: {bg: "#4A154B", fg: "#FFFFFF", accent: "#ECB22E"},
+        vars: dark({
+            background: "oklch(0.22 0.08 330)",  // #4A154B
+            foreground: "oklch(0.985 0 0)",
+            card: "oklch(0.27 0.06 330)",
+            "card-foreground": "oklch(0.985 0 0)",
+            popover: "oklch(0.27 0.06 330)",
+            "popover-foreground": "oklch(0.985 0 0)",
+            primary: "oklch(0.82 0.16 85)",   // Slack gold
+            "primary-foreground": "oklch(0.18 0.06 330)",
+            secondary: "oklch(0.30 0.05 330)",
+            "secondary-foreground": "oklch(0.92 0 0)",
+            muted: "oklch(0.30 0.05 330)",
+            "muted-foreground": "oklch(0.70 0.03 330)",
+            accent: "oklch(0.82 0.16 85)",
+            "accent-foreground": "oklch(0.18 0.06 330)",
+            destructive: "oklch(0.65 0.18 25)",
+            border: "oklch(1 0 0 / 14%)",
+            input: "oklch(1 0 0 / 12%)",
+            ring: "oklch(0.82 0.16 85)",
+            sidebar: "oklch(0.18 0.06 330)",
+            "sidebar-foreground": "oklch(0.92 0 0)",
+            "sidebar-primary": "oklch(0.82 0.16 85)",
+            "sidebar-primary-foreground": "oklch(0.16 0.06 330)",
+            "sidebar-accent": "oklch(0.25 0.05 330)",
+            "sidebar-accent-foreground": "oklch(0.92 0 0)",
+            "sidebar-border": "oklch(1 0 0 / 10%)",
+            "sidebar-ring": "oklch(0.82 0.16 85)",
+            "surface-rail": "oklch(0.18 0.06 330)",
+            "surface-sidebar": "oklch(0.22 0.06 330)",
+            "surface-ground": "oklch(0.22 0.08 330)",
+            "surface-elevated": "oklch(0.27 0.05 330)",
+            "surface-overlay": "oklch(0.15 0.06 330 / 95%)",
+            "border-subtle": "oklch(1 0 0 / 8%)",
+            "border-default": "oklch(1 0 0 / 14%)",
+            "border-strong": "oklch(1 0 0 / 24%)",
+            "text-primary": "oklch(0.985 0 0)",
+            "text-secondary": "oklch(0.82 0.02 330)",
+            "text-muted": "oklch(0.70 0.03 330)",
+            "text-inverse": "oklch(0.18 0.06 330)",
+            "accent-hover": "oklch(0.87 0.17 85)",
+            "accent-fg": "oklch(0.14 0.06 330)",
+            "accent-muted": "oklch(0.82 0.16 85 / 20%)",
+            "hover-bg": "oklch(1 0 0 / 8%)",
+            "hover-bg-strong": "oklch(1 0 0 / 16%)",
+            "input-bg": "oklch(0.20 0.05 330)",
+            "input-placeholder": "oklch(0.65 0.03 330)",
+            "input-ring": "oklch(0.82 0.16 85)",
+            interactive: "oklch(0.26 0.05 330)",
+            "interactive-hover": "oklch(0.32 0.04 330)",
+            "interactive-active": "oklch(0.38 0.04 330)",
+            "status-idle": "oklch(0.82 0.16 85)",
+            warning: "oklch(0.82 0.16 85)",
+            info: "oklch(0.65 0.12 250)",
+        }),
+        get varsDark() {
+            return this.vars;
+        },
+    },
 
-  // ─── 8. Dracula ──────────────────────────────────
-  {
-    id: "dracula",
-    name: "Dracula 吸血鬼",
-    description: "高对比度紫色暗色主题",
-    preview: { bg: "#282A36", fg: "#FFFFFF", accent: "#BD93F9" },
-    vars: shadcn({
-      background: "oklch(0.21 0.03 290)",
-      foreground: "oklch(0.92 0.01 100)",
-      card: "oklch(0.26 0.03 290)",
-      "card-foreground": "oklch(0.92 0.01 100)",
-      popover: "oklch(0.26 0.03 290)",
-      "popover-foreground": "oklch(0.92 0.01 100)",
-      primary: "oklch(0.72 0.20 310)",
-      "primary-foreground": "oklch(0.10 0.03 290)",
-      secondary: "oklch(0.29 0.03 290)",
-      "secondary-foreground": "oklch(0.92 0.01 100)",
-      muted: "oklch(0.29 0.03 290)",
-      "muted-foreground": "oklch(0.65 0.03 290)",
-      accent: "oklch(0.72 0.20 310)",
-      "accent-foreground": "oklch(0.10 0.03 290)",
-      destructive: "oklch(0.65 0.20 20)",
-      border: "oklch(1 0 0 / 12%)",
-      input: "oklch(1 0 0 / 12%)",
-      ring: "oklch(0.72 0.20 310)",
-      sidebar: "oklch(0.16 0.03 290)",
-      "sidebar-foreground": "oklch(0.92 0.01 100)",
-      "sidebar-primary": "oklch(0.72 0.20 310)",
-      "sidebar-primary-foreground": "oklch(0.10 0.03 290)",
-      "sidebar-accent": "oklch(0.23 0.03 290)",
-      "sidebar-accent-foreground": "oklch(0.92 0.01 100)",
-      "sidebar-border": "oklch(1 0 0 / 10%)",
-      "sidebar-ring": "oklch(0.72 0.20 310)",
-      "surface-rail": "oklch(0.14 0.03 290)",
-      "surface-sidebar": "oklch(0.18 0.03 290)",
-      "surface-ground": "oklch(0.21 0.03 290)",
-      "surface-elevated": "oklch(0.26 0.03 290)",
-      "surface-overlay": "oklch(0.12 0.03 290 / 95%)",
-      "border-subtle": "oklch(1 0 0 / 5%)",
-      "border-default": "oklch(1 0 0 / 10%)",
-      "border-strong": "oklch(1 0 0 / 18%)",
-      "text-primary": "oklch(0.92 0.01 100)",
-      "text-secondary": "oklch(0.80 0.02 290)",
-      "text-muted": "oklch(0.65 0.03 290)",
-      "text-inverse": "oklch(0.15 0.03 290)",
-      "accent-hover": "oklch(0.78 0.21 310)",
-      "accent-fg": "oklch(0.10 0.03 290)",
-      "accent-muted": "oklch(0.72 0.20 310 / 18%)",
-      "hover-bg": "oklch(1 0 0 / 6%)",
-      "hover-bg-strong": "oklch(1 0 0 / 12%)",
-      "input-bg": "oklch(0.19 0.03 290)",
-      "input-placeholder": "oklch(0.55 0.03 290)",
-      "input-ring": "oklch(0.72 0.20 310)",
-      interactive: "oklch(0.25 0.03 290)",
-      "interactive-hover": "oklch(0.30 0.03 290)",
-      "interactive-active": "oklch(0.38 0.03 290)",
-      "status-online": "oklch(0.65 0.17 145)",
-      "status-idle": "oklch(0.80 0.18 85)",
-      "status-dnd": "oklch(0.65 0.20 20)",
-      "status-offline": "oklch(0.55 0.03 290)",
-      success: "oklch(0.68 0.18 145)",
-      warning: "oklch(0.82 0.18 85)",
-      info: "oklch(0.72 0.20 310)",
-    }),
-  },
+    // ── 7. Nord 极光 ─────────────────────────────────────────────────────────────
+    {
+        id: "nord",
+        name: "Nord 极光",
+        description: "Nord 风格冷色调配色方案（常驻深色）",
+        preview: {bg: "#2E3440", fg: "#ECEFF4", accent: "#88C0D0"},
+        vars: dark({
+            background: "oklch(0.25 0.02 250)",   // Nord polar night 1
+            foreground: "oklch(0.93 0.01 250)",   // Nord snow storm 3
+            card: "oklch(0.29 0.018 250)",  // polar night 2
+            "card-foreground": "oklch(0.93 0.01 250)",
+            popover: "oklch(0.29 0.018 250)",
+            "popover-foreground": "oklch(0.93 0.01 250)",
+            primary: "oklch(0.75 0.10 220)",   // Nord frost 3 (#88C0D0)
+            "primary-foreground": "oklch(0.18 0.02 250)",
+            secondary: "oklch(0.33 0.016 250)",  // polar night 3
+            "secondary-foreground": "oklch(0.93 0.01 250)",
+            muted: "oklch(0.33 0.016 250)",
+            "muted-foreground": "oklch(0.68 0.015 250)",
+            accent: "oklch(0.75 0.10 220)",
+            "accent-foreground": "oklch(0.18 0.02 250)",
+            destructive: "oklch(0.62 0.15 20)",    // Nord aurora red
+            border: "oklch(1 0 0 / 10%)",
+            input: "oklch(0.23 0.02 250)",
+            ring: "oklch(0.75 0.10 220)",
+            sidebar: "oklch(0.22 0.02 250)",
+            "sidebar-foreground": "oklch(0.93 0.01 250)",
+            "sidebar-primary": "oklch(0.75 0.10 220)",
+            "sidebar-primary-foreground": "oklch(0.18 0.02 250)",
+            "sidebar-accent": "oklch(0.28 0.018 250)",
+            "sidebar-accent-foreground": "oklch(0.93 0.01 250)",
+            "sidebar-border": "oklch(1 0 0 / 7%)",
+            "sidebar-ring": "oklch(0.75 0.10 220)",
+            "surface-rail": "oklch(0.20 0.02 250)",
+            "surface-sidebar": "oklch(0.24 0.02 250)",
+            "surface-ground": "oklch(0.25 0.02 250)",
+            "surface-elevated": "oklch(0.29 0.018 250)",
+            "surface-overlay": "oklch(0.18 0.02 250 / 95%)",
+            "border-subtle": "oklch(1 0 0 / 5%)",
+            "border-default": "oklch(1 0 0 / 10%)",
+            "border-strong": "oklch(1 0 0 / 18%)",
+            "text-primary": "oklch(0.93 0.01 250)",
+            "text-secondary": "oklch(0.80 0.015 250)",
+            "text-muted": "oklch(0.68 0.015 250)",
+            "text-inverse": "oklch(0.20 0.02 250)",
+            "accent-hover": "oklch(0.81 0.11 220)",
+            "accent-fg": "oklch(0.16 0.02 250)",
+            "accent-muted": "oklch(0.75 0.10 220 / 18%)",
+            "hover-bg": "oklch(1 0 0 / 5%)",
+            "hover-bg-strong": "oklch(1 0 0 / 11%)",
+            "input-bg": "oklch(0.23 0.02 250)",
+            "input-placeholder": "oklch(0.60 0.015 250)",
+            "input-ring": "oklch(0.75 0.10 220)",
+            interactive: "oklch(0.29 0.018 250)",
+            "interactive-hover": "oklch(0.35 0.016 250)",
+            "interactive-active": "oklch(0.40 0.014 250)",
+            "status-online": "oklch(0.68 0.14 155)",        // Nord aurora green
+            "status-idle": "oklch(0.78 0.12 80)",         // Nord aurora yellow
+            "status-dnd": "oklch(0.62 0.15 20)",
+            success: "oklch(0.68 0.14 155)",
+            warning: "oklch(0.78 0.14 80)",
+            info: "oklch(0.75 0.10 220)",
+            // Nord chart: frost palette
+            "chart-1": "oklch(0.75 0.10 220)",
+            "chart-2": "oklch(0.72 0.12 195)",
+            "chart-3": "oklch(0.68 0.14 155)",
+            "chart-4": "oklch(0.78 0.12 80)",
+            "chart-5": "oklch(0.65 0.15 20)",
+        }),
+        get varsDark() {
+            return this.vars;
+        },
+    },
 
-  // ─── 9. Solarized 暖阳 ───────────────────────────
-  {
-    id: "solarized-light",
-    name: "Solarized 暖阳",
-    description: "经典 Solarized 浅色护眼主题",
-    preview: { bg: "#FDF6E3", fg: "#FFFFFF", accent: "#268BD2" },
-    vars: shadcn({
-      background: "oklch(0.98 0.02 95)",
-      foreground: "oklch(0.45 0.03 200)",
-      card: "oklch(0.98 0.02 95)",
-      "card-foreground": "oklch(0.45 0.03 200)",
-      popover: "oklch(0.99 0.01 95)",
-      "popover-foreground": "oklch(0.45 0.03 200)",
-      primary: "oklch(0.52 0.22 250)",
-      "primary-foreground": "oklch(0.98 0.02 95)",
-      secondary: "oklch(0.93 0.02 100)",
-      "secondary-foreground": "oklch(0.45 0.03 200)",
-      muted: "oklch(0.93 0.02 100)",
-      "muted-foreground": "oklch(0.60 0.02 200)",
-      accent: "oklch(0.52 0.22 250)",
-      "accent-foreground": "oklch(0.98 0.02 95)",
-      destructive: "oklch(0.52 0.20 20)",
-      border: "oklch(0.85 0.02 95)",
-      input: "oklch(0.90 0.02 95)",
-      ring: "oklch(0.52 0.22 250)",
-      sidebar: "oklch(0.96 0.02 95)",
-      "sidebar-foreground": "oklch(0.40 0.03 200)",
-      "sidebar-primary": "oklch(0.52 0.22 250)",
-      "sidebar-primary-foreground": "oklch(0.98 0.02 95)",
-      "sidebar-accent": "oklch(0.91 0.02 100)",
-      "sidebar-accent-foreground": "oklch(0.40 0.03 200)",
-      "sidebar-border": "oklch(0.83 0.02 95)",
-      "sidebar-ring": "oklch(0.52 0.22 250)",
-      "surface-rail": "oklch(0.95 0.02 95)",
-      "surface-sidebar": "oklch(0.97 0.02 95)",
-      "surface-ground": "oklch(0.98 0.02 95)",
-      "surface-elevated": "oklch(0.98 0.02 95)",
-      "surface-overlay": "oklch(0.96 0.02 95 / 95%)",
-      "border-subtle": "oklch(0.88 0.02 95 / 50%)",
-      "border-default": "oklch(0.85 0.02 95)",
-      "border-strong": "oklch(0.72 0.02 95)",
-      "text-primary": "oklch(0.45 0.03 200)",
-      "text-secondary": "oklch(0.55 0.03 200)",
-      "text-muted": "oklch(0.65 0.02 200)",
-      "text-inverse": "oklch(0.98 0.02 95)",
-      "accent-hover": "oklch(0.45 0.22 250)",
-      "accent-fg": "oklch(0.98 0.02 95)",
-      "accent-muted": "oklch(0.52 0.22 250 / 15%)",
-      "hover-bg": "oklch(0.93 0.02 95 / 70%)",
-      "hover-bg-strong": "oklch(0.88 0.02 95)",
-      "input-bg": "oklch(0.99 0.01 95)",
-      "input-placeholder": "oklch(0.60 0.02 200)",
-      "input-ring": "oklch(0.52 0.22 250)",
-      interactive: "oklch(0.95 0.02 100)",
-      "interactive-hover": "oklch(0.88 0.02 100)",
-      "interactive-active": "oklch(0.82 0.02 100)",
-      "status-online": "oklch(0.55 0.14 155)",
-      "status-idle": "oklch(0.68 0.15 85)",
-      "status-dnd": "oklch(0.58 0.15 20)",
-      "status-offline": "oklch(0.60 0.02 200)",
-      success: "oklch(0.55 0.14 155)",
-      warning: "oklch(0.70 0.15 85)",
-      info: "oklch(0.52 0.22 250)",
-    }),
-    varsDark: shadcnDark({
-      background: "oklch(0.22 0.04 95)",
-      foreground: "oklch(0.88 0.03 200)",
-      card: "oklch(0.28 0.03 95)",
-      "card-foreground": "oklch(0.88 0.03 200)",
-      popover: "oklch(0.28 0.03 95)",
-      "popover-foreground": "oklch(0.88 0.03 200)",
-      primary: "oklch(0.52 0.22 250)",
-      "primary-foreground": "oklch(0.98 0.02 95)",
-      secondary: "oklch(0.32 0.03 95)",
-      "secondary-foreground": "oklch(0.88 0.03 200)",
-      muted: "oklch(0.32 0.03 95)",
-      "muted-foreground": "oklch(0.65 0.02 200)",
-      accent: "oklch(0.52 0.22 250)",
-      "accent-foreground": "oklch(0.98 0.02 95)",
-      destructive: "oklch(0.62 0.18 25)",
-      border: "oklch(1 0 0 / 12%)",
-      input: "oklch(1 0 0 / 12%)",
-      ring: "oklch(0.52 0.22 250)",
-      sidebar: "oklch(0.16 0.03 95)",
-      "sidebar-foreground": "oklch(0.88 0.03 200)",
-      "sidebar-primary": "oklch(0.52 0.22 250)",
-      "sidebar-primary-foreground": "oklch(0.98 0.02 95)",
-      "sidebar-accent": "oklch(0.26 0.03 95)",
-      "sidebar-accent-foreground": "oklch(0.88 0.03 200)",
-      "sidebar-border": "oklch(1 0 0 / 8%)",
-      "sidebar-ring": "oklch(0.52 0.22 250)",
-      "surface-rail": "oklch(0.14 0.03 95)",
-      "surface-sidebar": "oklch(0.18 0.03 95)",
-      "surface-ground": "oklch(0.22 0.04 95)",
-      "surface-elevated": "oklch(0.28 0.03 95)",
-      "surface-overlay": "oklch(0.12 0.03 95 / 95%)",
-      "border-subtle": "oklch(1 0 0 / 5%)",
-      "border-default": "oklch(1 0 0 / 10%)",
-      "border-strong": "oklch(1 0 0 / 18%)",
-      "text-primary": "oklch(0.88 0.03 200)",
-      "text-secondary": "oklch(0.72 0.03 200)",
-      "text-muted": "oklch(0.58 0.02 200)",
-      "text-inverse": "oklch(0.22 0.04 95)",
-      "accent-hover": "oklch(0.45 0.22 250)",
-      "accent-fg": "oklch(0.98 0.02 95)",
-      "accent-muted": "oklch(0.52 0.22 250 / 20%)",
-      "hover-bg": "oklch(1 0 0 / 6%)",
-      "hover-bg-strong": "oklch(1 0 0 / 12%)",
-      "input-bg": "oklch(0.20 0.03 95)",
-      "input-placeholder": "oklch(0.50 0.02 200)",
-      "input-ring": "oklch(0.52 0.22 250)",
-      interactive: "oklch(0.28 0.03 95)",
-      "interactive-hover": "oklch(0.35 0.03 95)",
-      "interactive-active": "oklch(0.42 0.03 95)",
-      "status-online": "oklch(0.65 0.15 155)",
-      "status-idle": "oklch(0.75 0.15 80)",
-      "status-dnd": "oklch(0.62 0.18 25)",
-      "status-offline": "oklch(0.50 0 0)",
-      success: "oklch(0.70 0.15 155)",
-      warning: "oklch(0.75 0.15 85)",
-      info: "oklch(0.55 0.22 250)",
-    }),
-  },
+    // ── 8. Dracula ───────────────────────────────────────────────────────────────
+    {
+        id: "dracula",
+        name: "Dracula 吸血鬼",
+        description: "高对比度紫色暗色主题（常驻深色）",
+        preview: {bg: "#282A36", fg: "#F8F8F2", accent: "#BD93F9"},
+        vars: dark({
+            background: "oklch(0.21 0.03 290)",   // #282A36
+            foreground: "oklch(0.97 0.008 95)",   // #F8F8F2
+            card: "oklch(0.25 0.025 290)",  // #343746 — comment bg
+            "card-foreground": "oklch(0.97 0.008 95)",
+            popover: "oklch(0.19 0.028 290)",
+            "popover-foreground": "oklch(0.97 0.008 95)",
+            primary: "oklch(0.72 0.20 310)",   // #BD93F9 purple
+            "primary-foreground": "oklch(0.12 0.03 290)",
+            secondary: "oklch(0.28 0.025 290)",
+            "secondary-foreground": "oklch(0.97 0.008 95)",
+            muted: "oklch(0.28 0.025 290)",
+            "muted-foreground": "oklch(0.64 0.03 290)",
+            accent: "oklch(0.72 0.20 310)",
+            "accent-foreground": "oklch(0.12 0.03 290)",
+            destructive: "oklch(0.65 0.20 20)",    // #FF5555 red
+            border: "oklch(1 0 0 / 10%)",
+            input: "oklch(0.19 0.028 290)",
+            ring: "oklch(0.72 0.20 310)",
+            sidebar: "oklch(0.17 0.03 290)",
+            "sidebar-foreground": "oklch(0.97 0.008 95)",
+            "sidebar-primary": "oklch(0.72 0.20 310)",
+            "sidebar-primary-foreground": "oklch(0.12 0.03 290)",
+            "sidebar-accent": "oklch(0.24 0.025 290)",
+            "sidebar-accent-foreground": "oklch(0.97 0.008 95)",
+            "sidebar-border": "oklch(1 0 0 / 8%)",
+            "sidebar-ring": "oklch(0.72 0.20 310)",
+            "surface-rail": "oklch(0.14 0.03 290)",
+            "surface-sidebar": "oklch(0.18 0.028 290)",
+            "surface-ground": "oklch(0.21 0.03 290)",
+            "surface-elevated": "oklch(0.25 0.025 290)",
+            "surface-overlay": "oklch(0.12 0.03 290 / 95%)",
+            "border-subtle": "oklch(1 0 0 / 5%)",
+            "border-default": "oklch(1 0 0 / 10%)",
+            "border-strong": "oklch(1 0 0 / 18%)",
+            "text-primary": "oklch(0.97 0.008 95)",
+            "text-secondary": "oklch(0.82 0.015 290)",
+            "text-muted": "oklch(0.64 0.03 290)",
+            "text-inverse": "oklch(0.15 0.03 290)",
+            "accent-hover": "oklch(0.78 0.21 310)",
+            "accent-fg": "oklch(0.12 0.03 290)",
+            "accent-muted": "oklch(0.72 0.20 310 / 18%)",
+            "hover-bg": "oklch(1 0 0 / 5%)",
+            "hover-bg-strong": "oklch(1 0 0 / 10%)",
+            "input-bg": "oklch(0.19 0.028 290)",
+            "input-placeholder": "oklch(0.55 0.03 290)",
+            "input-ring": "oklch(0.72 0.20 310)",
+            interactive: "oklch(0.25 0.025 290)",
+            "interactive-hover": "oklch(0.30 0.025 290)",
+            "interactive-active": "oklch(0.36 0.022 290)",
+            "status-online": "oklch(0.68 0.17 145)",        // #50FA7B green
+            "status-idle": "oklch(0.82 0.18 85)",         // #F1FA8C yellow
+            "status-dnd": "oklch(0.65 0.20 20)",
+            success: "oklch(0.68 0.18 145)",
+            warning: "oklch(0.82 0.18 85)",
+            info: "oklch(0.72 0.20 310)",
+            // Dracula chart: canonical palette colors
+            "chart-1": "oklch(0.72 0.20 310)",   // purple
+            "chart-2": "oklch(0.75 0.22 185)",   // cyan
+            "chart-3": "oklch(0.68 0.18 145)",   // green
+            "chart-4": "oklch(0.82 0.18 85)",    // yellow
+            "chart-5": "oklch(0.65 0.22 20)",    // red
+        }),
+        get varsDark() {
+            return this.vars;
+        },
+    },
 
-  // ─── 10. Monokai ─────────────────────────────────
-  {
-    id: "monokai",
-    name: "Monokai 霓虹",
-    description: "Monokai 风格高饱和度暗色主题",
-    preview: { bg: "#272822", fg: "#FFFFFF", accent: "#A6E22E" },
-    vars: shadcn({
-      background: "oklch(0.18 0.01 110)",
-      foreground: "oklch(0.92 0.01 100)",
-      card: "oklch(0.22 0.01 110)",
-      "card-foreground": "oklch(0.92 0.01 100)",
-      popover: "oklch(0.22 0.01 110)",
-      "popover-foreground": "oklch(0.92 0.01 100)",
-      primary: "oklch(0.78 0.20 140)",
-      "primary-foreground": "oklch(0.10 0.01 110)",
-      secondary: "oklch(0.25 0.01 110)",
-      "secondary-foreground": "oklch(0.92 0.01 100)",
-      muted: "oklch(0.25 0.01 110)",
-      "muted-foreground": "oklch(0.65 0.02 110)",
-      accent: "oklch(0.78 0.20 140)",
-      "accent-foreground": "oklch(0.10 0.01 110)",
-      destructive: "oklch(0.65 0.20 20)",
-      border: "oklch(1 0 0 / 12%)",
-      input: "oklch(1 0 0 / 12%)",
-      ring: "oklch(0.78 0.20 140)",
-      sidebar: "oklch(0.14 0.01 110)",
-      "sidebar-foreground": "oklch(0.92 0.01 100)",
-      "sidebar-primary": "oklch(0.78 0.20 140)",
-      "sidebar-primary-foreground": "oklch(0.08 0.01 110)",
-      "sidebar-accent": "oklch(0.20 0.01 110)",
-      "sidebar-accent-foreground": "oklch(0.92 0.01 100)",
-      "sidebar-border": "oklch(1 0 0 / 10%)",
-      "sidebar-ring": "oklch(0.78 0.20 140)",
-      "surface-rail": "oklch(0.12 0.01 110)",
-      "surface-sidebar": "oklch(0.15 0.01 110)",
-      "surface-ground": "oklch(0.18 0.01 110)",
-      "surface-elevated": "oklch(0.22 0.01 110)",
-      "surface-overlay": "oklch(0.10 0.01 110 / 95%)",
-      "border-subtle": "oklch(1 0 0 / 5%)",
-      "border-default": "oklch(1 0 0 / 10%)",
-      "border-strong": "oklch(1 0 0 / 18%)",
-      "text-primary": "oklch(0.92 0.01 100)",
-      "text-secondary": "oklch(0.80 0.02 110)",
-      "text-muted": "oklch(0.65 0.02 110)",
-      "text-inverse": "oklch(0.12 0.01 110)",
-      "accent-hover": "oklch(0.84 0.21 140)",
-      "accent-fg": "oklch(0.08 0.01 110)",
-      "accent-muted": "oklch(0.78 0.20 140 / 18%)",
-      "hover-bg": "oklch(1 0 0 / 6%)",
-      "hover-bg-strong": "oklch(1 0 0 / 12%)",
-      "input-bg": "oklch(0.16 0.01 110)",
-      "input-placeholder": "oklch(0.55 0.02 110)",
-      "input-ring": "oklch(0.78 0.20 140)",
-      interactive: "oklch(0.22 0.01 110)",
-      "interactive-hover": "oklch(0.28 0.01 110)",
-      "interactive-active": "oklch(0.35 0.01 110)",
-      "status-online": "oklch(0.78 0.20 140)",
-      "status-idle": "oklch(0.82 0.18 85)",
-      "status-dnd": "oklch(0.65 0.20 20)",
-      "status-offline": "oklch(0.55 0.02 110)",
-      success: "oklch(0.72 0.20 145)",
-      warning: "oklch(0.82 0.18 85)",
-      info: "oklch(0.68 0.14 250)",
-    }),
-  },
+    // ── 9. Solarized 暖阳 ────────────────────────────────────────────────────────
+    {
+        id: "solarized-light",
+        name: "Solarized 暖阳",
+        description: "经典 Solarized 浅色护眼主题",
+        preview: {bg: "#FDF6E3", fg: "#657B83", accent: "#268BD2"},
+        vars: light({
+            background: "oklch(0.98 0.022 95)",   // #FDF6E3
+            foreground: "oklch(0.47 0.035 205)",  // #657B83
+            card: "oklch(0.96 0.020 95)",
+            "card-foreground": "oklch(0.47 0.035 205)",
+            popover: "oklch(0.99 0.012 95)",
+            "popover-foreground": "oklch(0.47 0.035 205)",
+            primary: "oklch(0.52 0.22 250)",   // #268BD2 blue
+            "primary-foreground": "oklch(0.98 0.022 95)",
+            secondary: "oklch(0.93 0.018 100)",
+            "secondary-foreground": "oklch(0.47 0.035 205)",
+            muted: "oklch(0.93 0.018 100)",
+            "muted-foreground": "oklch(0.60 0.020 200)",
+            accent: "oklch(0.52 0.22 250)",
+            "accent-foreground": "oklch(0.98 0.022 95)",
+            destructive: "oklch(0.52 0.20 20)",    // #DC322F red
+            border: "oklch(0.86 0.018 95)",
+            input: "oklch(0.91 0.018 95)",
+            ring: "oklch(0.52 0.22 250)",
+            sidebar: "oklch(0.95 0.020 95)",
+            "sidebar-foreground": "oklch(0.42 0.035 205)",
+            "sidebar-primary": "oklch(0.52 0.22 250)",
+            "sidebar-primary-foreground": "oklch(0.98 0.022 95)",
+            "sidebar-accent": "oklch(0.91 0.018 100)",
+            "sidebar-accent-foreground": "oklch(0.42 0.035 205)",
+            "sidebar-border": "oklch(0.83 0.018 95)",
+            "sidebar-ring": "oklch(0.52 0.22 250)",
+            "surface-rail": "oklch(0.94 0.020 95)",
+            "surface-sidebar": "oklch(0.96 0.020 95)",
+            "surface-ground": "oklch(0.98 0.022 95)",
+            "surface-overlay": "oklch(0.96 0.018 95 / 95%)",
+            "border-subtle": "oklch(0.88 0.018 95 / 50%)",
+            "border-default": "oklch(0.86 0.018 95)",
+            "border-strong": "oklch(0.74 0.018 95)",
+            "text-primary": "oklch(0.47 0.035 205)",
+            "text-secondary": "oklch(0.57 0.028 205)",
+            "text-muted": "oklch(0.65 0.018 200)",
+            "text-inverse": "oklch(0.98 0.022 95)",
+            "accent-hover": "oklch(0.45 0.22 250)",
+            "accent-fg": "oklch(0.98 0.022 95)",
+            "accent-muted": "oklch(0.52 0.22 250 / 15%)",
+            "hover-bg": "oklch(0.93 0.018 95 / 70%)",
+            "hover-bg-strong": "oklch(0.89 0.018 95)",
+            "input-bg": "oklch(0.99 0.010 95)",
+            "input-placeholder": "oklch(0.62 0.018 200)",
+            "input-ring": "oklch(0.52 0.22 250)",
+            interactive: "oklch(0.94 0.018 100)",
+            "interactive-hover": "oklch(0.88 0.018 100)",
+            "interactive-active": "oklch(0.82 0.018 100)",
+            "status-online": "oklch(0.55 0.16 155)",        // #859900 green
+            "status-idle": "oklch(0.68 0.15 80)",
+            "status-dnd": "oklch(0.52 0.20 20)",
+            success: "oklch(0.55 0.16 155)",
+            warning: "oklch(0.68 0.15 80)",
+            info: "oklch(0.52 0.22 250)",
+            // Solarized chart: the 8 accent colors
+            "chart-1": "oklch(0.52 0.22 250)",   // blue
+            "chart-2": "oklch(0.55 0.16 155)",   // green
+            "chart-3": "oklch(0.68 0.15 80)",    // yellow
+            "chart-4": "oklch(0.65 0.18 50)",    // orange
+            "chart-5": "oklch(0.62 0.18 310)",   // violet
+        }),
+        varsDark: dark({
+            background: "oklch(0.22 0.042 200)",  // #002B36 base03
+            foreground: "oklch(0.78 0.025 200)",  // #839496 base0
+            card: "oklch(0.26 0.035 200)",  // #073642 base02
+            "card-foreground": "oklch(0.78 0.025 200)",
+            popover: "oklch(0.20 0.040 200)",
+            "popover-foreground": "oklch(0.78 0.025 200)",
+            primary: "oklch(0.55 0.22 250)",
+            "primary-foreground": "oklch(0.22 0.042 200)",
+            secondary: "oklch(0.30 0.032 200)",
+            "secondary-foreground": "oklch(0.78 0.025 200)",
+            muted: "oklch(0.30 0.032 200)",
+            "muted-foreground": "oklch(0.58 0.020 200)",
+            accent: "oklch(0.55 0.22 250)",
+            "accent-foreground": "oklch(0.22 0.042 200)",
+            destructive: "oklch(0.58 0.20 20)",
+            border: "oklch(1 0 0 / 10%)",
+            input: "oklch(0.26 0.035 200)",
+            ring: "oklch(0.55 0.22 250)",
+            sidebar: "oklch(0.17 0.040 200)",
+            "sidebar-foreground": "oklch(0.78 0.025 200)",
+            "sidebar-primary": "oklch(0.55 0.22 250)",
+            "sidebar-primary-foreground": "oklch(0.22 0.042 200)",
+            "sidebar-accent": "oklch(0.26 0.035 200)",
+            "sidebar-accent-foreground": "oklch(0.78 0.025 200)",
+            "sidebar-border": "oklch(1 0 0 / 7%)",
+            "sidebar-ring": "oklch(0.55 0.22 250)",
+            "surface-rail": "oklch(0.15 0.042 200)",
+            "surface-sidebar": "oklch(0.18 0.040 200)",
+            "surface-ground": "oklch(0.22 0.042 200)",
+            "surface-elevated": "oklch(0.26 0.035 200)",
+            "surface-overlay": "oklch(0.14 0.040 200 / 95%)",
+            "border-subtle": "oklch(1 0 0 / 5%)",
+            "border-default": "oklch(1 0 0 / 10%)",
+            "border-strong": "oklch(1 0 0 / 18%)",
+            "text-primary": "oklch(0.78 0.025 200)",
+            "text-secondary": "oklch(0.65 0.020 200)",
+            "text-muted": "oklch(0.55 0.018 200)",
+            "text-inverse": "oklch(0.22 0.042 200)",
+            "accent-hover": "oklch(0.60 0.22 250)",
+            "accent-fg": "oklch(0.22 0.042 200)",
+            "accent-muted": "oklch(0.55 0.22 250 / 20%)",
+            "hover-bg": "oklch(1 0 0 / 5%)",
+            "hover-bg-strong": "oklch(1 0 0 / 10%)",
+            "input-bg": "oklch(0.20 0.040 200)",
+            "input-placeholder": "oklch(0.50 0.018 200)",
+            "input-ring": "oklch(0.55 0.22 250)",
+            interactive: "oklch(0.28 0.032 200)",
+            "interactive-hover": "oklch(0.34 0.030 200)",
+            "interactive-active": "oklch(0.40 0.028 200)",
+            "status-online": "oklch(0.65 0.16 155)",
+            success: "oklch(0.65 0.16 155)",
+            warning: "oklch(0.75 0.15 85)",
+            info: "oklch(0.55 0.22 250)",
+            "chart-1": "oklch(0.55 0.22 250)",
+            "chart-2": "oklch(0.65 0.16 155)",
+            "chart-3": "oklch(0.75 0.15 80)",
+            "chart-4": "oklch(0.70 0.17 50)",
+            "chart-5": "oklch(0.65 0.18 310)",
+        }),
+    },
+
+    // ── 10. Monokai 霓虹 ─────────────────────────────────────────────────────────
+    {
+        id: "monokai",
+        name: "Monokai 霓虹",
+        description: "Monokai 风格高饱和度暗色主题（常驻深色）",
+        preview: {bg: "#272822", fg: "#F8F8F2", accent: "#A6E22E"},
+        vars: dark({
+            background: "oklch(0.18 0.012 110)",  // #272822
+            foreground: "oklch(0.97 0.008 95)",   // #F8F8F2
+            card: "oklch(0.22 0.010 110)",  // #3E3D32
+            "card-foreground": "oklch(0.97 0.008 95)",
+            popover: "oklch(0.18 0.012 110)",
+            "popover-foreground": "oklch(0.97 0.008 95)",
+            primary: "oklch(0.78 0.20 140)",   // #A6E22E green
+            "primary-foreground": "oklch(0.10 0.012 110)",
+            secondary: "oklch(0.25 0.010 110)",
+            "secondary-foreground": "oklch(0.97 0.008 95)",
+            muted: "oklch(0.25 0.010 110)",
+            "muted-foreground": "oklch(0.64 0.018 110)",
+            accent: "oklch(0.78 0.20 140)",
+            "accent-foreground": "oklch(0.10 0.012 110)",
+            destructive: "oklch(0.62 0.22 20)",    // #F92672 red-pink
+            border: "oklch(1 0 0 / 10%)",
+            input: "oklch(0.16 0.012 110)",
+            ring: "oklch(0.78 0.20 140)",
+            sidebar: "oklch(0.14 0.012 110)",
+            "sidebar-foreground": "oklch(0.97 0.008 95)",
+            "sidebar-primary": "oklch(0.78 0.20 140)",
+            "sidebar-primary-foreground": "oklch(0.08 0.012 110)",
+            "sidebar-accent": "oklch(0.20 0.010 110)",
+            "sidebar-accent-foreground": "oklch(0.97 0.008 95)",
+            "sidebar-border": "oklch(1 0 0 / 8%)",
+            "sidebar-ring": "oklch(0.78 0.20 140)",
+            "surface-rail": "oklch(0.12 0.012 110)",
+            "surface-sidebar": "oklch(0.15 0.012 110)",
+            "surface-ground": "oklch(0.18 0.012 110)",
+            "surface-elevated": "oklch(0.22 0.010 110)",
+            "surface-overlay": "oklch(0.10 0.012 110 / 95%)",
+            "border-subtle": "oklch(1 0 0 / 5%)",
+            "border-default": "oklch(1 0 0 / 10%)",
+            "border-strong": "oklch(1 0 0 / 18%)",
+            "text-primary": "oklch(0.97 0.008 95)",
+            "text-secondary": "oklch(0.82 0.014 110)",
+            "text-muted": "oklch(0.64 0.018 110)",
+            "text-inverse": "oklch(0.12 0.012 110)",
+            "accent-hover": "oklch(0.84 0.21 140)",
+            "accent-fg": "oklch(0.08 0.012 110)",
+            "accent-muted": "oklch(0.78 0.20 140 / 18%)",
+            "hover-bg": "oklch(1 0 0 / 5%)",
+            "hover-bg-strong": "oklch(1 0 0 / 10%)",
+            "input-bg": "oklch(0.16 0.012 110)",
+            "input-placeholder": "oklch(0.55 0.018 110)",
+            "input-ring": "oklch(0.78 0.20 140)",
+            interactive: "oklch(0.22 0.010 110)",
+            "interactive-hover": "oklch(0.27 0.010 110)",
+            "interactive-active": "oklch(0.34 0.010 110)",
+            "status-online": "oklch(0.78 0.20 140)",         // green
+            "status-idle": "oklch(0.82 0.18 85)",          // yellow #E6DB74
+            "status-dnd": "oklch(0.62 0.22 20)",
+            success: "oklch(0.78 0.20 140)",
+            warning: "oklch(0.82 0.18 85)",
+            info: "oklch(0.72 0.18 220)",          // #66D9E8 cyan
+            // Monokai chart: canonical syntax colors
+            "chart-1": "oklch(0.78 0.20 140)",   // green   #A6E22E
+            "chart-2": "oklch(0.72 0.18 220)",   // cyan    #66D9E8
+            "chart-3": "oklch(0.82 0.18 85)",    // yellow  #E6DB74
+            "chart-4": "oklch(0.62 0.22 20)",    // red     #F92672
+            "chart-5": "oklch(0.72 0.18 290)",   // purple  #AE81FF
+        }),
+        get varsDark() {
+            return this.vars;
+        },
+    },
 ];
 
+
 export function getPreset(id: string): ThemePreset | undefined {
-  return PRESETS.find((p) => p.id === id);
+    return PRESETS.find((p) => p.id === id);
 }
 
-export function getAllPresets(): ThemePreset[] {
-  return PRESETS;
-}
+export function getAllPresets(): readonly ThemePreset[] {
+    return PRESETS;
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index d2b8500..23e5dab 100644
--- a/src/index.css
+++ b/src/index.css
@@ -55,71 +55,71 @@
 
 :root {
     --background: oklch(1 0 0);
-    --foreground: oklch(0.13 0 0);
+    --foreground: oklch(0.145 0 0);
     --card: oklch(1 0 0);
-    --card-foreground: oklch(0.13 0 0);
+    --card-foreground: oklch(0.145 0 0);
     --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.13 0 0);
-    --primary: oklch(0.13 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
     --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.96 0 0);
-    --secondary-foreground: oklch(0.13 0 0);
-    --muted: oklch(0.96 0 0);
-    --muted-foreground: oklch(0.45 0 0);
-    --accent: oklch(0.92 0 0);
-    --accent-foreground: oklch(0.13 0 0);
-    --destructive: oklch(0.55 0.22 25);
-    --border: oklch(0.88 0 0);
-    --input: oklch(0.95 0 0);
-    --ring: oklch(0.50 0 0);
-    --chart-1: oklch(0.45 0 0);
-    --chart-2: oklch(0.35 0 0);
-    --chart-3: oklch(0.25 0 0);
-    --chart-4: oklch(0.18 0 0);
-    --chart-5: oklch(0.12 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
     --radius: 0.625rem;
-    --sidebar: oklch(0.98 0 0);
-    --sidebar-foreground: oklch(0.13 0 0);
-    --sidebar-primary: oklch(0.20 0 0);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
     --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.95 0 0);
-    --sidebar-accent-foreground: oklch(0.13 0 0);
-    --sidebar-border: oklch(0.90 0 0);
-    --sidebar-ring: oklch(0.50 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
 }
 
 .dark {
-    --background: oklch(0.13 0 0);
+    --background: oklch(0.145 0 0);
     --foreground: oklch(0.985 0 0);
-    --card: oklch(0.18 0 0);
+    --card: oklch(0.205 0 0);
     --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.18 0 0);
+    --popover: oklch(0.205 0 0);
     --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.75 0 0);
-    --primary-foreground: oklch(0.13 0 0);
-    --secondary: oklch(0.25 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
     --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.28 0 0);
-    --muted-foreground: oklch(0.65 0 0);
-    --accent: oklch(0.25 0 0);
-    --accent-foreground: oklch(0.20 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.90 0 0);
-    --input: oklch(0.92 0 0);
-    --ring: oklch(0.55 0 0);
-    --chart-1: oklch(0.50 0 0);
-    --chart-2: oklch(0.40 0 0);
-    --chart-3: oklch(0.30 0 0);
-    --chart-4: oklch(0.20 0 0);
-    --chart-5: oklch(0.10 0 0);
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.13 0 0);
-    --sidebar-primary: oklch(0.25 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
     --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.20 0 0);
-    --sidebar-border: oklch(0.92 0 0);
-    --sidebar-ring: oklch(0.55 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
 }
 
 /* ─────────────────────────────────────────────
@@ -362,4 +362,4 @@
   --tw-prose-pre-bg:     var(--surface-elevated);
   --tw-prose-th-borders: var(--border-default);
   --tw-prose-td-borders: var(--border-subtle);
-}
+}
\ No newline at end of file
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 2e25356..cb19003 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -5,29 +5,23 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
-/**
- * Strips basic markdown syntax from a string.
- */
-export function stripMarkdown(text: string): string {
-  if (!text) return "";
-  return text
-    .replace(/^#+\s+/gm, "") // Headings
-    .replace(/(\*\*|__)(.*?)\1/g, "$2") // Bold
-    .replace(/(\*|_)(.*?)\1/g, "$2") // Italic
-    .replace(/\[(.*?)\]\(.*?\)/g, "$1") // Links
-    .replace(/`{1,3}(.*?)`{1,3}/g, "$1") // Code
-    .replace(/^[*-]\s+/gm, "") // List items
-    .replace(/^\s*>\s+/gm, "") // Blockquotes
-    .replace(/\|.*?\|/g, "") // Table cells
-    .replace(/[-:]{3,}/g, "") // Table dividers
-    .replace(/\n+/g, " ") // Newlines to spaces
-    .trim();
+export function truncate(text: string, maxLen: number): string {
+  if (text.length <= maxLen) return text;
+  return text.slice(0, maxLen).trimEnd() + "…";
 }
 
-/**
- * Truncates a string to a maximum length and adds an ellipsis.
- */
-export function truncate(text: string, maxLength: number): string {
-  if (!text || text.length <= maxLength) return text;
-  return text.substring(0, maxLength).trim() + "...";
+export function stripMarkdown(text: string): string {
+  return text
+    .replace(/#{1,6}\s+/g, "")
+    .replace(/(\*\*|__)(.*?)\1/g, "$2")
+    .replace(/(\*|_)(.*?)\1/g, "$2")
+    .replace(/~~(.*?)~~/g, "$1")
+    .replace(/`{1,3}[^`]*`{1,3}/g, "")
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+    .replace(/!\[[^\]]*\]\([^)]+\)/g, "")
+    .replace(/>\s+/g, "")
+    .replace(/^[-*+]\s+/gm, "")
+    .replace(/^\d+\.\s+/gm, "")
+    .replace(/\n{2,}/g, " ")
+    .trim();
 }