From ad5772485f178e7b2d13d4d526f0a9101a70476f Mon Sep 17 00:00:00 2001
From: lotherk <konrad@lother.io>
Date: Fri, 27 Mar 2026 02:32:34 +0000
Subject: [PATCH] fix: improve light theme visibility and contrast

---
 docs/src/assets/logo-light.svg |  4 ++--
 docs/src/styles/custom.css     | 28 +++++++++++++++++-----------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/docs/src/assets/logo-light.svg b/docs/src/assets/logo-light.svg
index 466dc07..fb05d3f 100644
--- a/docs/src/assets/logo-light.svg
+++ b/docs/src/assets/logo-light.svg
@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
   <defs>
     <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" style="stop-color:#8b5cf6;stop-opacity:1" />
-      <stop offset="100%" style="stop-color:#6366f1;stop-opacity:1" />
+      <stop offset="0%" style="stop-color:#6d28d9;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#4c1d95;stop-opacity:1" />
     </linearGradient>
   </defs>
   <rect width="100" height="100" rx="20" fill="url(#grad)"/>
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index 4819927..7d999cd 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -1,17 +1,23 @@
 /* Custom DearDiary styling */
 :root[data-theme='light'] {
-  --sl-color-accent-low: #e9e3ff;
-  --sl-color-accent: #7c3aed;
+  --sl-color-accent-low: #ddd6fe;
+  --sl-color-accent: #6d28d9;
   --sl-color-accent-high: #4c1d95;
-  --sl-color-white: #1e1b4b;
-  --sl-color-gray-1: #3730a3;
-  --sl-color-gray-2: #4338ca;
-  --sl-color-gray-3: #4f46e5;
-  --sl-color-gray-4: #6366f1;
-  --sl-color-gray-5: #818cf8;
-  --sl-color-gray-6: #a5b4fc;
-  --sl-color-gray-7: #c7d2fe;
-  --sl-color-black: #e0e7ff;
+  --sl-color-white: #1e293b;
+  --sl-color-gray-1: #334155;
+  --sl-color-gray-2: #475569;
+  --sl-color-gray-3: #64748b;
+  --sl-color-gray-4: #94a3b8;
+  --sl-color-gray-5: #cbd5e1;
+  --sl-color-gray-6: #e2e8f0;
+  --sl-color-gray-7: #f1f5f9;
+  --sl-color-black: #ffffff;
+  --sl-color-bg: #ffffff;
+  --sl-color-bg-nav: #f8fafc;
+  --sl-color-hairline: #e2e8f0;
+  --sl-color-hairline-light: #f1f5f9;
+  --sl-color-hairline-shade: #cbd5e1;
+  --sl-color-bg-slash: #f1f5f9;
 }
 
 :root[data-theme='dark'] {