From f6f02fa9d63b7df988772b3a046bd984bf4d6f8d Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Sun, 23 Nov 2025 12:29:51 -0500 Subject: [PATCH] Fix sidenote background showing dark in light mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The tufte.css @media (prefers-color-scheme: dark) was applying dark backgrounds to sidenotes even when the page was in light mode. Fixed by explicitly setting: - Light mode: transparent background with dark text (#444) - Dark mode (manual): dark background (#151515) with light text (#aaa) - Dark mode (system): dark background (#151515) with light text (#aaa) Used !important to override tufte.css base styles. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- kjvstudy_org/templates/base.html | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/kjvstudy_org/templates/base.html b/kjvstudy_org/templates/base.html index 9effc5e..1e6f0cf 100644 --- a/kjvstudy_org/templates/base.html +++ b/kjvstudy_org/templates/base.html @@ -670,14 +670,24 @@ border-left: 4px solid #999; font-size: 0.95rem; line-height: 1.6; - color: #444; + color: #444 !important; + background-color: transparent !important; font-weight: 400; } [data-theme="dark"] .sidenote, [data-theme="dark"] .marginnote { border-left-color: #666; - color: #aaa; + color: #aaa !important; + background-color: #151515 !important; + } + + @media (prefers-color-scheme: dark) { + .sidenote:not([data-theme]), + .marginnote:not([data-theme]) { + color: #aaa !important; + background-color: #151515 !important; + } } .sidenote-number,