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

Fix dark mode conflict when OS is dark but site theme is light

Browse Source 
- Wrap prefers-color-scheme dark styles with html:not([data-theme="light"])
- Fixes interlinear text being white on yellowish background
- Updated verse.html, chapter_interlinear.html, tufte.css, base.html,
  and family-tree-expansions.css

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kenneth Reitz
2025-12-01 23:51:57 -05:00
parent 2163d56185
commit 28f37f68c3
5 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
kjvstudy_org/static/css/family-tree-expansions.css
+16 -16
View File
@@ -1087,38 +1087,38 @@
}
}
/* Dark mode support */
/* Dark mode support (only when explicit theme not set to light) */
@media (prefers-color-scheme: dark) {
.family-search-container,
.family-analytics-container {
html:not([data-theme="light"]) .family-search-container,
html:not([data-theme="light"]) .family-analytics-container {
background: #2d3436;
border-color: #636e72;
color: #ddd;
}
.search-input {
html:not([data-theme="light"]) .search-input {
background: #2d3436;
border-color: #636e72;
color: #ddd;
}
.search-filters,
.breadcrumb-navigation,
.quick-navigation {
html:not([data-theme="light"]) .search-filters,
html:not([data-theme="light"]) .breadcrumb-navigation,
html:not([data-theme="light"]) .quick-navigation {
background: #2d3436;
border-color: #636e72;
}
.stat-card,
.chart-insights,
.insight-card,
.metric-item {
html:not([data-theme="light"]) .stat-card,
html:not([data-theme="light"]) .chart-insights,
html:not([data-theme="light"]) .insight-card,
html:not([data-theme="light"]) .metric-item {
background: #2d3436;
border-color: #636e72;
color: #ddd;
}
.analytics-header {
html:not([data-theme="light"]) .analytics-header {
background: linear-gradient(135deg, #0984e3 0%, #74b9ff 100%);
}
}
kjvstudy_org/static/tufte.css
+10 -8
View File
@@ -52,29 +52,31 @@ body {
counter-reset: sidenote-counter;
}
/* Adds dark mode - system preference */
/* Adds dark mode - system preference (only when explicit theme not set to light) */
@media (prefers-color-scheme: dark) {
body {
html:not([data-theme="light"]) body {
background-color: #151515;
color: #ddd;
}
.sidenote,
.marginnote {
html:not([data-theme="light"]) .sidenote,
html:not([data-theme="light"]) .marginnote {
background-color: #151515;
color: #ddd;
}
a:link,
a:visited {
html:not([data-theme="light"]) a:link,
html:not([data-theme="light"]) a:visited {
color: #aaa;
}
hr {
html:not([data-theme="light"]) hr {
border-top-color: #444;
}
h1, h2, h3 {
html:not([data-theme="light"]) h1,
html:not([data-theme="light"]) h2,
html:not([data-theme="light"]) h3 {
color: #ddd;
}
}
kjvstudy_org/templates/base.html
+1 -1
View File
@@ -252,7 +252,7 @@
}
@media (prefers-color-scheme: dark) {
.verse-tooltip:not([data-theme]) {
html:not([data-theme="light"]) .verse-tooltip {
background: #2a2a2a;
border-color: #444;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
kjvstudy_org/templates/chapter_interlinear.html
+12 -11
View File
@@ -379,52 +379,53 @@
border-bottom-color: #333;
}
/* Only apply OS dark mode when explicit theme is not set to light */
@media (prefers-color-scheme: dark) {
.word-original {
html:not([data-theme="light"]) .word-original {
color: #eee;
}
.word-unit:hover .word-original {
html:not([data-theme="light"]) .word-unit:hover .word-original {
color: #fff;
}
.word-unit:hover {
html:not([data-theme="light"]) .word-unit:hover {
background: #2a2a2a;
border-color: #444;
}
.word-unit.expanded {
html:not([data-theme="light"]) .word-unit.expanded {
background: #1a2e1a;
border-color: #4a7c59;
}
.word-detail {
html:not([data-theme="light"]) .word-detail {
background: #222;
border-color: #444;
}
.word-detail-original {
html:not([data-theme="light"]) .word-detail-original {
color: #eee;
}
.word-detail-value {
html:not([data-theme="light"]) .word-detail-value {
color: #ddd;
}
.word-detail-definition {
html:not([data-theme="light"]) .word-detail-definition {
color: #bbb;
border-top-color: #444;
}
.word-detail-header {
html:not([data-theme="light"]) .word-detail-header {
border-bottom-color: #444;
}
.verse-text {
html:not([data-theme="light"]) .verse-text {
color: #ccc;
}
.verse-section {
html:not([data-theme="light"]) .verse-section {
border-bottom-color: #333;
}
}
kjvstudy_org/templates/verse.html
+11 -10
View File
@@ -501,48 +501,49 @@
border-bottom-color: #444;
}
/* Only apply OS dark mode when explicit theme is not set to light */
@media (prefers-color-scheme: dark) {
.word-original {
html:not([data-theme="light"]) .word-original {
color: #eee;
}
.word-unit:hover .word-original {
html:not([data-theme="light"]) .word-unit:hover .word-original {
color: #fff;
}
.word-unit:hover {
html:not([data-theme="light"]) .word-unit:hover {
background: #2a2a2a;
border-color: #444;
}
.word-unit.expanded {
html:not([data-theme="light"]) .word-unit.expanded {
background: #1a2e1a;
border-color: #4a7c59;
}
.word-detail {
html:not([data-theme="light"]) .word-detail {
background: #222;
border-color: #444;
}
.word-detail-original {
html:not([data-theme="light"]) .word-detail-original {
color: #eee;
}
.word-detail-value {
html:not([data-theme="light"]) .word-detail-value {
color: #ddd;
}
.word-detail-definition {
html:not([data-theme="light"]) .word-detail-definition {
color: #bbb;
border-top-color: #444;
}
.word-detail-header {
html:not([data-theme="light"]) .word-detail-header {
border-bottom-color: #444;
}
.interlinear-heading {
html:not([data-theme="light"]) .interlinear-heading {
color: #ddd;
border-bottom-color: #444;
}