From 76f4bc783222a85a47faf05d64aebd43b1ded1d8 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sat, 21 Feb 2026 21:20:49 +0100
Subject: [PATCH] Rework dark mode with purple-tinted color palette

- 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>
---
 apps/main/src/main.css | 76 +++++++++++++++++++++---------------------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/apps/main/src/main.css b/apps/main/src/main.css
index 7574a69..1a69877 100644
--- a/apps/main/src/main.css
+++ b/apps/main/src/main.css
@@ -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;
 }