app settings > TabAppearance: Background color does not show correctly

d2phap · Jan 20, 2024 · 67c4bc0 · 67c4bc0
1 parent 597ac81
commit 67c4bc0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/Source/Components/ImageGlass.Settings/WebUI/src/FrmSettings/TabAppearance.ts b/Source/Components/ImageGlass.Settings/WebUI/src/FrmSettings/TabAppearance.ts
@@ -3,6 +3,13 @@ import { getChangedSettingsFromTab } from '@/helpers';
 import Language from '../common/Language';
 
 export default class TabAppearance {
+  /**
+   * Gets current selected theme.
+   */
+  static get currentTheme() {
+    return _pageSettings.themeList.find(i => i.FolderName === _page.theme);
+  }
+
   /**
    * Loads settings for tab Appearance.
    */
@@ -187,10 +194,9 @@ export default class TabAppearance {
    * Resets the background color to the current theme's background color.
    */
   private static resetBackgroundColor() {
-    const theme = _pageSettings.themeList.find(i => i.FolderName === _page.theme);
-    if (!theme) return;
+    if (!TabAppearance.currentTheme) return;
 
-    const colorHex = theme.BgColor || '#00000000';
+    const colorHex = TabAppearance.currentTheme.BgColor || '#00000000';
 
     query<HTMLInputElement>('[name="BackgroundColor"]').value = colorHex;
     TabAppearance.handleBackgroundColorChanged();
@@ -201,8 +207,10 @@ export default class TabAppearance {
    * Handles when `BackgroundColor` is changed.
    */
   private static handleBackgroundColorChanged() {
-    const colorHex = query<HTMLInputElement>('[name="BackgroundColor"]').value;
-    if (!colorHex) return;
+    let colorHex = query<HTMLInputElement>('[name="BackgroundColor"]').value;
+    if (!colorHex) {
+      colorHex = TabAppearance.currentTheme.BgColor;
+    }
 
     query<HTMLInputElement>('#Btn_BackgroundColor > .color-display').style.setProperty('--color-picker-value', colorHex);
     query('#Lbl_BackgroundColorValue').innerText = colorHex;

diff --git a/Source/Components/ImageGlass.Settings/WebUI/src/FrmSettings/TabToolbar.ts b/Source/Components/ImageGlass.Settings/WebUI/src/FrmSettings/TabToolbar.ts
@@ -7,6 +7,14 @@ export default class TabToolbar {
   static #toolbarEditor = query<ToolbarEditorHtmlElement>('#ToolbarEditor');
   static #toolbarBtnDialog = query<ToolbarButtonEditDialogHtmlElement>('[is="edit-toolbar-dialog"]');
 
+  /**
+   * Gets current selected theme.
+   */
+  static get currentTheme() {
+    return _pageSettings.themeList.find(i => i.FolderName === _page.theme);
+  }
+
+
   /**
    * Loads settings for tab Toolbar.
    */
@@ -52,9 +60,7 @@ export default class TabToolbar {
 
     const data = TabToolbar.#toolbarBtnDialog.getDialogData();
     const btn = JSON.parse(data.ButtonJson) as IToolbarButton;
-
-    const theme = _pageSettings.themeList.find(i => i.FolderName === _page.theme);
-    const themeBtnIconUrl = theme.ToolbarIcons[btn.Image];
+    const themeBtnIconUrl = TabToolbar.currentTheme.ToolbarIcons[btn.Image];
 
     // image is theme icon
     if (themeBtnIconUrl) {
@@ -75,9 +81,7 @@ export default class TabToolbar {
 
     const data = TabToolbar.#toolbarBtnDialog.getDialogData();
     const btn = JSON.parse(data.ButtonJson) as IToolbarButton;
-
-    const theme = _pageSettings.themeList.find(i => i.FolderName === _page.theme);
-    const themeBtnIconUrl = theme.ToolbarIcons[btn.Image];
+    const themeBtnIconUrl = TabToolbar.currentTheme.ToolbarIcons[btn.Image];
 
     // image is theme icon
     if (themeBtnIconUrl) {