|
1 | | -// ---- Color Mode Management ---- |
| 1 | +// ---- Color Mode Management (Deferred) ---- |
| 2 | +// Note: Initial color mode should be set inline in <head> to prevent flicker |
2 | 3 |
|
3 | 4 | (function () { |
4 | 5 | // Function to swap icon URLs between Light and Dark modes |
5 | 6 | function swapIconUrls(isDark) { |
6 | 7 | const iconElements = document.querySelectorAll("[data-component='icon']"); |
7 | 8 | const modeToUse = isDark ? "Dark" : "Light"; |
8 | | - const modeToReplace = isDark ? "Light" : "Dark"; |
9 | 9 |
|
10 | 10 | iconElements.forEach((img) => { |
11 | 11 | if (img.tagName.toLowerCase() === "img" && img.src) { |
|
79 | 79 | } |
80 | 80 | } |
81 | 81 |
|
82 | | - // Check if user preference exists in localStorage |
83 | | - const savedMode = localStorage.getItem("darkMode"); |
84 | | - let prefersDark; |
85 | | - let usingOSPreference = false; |
86 | | - |
87 | | - // If user has explicitly set a preference (via the buttons), use that |
88 | | - if (savedMode !== null) { |
89 | | - prefersDark = savedMode === "true"; |
90 | | - } |
91 | | - // Otherwise, check the OS preference |
92 | | - else { |
93 | | - // Check if the browser supports prefers-color-scheme media query |
94 | | - const prefersColorScheme = window.matchMedia( |
95 | | - "(prefers-color-scheme: dark)" |
96 | | - ); |
97 | | - prefersDark = prefersColorScheme.matches; |
98 | | - usingOSPreference = true; |
99 | | - } |
| 82 | + // Initialize when DOM is ready |
| 83 | + function initializeColorModeUI() { |
| 84 | + // Get current state from what was already set inline |
| 85 | + const isDarkMode = |
| 86 | + document.documentElement.classList.contains("u-mode-dark"); |
| 87 | + const savedMode = localStorage.getItem("darkMode"); |
| 88 | + const isAutoMode = savedMode === null; |
| 89 | + let usingOSPreference = isAutoMode; |
100 | 90 |
|
101 | | - // Apply mode immediately (before page render to prevent flash) |
102 | | - setColorMode(prefersDark, !usingOSPreference, usingOSPreference); |
| 91 | + // Ensure icons are set correctly on initial load |
| 92 | + swapIconUrls(isDarkMode); |
103 | 93 |
|
104 | | - // Set up event listeners for buttons once DOM is loaded |
105 | | - window.addEventListener("DOMContentLoaded", function () { |
| 94 | + // Get all button elements |
106 | 95 | const lightButtons = document.querySelectorAll( |
107 | 96 | '[data-mode-button="light"]' |
108 | 97 | ); |
|
120 | 109 | button.classList.remove("cc-active-mode"); |
121 | 110 | }); |
122 | 111 |
|
123 | | - // Set initial state based on current mode |
124 | | - const isDarkMode = |
125 | | - document.documentElement.classList.contains("u-mode-dark"); |
126 | | - |
127 | | - // Ensure icons are set correctly on initial load |
128 | | - swapIconUrls(isDarkMode); |
129 | | - |
130 | | - // Check if we're currently using OS preference (no saved mode) |
131 | | - const savedMode = localStorage.getItem("darkMode"); |
132 | | - const isAutoMode = savedMode === null; |
133 | | - |
| 112 | + // Set initial button states based on current mode |
134 | 113 | if (isAutoMode) { |
135 | 114 | autoButtons.forEach((button) => { |
136 | 115 | button.classList.add("cc-active-mode"); |
|
186 | 165 | setColorMode(e.matches, false); |
187 | 166 | } |
188 | 167 | }); |
189 | | - }); |
| 168 | + } |
| 169 | + |
| 170 | + // Initialize the UI when DOM is ready |
| 171 | + if (document.readyState === "loading") { |
| 172 | + document.addEventListener("DOMContentLoaded", initializeColorModeUI); |
| 173 | + } else { |
| 174 | + // DOM already loaded |
| 175 | + initializeColorModeUI(); |
| 176 | + } |
190 | 177 | })(); |
0 commit comments