txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Theme-aware sidebar with dark mode support

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
static/css/01-foundation/_themes.css
+2 -2
View File
@@ -99,8 +99,8 @@
--accent-blue: #3399ff; --accent-blue: #3399ff;
--accent-green: #2ecc71; --accent-green: #2ecc71;
/* Sidebar (for non-clean theme) */ /* Sidebar (for non-clean theme) - darker than light theme but lighter than main content */
--sidebar-bg: #2a2a2a; --sidebar-bg: #3a3d3e;
/* Legacy CV content variables - theme-aware overrides */ /* Legacy CV content variables - theme-aware overrides */
--text-dark: #e0e0e0; /* Light text for dark background */ --text-dark: #e0e0e0; /* Light text for dark background */
static/css/03-components/_sidebar.css
+6 -5
View File
@@ -4,7 +4,7 @@
/* Sidebar - Left/Right columns */ /* Sidebar - Left/Right columns */
.cv-sidebar { .cv-sidebar {
background: #d1d4d2; /* Fixed color - same for both themes */ background: var(--sidebar-bg);
padding: 4rem 1.5rem; padding: 4rem 1.5rem;
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -85,7 +85,7 @@
line-height: 1.3em; line-height: 1.3em;
margin-bottom: 10px; margin-bottom: 10px;
padding: 0; padding: 0;
color: rgb(51, 51, 51); color: var(--text-primary);
text-align: left; text-align: left;
} }
@@ -94,11 +94,12 @@
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
color: var(--text-primary);
} }
.skill-item { .skill-item {
margin-bottom: 0.15rem; margin-bottom: 0.15rem;
color: rgb(0, 0, 0); color: var(--text-primary);
font-weight: 400; font-weight: 400;
} }
@@ -107,7 +108,7 @@
.sidebar-section summary::after { .sidebar-section summary::after {
content: '▶'; content: '▶';
font-size: 0.8em; font-size: 0.8em;
color: rgb(100, 100, 100); color: var(--text-muted);
transition: transform 0.2s ease, opacity 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease;
opacity: 0; opacity: 0;
margin-left: 15px; margin-left: 15px;
@@ -138,7 +139,7 @@
&::after { &::after {
content: '▶'; content: '▶';
font-size: 0.8em; font-size: 0.8em;
color: rgb(100, 100, 100); color: var(--text-muted);
transition: transform 0.2s ease, opacity 0.2s ease; transition: transform 0.2s ease, opacity 0.2s ease;
opacity: 0; opacity: 0;
margin-right: 15px; margin-right: 15px;