@@ -90,61 +90,99 @@ export const getScriptToRunAsap: GetScriptToRunAsap = ({
90
90
91
91
})();
92
92
93
- document.documentElement.setAttribute(
94
- "${ data_fr_scheme } ",
95
- (() => {
96
- const colorSchemeReadFromLocalStorage = localStorage.getItem("scheme");
93
+ const effect = ()=> {
97
94
98
- if (colorSchemeReadFromLocalStorage === null) {
99
- return "${ defaultColorScheme } ";
100
- }
95
+ document.documentElement.setAttribute(
96
+ "${ data_fr_scheme } ",
97
+ (() => {
98
+ const colorSchemeReadFromLocalStorage = localStorage.getItem("scheme");
101
99
102
- return colorSchemeReadFromLocalStorage;
103
- })()
104
- );
105
- document.documentElement.setAttribute("${ data_fr_theme } ", isDark ? "dark" : "light")
100
+ if (colorSchemeReadFromLocalStorage === null) {
101
+ return "${ defaultColorScheme } ";
102
+ }
106
103
107
- {
104
+ return colorSchemeReadFromLocalStorage;
105
+ })()
106
+ );
107
+ document.documentElement.setAttribute("${ data_fr_theme } ", isDark ? "dark" : "light")
108
108
109
- let element= document.getElementById(" ${ rootColorSchemeStyleTagId } ");
109
+ {
110
110
111
- if( element !== null ){
112
- element.remove()
113
- }
111
+ let element= document.getElementById("${ rootColorSchemeStyleTagId } ");
114
112
115
- element = document.createElement("style");
113
+ if( element !== null ){
114
+ element.remove()
115
+ }
116
116
117
- if ("${ nonce } " !== "") {
118
- element.setAttribute("nonce", "${ nonce } ");
119
- }
117
+ element = document.createElement("style");
120
118
121
- element.id = "${ rootColorSchemeStyleTagId } ";
119
+ if ("${ nonce } " !== "") {
120
+ element.setAttribute("nonce", "${ nonce } ");
121
+ }
122
122
123
- element.innerHTML = sanitizer.createHTML(\`:root { color-scheme: \${isDark ? "dark" : "light"}; }\`) ;
123
+ element.id = " ${ rootColorSchemeStyleTagId } " ;
124
124
125
- document.head.appendChild(element );
125
+ element.innerHTML = sanitizer.createHTML(\`:root { color-scheme: \${isDark ? "dark" : "light"}; }\` );
126
126
127
- }
127
+ document.head.appendChild(element);
128
128
129
- {
129
+ }
130
+
131
+ {
130
132
131
- const name = "theme-color";
133
+ const name = "theme-color";
132
134
133
- let element = document.querySelector(\`meta[name=\${name}]\`);
134
-
135
- if( element !== null ){
136
- element.remove();
137
- }
135
+ let element = document.querySelector(\`meta[name=\${name}]\`);
136
+
137
+ if( element !== null ){
138
+ element.remove();
139
+ }
138
140
139
- element = document.createElement("meta");
141
+ element = document.createElement("meta");
140
142
141
- element.name = name;
143
+ element.name = name;
142
144
143
- element.content = isDark ? "${
144
- fr . colors . getHex ( { "isDark" : true } ) . decisions . background . default . grey . default
145
- } " : "${ fr . colors . getHex ( { "isDark" : false } ) . decisions . background . default . grey . default } ";
145
+ element.content = isDark ? "${
146
+ fr . colors . getHex ( { "isDark" : true } ) . decisions . background . default . grey . default
147
+ } " : "${
148
+ fr . colors . getHex ( { "isDark" : false } ) . decisions . background . default . grey . default
149
+ } ";
150
+
151
+ document.head.appendChild(element);
152
+
153
+ }
154
+
155
+ };
156
+
157
+ effect();
158
+
159
+ // NOTE: This is just for global-error.tsx support
160
+ {
161
+
162
+ const observer = new MutationObserver((mutationsList) => {
163
+ for (const mutation of mutationsList) {
164
+ if (
165
+ mutation.type === "attributes" &&
166
+ mutation.attributeName === "${ data_fr_scheme } "
167
+ ) {
168
+ const htmlEl = mutation.target;
169
+
170
+ if (htmlEl.hasAttribute("data-fr-js")) {
171
+ observer.disconnect();
172
+ }
173
+
174
+ if (!htmlEl.hasAttribute("${ data_fr_scheme } ")) {
175
+ effect();
176
+ observer.disconnect();
177
+ }
178
+ }
179
+ }
180
+ });
146
181
147
- document.head.appendChild(element);
182
+ observer.observe(document.documentElement, {
183
+ attributes: true,
184
+ attributeFilter: ["${ data_fr_scheme } "],
185
+ });
148
186
149
187
}
150
188
0 commit comments