https://ppcfc.com//assets/backend/assets/js/themecolor.js

1
2let html =  document.querySelector('html'),
3body = document.querySelector('body');
4
5const handleThemeUpdate = (cssVars) => {
6const root = document.querySelector(':root');
7const keys = Object.keys(cssVars);
8keys.forEach(key => {
9    root.style.setProperty(key, cssVars[key]);
10});
11}
12
13function dynamicPrimaryColor(primaryColor) {
14primaryColor.forEach((item) => {
15    item.addEventListener('input', (e) => {
16        const cssPropName = `--primary-${e.target.getAttribute('data-id')}`;
17        const cssPropName1 = `--primary-${e.target.getAttribute('data-id1')}`;
18        const cssPropName2 = `--primary-${e.target.getAttribute('data-id2')}`;
19        const cssPropName7 = `--primary-${e.target.getAttribute('data-id7')}`;
20        const cssPropName8 = `--darkprimary-${e.target.getAttribute('data-id8')}`;
21        const cssPropName3 = `--dark-${e.target.getAttribute('data-id3')}`;
22        const cssPropName4 = `--transparent-${e.target.getAttribute('data-id4')}`;
23        const cssPropName5 = `--transparent-${e.target.getAttribute('data-id5')}`;
24        const cssPropName6 = `--transparent-${e.target.getAttribute('data-id6')}`;
25        const cssPropName9 = `--transparentprimary-${e.target.getAttribute('data-id9')}`;
26        handleThemeUpdate({
27            [cssPropName]: e.target.value,
28            // 95 is used as the opacity 0.95  
29            [cssPropName1]: e.target.value + 95,
30            [cssPropName2]: e.target.value,
31            [cssPropName3]: e.target.value,
32            [cssPropName4]: e.target.value,
33            [cssPropName5]: e.target.value,
34            [cssPropName6]: e.target.value + 95,
35            [cssPropName7]: e.target.value + 20,
36            [cssPropName8]: e.target.value + 20,
37            [cssPropName9]: e.target.value + 20,
38        });
39    });
40});
41}
42
43(function() {
44
45'use strict'
46// Light theme color picker
47const LightThemeSwitchers = document.querySelectorAll('.light-theme .switch_section span');
48const dynamicPrimaryLight = document.querySelectorAll('input.color-primary-light');
49
50// themeSwitch(LightThemeSwitchers);
51dynamicPrimaryColor(dynamicPrimaryLight);
52
53// dark theme color picker
54
55const DarkThemeSwitchers = document.querySelectorAll('.dark-theme .switch_section span')
56const DarkDynamicPrimaryLight = document.querySelectorAll('input.color-primary-dark');
57
58// themeSwitch(DarkThemeSwitchers);
59dynamicPrimaryColor(DarkDynamicPrimaryLight);
60
61// tranparent theme color picker
62
63const transparentThemeSwitchers = document.querySelectorAll('.transparent-theme .switch_section span')
64const transparentDynamicPrimaryLight = document.querySelectorAll('input.color-primary-transparent');
65
66// themeSwitch(transparentThemeSwitchers);
67dynamicPrimaryColor(transparentDynamicPrimaryLight);
68
69// tranparent theme bgcolor picker
70
71const transparentBgThemeSwitchers = document.querySelectorAll('.transparent-theme .switch_section span')
72const transparentDynamicPBgLight = document.querySelectorAll('input.color-bg-transparent');
73
74// themeSwitch(transparentBgThemeSwitchers);
75dynamicPrimaryColor(transparentDynamicPBgLight);
76
77localStorageBackup();
78
79$('#myonoffswitch1').on('click', function(){
80    body?.classList.remove('dark-theme');
81    body?.classList.remove('transparent-theme');
82    body?.classList.remove('bg-img1');
83    body?.classList.remove('bg-img2');
84    body?.classList.remove('bg-img3');
85    body?.classList.remove('bg-img4');
86    
87    localStorage.removeItem('nowaBgImage');
88    $('#myonoffswitch1').prop('checked', true);
89
90    localStorage.setItem('nowalightMode', true);
91    localStorage.removeItem('nowadarkMode');
92    localStorage.removeItem('nowatransparentMode');
93})
94$('#myonoffswitch2').on('click', function(){
95    body?.classList.remove('light-theme');
96    body?.classList.remove('transparent-theme');
97    body?.classList.remove('bg-img1');
98    body?.classList.remove('bg-img2');
99    body?.classList.remove('bg-img3');
100    body?.classList.remove('bg-img4');
101
102    localStorage.setItem('nowadarkMode', true);
103    localStorage.removeItem('nowalightMode');
104    localStorage.removeItem('nowatransparentMode');
105    
106    localStorage.removeItem('nowaBgImage');
107    $('#myonoffswitch2').prop('checked', true);
108})
109$('#myonoffswitchTransparent').on('click', function(){
110    body?.classList.remove('dark-theme');
111    body?.classList.remove('light-theme');
112    body?.classList.remove('bg-img1');
113    body?.classList.remove('bg-img2');
114    body?.classList.remove('bg-img3');
115    body?.classList.remove('bg-img4');
116    
117    localStorage.removeItem('nowaBgImage');
118    $('#myonoffswitchTransparent').prop('checked', true);
119    localStorage.setItem('nowatransparentMode', true);
120    localStorage.removeItem('nowalightMode');
121    localStorage.removeItem('nowadarkMode');
122})
123    
124})();
125
126function localStorageBackup() {
127
128'use strict'
129// if there is a value stored, update color picker and background color
130// Used to retrive the data from local storage
131if (localStorage.nowaprimaryColor) {
132    // document.getElementById('colorID').value = localStorage.nowaprimaryColor;
133    html.style.setProperty('--primary-bg-color', localStorage.nowaprimaryColor);
134    html.style.setProperty('--primary-bg-hover', localStorage.nowaprimaryHoverColor);
135    html.style.setProperty('--primary-bg-border', localStorage.nowaprimaryBorderColor);
136    html.style.setProperty('--primary-transparentcolor', localStorage.nowaprimaryTransparent);
137    // body.setAttribute('class', 'app sidebar-mini light-theme');
138    
139    body.classList.add('light-theme');
140    body.classList.remove('dark-theme');
141    body.classList.remove('transparent-theme');
142
143    $('#myonoffswitch3').prop('checked', true);
144    $('#myonoffswitch6').prop('checked', true);
145    $('#myonoffswitch1').prop('checked', true);
146}
147
148if (localStorage.nowadarkPrimary) {
149    // document.getElementById('darkPrimaryColorID').value = localStorage.nowadarkPrimary;
150    html.style.setProperty('--primary-bg-color', localStorage.nowadarkPrimary);
151    html.style.setProperty('--primary-bg-hover', localStorage.nowadarkPrimary);
152    html.style.setProperty('--primary-bg-border', localStorage.nowadarkPrimary);
153    html.style.setProperty('--dark-primary', localStorage.nowadarkPrimary);
154    html.style.setProperty('--darkprimary-transparentcolor', localStorage.nowadarkprimaryTransparent);
155    // body.setAttribute('class', 'app sidebar-mini dark-theme');
156    
157    body.classList.remove('light-theme');
158    body.classList.add('dark-theme');
159    body.classList.remove('transparent-theme');
160
161    $('#myonoffswitch2').prop('checked', true);
162
163}
164
165
166if (localStorage.nowatransparentPrimary) {
167    // document.getElementById('transparentPrimaryColorID').value = localStorage.nowatransparentPrimary;
168    html.style.setProperty('--primary-bg-color', localStorage.nowatransparentPrimary);
169    html.style.setProperty('--primary-bg-hover', localStorage.nowatransparentPrimary);
170    html.style.setProperty('--primary-bg-border', localStorage.nowatransparentPrimary);
171    html.style.setProperty('--transparent-primary', localStorage.nowatransparentPrimary);
172    html.style.setProperty('--transparentprimary-transparentcolor', localStorage.nowatransparentprimaryTransparent);
173    // body.setAttribute('class', 'app sidebar-mini transparent-theme');
174    
175    body.classList.remove('light-theme');
176    body.classList.remove('dark-theme');
177    body.classList.add('transparent-theme');
178
179    $('#myonoffswitchTransparent').prop('checked', true);
180}
181
182if (localStorage.nowatransparentBgImgPrimary) {
183    // document.getElementById('transparentBgImgPrimaryColorID').value = localStorage.nowatransparentBgImgPrimary;
184    html.style.setProperty('--primary-bg-color', localStorage.nowatransparentBgImgPrimary);
185    html.style.setProperty('--primary-bg-hover', localStorage.nowatransparentBgImgPrimary);
186    html.style.setProperty('--primary-bg-border', localStorage.nowatransparentBgImgPrimary);
187    html.style.setProperty('--transparent-primary', localStorage.nowatransparentBgImgPrimary);
188    html.style.setProperty('--transparentprimary-transparentcolor', localStorage.nowatransparentBgImgprimaryTransparent);
189    body?.classList.add('transparent-theme');
190    body?.classList.remove('dark-theme');
191    body?.classList.remove('light-theme');
192    
193    $('#myonoffswitchTransparent').prop('checked', true);
194}
195
196if (localStorage.nowatransparentBgColor) {
197    // document.getElementById('transparentBgColorID').value = localStorage.nowatransparentBgColor;
198    html.style.setProperty('--transparent-body', localStorage.nowatransparentBgColor);
199    html.style.setProperty('--transparent-theme', localStorage.nowatransparentThemeColor);
200    html.style.setProperty('--transparentprimary-transparentcolor', localStorage.nowatransparentprimaryTransparent);
201    body.classList.add('transparent-theme');
202    body.classList.remove('dark-theme');
203    body.classList.remove('light-theme');
204
205
206    $('#myonoffswitchTransparent').prop('checked', true);
207}
208if (localStorage.nowaBgImage) {
209    body?.classList.add('transparent-theme');
210    let bgImg = localStorage.nowaBgImage.split(' ')[0];
211    body?.classList.add(bgImg);
212    body?.classList.remove('dark-theme');
213    body?.classList.remove('light-theme');
214    
215    $('#myonoffswitchTransparent').prop('checked', true);
216}
217
218if(localStorage.nowalightMode){
219    body?.classList.add('light-theme');
220    body?.classList.remove('dark-theme');
221    body?.classList.remove('transparent-theme');
222    $('#myonoffswitch1').prop('checked', true);
223    $('#myonoffswitch3').prop('checked', true);
224    $('#myonoffswitch6').prop('checked', true);
225}
226if(localStorage.nowadarkMode){
227    body?.classList.remove('light-theme');
228    body?.classList.add('dark-theme');
229    body?.classList.remove('transparent-theme');
230    $('#myonoffswitch2').prop('checked', true);
231    $('#myonoffswitch5').prop('checked', true);
232    $('#myonoffswitch8').prop('checked', true);
233}
234if(localStorage.nowatransparentMode){
235    body?.classList.remove('light-theme');
236    body?.classList.remove('dark-theme');
237    body?.classList.add('transparent-theme');
238    $('#myonoffswitchTransparent').prop('checked', true);
239    $('#myonoffswitch3').prop('checked', false);
240    $('#myonoffswitch6').prop('checked', false);
241    $('#myonoffswitch5').prop('checked', false);
242    $('#myonoffswitch8').prop('checked', false);
243}
244if(localStorage.nowahorizontal){
245    body.classList.add('horizontal')
246}
247if(localStorage.nowahorizontalHover){
248    body.classList.add('horizontal-hover')
249}
250if(localStorage.nowartl){
251    body.classList.add('rtl')
252}
253}
254
255// triggers on changing the color picker
256function changePrimaryColor() {
257
258'use strict'
259$('#myonoffswitch3').prop('checked', true);
260$('#myonoffswitch6').prop('checked', true);
261checkOptions();
262
263var userColor = document.getElementById('colorID').value;
264localStorage.setItem('nowaprimaryColor', userColor);

265// to store value as opacity 0.95 we use 95
266localStorage.setItem('nowaprimaryHoverColor', userColor + 95);
267localStorage.setItem('nowaprimaryBorderColor', userColor);
268localStorage.setItem('nowaprimaryTransparent', userColor + 20);
269
270// removing dark theme properties
271localStorage.removeItem('nowadarkPrimary')
272localStorage.removeItem('nowatransparentBgColor');
273localStorage.removeItem('nowatransparentThemeColor');
274localStorage.removeItem('nowatransparentPrimary');
275localStorage.removeItem('nowatransparentBgImgPrimary');
276localStorage.removeItem('nowatransparentBgImgprimaryTransparent');
277localStorage.removeItem('nowadarkprimaryTransparent');
278body.classList.add('light-theme');
279body.classList.remove('transparent-theme');
280body.classList.remove('dark-theme');
281localStorage.removeItem('nowaBgImage');
282
283$('#myonoffswitch1').prop('checked', true);
284names()
285
286localStorage.setItem('nowalightMode', true);
287localStorage.removeItem('nowadarkMode');
288localStorage.removeItem('nowatransparentMode');
289}
290
291function darkPrimaryColor() {
292'use strict'
293
294var userColor = document.getElementById('darkPrimaryColorID').value;
295localStorage.setItem('nowadarkPrimary', userColor);
296localStorage.setItem('nowadarkprimaryTransparent', userColor + 20);
297$('#myonoffswitch5').prop('checked', true);
298$('#myonoffswitch8').prop('checked', true);
299checkOptions();
300
301// removing light theme data 
302localStorage.removeItem('nowaprimaryColor')
303localStorage.removeItem('nowaprimaryHoverColor')
304localStorage.removeItem('nowaprimaryBorderColor')
305localStorage.removeItem('nowaprimaryTransparent');
306localStorage.removeItem('nowatransparentBgImgPrimary');
307localStorage.removeItem('nowatransparentBgImgprimaryTransparent');
308
309localStorage.removeItem('nowatransparentBgColor');
310localStorage.removeItem('nowatransparentThemeColor');
311localStorage.removeItem('nowatransparentPrimary');
312localStorage.removeItem('nowaBgImage');
313
314body.classList.add('dark-theme');
315body.classList.remove('light-theme');
316body.classList.remove('transparent-theme');
317
318$('#myonoffswitch2').prop('checked', true);
319names()
320
321localStorage.setItem('nowadarkMode', true);
322localStorage.removeItem('nowalightMode');
323localStorage.removeItem('nowatransparentMode');
324}
325
326function transparentPrimaryColor() {
327'use strict'
328
329$('#myonoffswitch3').prop('checked', false);
330$('#myonoffswitch6').prop('checked', false);
331$('#myonoffswitch5').prop('checked', false);
332$('#myonoffswitch8').prop('checked', false);
333
334var userColor = document.getElementById('transparentPrimaryColorID').value;
335localStorage.setItem('nowatransparentPrimary', userColor);
336localStorage.setItem('nowatransparentprimaryTransparent', userColor + 20);
337
338// removing light theme data 
339localStorage.removeItem('nowadarkPrimary');
340localStorage.removeItem('nowaprimaryColor')
341localStorage.removeItem('nowaprimaryHoverColor')
342localStorage.removeItem('nowaprimaryBorderColor')
343localStorage.removeItem('nowaprimaryTransparent');
344localStorage.removeItem('nowatransparentBgImgPrimary');
345localStorage.removeItem('nowatransparentBgImgprimaryTransparent');
346body.classList.add('transparent-theme');
347body.classList.remove('light-theme');
348body.classList.remove('dark-theme');
349body?.classList.remove('bg-img1');
350body?.classList.remove('bg-img2');
351body?.classList.remove('bg-img3');
352body?.classList.remove('bg-img4');
353
354document.querySelector('body').classList.remove('light-header')
355document.querySelector('body').classList.remove('dark-header')
356document.querySelector('body').classList.remove('color-header')
357document.querySelector('body').classList.remove('gradient-header')
358document.querySelector('body').classList.remove('light-menu')
359document.querySelector('body').classList.remove('dark-menu')
360document.querySelector('body').classList.remove('color-menu')
361document.querySelector('body').classList.remove('gradient-menu')
362$('#myonoffswitchTransparent').prop('checked', true);
363checkOptions();
364names()
365
366localStorage.setItem('nowatransparentMode', true);
367localStorage.removeItem('nowalightMode');
368localStorage.removeItem('nowadarkMode');
369}
370
371function transparentBgImgPrimaryColor() {
372'use strict'
373$('#myonoffswitch3').prop('checked', false);
374$('#myonoffswitch6').prop('checked', false);
375$('#myonoffswitch5').prop('checked', false);
376$('#myonoffswitch8').prop('checked', false);
377var userColor = document.getElementById('transparentBgImgPrimaryColorID').value;
378localStorage.setItem('nowatransparentBgImgPrimary', userColor);
379localStorage.setItem('nowatransparentBgImgprimaryTransparent', userColor+20);
380if(
381    body?.classList.contains('bg-img1') == false &&
382    body?.classList.contains('bg-img2') == false &&
383    body?.classList.contains('bg-img3') == false &&
384    body?.classList.contains('bg-img4') == false
385    ){
386    body?.classList.add('bg-img1');
387    localStorage.setItem('nowaBgImage', 'bg-img1')
388}
389// removing light theme data 
390localStorage.removeItem('nowadarkPrimary');
391localStorage.removeItem('nowaprimaryColor')
392localStorage.removeItem('nowaprimaryHoverColor')
393localStorage.removeItem('nowaprimaryBorderColor')
394localStorage.removeItem('nowaprimaryTransparent');
395localStorage.removeItem('nowadarkprimaryTransparent');
396localStorage.removeItem('nowatransparentPrimary')
397localStorage.removeItem('nowatransparentprimaryTransparent');
398body.classList.add('transparent-theme');
399body?.classList.remove('light-theme');
400body?.classList.remove('dark-theme');
401
402document.querySelector('body').classList.remove('light-header')
403document.querySelector('body').classList.remove('dark-header')
404document.querySelector('body').classList.remove('color-header')
405document.querySelector('body').classList.remove('gradient-header')
406document.querySelector('body').classList.remove('light-menu')
407document.querySelector('body').classList.remove('dark-menu')
408document.querySelector('body').classList.remove('color-menu')
409document.querySelector('body').classList.remove('gradient-menu')
410$('#myonoffswitchTransparent').prop('checked', true);
411checkOptions();
412names();
413
414localStorage.setItem('nowatransparentMode', true);
415localStorage.removeItem('nowalightMode');
416localStorage.removeItem('nowadarkMode');
417}
418
419
420function transparentBgColor() {
421'use strict'
422$('#myonoffswitch3').prop('checked', false);
423$('#myonoffswitch6').prop('checked', false);
424$('#myonoffswitch5').prop('checked', false);
425$('#myonoffswitch8').prop('checked', false);
426var userColor = document.getElementById('transparentBgColorID').value;
427localStorage.setItem('nowatransparentBgColor', userColor);
428localStorage.setItem('nowatransparentThemeColor', userColor + 95);
429localStorage.setItem('nowatransparentprimaryTransparent', userColor + 20);
430localStorage.removeItem('nowatransparentBgImgPrimary');
431localStorage.removeItem('nowatransparentBgImgprimaryTransparent');
432
433// removing light theme data 
434localStorage.removeItem('nowadarkPrimary');
435localStorage.removeItem('nowaprimaryColor')
436localStorage.removeItem('nowaprimaryHoverColor')
437localStorage.removeItem('nowaprimaryBorderColor')
438localStorage.removeItem('nowaprimaryTransparent');
439localStorage.removeItem('nowaBgImage');
440body.classList.add('transparent-theme');
441body.classList.remove('light-theme');
442body.classList.remove('dark-theme');
443body?.classList.remove('bg-img1');
444body?.classList.remove('bg-img2');
445body?.classList.remove('bg-img3');
446body?.classList.remove('bg-img4');
447
448document.querySelector('body').classList.remove('light-header')
449document.querySelector('body').classList.remove('dark-header')
450document.querySelector('body').classList.remove('color-header')
451document.querySelector('body').classList.remove('gradient-header')
452document.querySelector('body').classList.remove('light-menu')
453document.querySelector('body').classList.remove('dark-menu')
454document.querySelector('body').classList.remove('color-menu')
455document.querySelector('body').classList.remove('gradient-menu')
456$('#myonoffswitchTransparent').prop('checked', true);
457checkOptions();
458
459localStorage.setItem('nowatransparentMode', true);
460localStorage.removeItem('nowalightMode');
461localStorage.removeItem('nowadarkMode');
462}
463
464
465function bgImage(e) {
466'use strict'
467
468$('#myonoffswitch3').prop('checked', false);
469$('#myonoffswitch6').prop('checked', false);
470$('#myonoffswitch5').prop('checked', false);
471$('#myonoffswitch8').prop('checked', false);
472let imgID = e.getAttribute('class');
473localStorage.setItem('nowaBgImage', imgID);
474
475// removing light theme data 
476localStorage.removeItem('nowadarkPrimary');
477localStorage.removeItem('nowaprimaryColor')
478localStorage.removeItem('nowatransparentBgColor');
479localStorage.removeItem('nowatransparentThemeColor');
480localStorage.removeItem('nowatransparentprimaryTransparent');
481body.classList.add('transparent-theme');
482body?.classList.remove('light-theme');
483body?.classList.remove('dark-theme');
484
485document.querySelector('body').classList.remove('light-header')
486document.querySelector('body').classList.remove('dark-header')
487document.querySelector('body').classList.remove('color-header')
488document.querySelector('body').classList.remove('gradient-header')
489document.querySelector('body').classList.remove('light-menu')
490document.querySelector('body').classList.remove('dark-menu')
491document.querySelector('body').classList.remove('color-menu')
492document.querySelector('body').classList.remove('gradient-menu')
493$('#myonoffswitchTransparent').prop('checked', true);
494checkOptions();
495
496localStorage.setItem('nowatransparentMode', true);
497localStorage.removeItem('nowalightMode');
498localStorage.removeItem('nowadarkMode');
499}
500
501// to check the value is hexa or not
502const isValidHex = (hexValue) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hexValue)
503
504const getChunksFromString = (st, chunkSize) => st.match(new RegExp(`.{${chunkSize}}`, "g"))
505// convert hex value to 256
506const convertHexUnitTo256 = (hexStr) => parseInt(hexStr.repeat(2 / hexStr.length), 16)
507// get alpha value is equla to 1 if there was no value is asigned to alpha in function

