From 7f753bf6d77fd342c1977bb0c8c701663d5d313f Mon Sep 17 00:00:00 2001 From: Steven Date: Mon, 2 Mar 2026 09:30:57 +0800 Subject: [PATCH] refactor(theme): consolidate theme system and polish dark mode colors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Reduce themes from 6 to 4: system, light, dark, paper - Remove midnight (too similar to dark) and whitewall (too similar to light) - Drop all unused tokens: chart-*, sidebar-primary, sidebar-border, sidebar-ring, shadow-2xs, tracking-normal, spacing - Remove redundant @theme inline blocks from dynamic theme files (Tailwind only processes them at compile time, not at runtime) - Move shared tokens (fonts, radius) to default.css only - Polish dark mode color palette - Consistent cool-slate hue (h265) across all surfaces - Proper surface layering: sidebar(0.07) → bg(0.09) → card(0.13) → popover(0.17) → secondary(0.19) → muted(0.21) → accent(0.22) - Foreground softened to 0.82 (from 0.9) — comfortable off-white - Accent more chromatic than muted (0.012 vs 0.008) — hover feels interactive - Popover elevated above card (0.17 vs 0.13) — floating elements visible - Destructive more vivid (0.62/c0.20) — clearly red on dark surfaces - Input border (0.25) more distinct than layout border (0.21) - Sidebar foreground (0.68) dimmer than content foreground (0.82) - Fix inline code background invisible in dark mode (#5674) - Muted was same lightness as card — increased to 0.21 for clear contrast --- web/src/components/ThemeSelect.tsx | 4 +- web/src/themes/default-dark.css | 142 +++++++++-------------------- web/src/themes/default.css | 28 +----- web/src/themes/midnight.css | 100 -------------------- web/src/themes/paper.css | 71 --------------- web/src/themes/whitewall.css | 103 --------------------- web/src/types/modules/setting.d.ts | 2 +- web/src/utils/theme.ts | 8 +- 8 files changed, 48 insertions(+), 410 deletions(-) delete mode 100644 web/src/themes/midnight.css delete mode 100644 web/src/themes/whitewall.css diff --git a/web/src/components/ThemeSelect.tsx b/web/src/components/ThemeSelect.tsx index 7b9b4bbf1..6d7794ef2 100644 --- a/web/src/components/ThemeSelect.tsx +++ b/web/src/components/ThemeSelect.tsx @@ -1,4 +1,4 @@ -import { Monitor, Moon, MoonStar, Palette, Sun, Wallpaper } from "lucide-react"; +import { Monitor, Moon, Palette, Sun } from "lucide-react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { loadTheme, THEME_OPTIONS } from "@/utils/theme"; @@ -12,9 +12,7 @@ const THEME_ICONS: Record = { system: , default: , "default-dark": , - midnight: , paper: , - whitewall: , }; const ThemeSelect = ({ value, onValueChange, className }: ThemeSelectProps = {}) => { diff --git a/web/src/themes/default-dark.css b/web/src/themes/default-dark.css index e0943ca71..9f47a7093 100644 --- a/web/src/themes/default-dark.css +++ b/web/src/themes/default-dark.css @@ -1,103 +1,43 @@ :root { - --background: oklch(0.1 0.003 270); - --foreground: oklch(0.9 0.003 270); - --card: oklch(0.15 0.003 270); - --card-foreground: oklch(0.9 0.003 270); - --popover: oklch(0.15 0.003 270); - --popover-foreground: oklch(0.9 0.003 270); - --primary: oklch(0.58 0.12 250); - --primary-foreground: oklch(0.98 0.003 270); - --secondary: oklch(0.2 0.005 270); - --secondary-foreground: oklch(0.9 0.003 270); - --muted: oklch(0.16 0.005 270); - --muted-foreground: oklch(0.58 0.003 270); - --accent: oklch(0.22 0.008 270); - --accent-foreground: oklch(0.9 0.003 270); - --destructive: oklch(0.55 0.15 25); - --destructive-foreground: oklch(0.98 0.003 270); - --border: oklch(0.22 0.005 270); - --input: oklch(0.22 0.008 270); - --ring: oklch(0.58 0.12 250); - --chart-1: oklch(0.65 0.12 30); - --chart-2: oklch(0.65 0.12 260); - --chart-3: oklch(0.58 0.1 120); - --chart-4: oklch(0.62 0.12 300); - --chart-5: oklch(0.7 0.15 60); - --sidebar: oklch(0.12 0.002 270); - --sidebar-foreground: oklch(0.85 0.003 270); - --sidebar-primary: oklch(0.58 0.12 250); - --sidebar-primary-foreground: oklch(0.98 0.003 270); - --sidebar-accent: oklch(0.22 0.008 270); - --sidebar-accent-foreground: oklch(0.9 0.003 270); - --sidebar-border: oklch(0.22 0.005 270); - --sidebar-ring: oklch(0.58 0.12 250); - --font-sans: - ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --radius: 0.5rem; - --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); - --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); - --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); - --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); - --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1); - --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1); - --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1); - --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25); - --tracking-normal: 0em; - --spacing: 0.25rem; -} - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --color-card: var(--card); - --color-card-foreground: var(--card-foreground); - --color-popover: var(--popover); - --color-popover-foreground: var(--popover-foreground); - --color-primary: var(--primary); - --color-primary-foreground: var(--primary-foreground); - --color-secondary: var(--secondary); - --color-secondary-foreground: var(--secondary-foreground); - --color-muted: var(--muted); - --color-muted-foreground: var(--muted-foreground); - --color-accent: var(--accent); - --color-accent-foreground: var(--accent-foreground); - --color-destructive: var(--destructive); - --color-destructive-foreground: var(--destructive-foreground); - --color-border: var(--border); - --color-input: var(--input); - --color-ring: var(--ring); - --color-chart-1: var(--chart-1); - --color-chart-2: var(--chart-2); - --color-chart-3: var(--chart-3); - --color-chart-4: var(--chart-4); - --color-chart-5: var(--chart-5); - --color-sidebar: var(--sidebar); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-ring: var(--sidebar-ring); - - --font-sans: var(--font-sans); - --font-mono: var(--font-mono); - --font-serif: var(--font-serif); - - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - - --shadow-2xs: var(--shadow-2xs); - --shadow-xs: var(--shadow-xs); - --shadow-sm: var(--shadow-sm); - --shadow: var(--shadow); - --shadow-md: var(--shadow-md); - --shadow-lg: var(--shadow-lg); - --shadow-xl: var(--shadow-xl); - --shadow-2xl: var(--shadow-2xl); + /* Surfaces — layered from darkest to lightest, consistent cool-slate tint */ + --background: oklch(0.09 0.006 265); + --foreground: oklch(0.82 0.005 265); + + --card: oklch(0.13 0.006 265); + --card-foreground: oklch(0.82 0.005 265); + + /* Popovers float above cards — slightly lighter to appear elevated */ + --popover: oklch(0.17 0.006 265); + --popover-foreground: oklch(0.82 0.005 265); + + /* Primary — bright blue, clearly interactive in dark context */ + --primary: oklch(0.65 0.15 250); + --primary-foreground: oklch(0.98 0.003 265); + + /* Secondary — subtle elevated surface for secondary buttons */ + --secondary: oklch(0.19 0.007 265); + --secondary-foreground: oklch(0.82 0.005 265); + + /* Muted — inline backgrounds (code, skeletons, error panels) */ + --muted: oklch(0.21 0.008 265); + --muted-foreground: oklch(0.56 0.005 265); + + /* Accent — hover states, slightly more chromatic than muted to feel interactive */ + --accent: oklch(0.22 0.012 265); + --accent-foreground: oklch(0.88 0.005 265); + + /* Destructive — vivid red, clearly visible on dark surfaces */ + --destructive: oklch(0.62 0.2 22); + --destructive-foreground: oklch(0.98 0.003 265); + + /* Borders — --border for layout dividers, --input for form field borders */ + --border: oklch(0.21 0.007 265); + --input: oklch(0.25 0.007 265); + --ring: oklch(0.65 0.15 250); + + /* Sidebar — darkest surface, distinct from background */ + --sidebar: oklch(0.07 0.005 265); + --sidebar-foreground: oklch(0.68 0.005 265); + --sidebar-accent: oklch(0.19 0.01 265); + --sidebar-accent-foreground: oklch(0.84 0.005 265); } diff --git a/web/src/themes/default.css b/web/src/themes/default.css index 59f120819..670d2517a 100644 --- a/web/src/themes/default.css +++ b/web/src/themes/default.css @@ -13,31 +13,21 @@ --muted-foreground: oklch(0.5559 0.0075 97.4233); --accent: oklch(0.9245 0.0138 92.9892); --accent-foreground: oklch(0.2671 0.0196 98.939); - --destructive: oklch(0.35 0.02 250); - --destructive-foreground: oklch(0.95 0.005 250); + --destructive: oklch(0.5 0.12 25); + --destructive-foreground: oklch(1 0 0); --border: oklch(0.8847 0.0069 97.3627); --input: oklch(0.7621 0.0156 98.3528); --ring: oklch(0.45 0.08 250); - --chart-1: oklch(0.5583 0.1276 42.9956); - --chart-2: oklch(0.6898 0.1581 290.4107); - --chart-3: oklch(0.8816 0.0276 93.128); - --chart-4: oklch(0.8822 0.0403 298.1792); - --chart-5: oklch(0.5608 0.1348 42.0584); --sidebar: oklch(0.9663 0.008 98.8792); --sidebar-foreground: oklch(0.359 0.0051 106.6524); - --sidebar-primary: oklch(0.45 0.08 250); - --sidebar-primary-foreground: oklch(0.9818 0.0054 95.0986); --sidebar-accent: oklch(0.9245 0.0138 92.9892); --sidebar-accent-foreground: oklch(0.325 0 0); - --sidebar-border: oklch(0.9401 0 0); - --sidebar-ring: oklch(0.7731 0 0); --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --radius: 0.5rem; - --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); @@ -45,10 +35,10 @@ --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1); --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1); --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25); - --tracking-normal: 0em; - --spacing: 0.25rem; } +/* Tailwind v4 token mappings — compiled once at build time, shared by all themes. + Dynamic theme files only need to override :root variables; this block covers all of them. */ @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); @@ -69,19 +59,10 @@ --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); - --color-chart-1: var(--chart-1); - --color-chart-2: var(--chart-2); - --color-chart-3: var(--chart-3); - --color-chart-4: var(--chart-4); - --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-ring: var(--sidebar-ring); --font-sans: var(--font-sans); --font-mono: var(--font-mono); @@ -92,7 +73,6 @@ --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); - --shadow-2xs: var(--shadow-2xs); --shadow-xs: var(--shadow-xs); --shadow-sm: var(--shadow-sm); --shadow: var(--shadow); diff --git a/web/src/themes/midnight.css b/web/src/themes/midnight.css deleted file mode 100644 index 0739fe2e3..000000000 --- a/web/src/themes/midnight.css +++ /dev/null @@ -1,100 +0,0 @@ -:root { - --background: oklch(0.14 0.003 270); - --foreground: oklch(0.92 0.003 270); - --card: oklch(0.18 0.003 270); - --card-foreground: oklch(0.92 0.003 270); - --popover: oklch(0.18 0.003 270); - --popover-foreground: oklch(0.9 0.003 270); - --primary: oklch(0.7 0.08 290); - --primary-foreground: oklch(0.14 0.003 270); - --secondary: oklch(0.2 0.005 290); - --secondary-foreground: oklch(0.88 0.003 270); - --muted: oklch(0.18 0.005 270); - --muted-foreground: oklch(0.7 0.003 270); - --accent: oklch(0.22 0.008 295); - --accent-foreground: oklch(0.92 0.003 270); - --destructive: oklch(0.55 0.1 25); - --destructive-foreground: oklch(0.95 0.005 270); - --border: oklch(0.25 0.005 270); - --input: oklch(0.3 0.008 270); - --ring: oklch(0.7 0.08 290); - --chart-1: oklch(0.7 0.12 295); - --chart-2: oklch(0.7 0.12 285); - --chart-3: oklch(0.64 0.1 300); - --chart-4: oklch(0.68 0.12 295); - --chart-5: oklch(0.75 0.15 305); - --sidebar: oklch(0.13 0.002 270); - --sidebar-foreground: oklch(0.92 0.003 270); - --sidebar-primary: oklch(0.7 0.08 290); - --sidebar-primary-foreground: oklch(0.14 0.003 270); - --sidebar-accent: oklch(0.22 0.008 295); - --sidebar-accent-foreground: oklch(0.92 0.003 270); - --sidebar-border: oklch(0.25 0.005 270); - --sidebar-ring: oklch(0.7 0.08 290); - --font-sans: - ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --radius: 0.5rem; - --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); - --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); - --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); - --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1); - --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1); - --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1); - --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1); - --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25); - --tracking-normal: 0em; - --spacing: 0.25rem; -} - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --color-card: var(--card); - --color-card-foreground: var(--card-foreground); - --color-popover: var(--popover); - --color-popover-foreground: var(--popover-foreground); - --color-primary: var(--primary); - --color-primary-foreground: var(--primary-foreground); - --color-secondary: var(--secondary); - --color-secondary-foreground: var(--secondary-foreground); - --color-muted: var(--muted); - --color-muted-foreground: var(--muted-foreground); - --color-accent: var(--accent); - --color-accent-foreground: var(--accent-foreground); - --color-destructive: var(--destructive); - --color-destructive-foreground: var(--destructive-foreground); - --color-border: var(--border); - --color-input: var(--input); - --color-ring: var(--ring); - --color-chart-1: var(--chart-1); - --color-chart-2: var(--chart-2); - --color-chart-3: var(--chart-3); - --color-chart-4: var(--chart-4); - --color-chart-5: var(--chart-5); - --color-sidebar: var(--sidebar); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-ring: var(--sidebar-ring); - --font-sans: var(--font-sans); - --font-mono: var(--font-mono); - --font-serif: var(--font-serif); - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - --shadow-2xs: var(--shadow-2xs); - --shadow-xs: var(--shadow-xs); - --shadow-sm: var(--shadow-sm); - --shadow: var(--shadow); - --shadow-md: var(--shadow-md); - --shadow-lg: var(--shadow-lg); - --shadow-xl: var(--shadow-xl); - --shadow-2xl: var(--shadow-2xl); -} diff --git a/web/src/themes/paper.css b/web/src/themes/paper.css index 5cc54d84a..b57f97e40 100644 --- a/web/src/themes/paper.css +++ b/web/src/themes/paper.css @@ -18,26 +18,10 @@ --border: oklch(0.85 0.025 72); --input: oklch(0.8 0.03 75); --ring: oklch(0.45 0.08 45); - --chart-1: oklch(0.5686 0.0549 42.7834); - --chart-2: oklch(0.6275 0.0392 85.6723); - --chart-3: oklch(0.7843 0.0235 78.9456); - --chart-4: oklch(0.7451 0.0314 68.2341); - --chart-5: oklch(0.5412 0.0431 55.8934); --sidebar: oklch(0.9647 0.0118 83.7892); --sidebar-foreground: oklch(0.2941 0.0196 67.6524); - --sidebar-primary: oklch(0.4627 0.0471 52.3674); - --sidebar-primary-foreground: oklch(0.9765 0.0086 85.8732); --sidebar-accent: oklch(0.9412 0.0196 78.9456); --sidebar-accent-foreground: oklch(0.2647 0.0157 71.2341); - --sidebar-border: oklch(0.9294 0.0137 80.5674); - --sidebar-ring: oklch(0.7647 0.0235 75.8934); - --font-sans: - ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --radius: 0.5rem; - --shadow-2xs: 0 1px 3px 0px hsl(34 12% 15% / 0.04); --shadow-xs: 0 1px 3px 0px hsl(34 12% 15% / 0.04); --shadow-sm: 0 1px 3px 0px hsl(34 12% 15% / 0.08), 0 1px 2px -1px hsl(34 12% 15% / 0.08); --shadow: 0 1px 3px 0px hsl(34 12% 15% / 0.08), 0 1px 2px -1px hsl(34 12% 15% / 0.08); @@ -45,59 +29,4 @@ --shadow-lg: 0 1px 3px 0px hsl(34 12% 15% / 0.08), 0 4px 6px -1px hsl(34 12% 15% / 0.08); --shadow-xl: 0 1px 3px 0px hsl(34 12% 15% / 0.08), 0 8px 10px -1px hsl(34 12% 15% / 0.08); --shadow-2xl: 0 1px 3px 0px hsl(34 12% 15% / 0.18); - --tracking-normal: 0em; - --spacing: 0.25rem; -} - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --color-card: var(--card); - --color-card-foreground: var(--card-foreground); - --color-popover: var(--popover); - --color-popover-foreground: var(--popover-foreground); - --color-primary: var(--primary); - --color-primary-foreground: var(--primary-foreground); - --color-secondary: var(--secondary); - --color-secondary-foreground: var(--secondary-foreground); - --color-muted: var(--muted); - --color-muted-foreground: var(--muted-foreground); - --color-accent: var(--accent); - --color-accent-foreground: var(--accent-foreground); - --color-destructive: var(--destructive); - --color-destructive-foreground: var(--destructive-foreground); - --color-border: var(--border); - --color-input: var(--input); - --color-ring: var(--ring); - --color-chart-1: var(--chart-1); - --color-chart-2: var(--chart-2); - --color-chart-3: var(--chart-3); - --color-chart-4: var(--chart-4); - --color-chart-5: var(--chart-5); - --color-sidebar: var(--sidebar); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-ring: var(--sidebar-ring); - - --font-sans: var(--font-sans); - --font-mono: var(--font-mono); - --font-serif: var(--font-serif); - - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - - --shadow-2xs: var(--shadow-2xs); - --shadow-xs: var(--shadow-xs); - --shadow-sm: var(--shadow-sm); - --shadow: var(--shadow); - --shadow-md: var(--shadow-md); - --shadow-lg: var(--shadow-lg); - --shadow-xl: var(--shadow-xl); - --shadow-2xl: var(--shadow-2xl); } diff --git a/web/src/themes/whitewall.css b/web/src/themes/whitewall.css deleted file mode 100644 index c3e255694..000000000 --- a/web/src/themes/whitewall.css +++ /dev/null @@ -1,103 +0,0 @@ -:root { - --background: oklch(1 0 0); - --foreground: oklch(0.15 0.01 270); - --card: oklch(1 0 0); - --card-foreground: oklch(0.15 0.01 270); - --popover: oklch(0.98 0.001 270); - --popover-foreground: oklch(0.15 0.01 270); - --primary: oklch(0.4 0.08 250); - --primary-foreground: oklch(1 0 0); - --secondary: oklch(0.96 0.002 270); - --secondary-foreground: oklch(0.25 0.01 270); - --muted: oklch(0.96 0.002 270); - --muted-foreground: oklch(0.45 0.01 270); - --accent: oklch(0.94 0.003 270); - --accent-foreground: oklch(0.15 0.01 270); - --destructive: oklch(0.5 0.12 25); - --destructive-foreground: oklch(1 0 0); - --border: oklch(0.9 0.005 270); - --input: oklch(0.94 0.003 270); - --ring: oklch(0.4 0.08 250); - --chart-1: oklch(0.6 0.15 30); - --chart-2: oklch(0.6 0.15 260); - --chart-3: oklch(0.7 0.1 120); - --chart-4: oklch(0.65 0.12 300); - --chart-5: oklch(0.55 0.18 60); - --sidebar: oklch(0.98 0.001 270); - --sidebar-foreground: oklch(0.2 0.01 270); - --sidebar-primary: oklch(0.4 0.08 250); - --sidebar-primary-foreground: oklch(1 0 0); - --sidebar-accent: oklch(0.94 0.003 270); - --sidebar-accent-foreground: oklch(0.15 0.01 270); - --sidebar-border: oklch(0.9 0.005 270); - --sidebar-ring: oklch(0.4 0.08 250); - --font-sans: - ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --radius: 0.5rem; - --shadow-2xs: 0 1px 3px 0px hsl(240 10% 0% / 0.02); - --shadow-xs: 0 1px 3px 0px hsl(240 10% 0% / 0.03); - --shadow-sm: 0 1px 3px 0px hsl(240 10% 0% / 0.05), 0 1px 2px -1px hsl(240 10% 0% / 0.05); - --shadow: 0 1px 3px 0px hsl(240 10% 0% / 0.06), 0 1px 2px -1px hsl(240 10% 0% / 0.06); - --shadow-md: 0 1px 3px 0px hsl(240 10% 0% / 0.07), 0 2px 4px -1px hsl(240 10% 0% / 0.07); - --shadow-lg: 0 1px 3px 0px hsl(240 10% 0% / 0.08), 0 4px 6px -1px hsl(240 10% 0% / 0.08); - --shadow-xl: 0 1px 3px 0px hsl(240 10% 0% / 0.09), 0 8px 10px -1px hsl(240 10% 0% / 0.09); - --shadow-2xl: 0 1px 3px 0px hsl(240 10% 0% / 0.15); - --tracking-normal: 0em; - --spacing: 0.25rem; -} - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --color-card: var(--card); - --color-card-foreground: var(--card-foreground); - --color-popover: var(--popover); - --color-popover-foreground: var(--popover-foreground); - --color-primary: var(--primary); - --color-primary-foreground: var(--primary-foreground); - --color-secondary: var(--secondary); - --color-secondary-foreground: var(--secondary-foreground); - --color-muted: var(--muted); - --color-muted-foreground: var(--muted-foreground); - --color-accent: var(--accent); - --color-accent-foreground: var(--accent-foreground); - --color-destructive: var(--destructive); - --color-destructive-foreground: var(--destructive-foreground); - --color-border: var(--border); - --color-input: var(--input); - --color-ring: var(--ring); - --color-chart-1: var(--chart-1); - --color-chart-2: var(--chart-2); - --color-chart-3: var(--chart-3); - --color-chart-4: var(--chart-4); - --color-chart-5: var(--chart-5); - --color-sidebar: var(--sidebar); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-ring: var(--sidebar-ring); - - --font-sans: var(--font-sans); - --font-mono: var(--font-mono); - --font-serif: var(--font-serif); - - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - - --shadow-2xs: var(--shadow-2xs); - --shadow-xs: var(--shadow-xs); - --shadow-sm: var(--shadow-sm); - --shadow: var(--shadow); - --shadow-md: var(--shadow-md); - --shadow-lg: var(--shadow-lg); - --shadow-xl: var(--shadow-xl); - --shadow-2xl: var(--shadow-2xl); -} diff --git a/web/src/types/modules/setting.d.ts b/web/src/types/modules/setting.d.ts index 64e9bd2fe..000a0092f 100644 --- a/web/src/types/modules/setting.d.ts +++ b/web/src/types/modules/setting.d.ts @@ -1 +1 @@ -type Theme = "system" | "default" | "default-dark" | "midnight" | "paper" | "whitewall"; +type Theme = "system" | "default" | "default-dark" | "paper"; diff --git a/web/src/utils/theme.ts b/web/src/utils/theme.ts index 4b10bec68..7d3e8cd41 100644 --- a/web/src/utils/theme.ts +++ b/web/src/utils/theme.ts @@ -1,13 +1,11 @@ import defaultDarkThemeContent from "../themes/default-dark.css?raw"; -import midnightThemeContent from "../themes/midnight.css?raw"; import paperThemeContent from "../themes/paper.css?raw"; -import whitewallThemeContent from "../themes/whitewall.css?raw"; // ============================================================================ // Types and Constants // ============================================================================ -const VALID_THEMES = ["system", "default", "default-dark", "midnight", "paper", "whitewall"] as const; +const VALID_THEMES = ["system", "default", "default-dark", "paper"] as const; export type Theme = (typeof VALID_THEMES)[number]; export type ResolvedTheme = Exclude; @@ -23,18 +21,14 @@ const STYLE_ELEMENT_ID = "instance-theme"; const THEME_CONTENT: Record = { default: null, "default-dark": defaultDarkThemeContent, - midnight: midnightThemeContent, paper: paperThemeContent, - whitewall: whitewallThemeContent, }; export const THEME_OPTIONS: ThemeOption[] = [ { value: "system", label: "Sync with system" }, { value: "default", label: "Light" }, { value: "default-dark", label: "Dark" }, - { value: "midnight", label: "Midnight" }, { value: "paper", label: "Paper" }, - { value: "whitewall", label: "Whitewall" }, ]; // ============================================================================