From 97cec0b57eeabc70a90e51a1113f5fb825adcd13 Mon Sep 17 00:00:00 2001 From: realChriss <77172965+realChriss@users.noreply.github.com> Date: Wed, 26 Nov 2025 20:14:21 +0100 Subject: [PATCH] feat: add midnight theme --- web/src/components/ThemeSelect.tsx | 3 +- web/src/store/instance.ts | 2 +- web/src/themes/midnight.css | 107 +++++++++++++++++++++++++++++ web/src/types/modules/setting.d.ts | 2 +- web/src/utils/theme.ts | 7 +- 5 files changed, 116 insertions(+), 5 deletions(-) create mode 100644 web/src/themes/midnight.css diff --git a/web/src/components/ThemeSelect.tsx b/web/src/components/ThemeSelect.tsx index 595f53ad3..e7a76c8f5 100644 --- a/web/src/components/ThemeSelect.tsx +++ b/web/src/components/ThemeSelect.tsx @@ -1,4 +1,4 @@ -import { Monitor, Moon, Palette, Sun, Wallpaper } from "lucide-react"; +import { Monitor, Moon, MoonStar, Palette, Sun, Wallpaper } from "lucide-react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { instanceStore } from "@/store"; import { THEME_OPTIONS } from "@/utils/theme"; @@ -15,6 +15,7 @@ const THEME_ICONS: Record = { "default-dark": , paper: , whitewall: , + midnight: , }; const ThemeSelect = ({ value, onValueChange, className }: ThemeSelectProps = {}) => { diff --git a/web/src/store/instance.ts b/web/src/store/instance.ts index 560a27d6b..9ac01ef4e 100644 --- a/web/src/store/instance.ts +++ b/web/src/store/instance.ts @@ -22,7 +22,7 @@ import { createRequestKey } from "./store-utils"; /** * Valid theme options */ -const VALID_THEMES = ["system", "default", "default-dark", "paper", "whitewall"] as const; +const VALID_THEMES = ["system", "default", "default-dark", "paper", "whitewall", "midnight"] as const; export type Theme = (typeof VALID_THEMES)[number]; /** diff --git a/web/src/themes/midnight.css b/web/src/themes/midnight.css new file mode 100644 index 000000000..a72b4e466 --- /dev/null +++ b/web/src/themes/midnight.css @@ -0,0 +1,107 @@ +:root { + --background: oklch(0.14 0.003 270); + --foreground: oklch(0.92 0.003 270); + --card: oklch(0.18 0.003 270); + --card-foreground: oklch(0.92 0.003 270); + --popover: oklch(0.18 0.003 270); + --popover-foreground: oklch(0.9 0.003 270); + --primary: oklch(0.7 0.08 290); + --primary-foreground: oklch(0.14 0.003 270); + --secondary: oklch(0.2 0.005 290); + --secondary-foreground: oklch(0.88 0.003 270); + --muted: oklch(0.18 0.005 270); + --muted-foreground: oklch(0.7 0.003 270); + --accent: oklch(0.22 0.008 295); + --accent-foreground: oklch(0.92 0.003 270); + --destructive: oklch(0.55 0.1 25); + --destructive-foreground: oklch(0.95 0.005 270); + --border: oklch(0.25 0.005 270); + --input: oklch(0.3 0.008 270); + --ring: oklch(0.7 0.08 290); + --chart-1: oklch(0.7 0.12 295); + --chart-2: oklch(0.7 0.12 285); + --chart-3: oklch(0.64 0.1 300); + --chart-4: oklch(0.68 0.12 295); + --chart-5: oklch(0.75 0.15 305); + --sidebar: oklch(0.13 0.002 270); + --sidebar-foreground: oklch(0.92 0.003 270); + --sidebar-primary: oklch(0.7 0.08 290); + --sidebar-primary-foreground: oklch(0.14 0.003 270); + --sidebar-accent: oklch(0.22 0.008 295); + --sidebar-accent-foreground: oklch(0.92 0.003 270); + --sidebar-border: oklch(0.25 0.005 270); + --sidebar-ring: oklch(0.7 0.08 290); + --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, + "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", + "Noto Color Emoji"; + --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace; + --radius: 0.5rem; + --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); + --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05); + --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), + 0 1px 2px -1px hsl(0 0% 0% / 0.1); + --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), + 0 1px 2px -1px hsl(0 0% 0% / 0.1); + --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), + 0 2px 4px -1px hsl(0 0% 0% / 0.1); + --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), + 0 4px 6px -1px hsl(0 0% 0% / 0.1); + --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), + 0 8px 10px -1px hsl(0 0% 0% / 0.1); + --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25); + --tracking-normal: 0em; + --spacing: 0.25rem; +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); + --font-sans: var(--font-sans); + --font-mono: var(--font-mono); + --font-serif: var(--font-serif); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --shadow-2xs: var(--shadow-2xs); + --shadow-xs: var(--shadow-xs); + --shadow-sm: var(--shadow-sm); + --shadow: var(--shadow); + --shadow-md: var(--shadow-md); + --shadow-lg: var(--shadow-lg); + --shadow-xl: var(--shadow-xl); + --shadow-2xl: var(--shadow-2xl); +} \ No newline at end of file diff --git a/web/src/types/modules/setting.d.ts b/web/src/types/modules/setting.d.ts index ffe65b304..350a3d67b 100644 --- a/web/src/types/modules/setting.d.ts +++ b/web/src/types/modules/setting.d.ts @@ -1 +1 @@ -type Theme = "system" | "default" | "default-dark" | "paper" | "whitewall"; +type Theme = "system" | "default" | "default-dark" | "paper" | "whitewall" | "midnight"; diff --git a/web/src/utils/theme.ts b/web/src/utils/theme.ts index d270c3a79..83e24f91b 100644 --- a/web/src/utils/theme.ts +++ b/web/src/utils/theme.ts @@ -1,8 +1,9 @@ import defaultDarkThemeContent from "../themes/default-dark.css?raw"; import paperThemeContent from "../themes/paper.css?raw"; import whitewallThemeContent from "../themes/whitewall.css?raw"; +import midnightThemeContent from "../themes/midnight.css?raw"; -const VALID_THEMES = ["system", "default", "default-dark", "paper", "whitewall"] as const; +const VALID_THEMES = ["system", "default", "default-dark", "paper", "whitewall", "midnight"] as const; type ValidTheme = (typeof VALID_THEMES)[number]; const THEME_CONTENT: Record = { @@ -11,6 +12,7 @@ const THEME_CONTENT: Record = { "default-dark": defaultDarkThemeContent, paper: paperThemeContent, whitewall: whitewallThemeContent, + midnight: midnightThemeContent, }; export interface ThemeOption { @@ -24,6 +26,7 @@ export const THEME_OPTIONS: ThemeOption[] = [ { value: "default-dark", label: "Dark" }, { value: "paper", label: "Paper" }, { value: "whitewall", label: "Whitewall" }, + { value: "midnight", label: "Midnight"}, ]; const validateTheme = (theme: string): ValidTheme => { @@ -44,7 +47,7 @@ export const getSystemTheme = (): "default" | "default-dark" => { * Resolves the actual theme to apply based on user preference * If theme is "system", returns the system preference, otherwise returns the theme as-is */ -export const resolveTheme = (theme: string): "default" | "default-dark" | "paper" | "whitewall" => { +export const resolveTheme = (theme: string): "default" | "default-dark" | "paper" | "whitewall" | "midnight" => { if (theme === "system") { return getSystemTheme(); }