themes-v1: 18 preset palettes + Settings picker
Adds 18 preset themes (16 dual-mode + 2 light-only) selectable from
a new /settings route. Persists per-user via the existing key-value
settings table — no schema refactor. Default on first load is
obsidian dark.
Storage: two new seeded keys (theme_id, theme_mode) inserted
idempotently from schema.sql. PATCH /api/settings tightens validation
with a discriminated branch — theme_id must be one of the 18
whitelisted ids, theme_mode ∈ {dark,light,system}, anything else
rejects 400. Other keys pass through the loose record schema.
CSS layer: 18 files in apps/web/src/styles/themes/, each declaring
.theme-<id> (light) and .theme-<id>.dark (dark) — except ivory and
chalk which are light-only. Anchor-to-token mapping per spec §3.
--destructive stays red across all themes. --radius unchanged at
0.625rem (spec parenthetical was about "not per-theme", not a
specific value swap).
Frontend: lib/theme.ts owns THEMES, applyTheme(), setTheme(), and
useTheme() — module-singleton with optimistic PATCH + revert on
failure (mirrors useChatStatus / useSidebar pattern). Settings.tsx
renders a 3-col (md) / 2-col (mobile) grid of shadcn Card swatches
with a Dark/Light/System radio group on top. App.tsx mounts
useTheme() at AppShell top and wires the /settings route.
index.html ships a pre-React FOUC script that reads localStorage
'boocode.theme' and stamps the className on <html> before any
paint. Stripped two pre-existing dark-mode lock-ins (AppShell's
hardcoded 'dark' className and body's neutral-950/100 tailwind
utilities) that would have fought theme tokens.
Light-only + dark request → falls back to obsidian dark in three
places: lib/theme.ts effectiveThemeId(), the FOUC script, and the
picker's "Light only" badge. No inline message; matches spec §8
decision 1.
shadcn primitives card and radio-group installed via shadcn CLI
(no hand-rolling). card.tsx and radio-group.tsx are the only ui/
additions.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,29 @@
|
||||
@import "@fontsource-variable/inter";
|
||||
@import "@fontsource-variable/jetbrains-mono";
|
||||
|
||||
/* themes-v1: 18 preset palettes. Order matches docs/themes_v1.md §1 with
|
||||
obsidian first (default). Each file declares .theme-<id> for the light
|
||||
variant and .theme-<id>.dark for the dark variant (except ivory/chalk
|
||||
which are light-only). lib/theme.ts owns the class composition on <html>. */
|
||||
@import "./themes/obsidian.css";
|
||||
@import "./themes/gunmetal.css";
|
||||
@import "./themes/espresso.css";
|
||||
@import "./themes/volcanic-brown.css";
|
||||
@import "./themes/copper.css";
|
||||
@import "./themes/gold.css";
|
||||
@import "./themes/oxblood.css";
|
||||
@import "./themes/crimson.css";
|
||||
@import "./themes/elderflower.css";
|
||||
@import "./themes/plum.css";
|
||||
@import "./themes/steel-pink.css";
|
||||
@import "./themes/fuchsia-noir.css";
|
||||
@import "./themes/matrix.css";
|
||||
@import "./themes/sage.css";
|
||||
@import "./themes/ivory.css";
|
||||
@import "./themes/chalk.css";
|
||||
@import "./themes/cobalt.css";
|
||||
@import "./themes/midnight-sapphire.css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
|
||||
33
apps/web/src/styles/themes/chalk.css
Normal file
33
apps/web/src/styles/themes/chalk.css
Normal file
@@ -0,0 +1,33 @@
|
||||
/* themes-v1: Chalk (family: light-only).
|
||||
Anchors used directly as light palette: #fafaf7 #f0f0ec #e5e5e0 #75756e #2a2a28.
|
||||
No .theme-chalk.dark — selecting dark mode on chalk falls back to obsidian
|
||||
dark via lib/theme.ts. */
|
||||
.theme-chalk {
|
||||
--background: #fafaf7;
|
||||
--foreground: #2a2a28;
|
||||
--card: #f0f0ec;
|
||||
--card-foreground: #2a2a28;
|
||||
--popover: #f0f0ec;
|
||||
--popover-foreground: #2a2a28;
|
||||
--primary: #2a2a28;
|
||||
--primary-foreground: #fafaf7;
|
||||
--secondary: #e5e5e0;
|
||||
--secondary-foreground: #2a2a28;
|
||||
--muted: #e5e5e0;
|
||||
--muted-foreground: #75756e;
|
||||
--accent: #2a2a28;
|
||||
--accent-foreground: #fafaf7;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #e5e5e0;
|
||||
--input: #e5e5e0;
|
||||
--ring: #2a2a28;
|
||||
--sidebar: #f0f0ec;
|
||||
--sidebar-foreground: #2a2a28;
|
||||
--sidebar-primary: #2a2a28;
|
||||
--sidebar-primary-foreground: #fafaf7;
|
||||
--sidebar-accent: #e5e5e0;
|
||||
--sidebar-accent-foreground: #2a2a28;
|
||||
--sidebar-border: #e5e5e0;
|
||||
--sidebar-ring: #2a2a28;
|
||||
}
|
||||
60
apps/web/src/styles/themes/cobalt.css
Normal file
60
apps/web/src/styles/themes/cobalt.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Cobalt (family: blue).
|
||||
Dark anchors: #020817 #061434 #0c2244 #3060a0 #0047ab. */
|
||||
.theme-cobalt {
|
||||
--background: #f4f8ff;
|
||||
--foreground: #0a1428;
|
||||
--card: #e8f0fc;
|
||||
--card-foreground: #0a1428;
|
||||
--popover: #e8f0fc;
|
||||
--popover-foreground: #0a1428;
|
||||
--primary: #003278;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #d4e0f4;
|
||||
--secondary-foreground: #0a1428;
|
||||
--muted: #d4e0f4;
|
||||
--muted-foreground: #284878;
|
||||
--accent: #003278;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #d4e0f4;
|
||||
--input: #d4e0f4;
|
||||
--ring: #003278;
|
||||
--sidebar: #e8f0fc;
|
||||
--sidebar-foreground: #0a1428;
|
||||
--sidebar-primary: #003278;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #d4e0f4;
|
||||
--sidebar-accent-foreground: #0a1428;
|
||||
--sidebar-border: #d4e0f4;
|
||||
--sidebar-ring: #003278;
|
||||
}
|
||||
.theme-cobalt.dark {
|
||||
--background: #020817;
|
||||
--foreground: #dce4f0;
|
||||
--card: #061434;
|
||||
--card-foreground: #dce4f0;
|
||||
--popover: #061434;
|
||||
--popover-foreground: #dce4f0;
|
||||
--primary: #0047ab;
|
||||
--primary-foreground: #dce4f0;
|
||||
--secondary: #0c2244;
|
||||
--secondary-foreground: #dce4f0;
|
||||
--muted: #0c2244;
|
||||
--muted-foreground: #3060a0;
|
||||
--accent: #0047ab;
|
||||
--accent-foreground: #dce4f0;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #0c2244;
|
||||
--input: #0c2244;
|
||||
--ring: #0047ab;
|
||||
--sidebar: #061434;
|
||||
--sidebar-foreground: #dce4f0;
|
||||
--sidebar-primary: #0047ab;
|
||||
--sidebar-primary-foreground: #dce4f0;
|
||||
--sidebar-accent: #0047ab;
|
||||
--sidebar-accent-foreground: #dce4f0;
|
||||
--sidebar-border: #0c2244;
|
||||
--sidebar-ring: #0047ab;
|
||||
}
|
||||
60
apps/web/src/styles/themes/copper.css
Normal file
60
apps/web/src/styles/themes/copper.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Copper (family: orange/amber).
|
||||
Dark anchors: #100800 #1c1408 #2e1f0a #8a6040 #b87333. */
|
||||
.theme-copper {
|
||||
--background: #fdf8f0;
|
||||
--foreground: #2a1f0a;
|
||||
--card: #faf0e0;
|
||||
--card-foreground: #2a1f0a;
|
||||
--popover: #faf0e0;
|
||||
--popover-foreground: #2a1f0a;
|
||||
--primary: #8a5424;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #f0e0c0;
|
||||
--secondary-foreground: #2a1f0a;
|
||||
--muted: #f0e0c0;
|
||||
--muted-foreground: #6e4828;
|
||||
--accent: #8a5424;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #f0e0c0;
|
||||
--input: #f0e0c0;
|
||||
--ring: #8a5424;
|
||||
--sidebar: #faf0e0;
|
||||
--sidebar-foreground: #2a1f0a;
|
||||
--sidebar-primary: #8a5424;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #f0e0c0;
|
||||
--sidebar-accent-foreground: #2a1f0a;
|
||||
--sidebar-border: #f0e0c0;
|
||||
--sidebar-ring: #8a5424;
|
||||
}
|
||||
.theme-copper.dark {
|
||||
--background: #100800;
|
||||
--foreground: #f8e8c8;
|
||||
--card: #1c1408;
|
||||
--card-foreground: #f8e8c8;
|
||||
--popover: #1c1408;
|
||||
--popover-foreground: #f8e8c8;
|
||||
--primary: #b87333;
|
||||
--primary-foreground: #100800;
|
||||
--secondary: #2e1f0a;
|
||||
--secondary-foreground: #f8e8c8;
|
||||
--muted: #2e1f0a;
|
||||
--muted-foreground: #8a6040;
|
||||
--accent: #b87333;
|
||||
--accent-foreground: #100800;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #2e1f0a;
|
||||
--input: #2e1f0a;
|
||||
--ring: #b87333;
|
||||
--sidebar: #1c1408;
|
||||
--sidebar-foreground: #f8e8c8;
|
||||
--sidebar-primary: #b87333;
|
||||
--sidebar-primary-foreground: #100800;
|
||||
--sidebar-accent: #b87333;
|
||||
--sidebar-accent-foreground: #100800;
|
||||
--sidebar-border: #2e1f0a;
|
||||
--sidebar-ring: #b87333;
|
||||
}
|
||||
60
apps/web/src/styles/themes/crimson.css
Normal file
60
apps/web/src/styles/themes/crimson.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Crimson (family: red/crimson).
|
||||
Dark anchors: #0e0404 #1a0808 #2e0a0a #8a3030 #dc143c. */
|
||||
.theme-crimson {
|
||||
--background: #fef4f6;
|
||||
--foreground: #2a0a12;
|
||||
--card: #fde6ea;
|
||||
--card-foreground: #2a0a12;
|
||||
--popover: #fde6ea;
|
||||
--popover-foreground: #2a0a12;
|
||||
--primary: #a40e2d;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #f4d0d8;
|
||||
--secondary-foreground: #2a0a12;
|
||||
--muted: #f4d0d8;
|
||||
--muted-foreground: #6a2030;
|
||||
--accent: #a40e2d;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #f4d0d8;
|
||||
--input: #f4d0d8;
|
||||
--ring: #a40e2d;
|
||||
--sidebar: #fde6ea;
|
||||
--sidebar-foreground: #2a0a12;
|
||||
--sidebar-primary: #a40e2d;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #f4d0d8;
|
||||
--sidebar-accent-foreground: #2a0a12;
|
||||
--sidebar-border: #f4d0d8;
|
||||
--sidebar-ring: #a40e2d;
|
||||
}
|
||||
.theme-crimson.dark {
|
||||
--background: #0e0404;
|
||||
--foreground: #f0d4d8;
|
||||
--card: #1a0808;
|
||||
--card-foreground: #f0d4d8;
|
||||
--popover: #1a0808;
|
||||
--popover-foreground: #f0d4d8;
|
||||
--primary: #dc143c;
|
||||
--primary-foreground: #0e0404;
|
||||
--secondary: #2e0a0a;
|
||||
--secondary-foreground: #f0d4d8;
|
||||
--muted: #2e0a0a;
|
||||
--muted-foreground: #8a3030;
|
||||
--accent: #dc143c;
|
||||
--accent-foreground: #0e0404;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #2e0a0a;
|
||||
--input: #2e0a0a;
|
||||
--ring: #dc143c;
|
||||
--sidebar: #1a0808;
|
||||
--sidebar-foreground: #f0d4d8;
|
||||
--sidebar-primary: #dc143c;
|
||||
--sidebar-primary-foreground: #0e0404;
|
||||
--sidebar-accent: #dc143c;
|
||||
--sidebar-accent-foreground: #0e0404;
|
||||
--sidebar-border: #2e0a0a;
|
||||
--sidebar-ring: #dc143c;
|
||||
}
|
||||
60
apps/web/src/styles/themes/elderflower.css
Normal file
60
apps/web/src/styles/themes/elderflower.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Elderflower (family: purple/violet).
|
||||
Dark anchors: #100818 #1c1024 #2c1830 #8a78a0 #b89cd8. */
|
||||
.theme-elderflower {
|
||||
--background: #faf8fd;
|
||||
--foreground: #1f1428;
|
||||
--card: #f4eef9;
|
||||
--card-foreground: #1f1428;
|
||||
--popover: #f4eef9;
|
||||
--popover-foreground: #1f1428;
|
||||
--primary: #8a70b4;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #e8def0;
|
||||
--secondary-foreground: #1f1428;
|
||||
--muted: #e8def0;
|
||||
--muted-foreground: #6e5a82;
|
||||
--accent: #8a70b4;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #e8def0;
|
||||
--input: #e8def0;
|
||||
--ring: #8a70b4;
|
||||
--sidebar: #f4eef9;
|
||||
--sidebar-foreground: #1f1428;
|
||||
--sidebar-primary: #8a70b4;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #e8def0;
|
||||
--sidebar-accent-foreground: #1f1428;
|
||||
--sidebar-border: #e8def0;
|
||||
--sidebar-ring: #8a70b4;
|
||||
}
|
||||
.theme-elderflower.dark {
|
||||
--background: #100818;
|
||||
--foreground: #ece4f0;
|
||||
--card: #1c1024;
|
||||
--card-foreground: #ece4f0;
|
||||
--popover: #1c1024;
|
||||
--popover-foreground: #ece4f0;
|
||||
--primary: #b89cd8;
|
||||
--primary-foreground: #100818;
|
||||
--secondary: #2c1830;
|
||||
--secondary-foreground: #ece4f0;
|
||||
--muted: #2c1830;
|
||||
--muted-foreground: #8a78a0;
|
||||
--accent: #b89cd8;
|
||||
--accent-foreground: #100818;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #2c1830;
|
||||
--input: #2c1830;
|
||||
--ring: #b89cd8;
|
||||
--sidebar: #1c1024;
|
||||
--sidebar-foreground: #ece4f0;
|
||||
--sidebar-primary: #b89cd8;
|
||||
--sidebar-primary-foreground: #100818;
|
||||
--sidebar-accent: #b89cd8;
|
||||
--sidebar-accent-foreground: #100818;
|
||||
--sidebar-border: #2c1830;
|
||||
--sidebar-ring: #b89cd8;
|
||||
}
|
||||
60
apps/web/src/styles/themes/espresso.css
Normal file
60
apps/web/src/styles/themes/espresso.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Espresso (family: brown/earth).
|
||||
Dark anchors: #1c1410 #241a14 #2e2218 #8a7058 #c8a880. */
|
||||
.theme-espresso {
|
||||
--background: #faf6f0;
|
||||
--foreground: #2a1f15;
|
||||
--card: #f3ece0;
|
||||
--card-foreground: #2a1f15;
|
||||
--popover: #f3ece0;
|
||||
--popover-foreground: #2a1f15;
|
||||
--primary: #9c7948;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #e6dccc;
|
||||
--secondary-foreground: #2a1f15;
|
||||
--muted: #e6dccc;
|
||||
--muted-foreground: #6e5944;
|
||||
--accent: #9c7948;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #e6dccc;
|
||||
--input: #e6dccc;
|
||||
--ring: #9c7948;
|
||||
--sidebar: #f3ece0;
|
||||
--sidebar-foreground: #2a1f15;
|
||||
--sidebar-primary: #9c7948;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #e6dccc;
|
||||
--sidebar-accent-foreground: #2a1f15;
|
||||
--sidebar-border: #e6dccc;
|
||||
--sidebar-ring: #9c7948;
|
||||
}
|
||||
.theme-espresso.dark {
|
||||
--background: #1c1410;
|
||||
--foreground: #f0e8d8;
|
||||
--card: #241a14;
|
||||
--card-foreground: #f0e8d8;
|
||||
--popover: #241a14;
|
||||
--popover-foreground: #f0e8d8;
|
||||
--primary: #c8a880;
|
||||
--primary-foreground: #1c1410;
|
||||
--secondary: #2e2218;
|
||||
--secondary-foreground: #f0e8d8;
|
||||
--muted: #2e2218;
|
||||
--muted-foreground: #8a7058;
|
||||
--accent: #c8a880;
|
||||
--accent-foreground: #1c1410;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #2e2218;
|
||||
--input: #2e2218;
|
||||
--ring: #c8a880;
|
||||
--sidebar: #241a14;
|
||||
--sidebar-foreground: #f0e8d8;
|
||||
--sidebar-primary: #c8a880;
|
||||
--sidebar-primary-foreground: #1c1410;
|
||||
--sidebar-accent: #c8a880;
|
||||
--sidebar-accent-foreground: #1c1410;
|
||||
--sidebar-border: #2e2218;
|
||||
--sidebar-ring: #c8a880;
|
||||
}
|
||||
60
apps/web/src/styles/themes/fuchsia-noir.css
Normal file
60
apps/web/src/styles/themes/fuchsia-noir.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Fuchsia Noir (family: pink/magenta).
|
||||
Dark anchors: #0a0610 #14081a #2a0c2e #8a3878 #ff1493. */
|
||||
.theme-fuchsia-noir {
|
||||
--background: #fdf4f8;
|
||||
--foreground: #2a0a1c;
|
||||
--card: #fbe6f0;
|
||||
--card-foreground: #2a0a1c;
|
||||
--popover: #fbe6f0;
|
||||
--popover-foreground: #2a0a1c;
|
||||
--primary: #c20070;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #f4d0e4;
|
||||
--secondary-foreground: #2a0a1c;
|
||||
--muted: #f4d0e4;
|
||||
--muted-foreground: #7a2860;
|
||||
--accent: #c20070;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #f4d0e4;
|
||||
--input: #f4d0e4;
|
||||
--ring: #c20070;
|
||||
--sidebar: #fbe6f0;
|
||||
--sidebar-foreground: #2a0a1c;
|
||||
--sidebar-primary: #c20070;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #f4d0e4;
|
||||
--sidebar-accent-foreground: #2a0a1c;
|
||||
--sidebar-border: #f4d0e4;
|
||||
--sidebar-ring: #c20070;
|
||||
}
|
||||
.theme-fuchsia-noir.dark {
|
||||
--background: #0a0610;
|
||||
--foreground: #f0d8e8;
|
||||
--card: #14081a;
|
||||
--card-foreground: #f0d8e8;
|
||||
--popover: #14081a;
|
||||
--popover-foreground: #f0d8e8;
|
||||
--primary: #ff1493;
|
||||
--primary-foreground: #0a0610;
|
||||
--secondary: #2a0c2e;
|
||||
--secondary-foreground: #f0d8e8;
|
||||
--muted: #2a0c2e;
|
||||
--muted-foreground: #8a3878;
|
||||
--accent: #ff1493;
|
||||
--accent-foreground: #0a0610;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #2a0c2e;
|
||||
--input: #2a0c2e;
|
||||
--ring: #ff1493;
|
||||
--sidebar: #14081a;
|
||||
--sidebar-foreground: #f0d8e8;
|
||||
--sidebar-primary: #ff1493;
|
||||
--sidebar-primary-foreground: #0a0610;
|
||||
--sidebar-accent: #ff1493;
|
||||
--sidebar-accent-foreground: #0a0610;
|
||||
--sidebar-border: #2a0c2e;
|
||||
--sidebar-ring: #ff1493;
|
||||
}
|
||||
60
apps/web/src/styles/themes/gold.css
Normal file
60
apps/web/src/styles/themes/gold.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Gold (family: orange/amber).
|
||||
Dark anchors: #0e0800 #1a1200 #2a1f00 #a07c30 #d4af37. */
|
||||
.theme-gold {
|
||||
--background: #fffbf0;
|
||||
--foreground: #2a200a;
|
||||
--card: #fdf3d0;
|
||||
--card-foreground: #2a200a;
|
||||
--popover: #fdf3d0;
|
||||
--popover-foreground: #2a200a;
|
||||
--primary: #a18229;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #f0e0a0;
|
||||
--secondary-foreground: #2a200a;
|
||||
--muted: #f0e0a0;
|
||||
--muted-foreground: #786020;
|
||||
--accent: #a18229;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #f0e0a0;
|
||||
--input: #f0e0a0;
|
||||
--ring: #a18229;
|
||||
--sidebar: #fdf3d0;
|
||||
--sidebar-foreground: #2a200a;
|
||||
--sidebar-primary: #a18229;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #f0e0a0;
|
||||
--sidebar-accent-foreground: #2a200a;
|
||||
--sidebar-border: #f0e0a0;
|
||||
--sidebar-ring: #a18229;
|
||||
}
|
||||
.theme-gold.dark {
|
||||
--background: #0e0800;
|
||||
--foreground: #fff0d0;
|
||||
--card: #1a1200;
|
||||
--card-foreground: #fff0d0;
|
||||
--popover: #1a1200;
|
||||
--popover-foreground: #fff0d0;
|
||||
--primary: #d4af37;
|
||||
--primary-foreground: #0e0800;
|
||||
--secondary: #2a1f00;
|
||||
--secondary-foreground: #fff0d0;
|
||||
--muted: #2a1f00;
|
||||
--muted-foreground: #a07c30;
|
||||
--accent: #d4af37;
|
||||
--accent-foreground: #0e0800;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #2a1f00;
|
||||
--input: #2a1f00;
|
||||
--ring: #d4af37;
|
||||
--sidebar: #1a1200;
|
||||
--sidebar-foreground: #fff0d0;
|
||||
--sidebar-primary: #d4af37;
|
||||
--sidebar-primary-foreground: #0e0800;
|
||||
--sidebar-accent: #d4af37;
|
||||
--sidebar-accent-foreground: #0e0800;
|
||||
--sidebar-border: #2a1f00;
|
||||
--sidebar-ring: #d4af37;
|
||||
}
|
||||
60
apps/web/src/styles/themes/gunmetal.css
Normal file
60
apps/web/src/styles/themes/gunmetal.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Gunmetal (family: charcoal/black).
|
||||
Dark anchors: #0d1117 #161b22 #21262d #7d8590 #388bfd. */
|
||||
.theme-gunmetal {
|
||||
--background: #fafafa;
|
||||
--foreground: #14181f;
|
||||
--card: #f1f3f6;
|
||||
--card-foreground: #14181f;
|
||||
--popover: #f1f3f6;
|
||||
--popover-foreground: #14181f;
|
||||
--primary: #0c6dd0;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #dde1e8;
|
||||
--secondary-foreground: #14181f;
|
||||
--muted: #dde1e8;
|
||||
--muted-foreground: #5a6470;
|
||||
--accent: #0c6dd0;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #dde1e8;
|
||||
--input: #dde1e8;
|
||||
--ring: #0c6dd0;
|
||||
--sidebar: #f1f3f6;
|
||||
--sidebar-foreground: #14181f;
|
||||
--sidebar-primary: #0c6dd0;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #dde1e8;
|
||||
--sidebar-accent-foreground: #14181f;
|
||||
--sidebar-border: #dde1e8;
|
||||
--sidebar-ring: #0c6dd0;
|
||||
}
|
||||
.theme-gunmetal.dark {
|
||||
--background: #0d1117;
|
||||
--foreground: #e6ecf0;
|
||||
--card: #161b22;
|
||||
--card-foreground: #e6ecf0;
|
||||
--popover: #161b22;
|
||||
--popover-foreground: #e6ecf0;
|
||||
--primary: #388bfd;
|
||||
--primary-foreground: #0d1117;
|
||||
--secondary: #21262d;
|
||||
--secondary-foreground: #e6ecf0;
|
||||
--muted: #21262d;
|
||||
--muted-foreground: #7d8590;
|
||||
--accent: #388bfd;
|
||||
--accent-foreground: #0d1117;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #21262d;
|
||||
--input: #21262d;
|
||||
--ring: #388bfd;
|
||||
--sidebar: #161b22;
|
||||
--sidebar-foreground: #e6ecf0;
|
||||
--sidebar-primary: #388bfd;
|
||||
--sidebar-primary-foreground: #0d1117;
|
||||
--sidebar-accent: #388bfd;
|
||||
--sidebar-accent-foreground: #0d1117;
|
||||
--sidebar-border: #21262d;
|
||||
--sidebar-ring: #388bfd;
|
||||
}
|
||||
33
apps/web/src/styles/themes/ivory.css
Normal file
33
apps/web/src/styles/themes/ivory.css
Normal file
@@ -0,0 +1,33 @@
|
||||
/* themes-v1: Ivory (family: light-only).
|
||||
Anchors used directly as light palette: #fdfcf8 #f5f2e8 #e8e4d8 #8a8478 #3a3328.
|
||||
No .theme-ivory.dark — selecting dark mode on ivory falls back to obsidian
|
||||
dark via lib/theme.ts. */
|
||||
.theme-ivory {
|
||||
--background: #fdfcf8;
|
||||
--foreground: #3a3328;
|
||||
--card: #f5f2e8;
|
||||
--card-foreground: #3a3328;
|
||||
--popover: #f5f2e8;
|
||||
--popover-foreground: #3a3328;
|
||||
--primary: #3a3328;
|
||||
--primary-foreground: #fdfcf8;
|
||||
--secondary: #e8e4d8;
|
||||
--secondary-foreground: #3a3328;
|
||||
--muted: #e8e4d8;
|
||||
--muted-foreground: #8a8478;
|
||||
--accent: #3a3328;
|
||||
--accent-foreground: #fdfcf8;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #e8e4d8;
|
||||
--input: #e8e4d8;
|
||||
--ring: #3a3328;
|
||||
--sidebar: #f5f2e8;
|
||||
--sidebar-foreground: #3a3328;
|
||||
--sidebar-primary: #3a3328;
|
||||
--sidebar-primary-foreground: #fdfcf8;
|
||||
--sidebar-accent: #e8e4d8;
|
||||
--sidebar-accent-foreground: #3a3328;
|
||||
--sidebar-border: #e8e4d8;
|
||||
--sidebar-ring: #3a3328;
|
||||
}
|
||||
60
apps/web/src/styles/themes/matrix.css
Normal file
60
apps/web/src/styles/themes/matrix.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Matrix (family: green, neon).
|
||||
Dark anchors: #000a00 #031403 #0a200a #208030 #00ff41. */
|
||||
.theme-matrix {
|
||||
--background: #f0fff4;
|
||||
--foreground: #0a2a15;
|
||||
--card: #e0f8e8;
|
||||
--card-foreground: #0a2a15;
|
||||
--popover: #e0f8e8;
|
||||
--popover-foreground: #0a2a15;
|
||||
--primary: #00b830;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #c0e8d0;
|
||||
--secondary-foreground: #0a2a15;
|
||||
--muted: #c0e8d0;
|
||||
--muted-foreground: #208048;
|
||||
--accent: #00b830;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #c0e8d0;
|
||||
--input: #c0e8d0;
|
||||
--ring: #00b830;
|
||||
--sidebar: #e0f8e8;
|
||||
--sidebar-foreground: #0a2a15;
|
||||
--sidebar-primary: #00b830;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #c0e8d0;
|
||||
--sidebar-accent-foreground: #0a2a15;
|
||||
--sidebar-border: #c0e8d0;
|
||||
--sidebar-ring: #00b830;
|
||||
}
|
||||
.theme-matrix.dark {
|
||||
--background: #000a00;
|
||||
--foreground: #d8f8e0;
|
||||
--card: #031403;
|
||||
--card-foreground: #d8f8e0;
|
||||
--popover: #031403;
|
||||
--popover-foreground: #d8f8e0;
|
||||
--primary: #00ff41;
|
||||
--primary-foreground: #000a00;
|
||||
--secondary: #0a200a;
|
||||
--secondary-foreground: #d8f8e0;
|
||||
--muted: #0a200a;
|
||||
--muted-foreground: #208030;
|
||||
--accent: #00ff41;
|
||||
--accent-foreground: #000a00;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #0a200a;
|
||||
--input: #0a200a;
|
||||
--ring: #00ff41;
|
||||
--sidebar: #031403;
|
||||
--sidebar-foreground: #d8f8e0;
|
||||
--sidebar-primary: #00ff41;
|
||||
--sidebar-primary-foreground: #000a00;
|
||||
--sidebar-accent: #00ff41;
|
||||
--sidebar-accent-foreground: #000a00;
|
||||
--sidebar-border: #0a200a;
|
||||
--sidebar-ring: #00ff41;
|
||||
}
|
||||
60
apps/web/src/styles/themes/midnight-sapphire.css
Normal file
60
apps/web/src/styles/themes/midnight-sapphire.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Midnight Sapphire (family: blue).
|
||||
Dark anchors: #02050e #060c1f #0e1a36 #4a6088 #1e3a8a. */
|
||||
.theme-midnight-sapphire {
|
||||
--background: #f4f6fc;
|
||||
--foreground: #0a1024;
|
||||
--card: #e6eaf6;
|
||||
--card-foreground: #0a1024;
|
||||
--popover: #e6eaf6;
|
||||
--popover-foreground: #0a1024;
|
||||
--primary: #142a60;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #d0d8ec;
|
||||
--secondary-foreground: #0a1024;
|
||||
--muted: #d0d8ec;
|
||||
--muted-foreground: #36507a;
|
||||
--accent: #142a60;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #d0d8ec;
|
||||
--input: #d0d8ec;
|
||||
--ring: #142a60;
|
||||
--sidebar: #e6eaf6;
|
||||
--sidebar-foreground: #0a1024;
|
||||
--sidebar-primary: #142a60;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #d0d8ec;
|
||||
--sidebar-accent-foreground: #0a1024;
|
||||
--sidebar-border: #d0d8ec;
|
||||
--sidebar-ring: #142a60;
|
||||
}
|
||||
.theme-midnight-sapphire.dark {
|
||||
--background: #02050e;
|
||||
--foreground: #dce0f0;
|
||||
--card: #060c1f;
|
||||
--card-foreground: #dce0f0;
|
||||
--popover: #060c1f;
|
||||
--popover-foreground: #dce0f0;
|
||||
--primary: #1e3a8a;
|
||||
--primary-foreground: #dce0f0;
|
||||
--secondary: #0e1a36;
|
||||
--secondary-foreground: #dce0f0;
|
||||
--muted: #0e1a36;
|
||||
--muted-foreground: #4a6088;
|
||||
--accent: #1e3a8a;
|
||||
--accent-foreground: #dce0f0;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #0e1a36;
|
||||
--input: #0e1a36;
|
||||
--ring: #1e3a8a;
|
||||
--sidebar: #060c1f;
|
||||
--sidebar-foreground: #dce0f0;
|
||||
--sidebar-primary: #1e3a8a;
|
||||
--sidebar-primary-foreground: #dce0f0;
|
||||
--sidebar-accent: #1e3a8a;
|
||||
--sidebar-accent-foreground: #dce0f0;
|
||||
--sidebar-border: #0e1a36;
|
||||
--sidebar-ring: #1e3a8a;
|
||||
}
|
||||
60
apps/web/src/styles/themes/obsidian.css
Normal file
60
apps/web/src/styles/themes/obsidian.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Obsidian (family: charcoal/black). Default theme.
|
||||
Dark anchors: #0c0c0e #15151a #1f1f23 #6b6b75 #8b5cf6. Light variant per spec §3. */
|
||||
.theme-obsidian {
|
||||
--background: #fafafa;
|
||||
--foreground: #18181b;
|
||||
--card: #f4f4f5;
|
||||
--card-foreground: #18181b;
|
||||
--popover: #f4f4f5;
|
||||
--popover-foreground: #18181b;
|
||||
--primary: #6d40e8;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #e4e4e7;
|
||||
--secondary-foreground: #18181b;
|
||||
--muted: #e4e4e7;
|
||||
--muted-foreground: #71717a;
|
||||
--accent: #6d40e8;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #e4e4e7;
|
||||
--input: #e4e4e7;
|
||||
--ring: #6d40e8;
|
||||
--sidebar: #f4f4f5;
|
||||
--sidebar-foreground: #18181b;
|
||||
--sidebar-primary: #6d40e8;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #e4e4e7;
|
||||
--sidebar-accent-foreground: #18181b;
|
||||
--sidebar-border: #e4e4e7;
|
||||
--sidebar-ring: #6d40e8;
|
||||
}
|
||||
.theme-obsidian.dark {
|
||||
--background: #0c0c0e;
|
||||
--foreground: #ece9f0;
|
||||
--card: #15151a;
|
||||
--card-foreground: #ece9f0;
|
||||
--popover: #15151a;
|
||||
--popover-foreground: #ece9f0;
|
||||
--primary: #8b5cf6;
|
||||
--primary-foreground: #0c0c0e;
|
||||
--secondary: #1f1f23;
|
||||
--secondary-foreground: #ece9f0;
|
||||
--muted: #1f1f23;
|
||||
--muted-foreground: #6b6b75;
|
||||
--accent: #8b5cf6;
|
||||
--accent-foreground: #0c0c0e;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #1f1f23;
|
||||
--input: #1f1f23;
|
||||
--ring: #8b5cf6;
|
||||
--sidebar: #15151a;
|
||||
--sidebar-foreground: #ece9f0;
|
||||
--sidebar-primary: #8b5cf6;
|
||||
--sidebar-primary-foreground: #0c0c0e;
|
||||
--sidebar-accent: #8b5cf6;
|
||||
--sidebar-accent-foreground: #0c0c0e;
|
||||
--sidebar-border: #1f1f23;
|
||||
--sidebar-ring: #8b5cf6;
|
||||
}
|
||||
60
apps/web/src/styles/themes/oxblood.css
Normal file
60
apps/web/src/styles/themes/oxblood.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Oxblood (family: red/crimson).
|
||||
Dark anchors: #0a0303 #180606 #2a0808 #7a3028 #8b1a1a. */
|
||||
.theme-oxblood {
|
||||
--background: #fdf4f4;
|
||||
--foreground: #2a0a0a;
|
||||
--card: #fae6e6;
|
||||
--card-foreground: #2a0a0a;
|
||||
--popover: #fae6e6;
|
||||
--popover-foreground: #2a0a0a;
|
||||
--primary: #5e1010;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #f0d0d0;
|
||||
--secondary-foreground: #2a0a0a;
|
||||
--muted: #f0d0d0;
|
||||
--muted-foreground: #582020;
|
||||
--accent: #5e1010;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #f0d0d0;
|
||||
--input: #f0d0d0;
|
||||
--ring: #5e1010;
|
||||
--sidebar: #fae6e6;
|
||||
--sidebar-foreground: #2a0a0a;
|
||||
--sidebar-primary: #5e1010;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #f0d0d0;
|
||||
--sidebar-accent-foreground: #2a0a0a;
|
||||
--sidebar-border: #f0d0d0;
|
||||
--sidebar-ring: #5e1010;
|
||||
}
|
||||
.theme-oxblood.dark {
|
||||
--background: #0a0303;
|
||||
--foreground: #f0d8d8;
|
||||
--card: #180606;
|
||||
--card-foreground: #f0d8d8;
|
||||
--popover: #180606;
|
||||
--popover-foreground: #f0d8d8;
|
||||
--primary: #8b1a1a;
|
||||
--primary-foreground: #0a0303;
|
||||
--secondary: #2a0808;
|
||||
--secondary-foreground: #f0d8d8;
|
||||
--muted: #2a0808;
|
||||
--muted-foreground: #7a3028;
|
||||
--accent: #8b1a1a;
|
||||
--accent-foreground: #0a0303;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #2a0808;
|
||||
--input: #2a0808;
|
||||
--ring: #8b1a1a;
|
||||
--sidebar: #180606;
|
||||
--sidebar-foreground: #f0d8d8;
|
||||
--sidebar-primary: #8b1a1a;
|
||||
--sidebar-primary-foreground: #0a0303;
|
||||
--sidebar-accent: #8b1a1a;
|
||||
--sidebar-accent-foreground: #0a0303;
|
||||
--sidebar-border: #2a0808;
|
||||
--sidebar-ring: #8b1a1a;
|
||||
}
|
||||
60
apps/web/src/styles/themes/plum.css
Normal file
60
apps/web/src/styles/themes/plum.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Plum (family: purple/violet).
|
||||
Dark anchors: #0c0814 #180e20 #241830 #7a4878 #8e4585. */
|
||||
.theme-plum {
|
||||
--background: #fbf7fd;
|
||||
--foreground: #1f0f24;
|
||||
--card: #f4ebf6;
|
||||
--card-foreground: #1f0f24;
|
||||
--popover: #f4ebf6;
|
||||
--popover-foreground: #1f0f24;
|
||||
--primary: #6a3263;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #e8d8ea;
|
||||
--secondary-foreground: #1f0f24;
|
||||
--muted: #e8d8ea;
|
||||
--muted-foreground: #5e3858;
|
||||
--accent: #6a3263;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #e8d8ea;
|
||||
--input: #e8d8ea;
|
||||
--ring: #6a3263;
|
||||
--sidebar: #f4ebf6;
|
||||
--sidebar-foreground: #1f0f24;
|
||||
--sidebar-primary: #6a3263;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #e8d8ea;
|
||||
--sidebar-accent-foreground: #1f0f24;
|
||||
--sidebar-border: #e8d8ea;
|
||||
--sidebar-ring: #6a3263;
|
||||
}
|
||||
.theme-plum.dark {
|
||||
--background: #0c0814;
|
||||
--foreground: #ecd8ec;
|
||||
--card: #180e20;
|
||||
--card-foreground: #ecd8ec;
|
||||
--popover: #180e20;
|
||||
--popover-foreground: #ecd8ec;
|
||||
--primary: #8e4585;
|
||||
--primary-foreground: #0c0814;
|
||||
--secondary: #241830;
|
||||
--secondary-foreground: #ecd8ec;
|
||||
--muted: #241830;
|
||||
--muted-foreground: #7a4878;
|
||||
--accent: #8e4585;
|
||||
--accent-foreground: #0c0814;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #241830;
|
||||
--input: #241830;
|
||||
--ring: #8e4585;
|
||||
--sidebar: #180e20;
|
||||
--sidebar-foreground: #ecd8ec;
|
||||
--sidebar-primary: #8e4585;
|
||||
--sidebar-primary-foreground: #0c0814;
|
||||
--sidebar-accent: #8e4585;
|
||||
--sidebar-accent-foreground: #0c0814;
|
||||
--sidebar-border: #241830;
|
||||
--sidebar-ring: #8e4585;
|
||||
}
|
||||
60
apps/web/src/styles/themes/sage.css
Normal file
60
apps/web/src/styles/themes/sage.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Sage (family: green, warm).
|
||||
Dark anchors: #0a0e08 #141a10 #1e2e1a #7a8870 #9caf88. */
|
||||
.theme-sage {
|
||||
--background: #f4f8f0;
|
||||
--foreground: #1a2510;
|
||||
--card: #ebf2e2;
|
||||
--card-foreground: #1a2510;
|
||||
--popover: #ebf2e2;
|
||||
--popover-foreground: #1a2510;
|
||||
--primary: #708868;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #d8e2c8;
|
||||
--secondary-foreground: #1a2510;
|
||||
--muted: #d8e2c8;
|
||||
--muted-foreground: #5a6850;
|
||||
--accent: #708868;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #d8e2c8;
|
||||
--input: #d8e2c8;
|
||||
--ring: #708868;
|
||||
--sidebar: #ebf2e2;
|
||||
--sidebar-foreground: #1a2510;
|
||||
--sidebar-primary: #708868;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #d8e2c8;
|
||||
--sidebar-accent-foreground: #1a2510;
|
||||
--sidebar-border: #d8e2c8;
|
||||
--sidebar-ring: #708868;
|
||||
}
|
||||
.theme-sage.dark {
|
||||
--background: #0a0e08;
|
||||
--foreground: #e8eee0;
|
||||
--card: #141a10;
|
||||
--card-foreground: #e8eee0;
|
||||
--popover: #141a10;
|
||||
--popover-foreground: #e8eee0;
|
||||
--primary: #9caf88;
|
||||
--primary-foreground: #0a0e08;
|
||||
--secondary: #1e2e1a;
|
||||
--secondary-foreground: #e8eee0;
|
||||
--muted: #1e2e1a;
|
||||
--muted-foreground: #7a8870;
|
||||
--accent: #9caf88;
|
||||
--accent-foreground: #0a0e08;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #1e2e1a;
|
||||
--input: #1e2e1a;
|
||||
--ring: #9caf88;
|
||||
--sidebar: #141a10;
|
||||
--sidebar-foreground: #e8eee0;
|
||||
--sidebar-primary: #9caf88;
|
||||
--sidebar-primary-foreground: #0a0e08;
|
||||
--sidebar-accent: #9caf88;
|
||||
--sidebar-accent-foreground: #0a0e08;
|
||||
--sidebar-border: #1e2e1a;
|
||||
--sidebar-ring: #9caf88;
|
||||
}
|
||||
60
apps/web/src/styles/themes/steel-pink.css
Normal file
60
apps/web/src/styles/themes/steel-pink.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Steel Pink (family: pink/magenta).
|
||||
Dark anchors: #0e0408 #1a080e #2e0c1a #9a4070 #cc33aa. */
|
||||
.theme-steel-pink {
|
||||
--background: #fdf4fa;
|
||||
--foreground: #2a0a1f;
|
||||
--card: #fbe8f4;
|
||||
--card-foreground: #2a0a1f;
|
||||
--popover: #fbe8f4;
|
||||
--popover-foreground: #2a0a1f;
|
||||
--primary: #952382;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #f4d4ea;
|
||||
--secondary-foreground: #2a0a1f;
|
||||
--muted: #f4d4ea;
|
||||
--muted-foreground: #7a3058;
|
||||
--accent: #952382;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #f4d4ea;
|
||||
--input: #f4d4ea;
|
||||
--ring: #952382;
|
||||
--sidebar: #fbe8f4;
|
||||
--sidebar-foreground: #2a0a1f;
|
||||
--sidebar-primary: #952382;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #f4d4ea;
|
||||
--sidebar-accent-foreground: #2a0a1f;
|
||||
--sidebar-border: #f4d4ea;
|
||||
--sidebar-ring: #952382;
|
||||
}
|
||||
.theme-steel-pink.dark {
|
||||
--background: #0e0408;
|
||||
--foreground: #f0d8e8;
|
||||
--card: #1a080e;
|
||||
--card-foreground: #f0d8e8;
|
||||
--popover: #1a080e;
|
||||
--popover-foreground: #f0d8e8;
|
||||
--primary: #cc33aa;
|
||||
--primary-foreground: #0e0408;
|
||||
--secondary: #2e0c1a;
|
||||
--secondary-foreground: #f0d8e8;
|
||||
--muted: #2e0c1a;
|
||||
--muted-foreground: #9a4070;
|
||||
--accent: #cc33aa;
|
||||
--accent-foreground: #0e0408;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #2e0c1a;
|
||||
--input: #2e0c1a;
|
||||
--ring: #cc33aa;
|
||||
--sidebar: #1a080e;
|
||||
--sidebar-foreground: #f0d8e8;
|
||||
--sidebar-primary: #cc33aa;
|
||||
--sidebar-primary-foreground: #0e0408;
|
||||
--sidebar-accent: #cc33aa;
|
||||
--sidebar-accent-foreground: #0e0408;
|
||||
--sidebar-border: #2e0c1a;
|
||||
--sidebar-ring: #cc33aa;
|
||||
}
|
||||
60
apps/web/src/styles/themes/volcanic-brown.css
Normal file
60
apps/web/src/styles/themes/volcanic-brown.css
Normal file
@@ -0,0 +1,60 @@
|
||||
/* themes-v1: Volcanic Brown (family: brown/earth).
|
||||
Dark anchors: #140906 #1e0e0a #2e1610 #7a4030 #cc4a1a. */
|
||||
.theme-volcanic-brown {
|
||||
--background: #faf3ee;
|
||||
--foreground: #2a1410;
|
||||
--card: #f3e6dc;
|
||||
--card-foreground: #2a1410;
|
||||
--popover: #f3e6dc;
|
||||
--popover-foreground: #2a1410;
|
||||
--primary: #983614;
|
||||
--primary-foreground: #ffffff;
|
||||
--secondary: #e8d4c4;
|
||||
--secondary-foreground: #2a1410;
|
||||
--muted: #e8d4c4;
|
||||
--muted-foreground: #5e2818;
|
||||
--accent: #983614;
|
||||
--accent-foreground: #ffffff;
|
||||
--destructive: #b91c1c;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #e8d4c4;
|
||||
--input: #e8d4c4;
|
||||
--ring: #983614;
|
||||
--sidebar: #f3e6dc;
|
||||
--sidebar-foreground: #2a1410;
|
||||
--sidebar-primary: #983614;
|
||||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #e8d4c4;
|
||||
--sidebar-accent-foreground: #2a1410;
|
||||
--sidebar-border: #e8d4c4;
|
||||
--sidebar-ring: #983614;
|
||||
}
|
||||
.theme-volcanic-brown.dark {
|
||||
--background: #140906;
|
||||
--foreground: #f0e0d4;
|
||||
--card: #1e0e0a;
|
||||
--card-foreground: #f0e0d4;
|
||||
--popover: #1e0e0a;
|
||||
--popover-foreground: #f0e0d4;
|
||||
--primary: #cc4a1a;
|
||||
--primary-foreground: #140906;
|
||||
--secondary: #2e1610;
|
||||
--secondary-foreground: #f0e0d4;
|
||||
--muted: #2e1610;
|
||||
--muted-foreground: #7a4030;
|
||||
--accent: #cc4a1a;
|
||||
--accent-foreground: #140906;
|
||||
--destructive: #dc2626;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #2e1610;
|
||||
--input: #2e1610;
|
||||
--ring: #cc4a1a;
|
||||
--sidebar: #1e0e0a;
|
||||
--sidebar-foreground: #f0e0d4;
|
||||
--sidebar-primary: #cc4a1a;
|
||||
--sidebar-primary-foreground: #140906;
|
||||
--sidebar-accent: #cc4a1a;
|
||||
--sidebar-accent-foreground: #140906;
|
||||
--sidebar-border: #2e1610;
|
||||
--sidebar-ring: #cc4a1a;
|
||||
}
|
||||
Reference in New Issue
Block a user