508const getAlphafloat = (a, alpha) => {
509    if (typeof a !== "undefined") { return a / 255 }
510    if ((typeof alpha != "number") || alpha < 0 || alpha > 1) {
511        return 1
512    }
513    return alpha
514}
515// convertion of hex code to rgba code 
516function hexToRgba(hexValue, alpha) {
517'use strict'
518if (!isValidHex(hexValue)) { return null }
519const chunkSize = Math.floor((hexValue.length - 1) / 3)
520const hexArr = getChunksFromString(hexValue.slice(1), chunkSize)
521const [r, g, b, a] = hexArr.map(convertHexUnitTo256)
522return `rgba(${r}, ${g}, ${b}, ${getAlphafloat(a, alpha)})`
523}
524
525
526let myVarVal, myVarVal1, myVarVal2, myVarVal3
527
528function names() {
529
530'use strict'
531let primaryColorVal = getComputedStyle(document.documentElement).getPropertyValue('--primary-bg-color').trim();
532
533//get variable
534myVarVal = localStorage.getItem("nowaprimaryColor") || localStorage.getItem("nowadarkPrimary") || localStorage.getItem("nowatransparentPrimary") || localStorage.getItem("nowatransparentBgImgPrimary")  || primaryColorVal;
535
536if(document.querySelector('#statistics1') !== null){
537    statistics1();
538}
539
540if(document.querySelector('#Viewers') !== null){
541    viewers();
542}
543
544if(document.querySelector('.chart-circle') !== null){
545    chartCircle();
546}    
547
548if(document.querySelector('#statistics2') !== null){
549    statistics2();
550}
551
552if(document.querySelector('#budget') !== null){
553    budget();
554}
555
556if(document.querySelector('#Viewers1') !== null){
557    viewers1();
558}   
559
560if(document.querySelector('#statistics3') !== null){
561    statistics3();
562}
563
564if(document.querySelector('#Viewers2') !== null){
565    viewers2();
566}
567
568let colorData = hexToRgba(myVarVal || primaryColorVal, 0.1)
569html.style.setProperty('--primary01', colorData);
570
571let colorData1 = hexToRgba(myVarVal || primaryColorVal, 0.2)
572html.style.setProperty('--primary02', colorData1);
573
574let colorData2 = hexToRgba(myVarVal || primaryColorVal, 0.3)
575html.style.setProperty('--primary03', colorData2);
576
577let colorData3 = hexToRgba(myVarVal || primaryColorVal, 0.6)
578html.style.setProperty('--primary06', colorData3);
579
580let colorData4 = hexToRgba(myVarVal || primaryColorVal, 0.9)
581html.style.setProperty('--primary09', colorData4);
582
583let colorData5 = hexToRgba(myVarVal || primaryColorVal, 0.5)
584html.style.setProperty('--primary05', colorData5);
585
586}
587names()
588