PluginProbe
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) / 2.1.3
Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) v2.1.3
2.1.3 2.1.2 2.1.1 2.1.0 2.0.4 2.0.3 2.0.2 2.0.1 2.0.0 1.5.5 1.5.4 1.5.3 1.5.2 1.5.1 1.5.0 trunk 1.0.1 1.1.0 1.2.0 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.3.0 All 57 releases
darkify / src / Frontend / Templates / header_script.php

header_script.php in Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) 2.1.3, at src/Frontend/Templates/header_script.php

565 lines 48.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2
3 use ThemeAtelier\Darkify\Includes\DarkifyUtils;
4
5 // don't call the file directly.
6 if (!defined('ABSPATH')) {
7 exit;
8 }
9
10 if (!function_exists('darkify_js_string')) {
11 /**
12 * Emit a value as a JavaScript string literal (quotes included).
13 *
14 * For anything the browser parses rather than displays — CSS selectors,
15 * above all — esc_attr() is the wrong escaper inside a <script> block: it
16 * HTML-encodes `>`, `&` and `"`, and script bodies are raw text, so those
17 * entities reach the JS engine verbatim and corrupt the value. JSON is the
18 * correct escaping for a JS string; the HEX flags additionally keep `<`,
19 * `>`, `&`, `'` and `"` out of the raw output so the literal can never
20 * close the surrounding <script> tag.
21 *
22 * @param mixed $value Value to emit (cast to string).
23 * @return string A quoted JS string literal, e.g. '"#id, #id *"'.
24 */
25 function darkify_js_string($value)
26 {
27 $json = wp_json_encode(
28 (string) $value,
29 JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT
30 );
31 return false === $json ? '""' : $json;
32 }
33 }
34
35 ob_start();
36 $options = get_option('darkify');
37 // Controls
38 $enable_default_dark_mode = isset($options['enable_default_dark_mode']) ? $options['enable_default_dark_mode'] : '';
39 $enable_os_aware = isset($options['enable_os_aware']) ? $options['enable_os_aware'] : true;
40 $enable_keyboard_shortcut = isset($options['enable_keyboard_shortcut']) ? $options['enable_keyboard_shortcut'] : true;
41 $keyboard_shortcut_keys = isset($options['keyboard_shortcut_keys']) && $options['keyboard_shortcut_keys'] ? $options['keyboard_shortcut_keys'] : 'ctrl+alt+d';
42 $enable_time = isset($options['enable_time']) ? $options['enable_time'] : "";
43 $enable_time_based_dark = isset($enable_time['enable_time_based_dark']) ? $enable_time['enable_time_based_dark'] : "";
44 $enable_time_fields = isset($enable_time['enable_time_fields']) ? $enable_time['enable_time_fields'] : '';
45 $time_based_dark_start = isset($enable_time_fields['time_based_dark_start']) ? $enable_time_fields['time_based_dark_start'] : "";
46 $time_based_dark_stop = isset($enable_time_fields['time_based_dark_end']) ? $enable_time_fields['time_based_dark_end'] : "";
47
48 // Extras
49 $enable_scrollbar_dark = isset($options["enable_scrollbar_dark"]) ? $options["enable_scrollbar_dark"] : true;
50 $enable_frontend_iframe_dark_mode = isset($options['enable_frontend_iframe_dark_mode']) ? $options['enable_frontend_iframe_dark_mode'] : true;
51 $enable_switch_dragging = isset($options['enable_switch_dragging']) ? $options['enable_switch_dragging'] : "";
52 $enable_switch_attention = isset($options['enable_switch_attention']) ? $options['enable_switch_attention'] : '';
53 $switch_attention_effect = isset($options['switch_attention_effect']) ? $options['switch_attention_effect'] : 'pulse';
54 $disallowed_elements = isset($options['disallowed_elements']) ? DarkifyUtils::normalize_restriction_class($options['disallowed_elements']) : "";
55
56 $disallowed_elements_force_to_correct = isset($options['disallowed_elements_force_to_correct']) ? $options['disallowed_elements_force_to_correct'] : true;
57 $allowed_elements_force_to_correct = isset($options['allowed_elements_force_to_correct']) ? $options['allowed_elements_force_to_correct'] : true;
58 $allowed_elements = isset($options['allowed_elements']) ? DarkifyUtils::normalize_restriction_class($options['allowed_elements']) : "";
59
60 $alternative_dark_mode_switcher = isset($options['alternative_dark_mode_switcher']) ? $options['alternative_dark_mode_switcher'] : "";
61
62
63 // Image Control
64 $brightness = isset($options['brightness']) ? $options['brightness'] : "";
65 $enable_low_image_brightness = isset($brightness['enable_low_image_brightness']) ? $brightness['enable_low_image_brightness'] : '1';
66 $low_image_brightness_label = isset($brightness['low_image_brightness_label']) ? 100 - $brightness['low_image_brightness_label'] : 100 - "20";
67 $disallowed_low_brightness_images = isset($brightness['disallowed_low_brightness_images']) ? DarkifyUtils::normalize_image_urls($brightness['disallowed_low_brightness_images']) : "";
68
69 $grayscale = isset($options['grayscale']) ? $options['grayscale'] : "";
70 $enable_image_grayscale = isset($grayscale['enable_image_grayscale']) ? $grayscale['enable_image_grayscale'] : "";
71 $image_grayscale_label = isset($grayscale['image_grayscale_label']) ? $grayscale['image_grayscale_label'] : "80";
72 $disallowed_low_grayscale_images = isset($grayscale['disallowed_low_grayscale_images']) ? DarkifyUtils::normalize_image_urls($grayscale['disallowed_low_grayscale_images']) : "";
73
74 $darken_background = isset($options['darken_background']) ? $options['darken_background'] : "";
75 $enable_low_image_darken = isset($darken_background['enable_low_image_darken']) ? $darken_background['enable_low_image_darken'] : "1";
76 $low_image_darken_label = isset($darken_background['low_image_darken_label']) ? $darken_background['low_image_darken_label'] : '60';
77
78 $enable_invert_inline_svg = isset($options['enable_invert_inline_svg']) ? $options['enable_invert_inline_svg'] : "";
79
80 /*
81 * The override rows are printed into a <script> as raw JSON (like
82 * darkify_allowed_btn_class below), so each value is reduced to a known-safe
83 * shape here: a hex colour or one of the fixed scope keys. Rows missing either
84 * colour are dropped — a half-filled repeater row is the default state of the
85 * field and means nothing to the engine.
86 */
87 $darkify_color_overrides = array();
88 if (!empty($options['color_overrides']) && is_array($options['color_overrides'])) {
89 $darkify_override_scopes = array('all', 'text', 'icon', 'background', 'border', 'shadow');
90 foreach ($options['color_overrides'] as $darkify_override_row) {
91 if (!is_array($darkify_override_row)) {
92 continue;
93 }
94
95 $darkify_light = isset($darkify_override_row['light_color']) ? DarkifyUtils::sanitize_css_color($darkify_override_row['light_color']) : '';
96 $darkify_dark = isset($darkify_override_row['dark_color']) ? DarkifyUtils::sanitize_css_color($darkify_override_row['dark_color']) : '';
97
98 if (!$darkify_light || !$darkify_dark) {
99 continue;
100 }
101
102 $darkify_scope = isset($darkify_override_row['override_scope']) ? $darkify_override_row['override_scope'] : 'all';
103 if (!in_array($darkify_scope, $darkify_override_scopes, true)) {
104 $darkify_scope = 'all';
105 }
106
107 $darkify_color_overrides[] = array(
108 'light_color' => $darkify_light,
109 'dark_color' => $darkify_dark,
110 'override_scope' => $darkify_scope,
111 );
112 }
113 }
114
115 $invert = isset($options['invert']) ? $options['invert'] : "";
116 $enable_invert_images = isset($invert['enable_invert_images']) ? $invert['enable_invert_images'] : "";
117 $invert_images_allowed_urls = !empty($invert['invert_images_allowed_urls']) ? DarkifyUtils::normalize_image_urls($invert['invert_images_allowed_urls']) : "";
118
119 if ($invert_images_allowed_urls !== "") {
120 $invert_images_allowed_urls_explode = explode(',', $invert_images_allowed_urls);
121 $invert_images_allowed_urls_arr = json_encode($invert_images_allowed_urls_explode);
122 } else {
123 $invert_images_allowed_urls_arr = "[]";
124 }
125
126 $normal_image_replacements = isset($options["image_replacements"][0]['normal_image']) ? $options["image_replacements"][0]['normal_image'] : '';
127 $dark_image_replacements = isset($options["image_replacements"][0]['dark_image']) ? $options["image_replacements"][0]['dark_image'] : '';
128 if ($normal_image_replacements || $dark_image_replacements) {
129 $image_replacements = json_encode($options["image_replacements"]);
130 } else {
131 $image_replacements = "";
132 }
133
134 // Video Control
135 $video_brightness = isset($options['video_brightness']) ? $options['video_brightness'] : "";
136 $enable_low_video_brightness = isset($video_brightness['enable_low_video_brightness']) ? $video_brightness['enable_low_video_brightness'] : true;
137 $low_video_brightness_label = isset($video_brightness['low_video_brightness_label']) ? 100 - $video_brightness['low_video_brightness_label'] : 100 - "20";
138
139 $video_grayscale = isset($options['video_grayscale']) ? $options['video_grayscale'] : '';
140 $enable_video_grayscale = isset($video_grayscale['enable_video_grayscale']) ? $video_grayscale['enable_video_grayscale'] : "";
141 $video_grayscale_label = isset($video_grayscale['video_grayscale_label']) ? $video_grayscale['video_grayscale_label'] : "80";
142
143 $normal_video_replacements = isset($options["video_replacements"][0]["normal_video"]) ? $options["video_replacements"][0]["normal_video"] : '';
144 $dark_video_replacements = isset($options["video_replacements"][0]["dark_video"]) ? $options["video_replacements"][0]["dark_video"] : '';
145 if ($normal_video_replacements || $dark_video_replacements) {
146 $video_replacements = json_encode($options["video_replacements"]);
147 } else {
148 $video_replacements = "[]";
149 }
150 if (!is_admin()) { ?>
151 <?php
152 /*
153 * Release the pre-paint guard when the engine is done, not on a fixed timer.
154 *
155 * This used to be a flat `setTimeout(..., 800)`. On a warm reload that is
156 * invisible — every asset is in cache, the engine's first walk lands early,
157 * and it drops both classes itself long before the timer. On a HARD reload
158 * it is the flicker: nothing is served from cache, so the engine script and
159 * the stylesheets it reads are re-fetched and the first walk lands well
160 * after 800ms. The timer fired first, un-hid `body` while the page still
161 * carried the theme's LIGHT colours, and the walk then flipped the whole
162 * page to dark a few hundred ms later. That flip is what the visitor sees
163 * flickering.
164 *
165 * The timeout's real job is the failsafe: if the engine never runs (script
166 * 404s, blocked by an optimiser, JS disabled mid-flight) the page must not
167 * stay hidden. So the guard now comes off on a condition rather than a
168 * duration:
169 *
170 * - engine still to paint -> keep waiting; it removes the classes itself
171 * the moment its first walk has real colours on the page.
172 * - parsing finished and `window.darkify_engine_loaded` still unset ->
173 * the engine is not on this page and never will be, so release at once.
174 * That is strictly quicker than the old fixed 800ms in the case the
175 * timer actually existed for.
176 * - 4000ms -> release regardless, so no failure mode can leave the page
177 * hidden. Comfortably above the slowest measured hard reload.
178 *
179 * Parse state is the gate, not the presence of the engine's script tag: on
180 * a large page the tag can sit hundreds of KB into <head> and simply not be
181 * parsed yet at the moment we look, which reads as "no engine" on exactly
182 * the slow load this is meant to protect.
183 *
184 * Only `darkify_fouc_guard` is polled. Once that is gone the engine has
185 * demonstrably painted, so `darkify_prepaint` can be left to it; the two are
186 * still dropped together if the failsafe ever has to fire, which preserves
187 * the original guarantee that neither class can outlive the page load.
188 *
189 * No `>`/`<`/`&` anywhere in the snippet, so the ceiling is counted in
190 * 100ms ticks (40 = 4s) and every test is an `===`/`!==`. wp_kses
191 * entity-encodes all three characters inside script text — `n>=40` reaches
192 * the browser as `n&gt;=40` and dies with a SyntaxError — which is also why
193 * the gates are nested ifs rather than `&&`.
194 */
195 ?>
196 <script type="text/javascript" class="darkify_inline_js">(function(){var s=localStorage.darkify_last_state,t=localStorage.darkify_selected_theme||'set1';if(s==='1'){var h=document.documentElement;h.classList.add('darkify_dark_mode_enabled');h.classList.add('darkify-'+t);h.classList.add('darkify_prepaint');h.classList.add('darkify_fouc_guard');var r=function(){h.classList.remove('darkify_prepaint');h.classList.remove('darkify_fouc_guard');};var n=0;var p=function(){if(!h.classList.contains('darkify_fouc_guard')){return;}n=n+1;if(n===40){r();return;}if(document.readyState!=='loading'){if(!window.darkify_engine_loaded){r();return;}}setTimeout(p,100);};setTimeout(p,100);}}());</script>
197 <style type="text/css" class="darkify_inline_css">
198 :root {
199 <?php
200 $dark_mode_color_palettes = [
201 'set1' => [
202 'bg' => isset($options["dark_mode_color_set1"]) ? $options["dark_mode_color_set1"]['background'] : '#0F0F0F',
203 'secondary_bg' => isset($options["dark_mode_color_set1"]) ? $options["dark_mode_color_set1"]['secondary_background'] : '#171717',
204 'text_color' => isset($options["dark_mode_link_color_set1"]) ? $options["dark_mode_link_color_set1"]['text'] : '#BEBEBE',
205 'link_color' => isset($options["dark_mode_link_color_set1"]) ? $options["dark_mode_link_color_set1"]['color'] : '#E7E7E7',
206 'link_hover_color' => isset($options["dark_mode_link_color_set1"]) ? $options["dark_mode_link_color_set1"]['hover'] : '#BEBEBE',
207 'input_bg' => isset($options["dark_mode_input_color_set1"]) ? $options["dark_mode_input_color_set1"]['background'] : '#2D2D2D',
208 'input_text_color' => isset($options["dark_mode_input_color_set1"]) ? $options["dark_mode_input_color_set1"]['color'] : '#BEBEBE',
209 'input_placeholder_color' => isset($options["dark_mode_input_color_set1"]) ? $options["dark_mode_input_color_set1"]['placeholder'] : '#BEBEBE',
210 'border_color' => isset($options["dark_mode_border_color_set1"]) ? $options["dark_mode_border_color_set1"] : '#4A4A4A',
211 'btn_text_color' => isset($options["dark_mode_btn_color_set1"]) ? $options["dark_mode_btn_color_set1"]['color'] : '#BEBEBE',
212 'btn_bg' => isset($options["dark_mode_btn_color_set1"]) ? $options["dark_mode_btn_color_set1"]['background'] : '#4A4A4A',
213 'btn_text_hover_color' => isset($options["dark_mode_btn_color_set1"]) ? $options["dark_mode_btn_color_set1"]['hover_color'] : '#BEBEBE',
214 'btn_hover_bg' => isset($options["dark_mode_btn_color_set1"]) ? $options["dark_mode_btn_color_set1"]['hover_background'] : '#2D2D2D',
215 'btn_border_color' => isset($options["dark_mode_btn_color_set1"]['border']) ? $options["dark_mode_btn_color_set1"]['border'] : '#4A4A4A',
216 'btn_hover_border_color' => isset($options["dark_mode_btn_color_set1"]['hover_border']) ? $options["dark_mode_btn_color_set1"]['hover_border'] : '#2D2D2D',
217 ],
218 'set2' => [
219 'bg' => isset($options["dark_mode_color_set2"]) ? $options["dark_mode_color_set2"]['background'] : '#092635',
220 'secondary_bg' => isset($options["dark_mode_color_set2"]) ? $options["dark_mode_color_set2"]['secondary_background'] : '#081E29',
221 'text_color' => isset($options["dark_mode_link_color_set2"]) ? $options["dark_mode_link_color_set2"]['text'] : '#BEE0F1',
222 'link_color' => isset($options["dark_mode_link_color_set2"]) ? $options["dark_mode_link_color_set2"]['color'] : '#2B97CD',
223 'link_hover_color' => isset($options["dark_mode_link_color_set2"]) ? $options["dark_mode_link_color_set2"]['hover'] : '#BEE0F1',
224 'input_bg' => isset($options["dark_mode_input_color_set2"]) ? $options["dark_mode_input_color_set2"]['background'] : '#2D2D2D',
225 'input_text_color' => isset($options["dark_mode_input_color_set2"]) ? $options["dark_mode_input_color_set2"]['color'] : '#BEE0F1',
226 'input_placeholder_color' => isset($options["dark_mode_input_color_set2"]) ? $options["dark_mode_input_color_set2"]['placeholder'] : '#BEE0F1',
227 'border_color' => isset($options["dark_mode_border_color_set2"]) ? $options["dark_mode_border_color_set2"] : '#195979',
228 'btn_text_color' => isset($options["dark_mode_btn_color_set2"]) ? $options["dark_mode_btn_color_set2"]['color'] : '#BEE0F1',
229 'btn_bg' => isset($options["dark_mode_btn_color_set2"]) ? $options["dark_mode_btn_color_set2"]['background'] : '#195979',
230 'btn_text_hover_color' => isset($options["dark_mode_btn_color_set2"]) ? $options["dark_mode_btn_color_set2"]['hover_color'] : '#BEE0F1',
231 'btn_hover_bg' => isset($options["dark_mode_btn_color_set2"]) ? $options["dark_mode_btn_color_set2"]['hover_background'] : '#2D2D2D',
232 'btn_border_color' => isset($options["dark_mode_btn_color_set2"]['border']) ? $options["dark_mode_btn_color_set2"]['border'] : '#195979',
233 'btn_hover_border_color' => isset($options["dark_mode_btn_color_set2"]['hover_border']) ? $options["dark_mode_btn_color_set2"]['hover_border'] : '#2D2D2D',
234 ],
235 'set3' => [
236 'bg' => isset($options["dark_mode_color_set3"]) ? $options["dark_mode_color_set3"]['background'] : '#211e3c',
237 'secondary_bg' => isset($options["dark_mode_color_set3"]) ? $options["dark_mode_color_set3"]['secondary_background'] : '#302C57',
238 'text_color' => isset($options["dark_mode_link_color_set3"]) ? $options["dark_mode_link_color_set3"]['text'] : '#B1BBD8',
239 'link_color' => isset($options["dark_mode_link_color_set3"]) ? $options["dark_mode_link_color_set3"]['color'] : '#8071fb',
240 'link_hover_color' => isset($options["dark_mode_link_color_set3"]) ? $options["dark_mode_link_color_set3"]['hover'] : '#B1BBD8',
241 'input_bg' => isset($options["dark_mode_input_color_set3"]) ? $options["dark_mode_input_color_set3"]['background'] : '#2A264D',
242 'input_text_color' => isset($options["dark_mode_input_color_set3"]) ? $options["dark_mode_input_color_set3"]['color'] : '#B1BBD8',
243 'input_placeholder_color' => isset($options["dark_mode_input_color_set3"]) ? $options["dark_mode_input_color_set3"]['placeholder'] : '#B1BBD8',
244 'border_color' => isset($options["dark_mode_border_color_set3"]) ? $options["dark_mode_border_color_set3"] : '#4E478D',
245 'btn_text_color' => isset($options["dark_mode_btn_color_set3"]) ? $options["dark_mode_btn_color_set3"]['color'] : '#B1BBD8',
246 'btn_bg' => isset($options["dark_mode_btn_color_set3"]) ? $options["dark_mode_btn_color_set3"]['background'] : '#4E478D',
247 'btn_text_hover_color' => isset($options["dark_mode_btn_color_set3"]) ? $options["dark_mode_btn_color_set3"]['hover_color'] : '#B1BBD8',
248 'btn_hover_bg' => isset($options["dark_mode_btn_color_set3"]) ? $options["dark_mode_btn_color_set3"]['hover_background'] : '#2A264D',
249 'btn_border_color' => isset($options["dark_mode_btn_color_set3"]['border']) ? $options["dark_mode_btn_color_set3"]['border'] : '#4E478D',
250 'btn_hover_border_color' => isset($options["dark_mode_btn_color_set3"]['hover_border']) ? $options["dark_mode_btn_color_set3"]['hover_border'] : '#2A264D',
251 ],
252 'set4' => [
253 'bg' => isset($options["dark_mode_color_set4"]) ? $options["dark_mode_color_set4"]['background'] : '#1d253a',
254 'secondary_bg' => isset($options["dark_mode_color_set4"]) ? $options["dark_mode_color_set4"]['secondary_background'] : '#2B3655',
255 'text_color' => isset($options["dark_mode_link_color_set4"]) ? $options["dark_mode_link_color_set4"]['text'] : '#B1BBD8',
256 'link_color' => isset($options["dark_mode_link_color_set4"]) ? $options["dark_mode_link_color_set4"]['color'] : '#638eff',
257 'link_hover_color' => isset($options["dark_mode_link_color_set4"]) ? $options["dark_mode_link_color_set4"]['hover'] : '#B1BBD8',
258 'input_bg' => isset($options["dark_mode_input_color_set4"]) ? $options["dark_mode_input_color_set4"]['background'] : '#242F4C',
259 'input_text_color' => isset($options["dark_mode_input_color_set4"]) ? $options["dark_mode_input_color_set4"]['color'] : '#B1BBD8',
260 'input_placeholder_color' => isset($options["dark_mode_input_color_set4"]) ? $options["dark_mode_input_color_set4"]['placeholder'] : '#B1BBD8',
261 'border_color' => isset($options["dark_mode_border_color_set4"]) ? $options["dark_mode_border_color_set4"] : '#46598C',
262 'btn_text_color' => isset($options["dark_mode_btn_color_set4"]) ? $options["dark_mode_btn_color_set4"]['color'] : '#B1BBD8',
263 'btn_bg' => isset($options["dark_mode_btn_color_set4"]) ? $options["dark_mode_btn_color_set4"]['background'] : '#46598C',
264 'btn_text_hover_color' => isset($options["dark_mode_btn_color_set4"]) ? $options["dark_mode_btn_color_set4"]['hover_color'] : '#B1BBD8',
265 'btn_hover_bg' => isset($options["dark_mode_btn_color_set4"]) ? $options["dark_mode_btn_color_set4"]['hover_background'] : '#303D60',
266 'btn_border_color' => isset($options["dark_mode_btn_color_set4"]['border']) ? $options["dark_mode_btn_color_set4"]['border'] : '#46598C',
267 'btn_hover_border_color' => isset($options["dark_mode_btn_color_set4"]['hover_border']) ? $options["dark_mode_btn_color_set4"]['hover_border'] : '#303D60',
268 ],
269 'set5' => [
270 'bg' => isset($options["dark_mode_color_set5"]) ? $options["dark_mode_color_set5"]['background'] : '#1b1823',
271 'secondary_bg' => isset($options["dark_mode_color_set5"]) ? $options["dark_mode_color_set5"]['secondary_background'] : '#352f44',
272 'text_color' => isset($options["dark_mode_link_color_set5"]) ? $options["dark_mode_link_color_set5"]['text'] : '#C6C1D5',
273 'link_color' => isset($options["dark_mode_link_color_set5"]) ? $options["dark_mode_link_color_set5"]['color'] : '#b094ff',
274 'link_hover_color' => isset($options["dark_mode_link_color_set5"]) ? $options["dark_mode_link_color_set5"]['hover'] : '#C6C1D5',
275 'input_bg' => isset($options["dark_mode_input_color_set5"]) ? $options["dark_mode_input_color_set5"]['background'] : '#403953',
276 'input_text_color' => isset($options["dark_mode_input_color_set5"]) ? $options["dark_mode_input_color_set5"]['color'] : '#C6C1D5',
277 'input_placeholder_color' => isset($options["dark_mode_input_color_set5"]) ? $options["dark_mode_input_color_set5"]['placeholder'] : '#C6C1D5',
278 'border_color' => isset($options["dark_mode_border_color_set5"]) ? $options["dark_mode_border_color_set5"] : '#54496f',
279 'btn_text_color' => isset($options["dark_mode_btn_color_set5"]) ? $options["dark_mode_btn_color_set5"]['color'] : '#C6C1D5',
280 'btn_bg' => isset($options["dark_mode_btn_color_set5"]) ? $options["dark_mode_btn_color_set5"]['background'] : '#54496f',
281 'btn_text_hover_color' => isset($options["dark_mode_btn_color_set5"]) ? $options["dark_mode_btn_color_set5"]['hover_color'] : '#C6C1D5',
282 'btn_hover_bg' => isset($options["dark_mode_btn_color_set5"]) ? $options["dark_mode_btn_color_set5"]['hover_background'] : '#403953',
283 'btn_border_color' => isset($options["dark_mode_btn_color_set5"]['border']) ? $options["dark_mode_btn_color_set5"]['border'] : '#54496f',
284 'btn_hover_border_color' => isset($options["dark_mode_btn_color_set5"]['hover_border']) ? $options["dark_mode_btn_color_set5"]['hover_border'] : '#403953',
285 ],
286 'set6' => [
287 'bg' => isset($options["dark_mode_color_set6"]) ? $options["dark_mode_color_set6"]['background'] : '#082032',
288 'secondary_bg' => isset($options["dark_mode_color_set6"]) ? $options["dark_mode_color_set6"]['secondary_background'] : '#061825',
289 'text_color' => isset($options["dark_mode_link_color_set6"]) ? $options["dark_mode_link_color_set6"]['text'] : '#B5D9F3',
290 'link_color' => isset($options["dark_mode_link_color_set6"]) ? $options["dark_mode_link_color_set6"]['color'] : '#61bbff',
291 'link_hover_color' => isset($options["dark_mode_link_color_set6"]) ? $options["dark_mode_link_color_set6"]['hover'] : '#B5D9F3',
292 'input_bg' => isset($options["dark_mode_input_color_set6"]) ? $options["dark_mode_input_color_set6"]['background'] : '#0E3755',
293 'input_text_color' => isset($options["dark_mode_input_color_set6"]) ? $options["dark_mode_input_color_set6"]['color'] : '#B5D9F3',
294 'input_placeholder_color' => isset($options["dark_mode_input_color_set6"]) ? $options["dark_mode_input_color_set6"]['placeholder'] : '#B5D9F3',
295 'border_color' => isset($options["dark_mode_border_color_set6"]) ? $options["dark_mode_border_color_set6"] : '#144E78',
296 'btn_text_color' => isset($options["dark_mode_btn_color_set6"]) ? $options["dark_mode_btn_color_set6"]['color'] : '#B5D9F3',
297 'btn_bg' => isset($options["dark_mode_btn_color_set6"]) ? $options["dark_mode_btn_color_set6"]['background'] : '#144E78',
298 'btn_text_hover_color' => isset($options["dark_mode_btn_color_set6"]) ? $options["dark_mode_btn_color_set6"]['hover_color'] : '#B5D9F3',
299 'btn_hover_bg' => isset($options["dark_mode_btn_color_set6"]) ? $options["dark_mode_btn_color_set6"]['hover_background'] : '#0E3755',
300 'btn_border_color' => isset($options["dark_mode_btn_color_set6"]['border']) ? $options["dark_mode_btn_color_set6"]['border'] : '#144E78',
301 'btn_hover_border_color' => isset($options["dark_mode_btn_color_set6"]['hover_border']) ? $options["dark_mode_btn_color_set6"]['hover_border'] : '#0E3755',
302 ],
303 'set7' => [
304 'bg' => isset($options["dark_mode_color_set7"]) ? $options["dark_mode_color_set7"]['background'] : '#07161b',
305 'secondary_bg' => isset($options["dark_mode_color_set7"]) ? $options["dark_mode_color_set7"]['secondary_background'] : '#0d242e',
306 'text_color' => isset($options["dark_mode_link_color_set7"]) ? $options["dark_mode_link_color_set7"]['text'] : '#C5E6F0',
307 'link_color' => isset($options["dark_mode_link_color_set7"]) ? $options["dark_mode_link_color_set7"]['color'] : '#33c0ec',
308 'link_hover_color' => isset($options["dark_mode_link_color_set7"]) ? $options["dark_mode_link_color_set7"]['hover'] : '#C5E6F0',
309 'input_bg' => isset($options["dark_mode_input_color_set7"]) ? $options["dark_mode_input_color_set7"]['background'] : '#19495A',
310 'input_text_color' => isset($options["dark_mode_input_color_set7"]) ? $options["dark_mode_input_color_set7"]['color'] : '#C5E6F0',
311 'input_placeholder_color' => isset($options["dark_mode_input_color_set7"]) ? $options["dark_mode_input_color_set7"]['placeholder'] : '#C5E6F0',
312 'border_color' => isset($options["dark_mode_border_color_set7"]) ? $options["dark_mode_border_color_set7"] : '#286F8D',
313 'btn_text_color' => isset($options["dark_mode_btn_color_set7"]) ? $options["dark_mode_btn_color_set7"]['color'] : '#C5E6F0',
314 'btn_bg' => isset($options["dark_mode_btn_color_set7"]) ? $options["dark_mode_btn_color_set7"]['background'] : '#286F8D',
315 'btn_text_hover_color' => isset($options["dark_mode_btn_color_set7"]) ? $options["dark_mode_btn_color_set7"]['hover_color'] : '#C5E6F0',
316 'btn_hover_bg' => isset($options["dark_mode_btn_color_set7"]) ? $options["dark_mode_btn_color_set7"]['hover_background'] : '#19495A',
317 'btn_border_color' => isset($options["dark_mode_btn_color_set7"]['border']) ? $options["dark_mode_btn_color_set7"]['border'] : '#286F8D',
318 'btn_hover_border_color' => isset($options["dark_mode_btn_color_set7"]['hover_border']) ? $options["dark_mode_btn_color_set7"]['hover_border'] : '#19495A',
319 ],
320 'set8' => [
321 'bg' => isset($options["dark_mode_color_set8"]) ? $options["dark_mode_color_set8"]['background'] : '#15274C',
322 'secondary_bg' => isset($options["dark_mode_color_set8"]) ? $options["dark_mode_color_set8"]['secondary_background'] : '#112244',
323 'text_color' => isset($options["dark_mode_link_color_set8"]) ? $options["dark_mode_link_color_set8"]['text'] : '#ACC1EA',
324 'link_color' => isset($options["dark_mode_link_color_set8"]) ? $options["dark_mode_link_color_set8"]['color'] : '#6197ff',
325 'link_hover_color' => isset($options["dark_mode_link_color_set8"]) ? $options["dark_mode_link_color_set8"]['hover'] : '#ACC1EA',
326 'input_bg' => isset($options["dark_mode_input_color_set8"]) ? $options["dark_mode_input_color_set8"]['background'] : '#1a2f5c',
327 'input_text_color' => isset($options["dark_mode_input_color_set8"]) ? $options["dark_mode_input_color_set8"]['color'] : '#ACC1EA',
328 'input_placeholder_color' => isset($options["dark_mode_input_color_set8"]) ? $options["dark_mode_input_color_set8"]['placeholder'] : '#ACC1EA',
329 'border_color' => isset($options["dark_mode_border_color_set8"]) ? $options["dark_mode_border_color_set8"] : '#244892',
330 'btn_text_color' => isset($options["dark_mode_btn_color_set8"]) ? $options["dark_mode_btn_color_set8"]['color'] : '#ACC1EA',
331 'btn_bg' => isset($options["dark_mode_btn_color_set8"]) ? $options["dark_mode_btn_color_set8"]['background'] : '#244892',
332 'btn_text_hover_color' => isset($options["dark_mode_btn_color_set8"]) ? $options["dark_mode_btn_color_set8"]['hover_color'] : '#ACC1EA',
333 'btn_hover_bg' => isset($options["dark_mode_btn_color_set8"]) ? $options["dark_mode_btn_color_set8"]['hover_background'] : '#1a2f5c',
334 'btn_border_color' => isset($options["dark_mode_btn_color_set8"]['border']) ? $options["dark_mode_btn_color_set8"]['border'] : '#244892',
335 'btn_hover_border_color' => isset($options["dark_mode_btn_color_set8"]['hover_border']) ? $options["dark_mode_btn_color_set8"]['hover_border'] : '#1a2f5c',
336 ],
337 'set9' => [
338 'bg' => isset($options["dark_mode_color_set9"]) ? $options["dark_mode_color_set9"]['background'] : '#04261d',
339 'secondary_bg' => isset($options["dark_mode_color_set9"]) ? $options["dark_mode_color_set9"]['secondary_background'] : '#021e16',
340 'text_color' => isset($options["dark_mode_link_color_set9"]) ? $options["dark_mode_link_color_set9"]['text'] : '#C1D2BB',
341 'link_color' => isset($options["dark_mode_link_color_set9"]) ? $options["dark_mode_link_color_set9"]['color'] : '#00d29a',
342 'link_hover_color' => isset($options["dark_mode_link_color_set9"]) ? $options["dark_mode_link_color_set9"]['hover'] : '#C1D2BB',
343 'input_bg' => isset($options["dark_mode_input_color_set9"]) ? $options["dark_mode_input_color_set9"]['background'] : '#073d2f',
344 'input_text_color' => isset($options["dark_mode_input_color_set9"]) ? $options["dark_mode_input_color_set9"]['color'] : '#C1D2BB',
345 'input_placeholder_color' => isset($options["dark_mode_input_color_set9"]) ? $options["dark_mode_input_color_set9"]['placeholder'] : '#C1D2BB',
346 'border_color' => isset($options["dark_mode_border_color_set9"]) ? $options["dark_mode_border_color_set9"] : '#095541',
347 'btn_text_color' => isset($options["dark_mode_btn_color_set9"]) ? $options["dark_mode_btn_color_set9"]['color'] : '#C1D2BB',
348 'btn_bg' => isset($options["dark_mode_btn_color_set9"]) ? $options["dark_mode_btn_color_set9"]['background'] : '#095541',
349 'btn_text_hover_color' => isset($options["dark_mode_btn_color_set9"]) ? $options["dark_mode_btn_color_set9"]['hover_color'] : '#C1D2BB',
350 'btn_hover_bg' => isset($options["dark_mode_btn_color_set9"]) ? $options["dark_mode_btn_color_set9"]['hover_background'] : '#073d2f',
351 'btn_border_color' => isset($options["dark_mode_btn_color_set9"]['border']) ? $options["dark_mode_btn_color_set9"]['border'] : '#095541',
352 'btn_hover_border_color' => isset($options["dark_mode_btn_color_set9"]['hover_border']) ? $options["dark_mode_btn_color_set9"]['hover_border'] : '#073d2f',
353 ],
354 'set10' => [
355 'bg' => isset($options["dark_mode_color_set10"]) ? $options["dark_mode_color_set10"]['background'] : '#171004',
356 'secondary_bg' => isset($options["dark_mode_color_set10"]) ? $options["dark_mode_color_set10"]['secondary_background'] : '#211706',
357 'text_color' => isset($options["dark_mode_link_color_set10"]) ? $options["dark_mode_link_color_set10"]['text'] : '#E0D2BD',
358 'link_color' => isset($options["dark_mode_link_color_set10"]) ? $options["dark_mode_link_color_set10"]['color'] : '#e09525',
359 'link_hover_color' => isset($options["dark_mode_link_color_set10"]) ? $options["dark_mode_link_color_set10"]['hover'] : '#E0D2BD',
360 'input_bg' => isset($options["dark_mode_input_color_set10"]) ? $options["dark_mode_input_color_set10"]['background'] : '#372911',
361 'input_text_color' => isset($options["dark_mode_input_color_set10"]) ? $options["dark_mode_input_color_set10"]['color'] : '#E0D2BD',
362 'input_placeholder_color' => isset($options["dark_mode_input_color_set10"]) ? $options["dark_mode_input_color_set10"]['placeholder'] : '#E0D2BD',
363 'border_color' => isset($options["dark_mode_border_color_set10"]) ? $options["dark_mode_border_color_set10"] : '#5D4010',
364 'btn_text_color' => isset($options["dark_mode_btn_color_set10"]) ? $options["dark_mode_btn_color_set10"]['color'] : '#E0D2BD',
365 'btn_bg' => isset($options["dark_mode_btn_color_set10"]) ? $options["dark_mode_btn_color_set10"]['background'] : '#5D4010',
366 'btn_text_hover_color' => isset($options["dark_mode_btn_color_set10"]) ? $options["dark_mode_btn_color_set10"]['hover_color'] : '#E0D2BD',
367 'btn_hover_bg' => isset($options["dark_mode_btn_color_set10"]) ? $options["dark_mode_btn_color_set10"]['hover_background'] : '#372911',
368 'btn_border_color' => isset($options["dark_mode_btn_color_set10"]['border']) ? $options["dark_mode_btn_color_set10"]['border'] : '#5D4010',
369 'btn_hover_border_color' => isset($options["dark_mode_btn_color_set10"]['hover_border']) ? $options["dark_mode_btn_color_set10"]['hover_border'] : '#372911',
370 ],
371 'set11' => [
372 'bg' => isset($options["dark_mode_color_set11"]) ? $options["dark_mode_color_set11"]['background'] : '#19081b',
373 'secondary_bg' => isset($options["dark_mode_color_set11"]) ? $options["dark_mode_color_set11"]['secondary_background'] : '#210a24',
374 'text_color' => isset($options["dark_mode_link_color_set11"]) ? $options["dark_mode_link_color_set11"]['text'] : '#c09dc2',
375 'link_color' => isset($options["dark_mode_link_color_set11"]) ? $options["dark_mode_link_color_set11"]['color'] : '#c832d4',
376 'link_hover_color' => isset($options["dark_mode_link_color_set11"]) ? $options["dark_mode_link_color_set11"]['hover'] : '#c09dc2',
377 'input_bg' => isset($options["dark_mode_input_color_set11"]) ? $options["dark_mode_input_color_set11"]['background'] : '#2c082f',
378 'input_text_color' => isset($options["dark_mode_input_color_set11"]) ? $options["dark_mode_input_color_set11"]['color'] : '#c09dc2',
379 'input_placeholder_color' => isset($options["dark_mode_input_color_set11"]) ? $options["dark_mode_input_color_set11"]['placeholder'] : '#c09dc2',
380 'border_color' => isset($options["dark_mode_border_color_set11"]) ? $options["dark_mode_border_color_set11"] : '#440649',
381 'btn_text_color' => isset($options["dark_mode_btn_color_set11"]) ? $options["dark_mode_btn_color_set11"]['color'] : '#c09dc2',
382 'btn_bg' => isset($options["dark_mode_btn_color_set11"]) ? $options["dark_mode_btn_color_set11"]['background'] : '#440649',
383 'btn_text_hover_color' => isset($options["dark_mode_btn_color_set11"]) ? $options["dark_mode_btn_color_set11"]['hover_color'] : '#c09dc2',
384 'btn_hover_bg' => isset($options["dark_mode_btn_color_set11"]) ? $options["dark_mode_btn_color_set11"]['hover_background'] : '#2c082f',
385 'btn_border_color' => isset($options["dark_mode_btn_color_set11"]['border']) ? $options["dark_mode_btn_color_set11"]['border'] : '#440649',
386 'btn_hover_border_color' => isset($options["dark_mode_btn_color_set11"]['hover_border']) ? $options["dark_mode_btn_color_set11"]['hover_border'] : '#2c082f',
387 ],
388 ];
389
390 $selected_set_key = isset($options['color_pallets']) ? $options['color_pallets'] : 'set1';
391 $selected_set = $dark_mode_color_palettes[$selected_set_key] ?? $dark_mode_color_palettes['set1'];
392
393 // Output as CSS variables
394 foreach ($selected_set as $key => $value) {
395 echo '--darkify_dark_mode_' . esc_attr($key) . ': ' . esc_attr($value) . ';';
396 }
397 ?>
398 }
399 </style>
400 <?php } else {
401 /*
402 * `dark` on <html> is the de-facto convention a React admin themes itself
403 * off — Tailwind's class strategy, shadcn/ui, and Darkify's own React admin
404 * (`@custom-variant dark (&:is(.dark *))`) all key on exactly this class.
405 *
406 * It used to be added only on Darkify's own SPA pages, which is why a
407 * React-based admin screen from ANOTHER plugin stayed stubbornly light while
408 * the rest of wp-admin went dark: such an app doesn't take its colours from
409 * the cascade at all, it reads design tokens that only switch when `dark` is
410 * present, and that class never arrived. Mirroring Admin Panel Dark Mode
411 * onto it here — on every admin screen, not just ours — lets any app
412 * following the convention inherit the theme with no plugin-specific
413 * handling on either side.
414 *
415 * Setting it in <head> means the very first paint is already dark; the
416 * runtime half of the mirror lives in client_main.js so the admin-bar switch
417 * re-themes those screens live too. The `h.classList.add('dark')` call is
418 * emitted as a static literal in the snippet below.
419 */
420 /*
421 * `d` gates this FOUC snippet on Admin Panel Dark Mode actually being ON.
422 * It used to be implicit: with the option off this template was never
423 * included on an admin screen. Darkify's own SPA screens now always
424 * include it (so the admin-bar icon can toggle without a reload), so
425 * without this check a stale `darkify_admin_panel_last_state = "1"` would
426 * darken the screen even though the option is off.
427 *
428 * Nested ifs, NOT `s==='1'&&d==='1'`: this whole template is printed
429 * through wp_kses() (see the bottom of the file), whose entity
430 * normalization rewrites a bare `&` to `&amp;` — script content is raw
431 * text, so `&&` would reach the browser as `&amp;&amp;` and kill the
432 * snippet with a SyntaxError. Keep this snippet free of `&` (and `<`).
433 */
434 /*
435 * Effective admin darkening for THIS screen. Block Editor Dark Mode is
436 * independent of Admin Panel Dark Mode: the block editor darkens when Block
437 * Editor Dark Mode is on even if Admin Panel Dark Mode is off. Reused for the
438 * runtime gate (darkify_admin_panel_dark_enabled) below.
439 */
440 $darkify_screen = \function_exists('get_current_screen') ? \get_current_screen() : null;
441 $darkify_is_block_editor = $darkify_screen && \method_exists($darkify_screen, 'is_block_editor') && $darkify_screen->is_block_editor();
442 $darkify_block_editor_dark = !empty($options['block_editor_dark_mode']);
443 $darkify_effective_admin_dark = (!empty($options['enable_admin_panel_dark_mode']) || ($darkify_is_block_editor && $darkify_block_editor_dark)) ? '1' : '0';
444 $darkify_admin_dark_on = $darkify_effective_admin_dark;
445 ?>
446 <script type="text/javascript" class="darkify_inline_js">(function(){var s=localStorage.darkify_admin_panel_last_state,t=localStorage.darkify_selected_theme||'set1',d='<?php echo esc_attr($darkify_admin_dark_on); ?>';if(s==='1'){if(d==='1'){var h=document.documentElement;h.classList.add('darkify_dark_mode_enabled');h.classList.add('darkify-'+t);h.classList.add('dark');}}}());</script>
447 <style type="text/css" class="darkify_inline_css">
448 :root {
449 --darkify_dark_mode_bg: #181a1b;
450 --darkify_dark_mode_secondary_bg: #202324;
451 --darkify_dark_mode_text_color: #c8c4bd;
452 --darkify_dark_mode_link_color: #6aafe2;
453 --darkify_dark_mode_link_hover_color: #4f94c3;
454 --darkify_dark_mode_input_bg: #2D2D2D;
455 --darkify_dark_mode_input_text_color: #BEBEBE;
456 --darkify_dark_mode_input_placeholder_color: #989898;
457 --darkify_dark_mode_border_color: #4A4A4A;
458 --darkify_dark_mode_btn_bg: #2D2D2D;
459 --darkify_dark_mode_btn_text_color: #BEBEBE;
460 --darkify_dark_mode_btn_hover_bg: #BEBEBE;
461 --darkify_dark_mode_btn_text_hover_color: #2D2D2D;
462 --darkify_dark_mode_btn_border_color: #2D2D2D;
463 --darkify_dark_mode_btn_hover_border_color: #BEBEBE;
464 }
465 </style>
466 <?php }
467 if ($enable_scrollbar_dark) {
468 $dark_mode_scrollbar_track_bg = !empty($options["scrollbar_color"]) ? $options["scrollbar_color"]['dark_mode_scrollbar_track_bg'] : '';
469 $dark_mode_scrollbar_thumb_bg = !empty($options["scrollbar_color"]) ? $options["scrollbar_color"]['dark_mode_scrollbar_thumb_bg'] : '';
470 include DarkifyUtils::darkify_locate_template('views/scrollbar.php');
471 }
472 ?>
473
474 <script type="text/javascript" class="darkify_inline_js">
475 var darkify_switch_unique_id = "<?php echo esc_attr($this->unique_id); ?>";
476 var darkify_is_this_admin_panel = "<?php echo esc_attr(is_admin() ? "1" : "0"); ?>";
477 <?php
478 /*
479 * Admin Panel Dark Mode, exposed so the admin engine can refuse to darken
480 * while the option is off. Darkify's own SPA screens load the engine even
481 * then, so the admin-bar icon can be toggled without a reload, which means
482 * the engine has to honour the option itself rather than relying on simply
483 * not being enqueued.
484 */
485 ?>
486 var darkify_admin_panel_dark_enabled = "<?php echo esc_attr(isset($darkify_effective_admin_dark) ? $darkify_effective_admin_dark : (!empty($options['enable_admin_panel_dark_mode']) ? '1' : '0')); ?>";
487 <?php
488 /*
489 * Site-wide palette defaults for the Dark Reader admin engine, one for the
490 * block editor and one for everything else. "auto" means "let Dark Reader
491 * derive every colour", which is the default and the recommended value.
492 *
493 * These are defaults, not overrides: the editor's toolbar dropdown writes a
494 * per-user choice to localStorage and that still wins, which is how that
495 * control has always behaved.
496 */
497 ?>
498 var darkify_admin_palette_default = "<?php echo esc_attr(!empty($options['admin_panel_palette']) ? $options['admin_panel_palette'] : 'auto'); ?>";
499 var darkify_editor_palette_default = "<?php echo esc_attr(!empty($options['block_editor_palette']) ? $options['block_editor_palette'] : 'auto'); ?>";
500 var darkify_enable_default_dark_mode = "<?php echo esc_attr($enable_default_dark_mode); ?>";
501 var darkify_enable_os_aware = "<?php echo esc_attr($enable_os_aware); ?>";
502 var darkify_enable_keyboard_shortcut = "<?php echo esc_attr($enable_keyboard_shortcut); ?>";
503 var darkify_keyboard_shortcut_keys = "<?php echo esc_attr($keyboard_shortcut_keys); ?>";
504 var darkify_enable_time_based_dark = "<?php echo esc_attr($enable_time_based_dark); ?>";
505 var darkify_time_based_dark_start = "<?php echo esc_attr($time_based_dark_start ? $time_based_dark_start : "19:00"); ?>";
506 var darkify_time_based_dark_stop = "<?php echo esc_attr($time_based_dark_stop ? $time_based_dark_stop : "07:00"); ?>";
507 var darkify_enable_switch_dragging = "<?php echo esc_attr($enable_switch_dragging); ?>";
508 var darkify_enable_switch_attention = "<?php echo esc_attr($enable_switch_attention); ?>";
509 var darkify_switch_attention_effect = "<?php echo esc_attr($switch_attention_effect); ?>";
510
511 var darkify_alternative_dark_mode_switch = "<?php echo esc_attr($alternative_dark_mode_switcher); ?>";
512 var darkify_enable_frontend_iframe_dark_mode = "<?php echo esc_attr($enable_frontend_iframe_dark_mode); ?>";
513 var darkify_enable_low_image_brightness = "<?php echo esc_attr($enable_low_image_brightness); ?>";
514 var darkify_image_brightness_to = "<?php echo esc_attr($low_image_brightness_label); ?>";
515 var darkify_disallowed_low_brightness_images = "<?php echo esc_attr($disallowed_low_brightness_images); ?>";
516 var darkify_enable_image_grayscale = "<?php echo esc_attr($enable_image_grayscale); ?>";
517 var darkify_image_grayscale_to = "<?php echo esc_attr($image_grayscale_label); ?>";
518 var darkify_disallowed_grayscale_images = "<?php echo esc_attr($disallowed_low_grayscale_images); ?>";
519 var darkify_enable_bg_image_darken = "<?php echo esc_attr($enable_low_image_darken); ?>";
520 var darkify_bg_image_darken_to = "<?php echo esc_attr($low_image_darken_label); ?>";
521 var darkify_enable_invert_inline_svg = "<?php echo esc_attr($enable_invert_inline_svg); ?>";
522 var darkify_enable_invert_images = "<?php echo esc_attr($enable_invert_images); ?>";
523 var darkify_invert_images_allowed_urls = "<?php echo esc_attr($invert_images_allowed_urls_arr); ?>";
524 var darkify_image_replacements = "<?php echo esc_attr($image_replacements) ?>";
525 var darkify_enable_low_video_brightness = "<?php echo esc_attr($enable_low_video_brightness); ?>";
526 var darkify_video_brightness_to = "<?php echo esc_attr($low_video_brightness_label); ?>";
527 var darkify_enable_video_grayscale = "<?php echo esc_attr($enable_video_grayscale); ?>";
528 var darkify_video_grayscale_to = "<?php echo esc_attr($video_grayscale_label); ?>";
529 var darkify_video_replacements = "<?PHP echo esc_attr($video_replacements); ?>";
530 <?php
531 /*
532 * These four carry CSS selectors, not display text, and they are read back
533 * by element.matches() in client_main.js. esc_attr() would HTML-encode the
534 * selector combinators (`>` becomes `&gt;`, `&` becomes `&amp;`), and a
535 * <script> body is raw text — the browser never decodes those back. One
536 * encoded combinator anywhere in the list makes the whole comma-joined
537 * selector a SyntaxError, matches() throws, and Disallowed Elements
538 * silently stops restricting anything. Custom CSS selectors are folded into
539 * the disallowed list automatically (see generateDisallowedElementsStr), so
540 * a perfectly ordinary `.card > .title` rule was enough to trigger it.
541 * darkify_js_string() emits a proper JSON string literal instead, which
542 * keeps the selector intact and is still safe to sit inside <script>
543 * (tags/ampersands are \u-escaped).
544 */
545 ?>
546 var darkify_allowed_elements = <?php echo darkify_js_string($this->utils->generateAllowedElementsStr($options)); ?>;
547 var darkify_allowed_elements_raw = <?php echo darkify_js_string($allowed_elements); ?>;
548 var darkify_allowed_elements_force_to_correct = "<?php echo esc_attr($allowed_elements_force_to_correct); ?>";
549
550 var darkify_disallowed_elements = <?php echo darkify_js_string($this->utils->generateDisallowedElementsStr($options, $this->external_support)); ?>;
551 var darkify_disallowed_elements_raw = <?php echo darkify_js_string($disallowed_elements); ?>;
552 var darkify_disallowed_elements_force_to_correct = "<?php echo esc_attr($disallowed_elements_force_to_correct); ?>";
553
554 var darkify_allowed_btn_class = <?php echo json_encode($this->utils->addButtonClassByDarkify($options)); ?>;
555
556 var darkify_color_overrides = <?php echo wp_json_encode($darkify_color_overrides); ?>;
557 </script>
558 <?php
559 $output = ob_get_clean();
560 $tags_allowed_in_output = array(
561 'style' => array('type' => array(), 'class' => array()),
562 'script' => array('type' => array(), 'class' => array())
563 );
564 echo wp_kses($this->utils->minify_string($output), $tags_allowed_in_output);
565