From 194bbe4f4e52daa0b9c5ef9f5bc4fc525eccd729 Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Mon, 29 Sep 2025 15:53:22 -0400 Subject: [PATCH] Fix dark mode toggle to properly activate light mode on dark-mode phones MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- tuftecms/templates/archive-by-length.html | 15 ++++++++++ tuftecms/templates/archive.html | 28 ++++++++++++++++++ tuftecms/templates/base.html | 6 ++++ tuftecms/templates/post.html | 35 +++++++++++++++++++++++ tuftecms/templates/search.html | 24 ++++++++++++++++ tuftecms/templates/themes.html | 28 ++++++++++++++++++ 6 files changed, 136 insertions(+) diff --git a/tuftecms/templates/archive-by-length.html b/tuftecms/templates/archive-by-length.html index fed3acd..07ccacb 100644 --- a/tuftecms/templates/archive-by-length.html +++ b/tuftecms/templates/archive-by-length.html @@ -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; diff --git a/tuftecms/templates/archive.html b/tuftecms/templates/archive.html index 20a0062..4a12d1c 100644 --- a/tuftecms/templates/archive.html +++ b/tuftecms/templates/archive.html @@ -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; diff --git a/tuftecms/templates/base.html b/tuftecms/templates/base.html index bfeeaf1..3a58202 100644 --- a/tuftecms/templates/base.html +++ b/tuftecms/templates/base.html @@ -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; diff --git a/tuftecms/templates/post.html b/tuftecms/templates/post.html index 2e3c8a5..64be39a 100644 --- a/tuftecms/templates/post.html +++ b/tuftecms/templates/post.html @@ -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; } diff --git a/tuftecms/templates/search.html b/tuftecms/templates/search.html index 1dfa2f2..ac89425 100644 --- a/tuftecms/templates/search.html +++ b/tuftecms/templates/search.html @@ -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; diff --git a/tuftecms/templates/themes.html b/tuftecms/templates/themes.html index aea156f..0d33f31 100644 --- a/tuftecms/templates/themes.html +++ b/tuftecms/templates/themes.html @@ -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; }