mirror of https://github.com/usememos/memos.git
refactor(theme): consolidate theme system and polish dark mode colors
- 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
This commit is contained in:
Steven
parent
803d488a5f
commit
7f753bf6d7
|
|
@ -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<string, JSX.Element> = {
|
|||
system: <Monitor className="w-4 h-4" />,
|
||||
default: <Sun className="w-4 h-4" />,
|
||||
"default-dark": <Moon className="w-4 h-4" />,
|
||||
midnight: <MoonStar className="w-4 h-4" />,
|
||||
paper: <Palette className="w-4 h-4" />,
|
||||
whitewall: <Wallpaper className="w-4 h-4" />,
|
||||
};
|
||||
|
||||
const ThemeSelect = ({ value, onValueChange, className }: ThemeSelectProps = {}) => {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -1 +1 @@
|
|||
type Theme = "system" | "default" | "default-dark" | "midnight" | "paper" | "whitewall";
|
||||
type Theme = "system" | "default" | "default-dark" | "paper";
|
||||
|
|
|
|||
|
|
@ -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<Theme, "system">;
|
||||
|
|
@ -23,18 +21,14 @@ const STYLE_ELEMENT_ID = "instance-theme";
|
|||
const THEME_CONTENT: Record<ResolvedTheme, string | null> = {
|
||||
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" },
|
||||
];
|
||||
|
||||
// ============================================================================
|
||||
|
|
|
|||
Loading…
Reference in New Issue