started light text for color

src/UI/Settings/UIWindowSettings.js

@@ -123,6 +123,14 @@ async function UIWindowSettings(options){
                             h += `<button class="button change-ui-colors" style="float:right;">${i18n('change_ui_colors')}</button>`;
                         h += `</div>`;
                     h += `</div>`;
+                    // h += `<div style="display: flex;align-items: center">`
+                    // h += `<span>${i18n('mode')}:</span>`
+                    //     h += `<select class="change-light-mode" style="margin-left: 10px;flex: 1">`
+                    //         h += `<option value="system">${i18n('system')}</option>`
+                    //         h += `<option value="light">${i18n('light')}</option>`
+                    //         h += `<option value="dark">${i18n('dark')}</option>`
+                    //     h += `</select>`
+                    // h += `</div>`
                 h += `</div>`;
 
                 // Language

src/UI/UIWindowThemeDialog.js

@@ -42,6 +42,7 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () {
                 var(--primary-lightness),
                 var(--primary-alpha))`,
             'backdrop-filter': 'blur(3px)',
+            'color ': `var(--primary-color)`
         }
     });
     const w_body = w.querySelector('.window-body');
@@ -76,6 +77,7 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () {
         el.defaultValue = initial ?? min;
         el.step = step ?? 1;
         el.classList.add('theme-dialog-slider');
+        
 
         return {
             appendTo (parent) {
@@ -96,7 +98,13 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () {
 
     const slider_ch = (e) => {
         state[e.meta.name] = e.target.value;
+        if (e.meta.name === 'lig' && e.target.value < 50) {
+            state.light_text = true;
+        } else {
+            state.light_text = false;      
+        }
         svc_theme.apply(state);
+        console.log(state);
     };
 
     Button({ label: i18n('reset_colors') })

src/css/style.css

@@ -27,21 +27,25 @@
     --primary-saturation: 41.18%;
     --primary-lightness: 93.33%;
     --primary-alpha: 0.8;
+    --primary-color: #373e44;
 
     --window-head-hue: var(--primary-hue);
     --window-head-saturation: var(--primary-saturation);
     --window-head-lightness: var(--primary-lightness);
     --window-head-alpha: var(--primary-alpha);
+    --window-head-color: var(--primary-color);
 
     --window-sidebar-hue: var(--primary-hue);
     --window-sidebar-saturation: var(--primary-saturation);
     --window-sidebar-lightness: var(--primary-lightness);
     --window-sidebar-alpha: calc(min(1, 0.11 + var(--primary-alpha)));
+    --window-sidebar-color: var(--primary-color);
 
     --taskbar-hue: var(--primary-hue);
     --taskbar-saturation: var(--primary-saturation);
     --taskbar-lightness: var(--primary-lightness);
     --taskbar-alpha: calc(0.73 * var(--primary-alpha));
+    --taskbar-color: var(--primary-color);
 }
 
 html, body {

src/services/ThemeService.js

@@ -28,6 +28,7 @@ const default_values = {
     hue: 210,
     lig: 93.33,
     alpha: 0.8,
+    light_text: false,
 };
 
 export class ThemeService extends Service {
@@ -37,6 +38,7 @@ export class ThemeService extends Service {
             hue: 210,
             lig: 93.33,
             alpha: 0.8,
+            light_text: false,
         };
         this.root = document.querySelector(':root');
         // this.ss = new CSSStyleSheet();
@@ -100,7 +102,7 @@ export class ThemeService extends Service {
 
     get (key) { return this.state[key]; }
 
-    reload_ () {
+    reload_() {
         // debugger;
         const s = this.state;
         // this.ss.replace(`
@@ -113,7 +115,8 @@ export class ThemeService extends Service {
         this.root.style.setProperty('--primary-saturation', s.sat + '%');
         this.root.style.setProperty('--primary-lightness', s.lig + '%');
         this.root.style.setProperty('--primary-alpha', s.alpha);
-    }
+        this.root.style.setProperty('--primary-color', s.light_text ? 'white' : '#373e44');
+    }   
 
     save_ () {
         if ( this.save_cooldown_ ) {