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:
@@ -22,6 +22,50 @@ export async function setSetting(
|
||||
`;
|
||||
}
|
||||
|
||||
// themes-v1: whitelist of the 18 preset theme ids. Kept in sync with
|
||||
// docs/themes_v1.md §1 and apps/web/src/lib/theme.ts THEMES.
|
||||
const THEME_IDS = [
|
||||
'obsidian',
|
||||
'gunmetal',
|
||||
'espresso',
|
||||
'volcanic-brown',
|
||||
'copper',
|
||||
'gold',
|
||||
'oxblood',
|
||||
'crimson',
|
||||
'elderflower',
|
||||
'plum',
|
||||
'steel-pink',
|
||||
'fuchsia-noir',
|
||||
'matrix',
|
||||
'sage',
|
||||
'ivory',
|
||||
'chalk',
|
||||
'cobalt',
|
||||
'midnight-sapphire',
|
||||
] as const;
|
||||
|
||||
const THEME_MODES = ['dark', 'light', 'system'] as const;
|
||||
|
||||
// PATCH body is still a free-form key/value bag for everything except the
|
||||
// two theme keys, which carry strict per-key validation. Anything outside
|
||||
// THEME_IDS / THEME_MODES on those keys is rejected with 400.
|
||||
function validateThemeKeys(body: Record<string, unknown>): string | null {
|
||||
if ('theme_id' in body) {
|
||||
const v = body.theme_id;
|
||||
if (typeof v !== 'string' || !(THEME_IDS as readonly string[]).includes(v)) {
|
||||
return `theme_id must be one of: ${THEME_IDS.join(', ')}`;
|
||||
}
|
||||
}
|
||||
if ('theme_mode' in body) {
|
||||
const v = body.theme_mode;
|
||||
if (typeof v !== 'string' || !(THEME_MODES as readonly string[]).includes(v)) {
|
||||
return `theme_mode must be one of: ${THEME_MODES.join(', ')}`;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
const PatchBody = z.record(z.string(), z.unknown());
|
||||
|
||||
export function registerSettingsRoutes(app: FastifyInstance, sql: Sql): void {
|
||||
@@ -38,6 +82,11 @@ export function registerSettingsRoutes(app: FastifyInstance, sql: Sql): void {
|
||||
reply.code(400);
|
||||
return { error: 'invalid body', details: parsed.error.flatten() };
|
||||
}
|
||||
const themeError = validateThemeKeys(parsed.data);
|
||||
if (themeError) {
|
||||
reply.code(400);
|
||||
return { error: themeError };
|
||||
}
|
||||
for (const [k, v] of Object.entries(parsed.data)) {
|
||||
await setSetting(sql, k, v);
|
||||
}
|
||||
|
||||
@@ -165,3 +165,9 @@ ALTER TABLE sessions ADD COLUMN IF NOT EXISTS agent_id TEXT;
|
||||
-- agent_name: string|null, can_continue: boolean }
|
||||
-- Shape for errors: { error_reason: 'llm_provider_error'|..., error_text: string }
|
||||
ALTER TABLE messages ADD COLUMN IF NOT EXISTS metadata JSONB;
|
||||
|
||||
-- themes-v1: idempotent seeds for the two theme preference keys. The settings
|
||||
-- table is a key/value store (see line 43) so theme prefs live as two rows,
|
||||
-- not new columns. Defaults match docs/themes_v1.md: obsidian (dark).
|
||||
INSERT INTO settings (key, value) VALUES ('theme_id', '"obsidian"') ON CONFLICT (key) DO NOTHING;
|
||||
INSERT INTO settings (key, value) VALUES ('theme_mode', '"dark"') ON CONFLICT (key) DO NOTHING;
|
||||
|
||||
@@ -4,8 +4,31 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>BooCode</title>
|
||||
<script>
|
||||
// themes-v1 FOUC guard: read the last-applied theme from localStorage
|
||||
// and stamp the class on <html> before React mounts. Falls back to
|
||||
// obsidian + dark when no cache. Light-only themes (ivory, chalk) with
|
||||
// a dark mode pref fall back to obsidian dark — mirrors the rule in
|
||||
// lib/theme.ts effectiveThemeId().
|
||||
(function () {
|
||||
try {
|
||||
var t = JSON.parse(localStorage.getItem('boocode.theme') || '{}');
|
||||
var id = t.id || 'obsidian';
|
||||
var mode = t.mode || 'dark';
|
||||
if (mode === 'system') {
|
||||
mode = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
if ((id === 'ivory' || id === 'chalk') && mode === 'dark') {
|
||||
id = 'obsidian';
|
||||
}
|
||||
document.documentElement.className = 'theme-' + id + (mode === 'dark' ? ' dark' : '');
|
||||
} catch (e) {
|
||||
document.documentElement.className = 'theme-obsidian dark';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-neutral-950 text-neutral-100">
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
|
||||
@@ -6,8 +6,10 @@ import { RightRail } from '@/components/RightRail';
|
||||
import { Home } from '@/pages/Home';
|
||||
import { Project } from '@/pages/Project';
|
||||
import { Session } from '@/pages/Session';
|
||||
import { Settings } from '@/pages/Settings';
|
||||
import { Toaster } from '@/components/ui/sonner';
|
||||
import { useUserEvents } from '@/hooks/useUserEvents';
|
||||
import { useTheme } from '@/lib/theme';
|
||||
import { SidebarDrawerProvider, useSidebarDrawer } from '@/hooks/useSidebarDrawer';
|
||||
import { RightRailDrawerProvider, useRightRailDrawer } from '@/hooks/useRightRailDrawer';
|
||||
import { useViewport } from '@/hooks/useViewport';
|
||||
@@ -61,9 +63,13 @@ function MobileRightRailBackdrop() {
|
||||
}
|
||||
|
||||
function AppShell() {
|
||||
// themes-v1: useTheme() owns the matchMedia subscription for system mode
|
||||
// and reconciles cache with /api/settings on mount. Mounted first so the
|
||||
// theme class on <html> is correct before any child renders.
|
||||
useTheme();
|
||||
useUserEvents();
|
||||
return (
|
||||
<div className="dark h-screen flex bg-background text-foreground">
|
||||
<div className="h-screen flex bg-background text-foreground">
|
||||
<ProjectSidebar />
|
||||
<MobileBackdrop />
|
||||
<main className="flex-1 flex flex-col min-w-0">
|
||||
@@ -71,6 +77,7 @@ function AppShell() {
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/project/:id" element={<Project />} />
|
||||
<Route path="/session/:id" element={<Session />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
</Routes>
|
||||
</main>
|
||||
<MobileRightRailBackdrop />
|
||||
|
||||
103
apps/web/src/components/ui/card.tsx
Normal file
103
apps/web/src/components/ui/card.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn(
|
||||
"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn(
|
||||
"flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
42
apps/web/src/components/ui/radio-group.tsx
Normal file
42
apps/web/src/components/ui/radio-group.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import * as React from "react"
|
||||
import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function RadioGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Root
|
||||
data-slot="radio-group"
|
||||
className={cn("grid w-full gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function RadioGroupItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
|
||||
return (
|
||||
<RadioGroupPrimitive.Item
|
||||
data-slot="radio-group-item"
|
||||
className={cn(
|
||||
"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<RadioGroupPrimitive.Indicator
|
||||
data-slot="radio-group-indicator"
|
||||
className="flex size-4 items-center justify-center"
|
||||
>
|
||||
<span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
|
||||
</RadioGroupPrimitive.Indicator>
|
||||
</RadioGroupPrimitive.Item>
|
||||
)
|
||||
}
|
||||
|
||||
export { RadioGroup, RadioGroupItem }
|
||||
226
apps/web/src/lib/theme.ts
Normal file
226
apps/web/src/lib/theme.ts
Normal file
@@ -0,0 +1,226 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { api } from '@/api/client';
|
||||
|
||||
// themes-v1: source of truth for the 18 presets. id and name are surfaced in
|
||||
// the picker; family groups visually; supportsDark/supportsLight reflect
|
||||
// whether the corresponding selector exists in styles/themes/<id>.css; anchors
|
||||
// are the 5 dark swatches (or the light palette for the two light-only themes)
|
||||
// used in the picker preview strip.
|
||||
export type ThemeId =
|
||||
| 'obsidian'
|
||||
| 'gunmetal'
|
||||
| 'espresso'
|
||||
| 'volcanic-brown'
|
||||
| 'copper'
|
||||
| 'gold'
|
||||
| 'oxblood'
|
||||
| 'crimson'
|
||||
| 'elderflower'
|
||||
| 'plum'
|
||||
| 'steel-pink'
|
||||
| 'fuchsia-noir'
|
||||
| 'matrix'
|
||||
| 'sage'
|
||||
| 'ivory'
|
||||
| 'chalk'
|
||||
| 'cobalt'
|
||||
| 'midnight-sapphire';
|
||||
|
||||
export type ThemeMode = 'dark' | 'light' | 'system';
|
||||
|
||||
export interface ThemeMeta {
|
||||
id: ThemeId;
|
||||
name: string;
|
||||
family: string;
|
||||
supportsDark: boolean;
|
||||
supportsLight: boolean;
|
||||
anchors: [string, string, string, string, string];
|
||||
}
|
||||
|
||||
export const THEMES: readonly ThemeMeta[] = [
|
||||
{ id: 'obsidian', name: 'Obsidian', family: 'Charcoal', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#0c0c0e', '#15151a', '#1f1f23', '#6b6b75', '#8b5cf6'] },
|
||||
{ id: 'gunmetal', name: 'Gunmetal', family: 'Charcoal', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#0d1117', '#161b22', '#21262d', '#7d8590', '#388bfd'] },
|
||||
{ id: 'espresso', name: 'Espresso', family: 'Brown', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#1c1410', '#241a14', '#2e2218', '#8a7058', '#c8a880'] },
|
||||
{ id: 'volcanic-brown', name: 'Volcanic Brown', family: 'Brown', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#140906', '#1e0e0a', '#2e1610', '#7a4030', '#cc4a1a'] },
|
||||
{ id: 'copper', name: 'Copper', family: 'Amber', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#100800', '#1c1408', '#2e1f0a', '#8a6040', '#b87333'] },
|
||||
{ id: 'gold', name: 'Gold', family: 'Amber', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#0e0800', '#1a1200', '#2a1f00', '#a07c30', '#d4af37'] },
|
||||
{ id: 'oxblood', name: 'Oxblood', family: 'Crimson', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#0a0303', '#180606', '#2a0808', '#7a3028', '#8b1a1a'] },
|
||||
{ id: 'crimson', name: 'Crimson', family: 'Crimson', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#0e0404', '#1a0808', '#2e0a0a', '#8a3030', '#dc143c'] },
|
||||
{ id: 'elderflower', name: 'Elderflower', family: 'Violet', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#100818', '#1c1024', '#2c1830', '#8a78a0', '#b89cd8'] },
|
||||
{ id: 'plum', name: 'Plum', family: 'Violet', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#0c0814', '#180e20', '#241830', '#7a4878', '#8e4585'] },
|
||||
{ id: 'steel-pink', name: 'Steel Pink', family: 'Magenta', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#0e0408', '#1a080e', '#2e0c1a', '#9a4070', '#cc33aa'] },
|
||||
{ id: 'fuchsia-noir', name: 'Fuchsia Noir', family: 'Magenta', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#0a0610', '#14081a', '#2a0c2e', '#8a3878', '#ff1493'] },
|
||||
{ id: 'matrix', name: 'Matrix', family: 'Green', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#000a00', '#031403', '#0a200a', '#208030', '#00ff41'] },
|
||||
{ id: 'sage', name: 'Sage', family: 'Green', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#0a0e08', '#141a10', '#1e2e1a', '#7a8870', '#9caf88'] },
|
||||
{ id: 'ivory', name: 'Ivory', family: 'Light', supportsDark: false, supportsLight: true,
|
||||
anchors: ['#fdfcf8', '#f5f2e8', '#e8e4d8', '#8a8478', '#3a3328'] },
|
||||
{ id: 'chalk', name: 'Chalk', family: 'Light', supportsDark: false, supportsLight: true,
|
||||
anchors: ['#fafaf7', '#f0f0ec', '#e5e5e0', '#75756e', '#2a2a28'] },
|
||||
{ id: 'cobalt', name: 'Cobalt', family: 'Blue', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#020817', '#061434', '#0c2244', '#3060a0', '#0047ab'] },
|
||||
{ id: 'midnight-sapphire', name: 'Midnight Sapphire', family: 'Blue', supportsDark: true, supportsLight: true,
|
||||
anchors: ['#02050e', '#060c1f', '#0e1a36', '#4a6088', '#1e3a8a'] },
|
||||
] as const;
|
||||
|
||||
export const DEFAULT_THEME_ID: ThemeId = 'obsidian';
|
||||
export const DEFAULT_THEME_MODE: ThemeMode = 'dark';
|
||||
export const STORAGE_KEY = 'boocode.theme';
|
||||
|
||||
const THEME_IDS_SET: ReadonlySet<string> = new Set(THEMES.map((t) => t.id));
|
||||
|
||||
export function isThemeId(s: string): s is ThemeId {
|
||||
return THEME_IDS_SET.has(s);
|
||||
}
|
||||
|
||||
function resolvedMode(mode: ThemeMode): 'dark' | 'light' {
|
||||
if (mode !== 'system') return mode;
|
||||
if (typeof window === 'undefined') return 'dark';
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
// Light-only themes (ivory, chalk) can't render dark — fall back to obsidian
|
||||
// dark per spec §8 decision 1. Keeps the fallback explicit so the caller
|
||||
// doesn't accidentally apply theme-ivory.dark (which has no rule block).
|
||||
function effectiveThemeId(id: ThemeId, mode: 'dark' | 'light'): ThemeId {
|
||||
if (mode === 'dark') {
|
||||
const meta = THEMES.find((t) => t.id === id);
|
||||
if (meta && !meta.supportsDark) return DEFAULT_THEME_ID;
|
||||
}
|
||||
return id;
|
||||
}
|
||||
|
||||
export function applyTheme(id: ThemeId, mode: ThemeMode): void {
|
||||
if (typeof document === 'undefined') return;
|
||||
const resolved = resolvedMode(mode);
|
||||
const effective = effectiveThemeId(id, resolved);
|
||||
document.documentElement.className =
|
||||
`theme-${effective}${resolved === 'dark' ? ' dark' : ''}`;
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify({ id, mode }));
|
||||
} catch {
|
||||
// quota / disabled storage — apply still succeeds, persistence falls
|
||||
// back to the next /api/settings round-trip.
|
||||
}
|
||||
}
|
||||
|
||||
interface ThemeState {
|
||||
id: ThemeId;
|
||||
mode: ThemeMode;
|
||||
}
|
||||
|
||||
// Module-level singleton, mirrors the useChatStatus / useSidebar pattern.
|
||||
// One shared state across every useTheme() consumer; setTheme() mutates it
|
||||
// and notifies subscribers so the App-level hook (which owns the matchMedia
|
||||
// listener) and the Settings picker stay in lockstep without prop drilling.
|
||||
function readCache(): ThemeState | null {
|
||||
if (typeof localStorage === 'undefined') return null;
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (!raw) return null;
|
||||
const parsed = JSON.parse(raw) as { id?: unknown; mode?: unknown };
|
||||
if (typeof parsed.id !== 'string' || !isThemeId(parsed.id)) return null;
|
||||
const m = parsed.mode;
|
||||
if (m !== 'dark' && m !== 'light' && m !== 'system') return null;
|
||||
return { id: parsed.id, mode: m };
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
let _state: ThemeState = readCache() ?? { id: DEFAULT_THEME_ID, mode: DEFAULT_THEME_MODE };
|
||||
let _initialized = false;
|
||||
const _subscribers = new Set<(s: ThemeState) => void>();
|
||||
|
||||
function notify(): void {
|
||||
for (const sub of _subscribers) {
|
||||
try {
|
||||
sub(_state);
|
||||
} catch {
|
||||
// swallow — one bad subscriber shouldn't break others
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Optimistic update: applies immediately, PATCHes server, reverts on failure
|
||||
// so the picker can show a toast without manual state juggling. Throws on
|
||||
// failure so the caller can surface the error.
|
||||
export async function setTheme(id: ThemeId, mode: ThemeMode): Promise<void> {
|
||||
const prev = _state;
|
||||
_state = { id, mode };
|
||||
applyTheme(id, mode);
|
||||
notify();
|
||||
try {
|
||||
await api.settings.patch({ theme_id: id, theme_mode: mode });
|
||||
} catch (err) {
|
||||
_state = prev;
|
||||
applyTheme(prev.id, prev.mode);
|
||||
notify();
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
// useTheme — mounts as many times as needed across the tree. The first mount
|
||||
// (initialized=false) triggers a single /api/settings fetch to reconcile the
|
||||
// local cache with the server. Every mount installs the matchMedia listener
|
||||
// when mode === 'system'; cleanup runs on unmount or when mode flips away.
|
||||
export function useTheme(): ThemeState {
|
||||
const [state, setState] = useState<ThemeState>(_state);
|
||||
|
||||
useEffect(() => {
|
||||
_subscribers.add(setState);
|
||||
// Ensure the DOM reflects current state on mount — the FOUC script in
|
||||
// index.html runs before this hook, but we re-apply in case the cache
|
||||
// was stale relative to a fresh fetch above.
|
||||
applyTheme(_state.id, _state.mode);
|
||||
if (!_initialized) {
|
||||
_initialized = true;
|
||||
api.settings
|
||||
.get()
|
||||
.then((s) => {
|
||||
const rawId = s['theme_id'];
|
||||
const rawMode = s['theme_mode'];
|
||||
const id =
|
||||
typeof rawId === 'string' && isThemeId(rawId) ? rawId : DEFAULT_THEME_ID;
|
||||
const mode: ThemeMode =
|
||||
rawMode === 'dark' || rawMode === 'light' || rawMode === 'system'
|
||||
? rawMode
|
||||
: DEFAULT_THEME_MODE;
|
||||
_state = { id, mode };
|
||||
applyTheme(id, mode);
|
||||
notify();
|
||||
})
|
||||
.catch(() => {
|
||||
// Settings fetch failed — keep whatever the FOUC script applied.
|
||||
// The picker still works; PATCH will retry on next selection.
|
||||
});
|
||||
}
|
||||
return () => {
|
||||
_subscribers.delete(setState);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (state.mode !== 'system') return;
|
||||
if (typeof window === 'undefined') return;
|
||||
const mql = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const onChange = () => applyTheme(state.id, 'system');
|
||||
mql.addEventListener('change', onChange);
|
||||
return () => mql.removeEventListener('change', onChange);
|
||||
}, [state.id, state.mode]);
|
||||
|
||||
return state;
|
||||
}
|
||||
125
apps/web/src/pages/Settings.tsx
Normal file
125
apps/web/src/pages/Settings.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import { useState } from 'react';
|
||||
import { Check } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import { THEMES, setTheme, useTheme, type ThemeId, type ThemeMode } from '@/lib/theme';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const MODES: { value: ThemeMode; label: string; hint: string }[] = [
|
||||
{ value: 'dark', label: 'Dark', hint: 'Use the dark variant.' },
|
||||
{ value: 'light', label: 'Light', hint: 'Use the light variant.' },
|
||||
{ value: 'system', label: 'System', hint: 'Follow OS preference.' },
|
||||
];
|
||||
|
||||
export function Settings() {
|
||||
const { id: currentId, mode: currentMode } = useTheme();
|
||||
// Track the most recent in-flight pick so the picker can show a subtle
|
||||
// "applying…" state on the targeted card while the PATCH is in flight.
|
||||
const [pending, setPending] = useState<{ kind: 'theme'; id: ThemeId } | { kind: 'mode'; mode: ThemeMode } | null>(null);
|
||||
|
||||
async function pickTheme(id: ThemeId) {
|
||||
if (id === currentId || pending) return;
|
||||
setPending({ kind: 'theme', id });
|
||||
try {
|
||||
await setTheme(id, currentMode);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'failed to apply theme');
|
||||
} finally {
|
||||
setPending(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function pickMode(mode: ThemeMode) {
|
||||
if (mode === currentMode || pending) return;
|
||||
setPending({ kind: 'mode', mode });
|
||||
try {
|
||||
await setTheme(currentId, mode);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'failed to apply mode');
|
||||
} finally {
|
||||
setPending(null);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="max-w-[1000px] mx-auto w-full px-6 py-6 space-y-8">
|
||||
<header>
|
||||
<h1 className="text-xl font-semibold">Settings</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Theme appearance. Saved on change, applies immediately.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-sm font-medium">Mode</h2>
|
||||
<RadioGroup
|
||||
value={currentMode}
|
||||
onValueChange={(v) => void pickMode(v as ThemeMode)}
|
||||
className="flex flex-wrap gap-4"
|
||||
>
|
||||
{MODES.map((m) => (
|
||||
<div key={m.value} className="flex items-center gap-2">
|
||||
<RadioGroupItem id={`mode-${m.value}`} value={m.value} />
|
||||
<Label htmlFor={`mode-${m.value}`} className="cursor-pointer">
|
||||
<span className="font-medium">{m.label}</span>
|
||||
<span className="ml-2 text-xs text-muted-foreground">{m.hint}</span>
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</section>
|
||||
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-sm font-medium">Theme</h2>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{THEMES.map((t) => {
|
||||
const isActive = t.id === currentId;
|
||||
const isPending = pending?.kind === 'theme' && pending.id === t.id;
|
||||
const isLightOnly = !t.supportsDark;
|
||||
return (
|
||||
<Card
|
||||
key={t.id}
|
||||
onClick={() => void pickTheme(t.id)}
|
||||
className={cn(
|
||||
'p-3 cursor-pointer transition-colors',
|
||||
'hover:bg-accent/10',
|
||||
isActive && 'ring-2 ring-ring',
|
||||
isPending && 'opacity-60',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<div className="font-mono text-sm truncate">{t.name}</div>
|
||||
<div className="text-xs text-muted-foreground">{t.family}</div>
|
||||
</div>
|
||||
{isActive && (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-primary shrink-0">
|
||||
<Check className="size-3" /> Selected
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex mt-2 rounded overflow-hidden border border-border/40">
|
||||
{t.anchors.map((hex, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 h-6"
|
||||
style={{ backgroundColor: hex }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{isLightOnly && (
|
||||
<div className="mt-2 text-xs text-muted-foreground italic">Light only</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
263
docs/themes_v1.md
Normal file
263
docs/themes_v1.md
Normal file
@@ -0,0 +1,263 @@
|
||||
# BooCode — Theme System v1
|
||||
|
||||
Standalone BooCode (`/opt/boocode/`). Tailwind v4 + shadcn nova preset. 18 preset themes × 2 modes (dark/light) = 36 palettes. User-selectable in Settings only. Persists to `settings` table.
|
||||
|
||||
-----
|
||||
|
||||
## 1. Theme list (locked)
|
||||
|
||||
| # | id | Display name | Family | Mode default |
|
||||
|---|---------------------|-------------------|----------------|----------------------|
|
||||
| 1 | `obsidian` | Obsidian | Charcoal/Black | dark (default theme) |
|
||||
| 2 | `gunmetal` | Gunmetal | Charcoal/Black | dark |
|
||||
| 3 | `espresso` | Espresso | Brown/Earth | dark |
|
||||
| 4 | `volcanic-brown` | Volcanic Brown | Brown/Earth | dark |
|
||||
| 5 | `copper` | Copper | Orange/Amber | dark |
|
||||
| 6 | `gold` | Gold | Orange/Amber | dark |
|
||||
| 7 | `oxblood` | Oxblood | Red/Crimson | dark |
|
||||
| 8 | `crimson` | Crimson | Red/Crimson | dark |
|
||||
| 9 | `elderflower` | Elderflower | Purple/Violet | dark |
|
||||
| 10| `plum` | Plum | Purple/Violet | dark |
|
||||
| 11| `steel-pink` | Steel Pink | Pink/Magenta | dark |
|
||||
| 12| `fuchsia-noir` | Fuchsia Noir | Pink/Magenta | dark |
|
||||
| 13| `matrix` | Matrix | Green | dark |
|
||||
| 14| `sage` | Sage | Green | dark |
|
||||
| 15| `ivory` | Ivory | Light | light (always) |
|
||||
| 16| `chalk` | Chalk | Light | light (always) |
|
||||
| 17| `cobalt` | Cobalt | Blue | dark |
|
||||
| 18| `midnight-sapphire` | Midnight Sapphire | Blue | dark |
|
||||
|
||||
**Default on first load:** `obsidian` (dark).
|
||||
**Light variants:** every dark theme ships a paired light variant. `ivory` and `chalk` have no dark variant — they are light-only.
|
||||
|
||||
-----
|
||||
|
||||
## 2. Storage model
|
||||
|
||||
### Schema change
|
||||
|
||||
Additive only. In `apps/server/src/schema.sql`:
|
||||
|
||||
```sql
|
||||
ALTER TABLE settings ADD COLUMN IF NOT EXISTS theme_id TEXT NOT NULL DEFAULT 'obsidian';
|
||||
ALTER TABLE settings ADD COLUMN IF NOT EXISTS theme_mode TEXT NOT NULL DEFAULT 'dark'
|
||||
CHECK (theme_mode IN ('dark', 'light', 'system'));
|
||||
```
|
||||
|
||||
### API surface
|
||||
|
||||
Extend `GET /api/settings` and `PATCH /api/settings`. No new routes.
|
||||
|
||||
`GET` response includes `theme_id`, `theme_mode`. `PATCH` accepts both. Validation:
|
||||
|
||||
- `theme_id` must be one of the 18 ids listed in section 1.
|
||||
- `theme_mode` ∈ `{dark, light, system}`.
|
||||
- Reject otherwise with 400.
|
||||
|
||||
-----
|
||||
|
||||
## 3. CSS token layer
|
||||
|
||||
Tailwind v4 + shadcn nova uses CSS custom properties.
|
||||
|
||||
### File layout
|
||||
|
||||
```
|
||||
apps/web/src/styles/
|
||||
├── globals.css # existing Tailwind entrypoint
|
||||
└── themes/
|
||||
├── obsidian.css
|
||||
├── gunmetal.css
|
||||
├── espresso.css
|
||||
├── volcanic-brown.css
|
||||
├── copper.css
|
||||
├── gold.css
|
||||
├── oxblood.css
|
||||
├── crimson.css
|
||||
├── elderflower.css
|
||||
├── plum.css
|
||||
├── steel-pink.css
|
||||
├── fuchsia-noir.css
|
||||
├── matrix.css
|
||||
├── sage.css
|
||||
├── ivory.css
|
||||
├── chalk.css
|
||||
├── cobalt.css
|
||||
└── midnight-sapphire.css
|
||||
```
|
||||
|
||||
Each per-theme file declares `.theme-<id>` (light tokens) and `.theme-<id>.dark` (dark tokens), overriding the shadcn nova CSS variables. `ivory.css` and `chalk.css` declare only the light selector.
|
||||
|
||||
`globals.css` imports all 18 theme files after the existing Tailwind/shadcn `@import` lines.
|
||||
|
||||
### Tokens overridden per theme
|
||||
|
||||
```
|
||||
--background
|
||||
--foreground
|
||||
--card
|
||||
--card-foreground
|
||||
--popover
|
||||
--popover-foreground
|
||||
--primary
|
||||
--primary-foreground
|
||||
--secondary
|
||||
--secondary-foreground
|
||||
--muted
|
||||
--muted-foreground
|
||||
--accent
|
||||
--accent-foreground
|
||||
--destructive
|
||||
--destructive-foreground
|
||||
--border
|
||||
--input
|
||||
--ring
|
||||
--sidebar
|
||||
--sidebar-foreground
|
||||
--sidebar-primary
|
||||
--sidebar-primary-foreground
|
||||
--sidebar-accent
|
||||
--sidebar-accent-foreground
|
||||
--sidebar-border
|
||||
--sidebar-ring
|
||||
```
|
||||
|
||||
`--radius` is locked at `0.5rem` (not per-theme). `--destructive` stays in the red family across all themes — error states are not theme-shifted.
|
||||
|
||||
### Anchor-to-token mapping
|
||||
|
||||
Five anchor swatches per theme map as follows:
|
||||
|
||||
```
|
||||
background ← anchor 1 (deepest)
|
||||
card / popover / sidebar ← anchor 2 (surface)
|
||||
border / input / muted ← anchor 3 (line)
|
||||
muted-foreground ← anchor 4 (dimmed text)
|
||||
primary / accent / ring /
|
||||
sidebar-primary /
|
||||
sidebar-accent ← anchor 5 (accent)
|
||||
foreground ← computed: anchor-5 hue, ~92% L, ~25% S
|
||||
(warm tint for warm themes, cool for cool)
|
||||
sidebar-foreground ← same as foreground
|
||||
sidebar-border ← same as border (anchor 3)
|
||||
sidebar-ring ← same as ring (anchor 5)
|
||||
destructive ← red family — dark mode: #dc2626,
|
||||
light mode: #b91c1c
|
||||
*-foreground variants ← derived high-contrast against parent
|
||||
```
|
||||
|
||||
### Dark anchor values
|
||||
|
||||
```
|
||||
obsidian #0c0c0e #15151a #1f1f23 #6b6b75 #8b5cf6
|
||||
gunmetal #0d1117 #161b22 #21262d #7d8590 #388bfd
|
||||
espresso #1c1410 #241a14 #2e2218 #8a7058 #c8a880
|
||||
volcanic-brown #140906 #1e0e0a #2e1610 #7a4030 #cc4a1a
|
||||
copper #100800 #1c1408 #2e1f0a #8a6040 #b87333
|
||||
gold #0e0800 #1a1200 #2a1f00 #a07c30 #d4af37
|
||||
oxblood #0a0303 #180606 #2a0808 #7a3028 #8b1a1a
|
||||
crimson #0e0404 #1a0808 #2e0a0a #8a3030 #dc143c
|
||||
elderflower #100818 #1c1024 #2c1830 #8a78a0 #b89cd8
|
||||
plum #0c0814 #180e20 #241830 #7a4878 #8e4585
|
||||
steel-pink #0e0408 #1a080e #2e0c1a #9a4070 #cc33aa
|
||||
fuchsia-noir #0a0610 #14081a #2a0c2e #8a3878 #ff1493
|
||||
matrix #000a00 #031403 #0a200a #208030 #00ff41
|
||||
sage #0a0e08 #141a10 #1e2e1a #7a8870 #9caf88
|
||||
cobalt #020817 #061434 #0c2244 #3060a0 #0047ab
|
||||
midnight-sapphire #02050e #060c1f #0e1a36 #4a6088 #1e3a8a
|
||||
```
|
||||
|
||||
### Light-only anchors
|
||||
|
||||
`ivory` and `chalk` use these values directly as the light palette:
|
||||
|
||||
```
|
||||
ivory #fdfcf8 #f5f2e8 #e8e4d8 #8a8478 #3a3328
|
||||
chalk #fafaf7 #f0f0ec #e5e5e0 #75756e #2a2a28
|
||||
```
|
||||
|
||||
### Light variants of the 16 dark themes
|
||||
|
||||
- lightest anchor → background
|
||||
- accent darkens ~15% (reduce HSL lightness by 15 percentage points)
|
||||
- foreground → near-black tinted toward family hue
|
||||
- surfaces, borders scale up in lightness symmetrically
|
||||
|
||||
-----
|
||||
|
||||
## 4. Mode resolution (dark/light/system)
|
||||
|
||||
```ts
|
||||
function resolvedMode(mode: 'dark' | 'light' | 'system'): 'dark' | 'light' {
|
||||
if (mode === 'system') {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
return mode;
|
||||
}
|
||||
```
|
||||
|
||||
- If `theme_id` is light-only (`ivory`, `chalk`) and the resolved mode is `dark`, fall back to `obsidian` dark.
|
||||
- Otherwise apply `<html class="theme-<id> dark?">`.
|
||||
|
||||
System-mode listener: subscribe to `matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...)` only when `theme_mode === 'system'`.
|
||||
|
||||
-----
|
||||
|
||||
## 5. Frontend wiring
|
||||
|
||||
### `apps/web/src/lib/theme.ts` (new)
|
||||
|
||||
Exports:
|
||||
|
||||
- `THEMES`: const array of `{ id, name, family, supportsDark, supportsLight, anchors }`
|
||||
- `applyTheme(id, mode)`: writes class to `<html>`, updates localStorage cache
|
||||
- `useTheme()`: hook reading `theme_id` + `theme_mode` from settings; applies on mount and on change; owns the matchMedia listener (only mounted when mode === 'system')
|
||||
|
||||
### `apps/web/src/App.tsx`
|
||||
|
||||
Call `useTheme()` at the top of the App component, before children, so the theme is applied before any child renders.
|
||||
|
||||
### `apps/web/index.html`
|
||||
|
||||
Inline `<script>` BEFORE the React entry that reads `localStorage['boocode.theme']` and sets `className` on `<html>` to prevent FOUC. Cache value: JSON `{ id, mode }`.
|
||||
|
||||
### `apps/web/src/pages/Settings.tsx` (new)
|
||||
|
||||
Route `/settings`. Layout:
|
||||
|
||||
- **Mode radio group** at top — Dark / Light / System (shadcn `radio-group` + `label`).
|
||||
- **Theme grid** below — 18 cards. `grid-cols-2` mobile, `grid-cols-3` md+.
|
||||
- Each card: shadcn `Card` containing theme name (font-mono, sm), family label (xs, muted), 5-swatch horizontal strip from `THEMES[i].anchors`, "Selected" badge if active, "Light only" hint on `ivory`/`chalk`.
|
||||
- Click card → PATCH `/api/settings` → on 200, `applyTheme()` + update localStorage cache. Optimistic; revert on failure with toast.
|
||||
- Mode radio change → same PATCH path.
|
||||
|
||||
### `apps/web/src/components/ui/`
|
||||
|
||||
Required shadcn primitives (verified present): `card`, `button`, `radio-group`, `label`.
|
||||
|
||||
-----
|
||||
|
||||
## 6. Build / verification
|
||||
|
||||
- `pnpm typecheck` (must pass)
|
||||
- `pnpm -F web build` (must pass)
|
||||
- Schema migration: `psql ... -c "\d settings"` shows `theme_id` and `theme_mode`.
|
||||
- API: `curl GET /api/settings` returns new fields; `PATCH` accepts them; invalid id → 400.
|
||||
- Visual: cycle themes, toggle mode, system follows OS, reload persists.
|
||||
|
||||
-----
|
||||
|
||||
## 7. Out of scope (v1)
|
||||
|
||||
- Custom user-defined palettes.
|
||||
- Per-project or per-session themes (global only).
|
||||
- Syntax-highlighting themes for `CodeBlock`.
|
||||
- Header quick-switcher dropdown (Settings only).
|
||||
|
||||
-----
|
||||
|
||||
## 8. Decisions on ambiguous points
|
||||
|
||||
1. **Light-only theme + dark mode request:** fall back to `obsidian` dark. No inline message.
|
||||
2. **Font per theme:** locked at Inter + JetBrains Mono. No theme changes typography in v1.
|
||||
3. **Animation on swap:** instant class change. No CSS transitions on `--background` (they cause flicker on first paint).
|
||||
Reference in New Issue
Block a user