Skip to content

Commit 98a3735

Browse files
INQTRclaude
andcommitted
fix: update dashboard dark theme to match shadcn v4
- Swap sidebar/content backgrounds so sidebar is lighter gray - Update all dark mode tokens to shadcn v4 values (borders, cards, accents) - Use Tailwind v4 blue color scale for chart colors in both modes - Remove gradient from dashboard alpha banner Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 7dd0470 commit 98a3735

File tree

2 files changed

+27
-28
lines changed

2 files changed

+27
-28
lines changed

src/app/globals.css

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,11 @@
8282
--border: oklch(0.922 0 0);
8383
--input: oklch(0.922 0 0);
8484
--ring: oklch(0.708 0 0);
85-
--chart-1: oklch(0.646 0.222 41.116);
86-
--chart-2: oklch(0.60 0.118 184.704);
87-
--chart-3: oklch(0.398 0.07 227.392);
88-
--chart-4: oklch(0.828 0.189 84.429);
89-
--chart-5: oklch(0.769 0.188 70.08);
85+
--chart-1: var(--color-blue-300);
86+
--chart-2: var(--color-blue-500);
87+
--chart-3: var(--color-blue-600);
88+
--chart-4: var(--color-blue-700);
89+
--chart-5: var(--color-blue-800);
9090
--radius: 0.5rem;
9191
--sidebar: oklch(0.985 0 0);
9292
--sidebar-foreground: oklch(0.145 0 0);
@@ -118,34 +118,34 @@
118118
.dark {
119119
--background: oklch(0.145 0 0);
120120
--foreground: oklch(0.985 0 0);
121-
--card: oklch(0.145 0 0);
121+
--card: oklch(0.205 0 0);
122122
--card-foreground: oklch(0.985 0 0);
123-
--popover: oklch(0.145 0 0);
123+
--popover: oklch(0.205 0 0);
124124
--popover-foreground: oklch(0.985 0 0);
125-
--primary: oklch(0.985 0 0);
125+
--primary: oklch(0.922 0 0);
126126
--primary-foreground: oklch(0.205 0 0);
127-
--secondary: oklch(0.205 0 0);
127+
--secondary: oklch(0.269 0 0);
128128
--secondary-foreground: oklch(0.985 0 0);
129-
--muted: oklch(0.205 0 0);
129+
--muted: oklch(0.269 0 0);
130130
--muted-foreground: oklch(0.708 0 0);
131-
--accent: oklch(0.205 0 0);
131+
--accent: oklch(0.371 0 0);
132132
--accent-foreground: oklch(0.985 0 0);
133-
--destructive: oklch(0.65 0.2 25); /* softer red for dark mode */
134-
--border: oklch(0.205 0 0);
135-
--input: oklch(0.205 0 0);
136-
--ring: oklch(0.439 0 0);
137-
--chart-1: oklch(0.488 0.243 264.376);
138-
--chart-2: oklch(0.696 0.17 162.48);
139-
--chart-3: oklch(0.769 0.188 70.08);
140-
--chart-4: oklch(0.627 0.265 303.9);
141-
--chart-5: oklch(0.645 0.246 16.439);
142-
--sidebar: oklch(0 0 0);
133+
--destructive: oklch(0.704 0.191 22.216);
134+
--border: oklch(1 0 0 / 10%);
135+
--input: oklch(1 0 0 / 15%);
136+
--ring: oklch(0.556 0 0);
137+
--chart-1: var(--color-blue-300);
138+
--chart-2: var(--color-blue-500);
139+
--chart-3: var(--color-blue-600);
140+
--chart-4: var(--color-blue-700);
141+
--chart-5: var(--color-blue-800);
142+
--sidebar: oklch(0.205 0 0);
143143
--sidebar-foreground: oklch(0.985 0 0);
144-
--sidebar-primary: oklch(0.985 0 0);
145-
--sidebar-primary-foreground: oklch(0.205 0 0);
146-
--sidebar-accent: oklch(0.145 0 0);
144+
--sidebar-primary: oklch(0.488 0.243 264.376);
145+
--sidebar-primary-foreground: oklch(0.985 0 0);
146+
--sidebar-accent: oklch(0.269 0 0);
147147
--sidebar-accent-foreground: oklch(0.985 0 0);
148-
--sidebar-border: oklch(0.205 0 0);
148+
--sidebar-border: oklch(1 0 0 / 10%);
149149
--sidebar-ring: oklch(0.439 0 0);
150150

151151
/* Surface levels - stacking depth (1=base, 2=elevated, 3=highest) */

src/components/dashboard/dashboard-banner.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@ import { Github } from "lucide-react";
22

33
export function DashboardBanner() {
44
return (
5-
<div className="relative overflow-hidden rounded-xl bg-linear-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10 border border-indigo-500/20 mb-8">
6-
<div className="absolute inset-0 bg-grid-white/10 mask-[linear-gradient(0deg,white,rgba(255,255,255,0.5))] dark:bg-grid-black/10" />
7-
<div className="relative flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 bg-background/50 backdrop-blur-sm px-4 py-3">
5+
<div className="rounded-xl border border-indigo-500/20 mb-8">
6+
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 px-4 py-3">
87
<div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
98
<div className="flex items-center gap-2">
109
<span className="inline-flex items-center rounded-md bg-indigo-500/15 px-2 py-0.5 text-xs font-medium text-indigo-700 dark:text-indigo-300">

0 commit comments

Comments
 (0)