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
← All changes | src/Admin/Views/ColorControl.php +153 -183 1.5.22.1.3 View file →
@@ -12,9 +12,9 @@
12 12 */
13 13
14 14 namespace ThemeAtelier\Darkify\Admin\Views;
15 15
16 -use ThemeAtelier\Darkify\Admin\Framework\Classes\Darkify;
16 +use ThemeAtelier\Darkify\Admin\Schema\SchemaRegistry as Darkify;
17 17
18 18 class ColorControl
19 19 {
20 20 /**
@@ -27,9 +27,10 @@
27 27 {
28 28 Darkify::createSection(
29 29 $prefix,
30 30 array(
31 - 'title' => esc_html__('COLORS', 'darkify'),
31 + 'id' => 'colors',
32 + 'title' => esc_html__('Colors', 'darkify'),
32 33 'icon' => 'icofont-paint',
33 34 'fields' => array(
34 35
35 36 array(
@@ -35,85 +36,81 @@
35 36 array(
36 37 'type' => 'section_tab',
37 38 'tabs' => array(
38 39 array(
40 + 'id' => 'preset',
39 41 'title' => esc_html__('Preset', 'darkify'),
40 42 'icon' => 'icofont-color-bucket',
41 43 'fields' => array(
44 + // Intro line, rendered plain above the section card.
42 45 array(
46 + 'type' => 'page_hint',
47 + 'content' => esc_html__('Pick a dark-mode color preset, then fine-tune any individual color for your site.', 'darkify'),
48 + ),
49 + // ===== CHOOSE A PRESET =====
50 + array(
51 + 'type' => 'heading',
52 + 'title' => esc_html__('Choose A Preset', 'darkify'),
53 + 'section_start' => true,
54 + ),
55 + array(
43 56 'id' => 'color_pallets',
44 57 'type' => 'palette',
45 58 'class' => 'darkify_preset',
46 - 'title' => esc_html__('Choose a Preset', 'darkify'),
59 + // Title lifted to the section heading above; the field keeps only its
60 + // short description (rendered above the swatch grid by PaletteField).
47 61 'title_help' =>
48 - '<div class="darkify-info-label">' .
49 - __('Choose from pre-made dark mode color presets.', 'darkify') .
50 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
51 - __('Live Demo', 'darkify') .
52 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
53 - __('Open Docs', 'darkify') .
54 - '</a>',
62 + esc_html__('Choose from pre-made dark-mode color presets.', 'darkify'),
55 63
56 64 'options' => array(
57 65 'set1' => array(
58 66 'colors' => array('#0F0F0F', '#4A4A4A', '#BEBEBE', '#171717', '#2D2D2D'),
59 67 'name' => esc_html__('Carbon Mist', 'darkify'),
60 - 'demo_url' => 'https://youtu.be/0ervhCG6V4U?list=PLo2IcueX81_BbBsEyPeXx52VOcijnGr6l',
61 68 ),
62 69 'set3' => array(
63 70 'colors' => array('#211e3c', '#B1BBD8', '#302C57', '#4E478D', '#2A264D'),
64 71 'name' => esc_html__('Midnight Reverie', 'darkify'),
65 - 'demo_url' => 'https://youtu.be/Gz0SDK_08GQ?list=PLo2IcueX81_BbBsEyPeXx52VOcijnGr6l',
66 72 ),
67 73 'set9' => array(
68 74 'colors' => array('#04261d', '#C1D2BB', '#021e16', '#073d2f', '#095541'),
69 75 'name' => esc_html__('Verdant Depths', 'darkify'),
70 - 'demo_url' => 'https://youtu.be/8r-yeDV83Cs?list=PLo2IcueX81_BbBsEyPeXx52VOcijnGr6l',
71 76 ),
72 77 'set6' => array(
73 78 'colors' => array('#082032', '#B5D9F3', '#061825', '#144E78', '#0E3755'),
74 79 'name' => esc_html__('Celestial Tide', 'darkify'),
75 - 'demo_url' => 'https://youtu.be/isHN5V4i-aw?list=PLo2IcueX81_BbBsEyPeXx52VOcijnGr6l',
76 80 ),
77 81 'set10' => array(
78 82 'colors' => array('#171004', '#E0D2BD', '#211706', '#372911', '#5D4010'),
79 83 'name' => esc_html__('Emberwood', 'darkify'),
80 - 'demo_url' => 'https://youtu.be/q4DQOivcurk?list=PLo2IcueX81_BbBsEyPeXx52VOcijnGr6l',
81 84 ),
82 85 'set2' => array(
83 86 'colors' => array('#092635', '#BEE0F1', '#081E29', '#123d52', '#195979'),
84 87 'name' => esc_html__('Glacier Drift', 'darkify'),
85 - 'demo_url' => 'https://youtu.be/mwf5nG2gSv4?list=PLo2IcueX81_BbBsEyPeXx52VOcijnGr6l',
86 88 'pro_only' => true,
87 89 ),
88 90 'set4' => array(
89 91 'colors' => array('#1d253a', '#B1BBD8', '#2B3655', '#46598C', '#242F4C'),
90 92 'name' => esc_html__('Indigo Veil', 'darkify'),
91 - 'demo_url' => 'https://youtu.be/o58ns9RRGlU?list=PLo2IcueX81_BbBsEyPeXx52VOcijnGr6l',
92 93 'pro_only' => true,
93 94 ),
94 95 'set5' => array(
95 96 'colors' => array('#1b1823', '#C6C1D5', '#352f44', '#403953', '#54496f'),
96 97 'name' => esc_html__('Duskmire', 'darkify'),
97 - 'demo_url' => 'https://youtu.be/eAeNuboi--Y?list=PLo2IcueX81_BbBsEyPeXx52VOcijnGr6l',
98 98 'pro_only' => true,
99 99 ),
100 100 'set7' => array(
101 101 'colors' => array('#07161b', '#C5E6F0', '#0d242e', '#286F8D', '#19495A'),
102 102 'name' => esc_html__('Tidal Frost', 'darkify'),
103 - 'demo_url' => 'https://youtu.be/cUMElxZ0-EY?list=PLo2IcueX81_BbBsEyPeXx52VOcijnGr6l',
104 103 'pro_only' => true,
105 104 ),
106 105 'set8' => array(
107 106 'colors' => array('#15274C', '#ACC1EA', '#112244', '#244892', '#1a2f5c'),
108 107 'name' => esc_html__('Blue Bastion', 'darkify'),
109 - 'demo_url' => 'https://youtu.be/fi_yopdUul4?list=PLo2IcueX81_BbBsEyPeXx52VOcijnGr6l',
110 108 'pro_only' => true,
111 109 ),
112 110 'set11' => array(
113 111 'colors' => array('#19081b', '#c09dc2', '#210a24', '#440649', '#2c082f'),
114 112 'name' => esc_html__('Crimson Veil', 'darkify'),
115 - 'demo_url' => 'https://youtu.be/cYHTpisGhBQ?list=PLo2IcueX81_BbBsEyPeXx52VOcijnGr6l',
116 113 'pro_only' => true,
117 114 ),
118 115 ),
119 116 'default' => 'set1',
@@ -118,10 +115,11 @@
118 115 ),
119 116 'default' => 'set1',
120 117 ),
121 118 array(
122 - 'type' => 'subheading',
123 - 'title' => esc_html__('Customize Selected Preset', 'darkify'),
119 + 'type' => 'heading',
120 + 'title' => esc_html__('Customize Selected Preset', 'darkify'),
121 + 'section_start' => true,
124 122 ),
125 123
126 124 // color pallate set 1
127 125 array(
@@ -130,13 +128,9 @@
130 128 'title' => esc_html__('Background', 'darkify'),
131 129 'title_help' =>
132 130 '<div class="darkify-info-label">' .
133 131 __('Set the background colors used when dark mode is enabled on your website.', 'darkify') .
134 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
135 - __('Live Demo', 'darkify') .
136 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
137 - __('Open Docs', 'darkify') .
138 - '</a>',
132 + '</div>',
139 133 'options' => array(
140 134 'background' => esc_html__('Primary', 'darkify'),
141 135 'secondary_background' => esc_html__('Secondary', 'darkify'),
142 136 ),
@@ -153,13 +147,9 @@
153 147 'title' => esc_html__('Text', 'darkify'),
154 148 'title_help' =>
155 149 '<div class="darkify-info-label">' .
156 150 __('Set the text color of your website when dark mode is enabled.', 'darkify') .
157 - '</div><a class="tooltip_btn_primary" href="' . esc_url(DARKIFY_DEMO_URL . 'colors/#preset') . '" target="_blank">' .
158 - __('Live Demo', 'darkify') .
159 - '</a><a class="tooltip_btn_secondary" href="' . esc_url(DARKIFY_DOCS_URL . 'colors/#color-presets') . '" target="_blank">' .
160 - __('Open Docs', 'darkify') .
161 - '</a>',
151 + '</div>',
162 152
163 153 'dependency' => array('color_pallets', '==', 'set1', 'all'),
164 154 'class' => 'only_pro',
165 155 'options' => array(
@@ -179,13 +169,9 @@
179 169 'title' => esc_html__('Input', 'darkify'),
180 170 'title_help' =>
181 171 '<div class="darkify-info-label">' .
182 172 __('Set the input field colors of your website when dark mode is enabled.', 'darkify') .
183 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
184 - __('Live Demo', 'darkify') .
185 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
186 - __('Open Docs', 'darkify') .
187 - '</a>',
173 + '</div>',
188 174
189 175 'dependency' => array('color_pallets', '==', 'set1', 'all'),
190 176 'class' => 'only_pro',
191 177 'options' => array(
@@ -206,13 +192,9 @@
206 192 'title' => esc_html__('Border', 'darkify'),
207 193 'title_help' =>
208 194 '<div class="darkify-info-label">' .
209 195 __('Set the border color of your website when dark mode is enabled.', 'darkify') .
210 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
211 - __('Live Demo', 'darkify') .
212 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
213 - __('Open Docs', 'darkify') .
214 - '</a>',
196 + '</div>',
215 197
216 198 'class' => 'only_pro',
217 199 'dependency' => array('color_pallets', '==', 'set1', 'all'),
218 200 'default' => '#4A4A4A',
@@ -223,13 +205,9 @@
223 205 'title' => esc_html__('Button', 'darkify'),
224 206 'title_help' =>
225 207 '<div class="darkify-info-label">' .
226 208 __('Set the button colors of your website when dark mode is enabled.', 'darkify') .
227 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
228 - __('Live Demo', 'darkify') .
229 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
230 - __('Open Docs', 'darkify') .
231 - '</a>',
209 + '</div>',
232 210
233 211 'options' => array(
234 212 'color' => esc_html__('Text Color', 'darkify'),
235 213 'background' => esc_html__('Background', 'darkify'),
@@ -234,8 +212,10 @@
234 212 'color' => esc_html__('Text Color', 'darkify'),
235 213 'background' => esc_html__('Background', 'darkify'),
236 214 'hover_color' => esc_html__('Hover Text Color', 'darkify'),
237 215 'hover_background' => esc_html__('Hover Background', 'darkify'),
216 + 'border' => esc_html__('Border Color', 'darkify'),
217 + 'hover_border' => esc_html__('Hover Border Color', 'darkify'),
238 218 ),
239 219
240 220 'class' => 'only_pro',
241 221 'dependency' => array('color_pallets', '==', 'set1', 'all'),
@@ -243,8 +223,10 @@
243 223 'color' => '#BEBEBE',
244 224 'background' => '#4A4A4A',
245 225 'hover_color' => '#BEBEBE',
246 226 'hover_background' => '#2D2D2D',
227 + 'border' => '#4A4A4A',
228 + 'hover_border' => '#2D2D2D',
247 229 ),
248 230 ),
249 231 // color pallate set 3
250 232 array(
@@ -253,13 +235,9 @@
253 235 'title' => esc_html__('Background', 'darkify'),
254 236 'title_help' =>
255 237 '<div class="darkify-info-label">' .
256 238 __('Set the background color of your website when dark mode is enabled.', 'darkify') .
257 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
258 - __('Live Demo', 'darkify') .
259 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
260 - __('Open Docs', 'darkify') .
261 - '</a>',
239 + '</div>',
262 240
263 241 'options' => array(
264 242 'background' => esc_html__('Primary', 'darkify'),
265 243 'secondary_background' => esc_html__('Secondary', 'darkify'),
@@ -277,13 +255,9 @@
277 255 'title' => esc_html__('Text', 'darkify'),
278 256 'title_help' =>
279 257 '<div class="darkify-info-label">' .
280 258 __('Set the text and link colors of your website when dark mode is enabled.', 'darkify') .
281 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
282 - __('Live Demo', 'darkify') .
283 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
284 - __('Open Docs', 'darkify') .
285 - '</a>',
259 + '</div>',
286 260
287 261 'options' => array(
288 262 'text' => esc_html__('Text Color', 'darkify'),
289 263 'color' => esc_html__('Link Color', 'darkify'),
@@ -304,13 +278,9 @@
304 278 'title' => esc_html__('Input', 'darkify'),
305 279 'title_help' =>
306 280 '<div class="darkify-info-label">' .
307 281 __('Set the input field color of your website when dark mode is enabled.', 'darkify') .
308 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
309 - __('Live Demo', 'darkify') .
310 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
311 - __('Open Docs', 'darkify') .
312 - '</a>',
282 + '</div>',
313 283
314 284 'options' => array(
315 285 'color' => esc_html__('Input Text', 'darkify'),
316 286 'placeholder' => esc_html__('Input Placeholder', 'darkify'),
@@ -331,13 +301,9 @@
331 301 'title' => esc_html__('Border', 'darkify'),
332 302 'title_help' =>
333 303 '<div class="darkify-info-label">' .
334 304 __('Set the border color of your website when dark mode is enabled.', 'darkify') .
335 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
336 - __('Live Demo', 'darkify') .
337 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
338 - __('Open Docs', 'darkify') .
339 - '</a>',
305 + '</div>',
340 306
341 307 'class' => 'only_pro',
342 308 'dependency' => array('color_pallets', '==', 'set3', 'all'),
343 309 'default' => '#4E478D',
@@ -348,18 +314,16 @@
348 314 'title' => esc_html__('Button', 'darkify'),
349 315 'title_help' =>
350 316 '<div class="darkify-info-label">' .
351 317 __('Set the button colors of your website when dark mode is enabled.', 'darkify') .
352 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
353 - __('Live Demo', 'darkify') .
354 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
355 - __('Open Docs', 'darkify') .
356 - '</a>',
318 + '</div>',
357 319 'options' => array(
358 320 'color' => esc_html__('Text Color', 'darkify'),
359 321 'background' => esc_html__('Background', 'darkify'),
360 322 'hover_color' => esc_html__('Hover Text Color', 'darkify'),
361 323 'hover_background' => esc_html__('Hover Background', 'darkify'),
324 + 'border' => esc_html__('Border Color', 'darkify'),
325 + 'hover_border' => esc_html__('Hover Border Color', 'darkify'),
362 326 ),
363 327
364 328 'class' => 'only_pro',
365 329 'dependency' => array('color_pallets', '==', 'set3', 'all'),
@@ -367,8 +331,10 @@
367 331 'color' => '#4E478D',
368 332 'background' => '#B1BBD8',
369 333 'hover_color' => '#B1BBD8',
370 334 'hover_background' => '#2A264D',
335 + 'border' => '#B1BBD8',
336 + 'hover_border' => '#2A264D',
371 337 ),
372 338 ),
373 339 // color pallate set 6
374 340 array(
@@ -377,13 +343,9 @@
377 343 'title' => esc_html__('Background', 'darkify'),
378 344 'title_help' =>
379 345 '<div class="darkify-info-label">' .
380 346 __('Set the background color of your website when dark mode is enabled.', 'darkify') .
381 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
382 - __('Live Demo', 'darkify') .
383 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
384 - __('Open Docs', 'darkify') .
385 - '</a>',
347 + '</div>',
386 348 'options' => array(
387 349 'background' => esc_html__('Primary', 'darkify'),
388 350 'secondary_background' => esc_html__('Secondary', 'darkify'),
389 351 ),
@@ -400,13 +362,9 @@
400 362 'title' => esc_html__('Text', 'darkify'),
401 363 'title_help' =>
402 364 '<div class="darkify-info-label">' .
403 365 __('Set the text color of your website when dark mode is enabled.', 'darkify') .
404 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
405 - __('Live Demo', 'darkify') .
406 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
407 - __('Open Docs', 'darkify') .
408 - '</a>',
366 + '</div>',
409 367 'options' => array(
410 368 'text' => esc_html__('Text Color', 'darkify'),
411 369 'color' => esc_html__('Link Color', 'darkify'),
412 370 'hover' => esc_html__('Link Hover Color', 'darkify'),
@@ -427,13 +385,9 @@
427 385 'title' => esc_html__('Input', 'darkify'),
428 386 'title_help' =>
429 387 '<div class="darkify-info-label">' .
430 388 __('Set the input field color of your website when dark mode is enabled.', 'darkify') .
431 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
432 - __('Live Demo', 'darkify') .
433 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
434 - __('Open Docs', 'darkify') .
435 - '</a>',
389 + '</div>',
436 390
437 391 'options' => array(
438 392 'color' => esc_html__('Input Text', 'darkify'),
439 393 'placeholder' => esc_html__('Input Placeholder', 'darkify'),
@@ -455,13 +409,9 @@
455 409 'title' => esc_html__('Border', 'darkify'),
456 410 'title_help' =>
457 411 '<div class="darkify-info-label">' .
458 412 __('Set the border color of your website when dark mode is enabled.', 'darkify') .
459 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
460 - __('Live Demo', 'darkify') .
461 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
462 - __('Open Docs', 'darkify') .
463 - '</a>',
413 + '</div>',
464 414
465 415 'class' => 'only_pro',
466 416 'dependency' => array('color_pallets', '==', 'set6', 'all'),
467 417 'default' => '#3B4D65',
@@ -472,18 +422,16 @@
472 422 'title' => esc_html__('Button', 'darkify'),
473 423 'title_help' =>
474 424 '<div class="darkify-info-label">' .
475 425 __('Set the button colors of your website when dark mode is enabled.', 'darkify') .
476 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
477 - __('Live Demo', 'darkify') .
478 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
479 - __('Open Docs', 'darkify') .
480 - '</a>',
426 + '</div>',
481 427 'options' => array(
482 428 'color' => esc_html__('Text Color', 'darkify'),
483 429 'background' => esc_html__('Background', 'darkify'),
484 430 'hover_color' => esc_html__('Hover Text Color', 'darkify'),
485 431 'hover_background' => esc_html__('Hover Background', 'darkify'),
432 + 'border' => esc_html__('Border Color', 'darkify'),
433 + 'hover_border' => esc_html__('Hover Border Color', 'darkify'),
486 434 ),
487 435
488 436 'class' => 'only_pro',
489 437 'dependency' => array('color_pallets', '==', 'set6', 'all'),
@@ -492,8 +440,10 @@
492 440 'color' => '#B5D9F3',
493 441 'background' => '#3B4D65',
494 442 'hover_color' => '#B5D9F3',
495 443 'hover_background' => '#144E78',
444 + 'border' => '#3B4D65',
445 + 'hover_border' => '#144E78',
496 446 ),
497 447 ),
498 448 // color pallate set 9
499 449 array(
@@ -502,13 +452,9 @@
502 452 'title' => esc_html__('Background', 'darkify'),
503 453 'title_help' =>
504 454 '<div class="darkify-info-label">' .
505 455 __('Set the background color of your website when dark mode is enabled.', 'darkify') .
506 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
507 - __('Live Demo', 'darkify') .
508 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
509 - __('Open Docs', 'darkify') .
510 - '</a>',
456 + '</div>',
511 457
512 458 'dependency' => array('color_pallets', '==', 'set9', 'all'),
513 459
514 460 'options' => array(
@@ -527,13 +473,9 @@
527 473 'title' => esc_html__('Text', 'darkify'),
528 474 'title_help' =>
529 475 '<div class="darkify-info-label">' .
530 476 __('Set the text and link colors of your website when dark mode is enabled.', 'darkify') .
531 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
532 - __('Live Demo', 'darkify') .
533 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
534 - __('Open Docs', 'darkify') .
535 - '</a>',
477 + '</div>',
536 478 'options' => array(
537 479 'text' => esc_html__('Text Color', 'darkify'),
538 480 'color' => esc_html__('Link Color', 'darkify'),
539 481 'hover' => esc_html__('Link Hover Color', 'darkify'),
@@ -554,13 +496,9 @@
554 496 'title' => esc_html__('Input', 'darkify'),
555 497 'title_help' =>
556 498 '<div class="darkify-info-label">' .
557 499 __('Set the input field colors of your website when dark mode is enabled.', 'darkify') .
558 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
559 - __('Live Demo', 'darkify') .
560 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
561 - __('Open Docs', 'darkify') .
562 - '</a>',
500 + '</div>',
563 501
564 502 'options' => array(
565 503 'color' => esc_html__('Input Text', 'darkify'),
566 504 'placeholder' => esc_html__('Input Placeholder', 'darkify'),
@@ -582,13 +520,9 @@
582 520 'title' => esc_html__('Border', 'darkify'),
583 521 'title_help' =>
584 522 '<div class="darkify-info-label">' .
585 523 __('Set the border color of your website when dark mode is enabled.', 'darkify') .
586 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
587 - __('Live Demo', 'darkify') .
588 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
589 - __('Open Docs', 'darkify') .
590 - '</a>',
524 + '</div>',
591 525
592 526 'class' => 'only_pro',
593 527 'dependency' => array('color_pallets', '==', 'set9', 'all'),
594 528 'default' => '#095541',
@@ -598,18 +532,16 @@
598 532 'type' => 'color_group',
599 533 'title' => esc_html__('Button', 'darkify'),
600 534 'title_help' => '<div class="darkify-info-label">' .
601 535 __('Set the button colors of your website when dark mode is enabled.', 'darkify') .
602 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
603 - __('Live Demo', 'darkify') .
604 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
605 - __('Open Docs', 'darkify') .
606 - '</a>',
536 + '</div>',
607 537 'options' => array(
608 538 'color' => esc_html__('Text Color', 'darkify'),
609 539 'background' => esc_html__('Background', 'darkify'),
610 540 'hover_color' => esc_html__('Hover Text Color', 'darkify'),
611 541 'hover_background' => esc_html__('Hover Background', 'darkify'),
542 + 'border' => esc_html__('Border Color', 'darkify'),
543 + 'hover_border' => esc_html__('Hover Border Color', 'darkify'),
612 544 ),
613 545 'class' => 'only_pro',
614 546 'dependency' => array('color_pallets', '==', 'set9', 'all'),
615 547 'default' => array(
@@ -616,8 +548,10 @@
616 548 'color' => '#C1D2BB',
617 549 'background' => '#095541',
618 550 'hover_color' => '#C1D2BB',
619 551 'hover_background' => '#073d2f',
552 + 'border' => '#095541',
553 + 'hover_border' => '#073d2f',
620 554 ),
621 555 ),
622 556 // color pallate set 10
623 557 array(
@@ -626,13 +560,9 @@
626 560 'title' => esc_html__('Background', 'darkify'),
627 561 'title_help' =>
628 562 '<div class="darkify-info-label">' .
629 563 __('Set the background color of your website when dark mode is enabled.', 'darkify') .
630 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
631 - __('Live Demo', 'darkify') .
632 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
633 - __('Open Docs', 'darkify') .
634 - '</a>',
564 + '</div>',
635 565 'options' => array(
636 566 'background' => esc_html__('Primary', 'darkify'),
637 567 'secondary_background' => esc_html__('Secondary', 'darkify'),
638 568 ),
@@ -649,13 +579,9 @@
649 579 'title' => esc_html__('Text', 'darkify'),
650 580 'title_help' =>
651 581 '<div class="darkify-info-label">' .
652 582 __('Set the text color of your website when dark mode is enabled.', 'darkify') .
653 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
654 - __('Live Demo', 'darkify') .
655 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
656 - __('Open Docs', 'darkify') .
657 - '</a>',
583 + '</div>',
658 584 'options' => array(
659 585 'text' => esc_html__('Text Color', 'darkify'),
660 586 'color' => esc_html__('Link Color', 'darkify'),
661 587 'hover' => esc_html__('Link Hover Color', 'darkify'),
@@ -676,13 +602,9 @@
676 602 'title' => esc_html__('Input', 'darkify'),
677 603 'title_help' =>
678 604 '<div class="darkify-info-label">' .
679 605 __('Set the input field colors of your website when dark mode is enabled.', 'darkify') .
680 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
681 - __('Live Demo', 'darkify') .
682 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
683 - __('Open Docs', 'darkify') .
684 - '</a>',
606 + '</div>',
685 607
686 608 'options' => array(
687 609 'color' => esc_html__('Input Text', 'darkify'),
688 610 'placeholder' => esc_html__('Input Placeholder', 'darkify'),
@@ -705,13 +627,9 @@
705 627 'title' => esc_html__('Border', 'darkify'),
706 628 'title_help' =>
707 629 '<div class="darkify-info-label">' .
708 630 __('Set the border color of your website when dark mode is enabled.', 'darkify') .
709 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
710 - __('Live Demo', 'darkify') .
711 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
712 - __('Open Docs', 'darkify') .
713 - '</a>',
631 + '</div>',
714 632
715 633 'class' => 'only_pro',
716 634 'dependency' => array('color_pallets', '==', 'set10', 'all'),
717 635 'default' => '#5D4010',
@@ -723,18 +641,16 @@
723 641 'title' => esc_html__('Button', 'darkify'),
724 642 'title_help' =>
725 643 '<div class="darkify-info-label">' .
726 644 __('Set the color of buttons on your website when dark mode is enabled.', 'darkify') .
727 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
728 - __('Live Demo', 'darkify') .
729 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
730 - __('Open Docs', 'darkify') .
731 - '</a>',
645 + '</div>',
732 646 'options' => array(
733 647 'color' => esc_html__('Button Text', 'darkify'),
734 648 'background' => esc_html__('Button Background', 'darkify'),
735 649 'hover_color' => esc_html__('Hover Text', 'darkify'),
736 650 'hover_background' => esc_html__('Hover Background', 'darkify'),
651 + 'border' => esc_html__('Border Color', 'darkify'),
652 + 'hover_border' => esc_html__('Hover Border Color', 'darkify'),
737 653 ),
738 654
739 655 'class' => 'only_pro',
740 656 'dependency' => array('color_pallets', '==', 'set10', 'all'),
@@ -742,8 +658,10 @@
742 658 'color' => '#E0D2BD',
743 659 'background' => '#5D4010',
744 660 'hover_color' => '#E0D2BD',
745 661 'hover_background' => '#372911',
662 + 'border' => '#5D4010',
663 + 'hover_border' => '#372911',
746 664 ),
747 665 ),
748 666 // color pallate set 11
749 667 array(
@@ -752,13 +670,9 @@
752 670 'title' => esc_html__('Background', 'darkify'),
753 671 'title_help' =>
754 672 '<div class="darkify-info-label">' .
755 673 __('Set the background color of your website when dark mode is enabled.', 'darkify') .
756 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
757 - __('Live Demo', 'darkify') .
758 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
759 - __('Open Docs', 'darkify') .
760 - '</a>',
674 + '</div>',
761 675 'options' => array(
762 676 'background' => esc_html__('Primary BG', 'darkify'),
763 677 'secondary_background' => esc_html__('Secondary BG', 'darkify'),
764 678 ),
@@ -776,13 +690,9 @@
776 690 'title' => esc_html__('Text', 'darkify'),
777 691 'title_help' =>
778 692 '<div class="darkify-info-label">' .
779 693 __('Set the text color of your website when dark mode is enabled.', 'darkify') .
780 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
781 - __('Live Demo', 'darkify') .
782 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
783 - __('Open Docs', 'darkify') .
784 - '</a>',
694 + '</div>',
785 695 'options' => array(
786 696 'text' => esc_html__('Text Color', 'darkify'),
787 697 'color' => esc_html__('Link Color', 'darkify'),
788 698 'hover' => esc_html__('Link Hover Color', 'darkify'),
@@ -804,13 +714,9 @@
804 714 'title' => esc_html__('Input', 'darkify'),
805 715 'title_help' =>
806 716 '<div class="darkify-info-label">' .
807 717 __('Set the input field colors of your website when dark mode is enabled.', 'darkify') .
808 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
809 - __('Live Demo', 'darkify') .
810 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
811 - __('Open Docs', 'darkify') .
812 - '</a>',
718 + '</div>',
813 719 'options' => array(
814 720 'color' => esc_html__('Input Text', 'darkify'),
815 721 'placeholder' => esc_html__('Input Placeholder', 'darkify'),
816 722 'background' => esc_html__('Input Background', 'darkify'),
@@ -832,13 +738,9 @@
832 738 'title' => esc_html__('Border', 'darkify'),
833 739 'title_help' =>
834 740 '<div class="darkify-info-label">' .
835 741 __('Set the border color of your website when dark mode is enabled.', 'darkify') .
836 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
837 - __('Live Demo', 'darkify') .
838 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
839 - __('Open Docs', 'darkify') .
840 - '</a>',
742 + '</div>',
841 743
842 744 'class' => 'only_pro',
843 745 'dependency' => array('color_pallets', '==', 'set11', 'all'),
844 746 'default' => '#440649',
@@ -849,13 +751,9 @@
849 751 'title' => esc_html__('Button', 'darkify'),
850 752 'title_help' =>
851 753 '<div class="darkify-info-label">' .
852 754 __('Set the button colors of your website when dark mode is enabled.', 'darkify') .
853 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#preset" target="_blank">' .
854 - __('Live Demo', 'darkify') .
855 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#color-presets" target="_blank">' .
856 - __('Open Docs', 'darkify') .
857 - '</a>',
755 + '</div>',
858 756
859 757 'options' => array(
860 758 'color' => esc_html__('Text Color', 'darkify'),
861 759 'background' => esc_html__('Background', 'darkify'),
@@ -860,8 +758,10 @@
860 758 'color' => esc_html__('Text Color', 'darkify'),
861 759 'background' => esc_html__('Background', 'darkify'),
862 760 'hover_color' => esc_html__('Hover Text Color', 'darkify'),
863 761 'hover_background' => esc_html__('Hover Background', 'darkify'),
762 + 'border' => esc_html__('Border Color', 'darkify'),
763 + 'hover_border' => esc_html__('Hover Border Color', 'darkify'),
864 764 ),
865 765
866 766 'class' => 'only_pro',
867 767 'dependency' => array('color_pallets', '==', 'set11', 'all'),
@@ -870,8 +770,10 @@
870 770 'color' => '#c09dc2',
871 771 'background' => '#440649',
872 772 'hover_color' => '#c09dc2',
873 773 'hover_background' => '#2c082f',
774 + 'border' => '#440649',
775 + 'hover_border' => '#2c082f',
874 776 ),
875 777 ),
876 778 )
877 779 ),
@@ -876,12 +778,87 @@
876 778 )
877 779 ),
878 780
879 781 array(
782 + 'id' => 'color-overrides',
783 + 'title' => esc_html__('Color Overrides', 'darkify'),
784 + 'icon' => 'icofont-eye-dropper',
785 + 'fields' => array(
786 + // Intro line, rendered plain above the section card.
787 + array(
788 + 'type' => 'page_hint',
789 + 'content' => esc_html__('Pin individual light-mode colors to an exact dark-mode replacement. Everything else keeps following your preset automatically — this is only for the handful of colors that need something different.', 'darkify'),
790 + ),
791 +
792 + array(
793 + 'type' => 'heading',
794 + 'title' => esc_html__('Replace Individual Colors', 'darkify'),
795 + 'section_start' => true,
796 + ),
797 + array(
798 + 'id' => 'color_overrides',
799 + 'type' => 'repeater',
800 + 'class' => 'color_override_repeater repeater_pro_only',
801 + 'title' => esc_html__('Replace Individual Colors', 'darkify'),
802 + 'title_help' =>
803 + '<div class="darkify-info-label">' .
804 + __('Pin one light-mode color to an exact dark-mode color. Overrides are matched exactly against the color the element actually renders with — #ffffff and #fffffe are two separate rules — so a handful of colors can be pinned without changing how the rest of the site is handled.', 'darkify') .
805 + '</div>',
806 +
807 + 'fields' => array(
808 + array(
809 + 'id' => 'light_color',
810 + 'type' => 'color',
811 + 'title' => esc_html__('Light Mode Color', 'darkify'),
812 + ),
813 + array(
814 + 'id' => 'dark_color',
815 + 'type' => 'color',
816 + 'title' => esc_html__('Dark Mode Color', 'darkify'),
817 + ),
818 + array(
819 + 'id' => 'override_scope',
820 + 'type' => 'select',
821 + 'title' => esc_html__('Apply To', 'darkify'),
822 + 'options' => array(
823 + 'all' => esc_html__('Everywhere', 'darkify'),
824 + 'text' => esc_html__('Text only', 'darkify'),
825 + 'icon' => esc_html__('Icons only', 'darkify'),
826 + 'background' => esc_html__('Backgrounds only', 'darkify'),
827 + 'border' => esc_html__('Borders only', 'darkify'),
828 + 'shadow' => esc_html__('Shadows only', 'darkify'),
829 + ),
830 + 'default' => 'all',
831 + ),
832 + ),
833 +
834 + 'default' => array(
835 + array(
836 + 'light_color' => '',
837 + 'dark_color' => '',
838 + 'override_scope' => 'all',
839 + ),
840 + ),
841 + ),
842 + ),
843 + ),
844 + array(
845 + 'id' => 'scroll-bar',
880 846 'title' => esc_html__('Scroll Bar', 'darkify'),
881 847 'icon' => 'icofont-scroll-double-down',
882 848 'fields' => array(
849 + // Intro line, rendered plain above the section card.
883 850 array(
851 + 'type' => 'page_hint',
852 + 'content' => esc_html__('Style the browser scrollbar to match dark mode.', 'darkify'),
853 + ),
854 + // ===== SCROLLBAR =====
855 + array(
856 + 'type' => 'heading',
857 + 'title' => esc_html__('Scrollbar', 'darkify'),
858 + 'section_start' => true,
859 + ),
860 + array(
884 861 'id' => 'enable_scrollbar_dark',
885 862 'type' => 'switcher',
886 863 'title' => esc_html__('Enable Dark Mode on Scrollbar', 'darkify'),
887 864 'title_help' =>
@@ -886,13 +863,9 @@
886 863 'title' => esc_html__('Enable Dark Mode on Scrollbar', 'darkify'),
887 864 'title_help' =>
888 865 '<div class="darkify-info-label">' .
889 866 __('Enable dark mode styling for the website scrollbar.', 'darkify') .
890 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#scrollbars" target="_blank">' .
891 - __('Live Demo', 'darkify') .
892 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#dark-mode-scrollbar" target="_blank">' .
893 - __('Open Docs', 'darkify') .
894 - '</a>',
867 + '</div>',
895 868
896 869 'text_on' => esc_html__('Enabled', 'darkify'),
897 870 'text_off' => esc_html__('Disabled', 'darkify'),
898 871 'text_width' => 100,
@@ -905,13 +878,9 @@
905 878 'title' => esc_html__('Scrollbar Color', 'darkify'),
906 879 'title_help' =>
907 880 '<div class="darkify-info-label">' .
908 881 __('Set the track and thumb background colors of the scrollbar when dark mode is enabled.', 'darkify') .
909 - '</div><a class="tooltip_btn_primary" href="' . DARKIFY_DEMO_URL . 'colors/#scrollbars" target="_blank">' .
910 - __('Live Demo', 'darkify') .
911 - '</a><a class="tooltip_btn_secondary" href="' . DARKIFY_DOCS_URL . 'colors/#dark-mode-scrollbar" target="_blank">' .
912 - __('Open Docs', 'darkify') .
913 - '</a>',
882 + '</div>',
914 883
915 884 'options' => array(
916 885 'dark_mode_scrollbar_track_bg' => esc_html__('Track Background', 'darkify'),
917 886 'dark_mode_scrollbar_thumb_bg' => esc_html__('Thumb Background', 'darkify'),
@@ -928,8 +897,9 @@
928 897
929 898
930 899 )
931 900 ),
901 +
932 902
933 903 )
934 904 ),
935 905 ),