Fix RTD code block and sidebar colors in dark mode (#119)

aidanfnv · web-flow · commit 5affd7d6097d · 2025-06-16T10:12:45.000-07:00
* Remove code block white background, use default

* Sync sidebar dark mode with parent page

* Move iframe recieve script
diff --git a/docs/_ext/generate_toc_html.py b/docs/_ext/generate_toc_html.py
@@ -324,8 +324,9 @@ def generate_toc_html(app, exception):
         </svg>
       </symbol>
     </svg>
+    <script src="iframe_theme_receiver.js"></script>
 </head>
-<body>
+<body data-theme="auto">
 <div class="content-container">
     <div id="tocSearchPanel">
         <div id="tocSearchPanelInner">
diff --git a/docs/_static/iframe_theme_receiver.js b/docs/_static/iframe_theme_receiver.js
@@ -0,0 +1,6 @@
+// Listen for theme changes from parent window
+window.addEventListener('message', function(event) {{
+    if (event.data && event.data.type === 'theme-change') {{
+        document.body.setAttribute('data-theme', event.data.theme);
+    }}
+}});
diff --git a/docs/_static/iframe_theme_sync.js b/docs/_static/iframe_theme_sync.js
@@ -0,0 +1,55 @@
+// Theme synchronization for iframe
+(function() {
+    'use strict';
+    
+    // Function to notify iframe about theme changes
+    function notifyIframeOfThemeChange(theme) {
+        const iframe = document.querySelector('.custom-nav iframe');
+        if (iframe && iframe.contentWindow) {
+            try {
+                iframe.contentWindow.postMessage({
+                    type: 'theme-change',
+                    theme: theme
+                }, '*');
+            } catch (e) {
+                console.warn('Could not send theme change message to iframe:', e);
+            }
+        }
+    }
+    
+    // Function to get current theme
+    function getCurrentTheme() {
+        return document.body.getAttribute('data-theme') || 'auto';
+    }
+    
+    // Monitor theme changes using MutationObserver
+    function observeThemeChanges() {
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {
+                    const newTheme = getCurrentTheme();
+                    notifyIframeOfThemeChange(newTheme);
+                }
+            });
+        });
+        
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['data-theme']
+        });
+    }
+    
+    // Initialize when DOM is ready
+    document.addEventListener('DOMContentLoaded', function() {
+        // Start observing theme changes
+        observeThemeChanges();
+        
+        // Send initial theme when iframe loads
+        const iframe = document.querySelector('.custom-nav iframe');
+        if (iframe) {
+            iframe.addEventListener('load', function() {
+                notifyIframeOfThemeChange(getCurrentTheme());
+            });
+        }
+    });
+})(); 
diff --git a/docs/_static/theme_overrides.css b/docs/_static/theme_overrides.css
@@ -305,7 +305,6 @@ form.sidebar-search-container {
 /* Code block styles */
 pre, pre code {
     color: #000000 !important;
-    background: #F8F8F8 !important;
 }
 
 /* Code block styling */
diff --git a/docs/conf.py b/docs/conf.py
@@ -144,6 +144,7 @@ def setup(app):
     "search.js",
     "section_highlight.js",
     "custom_body_classes.js",
+    "iframe_theme_sync.js",
 ]
 html_theme_options = {
     "light_css_variables": {

Original file line number	Diff line number	Diff line change
`@@ -305,7 +305,6 @@ form.sidebar-search-container {`
`305`	`305`	`/* Code block styles */`
`306`	`306`	`pre, pre code {`
`307`	`307`	`color: #000000 !important;`
`308`		`- background: #F8F8F8 !important;`
`309`	`308`	`}`
`310`	`309`
`311`	`310`	`/* Code block styling */`
Original file line number	Diff line number	Diff line change
`@@ -144,6 +144,7 @@ def setup(app):`
`144`	`144`	`"search.js",`
`145`	`145`	`"section_highlight.js",`
`146`	`146`	`"custom_body_classes.js",`
	`147`	`+ "iframe_theme_sync.js",`
`147`	`148`	`]`
`148`	`149`	`html_theme_options = {`
`149`	`150`	`"light_css_variables": {`