1+ // Theme synchronization for iframe
2+ ( function ( ) {
3+ 'use strict' ;
4+
5+ // Function to notify iframe about theme changes
6+ function notifyIframeOfThemeChange ( theme ) {
7+ const iframe = document . querySelector ( '.custom-nav iframe' ) ;
8+ if ( iframe && iframe . contentWindow ) {
9+ try {
10+ iframe . contentWindow . postMessage ( {
11+ type : 'theme-change' ,
12+ theme : theme
13+ } , '*' ) ;
14+ } catch ( e ) {
15+ console . warn ( 'Could not send theme change message to iframe:' , e ) ;
16+ }
17+ }
18+ }
19+
20+ // Function to get current theme
21+ function getCurrentTheme ( ) {
22+ return document . body . getAttribute ( 'data-theme' ) || 'auto' ;
23+ }
24+
25+ // Monitor theme changes using MutationObserver
26+ function observeThemeChanges ( ) {
27+ const observer = new MutationObserver ( function ( mutations ) {
28+ mutations . forEach ( function ( mutation ) {
29+ if ( mutation . type === 'attributes' && mutation . attributeName === 'data-theme' ) {
30+ const newTheme = getCurrentTheme ( ) ;
31+ notifyIframeOfThemeChange ( newTheme ) ;
32+ }
33+ } ) ;
34+ } ) ;
35+
36+ observer . observe ( document . body , {
37+ attributes : true ,
38+ attributeFilter : [ 'data-theme' ]
39+ } ) ;
40+ }
41+
42+ // Initialize when DOM is ready
43+ document . addEventListener ( 'DOMContentLoaded' , function ( ) {
44+ // Start observing theme changes
45+ observeThemeChanges ( ) ;
46+
47+ // Send initial theme when iframe loads
48+ const iframe = document . querySelector ( '.custom-nav iframe' ) ;
49+ if ( iframe ) {
50+ iframe . addEventListener ( 'load' , function ( ) {
51+ notifyIframeOfThemeChange ( getCurrentTheme ( ) ) ;
52+ } ) ;
53+ }
54+ } ) ;
55+ } ) ( ) ;
0 commit comments