Add theming infrastructure (task 08)

CSS-variable multi-theme system (default + warm) × {light, dark, system}; per-user theme/theme_mode columns; no-flash pre-paint script; useTheme hook + ThemePicker component on /settings.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ginnoir
2026-05-06 02:50:05 -05:00
co-authored by Claude Sonnet 4.6
parent 6710c8b231
commit 8cc2ef0732
12 changed files with 540 additions and 3 deletions
+2
View File
@@ -19,6 +19,8 @@ export const users = pgTable("users", {
email: varchar("email", { length: 255 }).notNull().unique(),
emailVerified: timestamp("email_verified", { withTimezone: true }),
image: text("image"),
theme: text("theme").notNull().default("default"),
themeMode: text("theme_mode").notNull().default("system"),
createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
});
+16
View File
@@ -0,0 +1,16 @@
export type ThemeMode = "light" | "dark" | "system";
export type ThemeId = "default" | "warm" | (string & {});
export const THEMES: ReadonlyArray<{ id: ThemeId; label: string }> = [
{ id: "default", label: "Default" },
{ id: "warm", label: "Warm" },
];
export const THEME_MODES: ReadonlyArray<{ id: ThemeMode; label: string }> = [
{ id: "light", label: "Light" },
{ id: "dark", label: "Dark" },
{ id: "system", label: "System" },
];
export const VALID_THEME_IDS = new Set(THEMES.map((t) => t.id));
export const VALID_THEME_MODES = new Set<string>(["light", "dark", "system"]);