arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Rework dark mode with purple-tinted color palette

Browse source 
- Replace neutral gray oklch values (hue 0) with purple-tinted variants (hue 290, low chroma) across all dark mode CSS variables
- Background, card, border, muted, accent all now carry a subtle purple tint
- Navbar colors shifted from blue-gray (#292e39) to deep purple (#1e1b2e)
- Stream Chat dark mode backgrounds aligned with the new palette
- Creates a cohesive dark theme that complements the #804EEC purple design system

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arthur Belleville 2026-02-21 21:20:49 +01:00
parent 64c2c35a34
commit 76f4bc7832
No known key found for this signature in database
1 changed files with 38 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
apps/main/src/main.css
View file

@ -40,38 +40,38 @@
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.145 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.145 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.985 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--background: oklch(0.14 0.012 290);
--foreground: oklch(0.985 0.005 290);
--card: oklch(0.16 0.014 290);
--card-foreground: oklch(0.985 0.005 290);
--popover: oklch(0.16 0.014 290);
--popover-foreground: oklch(0.985 0.005 290);
--primary: oklch(0.985 0.005 290);
--primary-foreground: oklch(0.2 0.012 290);
--secondary: oklch(0.22 0.018 290);
--secondary-foreground: oklch(0.985 0.005 290);
--muted: oklch(0.22 0.018 290);
--muted-foreground: oklch(0.65 0.02 290);
--accent: oklch(0.22 0.018 290);
--accent-foreground: oklch(0.985 0.005 290);
--destructive: oklch(0.396 0.141 25.723);
--destructive-foreground: oklch(0.637 0.237 25.331);
--border: oklch(0.269 0 0);
--input: oklch(0.269 0 0);
--ring: oklch(0.439 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--border: oklch(0.26 0.02 290);
--input: oklch(0.26 0.02 290);
--ring: oklch(0.45 0.03 290);
--chart-1: oklch(0.55 0.2 290);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.269 0 0);
--sidebar-ring: oklch(0.439 0 0);
--sidebar: oklch(0.18 0.016 290);
--sidebar-foreground: oklch(0.985 0.005 290);
--sidebar-primary: oklch(0.55 0.2 290);
--sidebar-primary-foreground: oklch(0.985 0.005 290);
--sidebar-accent: oklch(0.24 0.02 290);
--sidebar-accent-foreground: oklch(0.985 0.005 290);
--sidebar-border: oklch(0.26 0.02 290);
--sidebar-ring: oklch(0.45 0.03 290);
}
@theme inline {
@ -111,8 +111,8 @@
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-navbar-background: #292e39;
--color-navbar-darker: #171920;
--color-navbar-background: #1e1b2e;
--color-navbar-darker: #141121;
}
@layer base {
@ -139,16 +139,16 @@
.dark .str-chat {
--str-chat__primary-color: #9b6ff0;
--str-chat__active-primary-color: #804EEC;
--str-chat__surface-color: rgba(128, 78, 236, 0.15);
--str-chat__secondary-surface-color: rgba(128, 78, 236, 0.1);
--str-chat__primary-surface-color: rgba(128, 78, 236, 0.12);
--str-chat__primary-surface-color-low-emphasis: rgba(128, 78, 236, 0.06);
--str-chat__background-color: rgba(110, 100, 120, 0.2);
--str-chat__secondary-background-color: rgba(80, 72, 88, 0.35);
--str-chat__border-color: rgba(128, 78, 236, 0.2);
--str-chat__text-color: #f5f3f7;
--str-chat__text-low-emphasis-color: #b8b0c0;
--str-chat__disabled-color: rgba(155, 143, 165, 0.35);
--str-chat__surface-color: rgba(128, 78, 236, 0.12);
--str-chat__secondary-surface-color: rgba(128, 78, 236, 0.08);
--str-chat__primary-surface-color: rgba(128, 78, 236, 0.1);
--str-chat__primary-surface-color-low-emphasis: rgba(128, 78, 236, 0.05);
--str-chat__background-color: rgba(30, 27, 46, 0.6);
--str-chat__secondary-background-color: rgba(20, 17, 33, 0.5);
--str-chat__border-color: rgba(128, 78, 236, 0.15);
--str-chat__text-color: #eeeaf5;
--str-chat__text-low-emphasis-color: #a8a0b8;
--str-chat__disabled-color: rgba(128, 78, 236, 0.2);
--str-chat__own-message-bubble-color: #804EEC;
--str-chat__own-message-text-color: #ffffff;
}