From 59a16ce1e0e0e76b26301a364ce9ac8c5cd5f28d Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Wed, 19 Nov 2025 15:01:48 +0000
Subject: [PATCH] fix: Theme-aware sidebar with dark mode support

Light theme sidebar:
- Background: #d1d4d2 (light gray)
- Text: dark colors

Dark theme sidebar:
- Background: #3a3d3e (darker gray, between page bg and content)
- Text: light colors (using CSS variables)
- Titles: light colors

Changes:
- Revert sidebar bg to use var(--sidebar-bg) for theme switching
- Update dark theme sidebar color to #3a3d3e
- Replace all hardcoded text colors with CSS variables
- Sidebar titles, content, and arrows now adapt to theme
---
 static/css/01-foundation/_themes.css  |  4 ++--
 static/css/03-components/_sidebar.css | 11 ++++++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/static/css/01-foundation/_themes.css b/static/css/01-foundation/_themes.css
index 431b44b..2d858f5 100644
--- a/static/css/01-foundation/_themes.css
+++ b/static/css/01-foundation/_themes.css
@@ -99,8 +99,8 @@
   --accent-blue: #3399ff;
   --accent-green: #2ecc71;
 
-  /* Sidebar (for non-clean theme) */
-  --sidebar-bg: #2a2a2a;
+  /* Sidebar (for non-clean theme) - darker than light theme but lighter than main content */
+  --sidebar-bg: #3a3d3e;
 
   /* Legacy CV content variables - theme-aware overrides */
   --text-dark: #e0e0e0;  /* Light text for dark background */
diff --git a/static/css/03-components/_sidebar.css b/static/css/03-components/_sidebar.css
index 42fda6b..010038b 100644
--- a/static/css/03-components/_sidebar.css
+++ b/static/css/03-components/_sidebar.css
@@ -4,7 +4,7 @@
 
 /* Sidebar - Left/Right columns */
 .cv-sidebar {
-  background: #d1d4d2; /* Fixed color - same for both themes */
+  background: var(--sidebar-bg);
   padding: 4rem 1.5rem;
   font-size: 0.9rem;
 }
@@ -85,7 +85,7 @@
   line-height: 1.3em;
   margin-bottom: 10px;
   padding: 0;
-  color: rgb(51, 51, 51);
+  color: var(--text-primary);
   text-align: left;
 }
 
@@ -94,11 +94,12 @@
   font-size: 0.95rem;
   font-weight: 400;
   line-height: 1.5;
+  color: var(--text-primary);
 }
 
 .skill-item {
   margin-bottom: 0.15rem;
-  color: rgb(0, 0, 0);
+  color: var(--text-primary);
   font-weight: 400;
 }
 
@@ -107,7 +108,7 @@
   .sidebar-section summary::after {
     content: '▶';
     font-size: 0.8em;
-    color: rgb(100, 100, 100);
+    color: var(--text-muted);
     transition: transform 0.2s ease, opacity 0.2s ease;
     opacity: 0;
     margin-left: 15px;
@@ -138,7 +139,7 @@
     &::after {
       content: '▶';
       font-size: 0.8em;
-      color: rgb(100, 100, 100);
+      color: var(--text-muted);
       transition: transform 0.2s ease, opacity 0.2s ease;
       opacity: 0;
       margin-right: 15px;