|
1 | 1 | (function () { |
2 | 2 | function updateIframesForDarkMode() { |
3 | 3 | const isDark = document.documentElement.classList.contains("dark"); |
4 | | - console.log("Dark mode:", isDark); |
5 | 4 |
|
6 | 5 | document.querySelectorAll('iframe[src*="chromatic.com/iframe.html"]').forEach((iframe) => { |
7 | 6 | iframe.style.background = "transparent"; |
8 | 7 | iframe.allowTransparency = true; |
9 | | - console.log("Found iframe:", iframe.src); |
10 | 8 |
|
11 | 9 | // Use postMessage to communicate with the iframe since we can't access contentDocument due to CORS |
12 | 10 | const sendThemeMessage = () => { |
|
18 | 16 | background: isDark ? '#0b0d0f' : 'transparent' // transparent for light mode |
19 | 17 | } |
20 | 18 | }; |
21 | | - console.log("Sending theme message to iframe:", message); |
22 | 19 | iframe.contentWindow.postMessage(message, '*'); |
23 | 20 | } catch (e) { |
24 | 21 | console.warn("Could not send message to iframe:", e); |
|
30 | 27 |
|
31 | 28 | // Also send message when iframe loads |
32 | 29 | iframe.addEventListener("load", () => { |
33 | | - console.log("iframe loaded, sending theme message"); |
34 | 30 | // Add a small delay to ensure iframe is ready |
35 | 31 | setTimeout(sendThemeMessage, 100); |
36 | 32 | }); |
|
43 | 39 | if (mutation.type === 'attributes' && |
44 | 40 | mutation.attributeName === 'class' && |
45 | 41 | mutation.target === document.documentElement) { |
46 | | - console.log("Theme class changed, updating iframes"); |
47 | 42 | updateIframesForDarkMode(); |
48 | 43 | } |
49 | 44 | }); |
|
57 | 52 | if (document.readyState === "loading") { |
58 | 53 | document.addEventListener("DOMContentLoaded", updateIframesForDarkMode); |
59 | 54 | } else { |
60 | | - updateIframesForDarkMode(); |
| 55 | + setTimeout(updateIframesForDarkMode, 100); |
| 56 | + // TODO: add Storybook with Darkmode enabled |
| 57 | + let themeChangeCount = 0; |
| 58 | + const themeChangeInterval = setInterval(() => { |
| 59 | + if (themeChangeCount < 2) { |
| 60 | + updateIframesForDarkMode(); |
| 61 | + themeChangeCount++; |
| 62 | + } else { |
| 63 | + clearInterval(themeChangeInterval); |
| 64 | + } |
| 65 | + }, 1000); |
61 | 66 | } |
62 | 67 | })(); |
0 commit comments