Merge pull request #273 from Hiya-its-Aya/dark-mode

White text for themes

src/UI/UIWindowThemeDialog.js

@@ -42,6 +42,7 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () {
                 var(--primary-lightness),
                 var(--primary-alpha))`,
             'backdrop-filter': 'blur(3px)',
+            
         }
     });
     const w_body = w.querySelector('.window-body');
@@ -67,6 +68,7 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () {
         const wrap = document.createElement('div');
         const label_el = document.createElement('label');
         label_el.textContent = label;
+        label_el.style = "color:var(--primary-color)";
         wrap.appendChild(label_el);
         const el = document.createElement('input');
         wrap.appendChild(el);
@@ -76,6 +78,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 +99,11 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog () {
 
     const slider_ch = (e) => {
         state[e.meta.name] = e.target.value;
+        if (e.meta.name === 'lig') {
+            state.light_text = e.target.value < 60 ? true : 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 {
@@ -861,6 +865,7 @@ span.header-sort-icon img {
     flex-flow: row;
     padding-left: 5px;
     margin-bottom: -1px;
+    
 }
 
 .device-phone .window-head {
@@ -884,15 +889,17 @@ span.header-sort-icon img {
     float: left;
     line-height: 30px;
     font-size: 14px;
-    color: #666d74;
+    /* color: #666d74; */
     margin-left: 10px;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    color: var(--window-head-color);
 }
 
 .window-active .window-head-title {
-    color: #373e44;
+    /* color: #373e44; */
+    color: var(--window-head-color)
 }
 
 .window-head-icon {

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 {
@@ -41,6 +42,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();
@@ -104,7 +106,7 @@ export class ThemeService extends Service {
 
     get (key) { return this.state[key]; }
 
-    reload_ () {
+    reload_() {
         // debugger;
         const s = this.state;
         // this.ss.replace(`
@@ -117,6 +119,7 @@ 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');
 
         // TODO: Should we debounce this to reduce traffic?
         this.#broadcastService.sendBroadcast('themeChanged', {
@@ -125,9 +128,10 @@ export class ThemeService extends Service {
                 primarySaturation: s.sat + '%',
                 primaryLightness: s.lig + '%',
                 primaryAlpha: s.alpha,
+                primaryColor: s.light_text ? 'white' : '#373e44',
             },
         }, { sendToNewAppInstances: true });
-    }
+    }   
 
     save_ () {
         if ( this.save_cooldown_ ) {
@@ -141,7 +145,7 @@ export class ThemeService extends Service {
         puter.fs.write(PUTER_THEME_DATA_FILENAME, JSON.stringify(
             { colors: this.state },
             undefined,
-            4,
+            5,
         ));
     }
 }