From b2fcb8d104a97d54c30ef621845e811616e2ec8f Mon Sep 17 00:00:00 2001
From: Aya Moosa <ayamoosa1@gmail.com>
Date: Mon, 8 Apr 2024 15:59:12 -0700
Subject: [PATCH] started light text for color

---
 src/UI/Settings/UIWindowSettings.js | 8 ++++++++
 src/UI/UIWindowThemeDialog.js       | 8 ++++++++
 src/css/style.css                   | 4 ++++
 src/services/ThemeService.js        | 7 +++++--
 4 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/UI/Settings/UIWindowSettings.js b/src/UI/Settings/UIWindowSettings.js
index 6a8560d43..2dc15fa1c 100644
--- a/src/UI/Settings/UIWindowSettings.js
+++ b/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
diff --git a/src/UI/UIWindowThemeDialog.js b/src/UI/UIWindowThemeDialog.js
index 6ebcf3d95..c000ad276 100644
--- a/src/UI/UIWindowThemeDialog.js
+++ b/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') })
diff --git a/src/css/style.css b/src/css/style.css
index b1b349ea9..2ba68e74e 100644
--- a/src/css/style.css
+++ b/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 {
diff --git a/src/services/ThemeService.js b/src/services/ThemeService.js
index afd6c8414..e962a9d18 100644
--- a/src/services/ThemeService.js
+++ b/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_ ) {