# Theme Toggle Fix - Complete Solution ## Problem Description The theme toggle button was not working correctly across all pages. The issues were: 1. **Only header responded to toggle**: When clicking the theme toggle button, only the header/navbar changed color, but the body content (`.content-text` paragraphs) remained unchanged. 2. **Empty body class**: When toggling, the body element's class attribute was being set to an empty string (`class=""`) instead of properly toggling between `class="dark-theme"` and no class. 3. **Body remained dark when switching to light**: When toggling from dark to light mode, the body background remained dark instead of switching to white. 4. **Inconsistent behavior**: The theme toggle worked on `index.html` but not on sub-pages (`in/in.html`, `processing/processing.html`, `out/out.html` and their sub-pages). ## Root Causes ### 1. CSS Variable Inheritance Issue The `.content-text p` elements used `color: var(--color-text-light)`, which relies on CSS variable inheritance. The CSS variables weren't being updated on all parent elements in the DOM hierarchy, causing the variables to resolve to dark values even when the theme was toggled. ### 2. Timing Issue with Stylesheet Injection The dynamic stylesheet that overrides CSS rules was being injected too late - only when `script.js` loaded at the end of the body. By that time, the page had already rendered with incorrect colors. ### 3. ClassList.toggle() Issue Using `classList.toggle()` was causing the class to be set to an empty string in some cases instead of properly adding/removing the `dark-theme` class. ### 4. Background Color Not Explicitly Reset When switching from dark to light mode, the background colors weren't being explicitly set to white, causing them to remain dark. ## Solution ### 1. Inline Stylesheet Injection in HTML Head **Location**: All HTML files in `in/`, `processing/`, and `out/` directories Added stylesheet injection code directly in the inline `