From fb15d4db4725ae74e6970667be993a72ea87da15 Mon Sep 17 00:00:00 2001 From: TalexDreamSoul Date: Fri, 3 Jul 2026 04:28:01 -0700 Subject: [PATCH] feat: add workspace theme toggle --- app/globals.css | 35 ++++++++- app/layout.tsx | 15 ++++ modules/shared/components/AppShell.tsx | 12 ++- modules/shared/components/ThemeToggle.tsx | 91 +++++++++++++++++++++++ 4 files changed, 147 insertions(+), 6 deletions(-) create mode 100644 modules/shared/components/ThemeToggle.tsx diff --git a/app/globals.css b/app/globals.css index 3ffd01f..c7b5366 100644 --- a/app/globals.css +++ b/app/globals.css @@ -63,6 +63,37 @@ --color-kumo-badge-green: oklch(0.48 0.11 155); } +.dark { + --background: oklch(0.18 0.018 160); + --foreground: oklch(0.93 0.014 154); + --card: oklch(0.235 0.02 160); + --card-foreground: oklch(0.93 0.014 154); + --popover: oklch(0.22 0.022 160); + --popover-foreground: oklch(0.93 0.014 154); + --primary: oklch(0.69 0.13 154); + --primary-foreground: oklch(0.15 0.022 158); + --secondary: oklch(0.29 0.026 160); + --secondary-foreground: oklch(0.9 0.018 154); + --muted: oklch(0.27 0.02 160); + --muted-foreground: oklch(0.72 0.02 154); + --accent: oklch(0.39 0.07 154); + --accent-foreground: oklch(0.94 0.018 154); + --destructive: oklch(0.64 0.19 25); + --destructive-foreground: oklch(0.98 0.012 25); + --border: oklch(0.36 0.024 160); + --input: oklch(0.38 0.024 160); + --ring: oklch(0.72 0.12 154); + --color-kumo-brand: var(--primary); + --color-kumo-brand-hover: oklch(0.76 0.13 154); + --color-kumo-focus: var(--ring); + --color-kumo-link: var(--primary); + --text-color-kumo-brand: var(--primary); + --text-color-kumo-link: var(--primary); + --color-kumo-success: oklch(0.7 0.13 154); + --color-kumo-success-tint: oklch(0.3 0.055 154); + --color-kumo-badge-green: oklch(0.69 0.13 154); +} + * { border-color: var(--border); } @@ -192,7 +223,7 @@ a, .teatea-button-secondary:hover, .teatea-button-ghost:hover { border-color: color-mix(in oklch, var(--primary) 45%, var(--border)); - background: color-mix(in oklch, var(--secondary) 72%, white); + background: color-mix(in oklch, var(--secondary) 72%, var(--background)); color: var(--accent-foreground); } @@ -247,7 +278,7 @@ a, .teatea-select-trigger:hover, :where([data-kumo-component="Select"][data-kumo-part="trigger"]):hover { border-color: color-mix(in oklch, var(--primary) 45%, var(--input)); - background: color-mix(in oklch, var(--secondary) 34%, white); + background: color-mix(in oklch, var(--secondary) 34%, var(--background)); } .teatea-select-trigger[data-open="true"] { diff --git a/app/layout.tsx b/app/layout.tsx index 247c98e..2772410 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -14,6 +14,21 @@ type RootLayoutProps = { export default function RootLayout({ children }: RootLayoutProps): React.ReactElement { return ( + +