Add ui colors to settings window

src/UI/Settings/UIWindowSettings.js

@@ -25,6 +25,7 @@ import UIWindowChangeUsername from '../UIWindowChangeUsername.js'
 import changeLanguage from "../../i18n/i18nChangeLanguage.js"
 import UIWindowConfirmUserDeletion from './UIWindowConfirmUserDeletion.js';
 import UITabAbout from './UITabAbout.js';
+import UIWindowThemeDialog from '../UIWindowThemeDialog.js';
 
 async function UIWindowSettings(options){
     return new Promise(async (resolve) => {
@@ -39,6 +40,7 @@ async function UIWindowSettings(options){
                 h += `<div class="settings-sidebar-item disable-user-select active" data-settings="about" style="background-image: url(${icons['logo-outline.svg']});">${i18n('about')}</div>`;
                 h += `<div class="settings-sidebar-item disable-user-select" data-settings="usage" style="background-image: url(${icons['speedometer-outline.svg']});">${i18n('usage')}</div>`;
                 h += `<div class="settings-sidebar-item disable-user-select" data-settings="account" style="background-image: url(${icons['user.svg']});">${i18n('account')}</div>`;
+                h += `<div class="settings-sidebar-item disable-user-select" data-settings="personalization" style="background-image: url(${icons['palette-outline.svg']});">${i18n('personalization')}</div>`;
                 h += `<div class="settings-sidebar-item disable-user-select" data-settings="language" style="background-image: url(${icons['language.svg']});">${i18n('language')}</div>`;
                 h += `<div class="settings-sidebar-item disable-user-select" data-settings="clock" style="background-image: url(${icons['clock.svg']});">${i18n('clock')}</div>`;
             h += `</div>`;
@@ -111,6 +113,18 @@ async function UIWindowSettings(options){
 
                 h += `</div>`;
 
+                // Personalization
+                h += `<div class="settings-content" data-settings="personalization">`;
+                    h += `<h1>${i18n('personalization')}</h1>`;
+                    // change password button
+                    h += `<div class="settings-card">`;
+                        h += `<strong>${i18n('ui_colors')}</strong>`;
+                        h += `<div style="flex-grow:1;">`;
+                            h += `<button class="button change-ui-colors" style="float:right;">${i18n('change_ui_colors')}</button>`;
+                        h += `</div>`;
+                    h += `</div>`;
+                h += `</div>`;
+
                 // Language
                 h += `<div class="settings-content" data-settings="language">`;
                     h += `<h1>${i18n('language')}</h1>`;
@@ -306,6 +320,10 @@ async function UIWindowSettings(options){
             UIWindowChangeUsername();
         })
 
+        $(el_window).find('.change-ui-colors').on('click', function (e) {
+            UIWindowThemeDialog();
+        })
+
         $(el_window).on('click', '.settings-sidebar-item', function(){
             const $this = $(this);
             const settings = $this.attr('data-settings');

src/css/style.css

@@ -24,8 +24,8 @@
 
 :root {
     --primary-hue: 231;
-    --primary-saturation: 100%;
-    --primary-lightness: 50%;
+    --primary-saturation: 50%;
+    --primary-lightness: 90%;
     --primary-alpha: 0.7;
 
     --window-head-hue: var(--primary-hue);

src/initgui.js

@@ -54,10 +54,6 @@ const launch_services = async function () {
     for (const [_, instance] of services_l_) {
         await instance._init();
     }
-
-    setTimeout(() => {
-        UIWindowThemeDialog();
-    }, 1000);
 };
 
 window.initgui = async function(){