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
This commit is contained in:
juanatsap
2025-11-19 15:01:48 +00:00
parent 35a802cbd5
commit 59a16ce1e0
2 changed files with 8 additions and 7 deletions
+2 -2
View File
@@ -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 */
+6 -5
View File
@@ -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;