kennethreitz/kennethreitz.org
1
0
Fork 0
mirror of https://github.com/kennethreitz/kennethreitz.org.git synced 2026-06-05 22:50:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix dark mode toggle to properly activate light mode on dark-mode phones

Browse Source 
Added body.light-mode class selectors with !important to override
@media (prefers-color-scheme: dark) styles when user manually toggles
to light mode on a device with dark system preference.

Changes:
- Added body.light-mode base styles in base.html
- Added light mode overrides in post.html for article titles and badges
- Added light mode overrides in archive.html and archive-by-length.html
- Added light mode overrides in search.html for input and autocomplete
- Added light mode overrides in themes.html

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kenneth Reitz
2025-09-29 15:53:22 -04:00
parent a32fdc6738
commit 194bbe4f4e
6 changed files with 136 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tuftecms/templates/archive-by-length.html
+15
View File
@@ -257,6 +257,21 @@ section h2 {
}
}
body.light-mode .year-picker {
background: #f8f8f8 !important;
border-color: #e0e0e0 !important;
}
body.light-mode .type-links a {
background: #f0f0f0 !important;
color: #666 !important;
}
body.light-mode .type-links a:hover {
background: #e0e0e0 !important;
color: #333 !important;
}
body.dark-mode .year-picker {
background: #1a1a1a;
border-color: #333;
tuftecms/templates/archive.html
+28
View File
@@ -328,6 +328,34 @@ section p:last-child {
}
}
body.light-mode .year-picker {
background: #f8f8f8 !important;
border-color: #e0e0e0 !important;
}
body.light-mode .type-links a {
background: #f0f0f0 !important;
color: #666 !important;
}
body.light-mode .type-links a:hover {
background: #e0e0e0 !important;
color: #333 !important;
}
body.light-mode .year-dropdown-content {
background-color: white !important;
border-color: #ddd !important;
}
body.light-mode .year-dropdown-content a {
color: #333 !important;
}
body.light-mode .year-dropdown-content a:hover {
background-color: #f0f0f0 !important;
}
body.dark-mode .year-picker {
background: #1a1a1a;
border-color: #333;
tuftecms/templates/base.html
+6
View File
@@ -131,6 +131,12 @@
color: #c9d1d9;
}
/* Light mode styles to override media query */
body.light-mode {
background-color: #fffff8;
color: #111;
}
@media (max-width: 760px) {
.theme-toggle {
font-size: 1.3rem;
tuftecms/templates/post.html
+35
View File
@@ -167,6 +167,41 @@
}
}
body.light-mode article h1 {
color: #111 !important;
}
body.light-mode .post-subtitle {
color: #666 !important;
}
body.light-mode .reading-time-badge {
background: #e8f4f8 !important;
color: inherit !important;
}
body.light-mode .themes-badge {
background: #dcfce7 !important;
color: #16a34a !important;
}
body.light-mode .themes-badge:hover {
background: #bbf7d0 !important;
}
body.light-mode .themes-dropdown-content {
background-color: white !important;
border-color: #ddd !important;
}
body.light-mode .themes-dropdown-content a {
color: #333 !important;
}
body.light-mode .themes-dropdown-content a:hover {
background-color: #dcfce7 !important;
}
body.dark-mode article h1 {
color: #e5e5e5;
}
tuftecms/templates/search.html
+24
View File
@@ -197,6 +197,30 @@
}
}
body.light-mode .search-input {
background-color: #fff !important;
color: #111 !important;
border-color: #ccc !important;
}
body.light-mode .autocomplete-list {
background: white !important;
border-color: #ccc !important;
}
body.light-mode .autocomplete-item {
border-bottom-color: #f0f0f0 !important;
}
body.light-mode .autocomplete-item:hover,
body.light-mode .autocomplete-item.active {
background: #f5f5f5 !important;
}
body.light-mode .autocomplete-title {
color: #333 !important;
}
@media (prefers-color-scheme: dark) {
.search-input {
background-color: #1a1a1a;
tuftecms/templates/themes.html
+28
View File
@@ -153,6 +153,34 @@
}
}
body.light-mode .subtitle {
color: #666 !important;
}
body.light-mode .theme-section {
border-bottom-color: #eee !important;
}
body.light-mode .theme-header strong {
color: #333 !important;
}
body.light-mode .theme-description {
color: #666 !important;
}
body.light-mode .theme-details summary {
color: #666 !important;
}
body.light-mode .theme-details summary:hover {
color: #000 !important;
}
body.light-mode .date {
color: #999 !important;
}
body.dark-mode .subtitle {
color: #999;
}