From e3a77556e3a0d6e72111f6370211d27a32f26f76 Mon Sep 17 00:00:00 2001 From: Justin Maximillian Kimlim Date: Wed, 15 Dec 2021 19:53:18 +0700 Subject: [PATCH] refactor: new way to customize theme --- example/themes/shades of purple/package.json | 3 +- .../themes/shadesofpurple-color-theme.json | 190 ++--- example/themes/winter/package.json | 1 - .../winter/themes/winter-color-theme.json | 190 ++--- .../generators/app/index.js | 2 +- .../generators/app/templates/dark-theme.json | 170 ++--- .../generators/app/templates/light-theme.json | 170 ++--- .../generators/app/templates/package.json | 1 - src-tauri/src/extensions.rs | 7 - src/Components/ContextMenu/contextMenu.ts | 1 - src/Components/Files/File Preview/preview.ts | 1 - src/Components/Layout/infobar.ts | 2 - src/Components/Layout/layout.scss | 4 - src/Components/Layout/windowManager.ts | 2 - src/Components/Prompt/ask.ts | 2 - src/Components/Prompt/confirm.ts | 2 - src/Components/Prompt/error.ts | 2 - src/Components/Properties/properties.ts | 1 - .../Setting/Appearance/Appearance.ts | 8 +- src/Components/Setting/setting.scss | 2 - src/Components/Setting/setting.ts | 2 - src/Components/Theme/theme.json | 711 ++++++++++-------- src/Components/Theme/theme.ts | 295 ++------ 23 files changed, 827 insertions(+), 942 deletions(-) diff --git a/example/themes/shades of purple/package.json b/example/themes/shades of purple/package.json index a50c332c..dab1d3d4 100644 --- a/example/themes/shades of purple/package.json +++ b/example/themes/shades of purple/package.json @@ -6,7 +6,7 @@ "version": "0.1.0", "license": "MIT", "scripts": { - "start": "E:/xplorer/src-tauri/target/debug/app.exe --theme shadesofpurple", + "start": "xplorer --theme shadesofpurple", "build": "xplorer build-extension themes" }, "xplorerExtensionConfig": { @@ -14,7 +14,6 @@ { "identifier": "shadesofpurple", "name": "Shades of Purple", - "category": "dark", "path": "./themes/shadesofpurple-color-theme.json" } ] diff --git a/example/themes/shades of purple/themes/shadesofpurple-color-theme.json b/example/themes/shades of purple/themes/shadesofpurple-color-theme.json index da814146..efe3b47c 100644 --- a/example/themes/shades of purple/themes/shadesofpurple-color-theme.json +++ b/example/themes/shades of purple/themes/shadesofpurple-color-theme.json @@ -1,99 +1,99 @@ { - "themeCategory": "dark", - "textColor": "#87c1ce", - "fontSize": "16px", - "fontFamily": "system-ui", - "scrollbarTrackBackground": "rgb(128, 128, 128)", - "scrollbarThumbBackground": "rgb(77, 77, 77)", - "scrollbarThumbHoverBackground": "rgb(59, 59, 59)", - - "sidebarBackground": "#222244", - "mainBackground": "#2d2b55", - "topbarBackground": "#222244", - - "minimizeBackground": "#fbd914", - "minimizeColor": "#14141b", - "maximizeBackground": "#00ca4e", - "maximizeColor": "#14141b", - "exitBackground": "#ff4743", - "exitColor": "#14141b", - - "loadingBar": "#1b1e2e", - "loader": "#87c1ce", - - "tabBackground": "#7448af", - "tabColor": "#87c1ce", - "newTabBackground": "#7448af", - "newTabColor": "#87c1ce", - "navigatorBackground": "transparent", - "navigatorColor": "#87c1ce", - "pathNavigatorBackground": "#7448af", - "pathNavigatorColor": "#87c1ce", - - "searchBarBackground": "#7448af", - "searchBarColor": "#87c1ce", - - "settingsSidebarBackground": "#222244", - "settingsMainBackground": "#2d2b55", - "settingButtonBackground": "inherit", - "settingButtonColor": "#98aec1", - "settingsActiveTab": "#7448af", - - "tabsScrollbarTrack": "rgb(128, 128, 128)", - "tabsScrollbarThumb": "rgb(77, 77, 77)", - "tabsScrollbarThumbHover": "rgb(59, 59, 59)", - - "favoriteBackground": "transparent", - "favoriteColor": "#87c1ce", - "pendriveBackground": "transparent", - "pendriveColor": "#87c1ce", - "pendriveTotalCapacityBackground": "#eee", - "pendriveUsedCapacityBackground": "#8989e2", - - "gridBackground": "transparent", - "gridColor": "#87c1ce", - "selectedGridBorder": "2px solid #636b9f", - "selectedGridBackground": "#636b9f", - "selectedGridColor": "inherit", - - "gridHoverEffectBackground": "rgba(140, 162, 210 , 0.4),rgba(170, 160, 230 , 0.7)", - "cardHoverEffectBackground": "rgba(140, 162, 210 , 0.7),rgba(170, 160, 230 , 0.7)", - "sidebarHoverEffectBackground": "rgba(140, 162, 210, 0.2),rgba(170, 160, 230 , 0.7)", - "tabHoverEffectBackground": "rgba(140, 162, 210, 0.2),rgba(170, 160, 230 , 0.7)", - - "contextMenuBackground": "#1b1e2e", - "contextMenuColor": "inherit", - "contextMenuSubmenuBackground": "#1b1e2e", - "contextMenuSubmenuColor": "inherit", - - "previewFileBackground": "#7448af", - "previewFileColor": "inherit", - "previewExitButtonBackground": "#706cd8", - "previewExitButtonColor": "#202124", - "previewObjectBackground": "#222244", - "previewObjectColor": "inherit", - "previewObjectTableBorder": "1px solid #ddd", - "previewObjectTableRowEvenBackground": "#283d6b", - "previewObjectTableRowEvenColor": "inherit", - "previewObjectTableRowOddBackground": "inherit", - "previewObjectTableRowOddColor": "inherit", - - "propertiesBackground": "#5f5bbf", - "promptBackground": "#2d2b55", - "promptInputBackground": "rgba(170, 160, 230 , 0.7)", - "promptInputColor": "#87c1ce", - "promptOkBackground": "#3879d9", - "promptOkColor": "#fff", - "promptCancelBackground": "#87c1ce", - "promptCancelColor": "#000", - - "infobarBackground": "#222244", - "infobarColor": "inherit", - - "settingsNumberCtrlInputBackground": "rgb(135, 193, 206)", - "settingsNumberCtrlControllerBackground": "#4e8895", - "settingsNumberCtrlInputColor": "#000", - "settingsNumberCtrlControllerColor": "#122430", + "root.color": "#87c1ce", + "root.--scrollbarTrack": "rgb(128, 128, 128)", + "root.--scrollbarThumb": "rgb(77, 77, 77)", + "root.--scrollbarThumbHover": "rgb(59, 59, 59)", + "root.sidebar.background": "rgba(34,34,68, var(--sidebar-transparency))", + "root.mainBox.background": "rgba(45,43,85, var(--workspace-transparency))", + "root.topbar.background": "rgba(34,34,68, var(--topbar-transparency))", + "root.infobar.background": "rgba(34,34,68, var(--workspace-transparency))", + "root.loadingBar.background": "#1b1e2e", + "root.loader.background": "#87c1ce", + "root.sidebarSettingButton.background": "inherit", + "root.sidebarSettingButton.color": "#98aec1", + + "windowmanager#minimize.background": "#fbd914", + "windowmanager#minimize.color": "#14141b", + "windowmanager#maximize.background": "#00ca4e", + "windowmanager#maximize.color": "#14141b", + "windowmanager#exit.background": "#ff4743", + "windowmanager#exit.color": "#14141b", + "windowmanager#go-back.background": "transparent", + "windowmanager#go-forward.background": "transparent", + "windowmanager#go-parent-dir.background": "transparent", + "windowmanager#refresh.background": "transparent", + "windowmanager#go-back.color": "#4fe0be", + "windowmanager#go-forward.color": "#4fe0be", + "windowmanager#go-parent-dir.color": "#4fe0be", + "windowmanager#refresh.color": "#4fe0be", + "windowmanager.pathNavigator.background": "#7448af", + "windowmanager.pathNavigator.color": "#87c1ce", + "windowmanager.searchBar.background": "#7448af", + "windowmanager.searchBar.color": "#87c1ce", + + "tabs.tab.background": "#7448af", + "tabs.tab.color": "#87c1ce", + "tabs.createNewTab.background": "#7448af", + "tabs.createNewTab.color": "#87c1ce", + "tabs.tabsManager.--tabsScrollbarTrack": "rgb(139, 164, 248)", + "tabs.tabsManager.--tabsScrollbarThumb": "rgb(116, 118, 231)", + "tabs.tabsManager.--tabsScrollbarThumbHover": "rgb(103, 105, 238)", + + "animation.grid": "rgba(140, 162, 210 , 0.4),rgba(170, 160, 230 , 0.7)", + "animation.sidebar": "rgba(140, 162, 210 , 0.7),rgba(170, 160, 230 , 0.7)", + "animation.tab": "rgba(140, 162, 210, 0.2),rgba(170, 160, 230 , 0.7)", + "animation.card": "rgba(140, 162, 210, 0.2),rgba(170, 160, 230 , 0.7)", + + "settings.settingsSidebar.background": "rgba(34,34,68, var(--sidebar-transparency))", + "settings.settingsMain.background": "rgba(45,43,85, var(--workspace-transparency))", + "settings.active.background": "#7448af", + "settings.numberCtrlInput.background": "rgb(135, 193, 206)", + "settings.numberCtrlInput.color": "#000", + "settings.numberCtrlPlus.background": "#4e8895", + "settings.numberCtrlPlus.color": "#122430", + "settings.numberCtrlMinus.background": "#4e8895", + "settings.numberCtrlMinus.color": "#122430", + + "contextmenu.background": "#222244", + "contextmenu.Color": "inherit", + "contextmenu.contextmenuSubmenu.background": "#222244", + "contextmenu.contextmenuSubmenu.color": "inherit", + + "favorites.favorite.background": "transparent", + "favorites.favorite.color": "#4fe0be", + "favorites.pendrive.background": "#transparent", + "favorites.pendrive.color": "#4fe0be", + "favorites.pendriveTotalCapacity.background": "#eee", + "favorites.pendriveUsedCapacity.background": "#8989e2", + "grid.fileGrid.background": "transparent", + "grid.fileGrid.color": "inherit", + "grid.--selectedGridBorder": "none", + "grid.--selectedGridBackground": "#7448af", + "grid.--selectedGridColor": "#87c1ce", + + "preview.background": "#7448af", + "preview.color": "inherit", + "preview.previewExitBtn.background": "#706cd8", + "preview.previewExitBtn.color": "#202124", + "preview.previewObject.background": "#222244", + "preview.previewObject.color": "#4fe0be", + "preview.previewObject.--previewObjectTableBorder": "1px solid #ddd", + "preview.previewObject.--previewObjectTableRowEvenBackground": "#a2b7ff", + "preview.previewObject.--previewObjectTableRowEvenColor": "#1a1b26", + "preview.previewObject.--previewObjectTableRowOddBackground": "inherit", + "preview.previewObject.--previewObjectTableRowOddColor": "#a2b7ff", + + "properties.background": "#5f5bbf", + "properties.color": "inherit", + + "prompt.background": "#2d2b55", + "prompt.promptInput.background": "rgba(170, 160, 230 , 0.7)", + "prompt.promptInput.color": "#87c1ce", + "prompt.promptOk.background": "#3879d9", + "prompt.promptOk.color": "#fff", + "prompt.promptCancel.background": "#87c1ce", + "prompt.promptCancel.color": "#000", + "prompt.promptExitBtn.background": "#ff47f3", "hljs.color": "#cbd6e2", "hljs.background": "#0b1c2c", diff --git a/example/themes/winter/package.json b/example/themes/winter/package.json index 84f56b1f..4e167f56 100644 --- a/example/themes/winter/package.json +++ b/example/themes/winter/package.json @@ -14,7 +14,6 @@ { "identifier": "winter", "name": "Winter", - "category": "light", "path": "./themes/winter-color-theme.json" } ] diff --git a/example/themes/winter/themes/winter-color-theme.json b/example/themes/winter/themes/winter-color-theme.json index bffc7dff..14b74dcb 100644 --- a/example/themes/winter/themes/winter-color-theme.json +++ b/example/themes/winter/themes/winter-color-theme.json @@ -1,99 +1,99 @@ { - "themeCategory": "light", - "textColor": "#202124", - "fontSize": "16px", - "fontFamily": "system-ui", - "scrollbarTrackBackground": "rgb(229, 229, 233)", - "scrollbarThumbBackground": "rgb(195, 195, 201)", - "scrollbarThumbHoverBackground": "rgb(187, 187, 187)", - - "sidebarBackground": "#d2e7ec", - "mainBackground": "#def0f2", - "topbarBackground": "#d2e7ec", - - "minimizeBackground": "#e4ca34", - "minimizeColor": "#14141b", - "maximizeBackground": "#00ca4e", - "maximizeColor": "#14141b", - "exitBackground": "#ff4743", - "exitColor": "#14141b", - - "loadingBar": "#eeeeee", - "loader": "#8c9a97", - - "tabBackground": "#e8f1f4", - "tabColor": "#202124", - "newTabBackground": "#e8f1f4", - "newTabColor": "#202124", - "navigatorBackground": "transparent", - "navigatorColor": "#202124", - "pathNavigatorBackground": "#e8f1f4", - "pathNavigatorColor": "#202124", - - "searchBarBackground": "#e8f1f4", - "searchBarColor": "#000", - - "settingsSidebarBackground": "#d2e7ec", - "settingsMainBackground": "#def0f2", - "settingButtonBackground": "inherit", - "settingButtonColor": "inherit", - "settingsActiveTab": "#e8f1f4", - - "tabsScrollbarTrack": "rgb(229, 229, 233)", - "tabsScrollbarThumb": "rgb(195, 195, 201)", - "tabsScrollbarThumbHover": "rgb(187, 187, 187)", - - "favoriteBackground": "transparent", - "favoriteColor": "#202124", - "pendriveBackground": "transparent", - "pendriveColor": "#202124", - "pendriveTotalCapacityBackground": "#eee", - "pendriveUsedCapacityBackground": "#8989e2", - - "gridBackground": "transparent", - "gridColor": "#202124", - "selectedGridBorder": "2px solid #97bfe2", - "selectedGridBackground": "#c3dee6", - "selectedGridColor": "#202124", - - "gridHoverEffectBackground": "rgba(210, 231,236,255),#f5f4f4", - "cardHoverEffectBackground": "rgba(210, 231,236,255),#eaf0f2", - "sidebarHoverEffectBackground": "rgba(210, 231,236,255),#eaf0f2", - "tabHoverEffectBackground": "rgba(210, 231,236,255),#eaf0f2", - - "contextMenuBackground": "#d2e7ec", - "contextMenuColor": "inherit", - "contextMenuSubmenuBackground": "#d2e7ec", - "contextMenuSubmenuColor": "inherit", - - "previewFileBackground": "#e8f1f4", - "previewFileColor": "#202124", - "previewExitButtonBackground": "#dedede", - "previewExitButtonColor": "#202124", - "previewObjectBackground": "#d2e7ec", - "previewObjectColor": "inherit", - "previewObjectTableBorder": "1px solid #ddd", - "previewObjectTableRowEvenBackground": "#ddd", - "previewObjectTableRowEvenColor": "inherit", - "previewObjectTableRowOddBackground": "inherit", - "previewObjectTableRowOddColor": "inherit", - - "propertiesBackground": "#d2e7ec", - "promptBackground": "#d2e7ec", - "promptInputBackground": "#ebe9e9", - "promptInputColor": "#87c1ce", - "promptOkBackground": "#3879d9", - "promptOkColor": "#fff", - "promptCancelBackground": "#87c1ce", - "promptCancelColor": "#000", - - "infobarBackground": "#d2e7ec", - "infobarColor": "inherit", - - "settingsNumberCtrlInputBackground": "#e1e1e1", - "settingsNumberCtrlControllerBackground": "#f1f1f1", - "settingsNumberCtrlInputColor": "#000", - "settingsNumberCtrlControllerColor": "#000", + "root.color": "#202124", + "root.--scrollbarTrack": "rgb(229, 229, 233)", + "root.--scrollbarThumb": "rgb(195, 195, 201)", + "root.--scrollbarThumbHover": "rgb(187, 187, 187)", + "root.sidebar.background": "rgba(210, 231, 236, var(--sidebar-transparency))", + "root.mainBox.background": "rgba(222, 240, 242, var(--workspace-transparency))", + "root.topbar.background": "rgba(210, 231, 236, var(--topbar-transparency))", + "root.infobar.background": "rgba(210, 231, 236, var(--workspace-transparency))", + "root.loadingBar.background": "#eee", + "root.loader.background": "#6d94a2", + "root.sidebarSettingButton.background": "inherit", + "root.sidebarSettingButton.color": "inherit", + + "windowmanager#minimize.background": "#e4ca34", + "windowmanager#minimize.color": "#14141b", + "windowmanager#maximize.background": "#00ca4e", + "windowmanager#maximize.color": "#14141b", + "windowmanager#exit.background": "#ff4743", + "windowmanager#exit.color": "#14141b", + "windowmanager#go-back.background": "transparent", + "windowmanager#go-forward.background": "transparent", + "windowmanager#go-parent-dir.background": "transparent", + "windowmanager#refresh.background": "transparent", + "windowmanager#go-back.color": "#202124", + "windowmanager#go-forward.color": "#202124", + "windowmanager#go-parent-dir.color": "#202124", + "windowmanager#refresh.color": "#202124", + "windowmanager.pathNavigator.background": "#e8f1f4", + "windowmanager.pathNavigator.color": "#202124", + "windowmanager.searchBar.background": "#e8f1f4", + "windowmanager.searchBar.color": "inherit", + + "tabs.tab.background": "#e8f1f4", + "tabs.tab.color": "#202124 ", + "tabs.createNewTab.background": "#e8f1f4", + "tabs.createNewTab.color": "#202124", + "tabs.tabsManager.--tabsScrollbarTrack": "rgb(185, 185, 185)", + "tabs.tabsManager.--tabsScrollbarThumb": "rgb(163, 163, 163)", + "tabs.tabsManager.--tabsScrollbarThumbHover": "#888", + + "animation.grid": "rgba(210, 231,236,255),#f5f4f4", + "animation.card": "rgba(210, 231,236,255),#eaf0f2", + "animation.sidebar": "rgba(210, 231,236,255),#eaf0f2", + "animation.tab": "rgba(210, 231,236,255),#eaf0f2", + + "settings.settingsSidebar.background": "rgba(210, 231, 236, var(--sidebar-transparency))", + "settings.settingsMain.background": "rgba(222, 240, 242, var(--workspace-transparency))", + "settings.active.background": "rgb(220, 220, 220)", + "settings.numberCtrlInput.background": "#ebeaea", + "settinns.numberCtrlInput.color": "#000", + "settings.numberCtrlPlus.background": "#e1e1e1", + "settings.numberCtrlPlus.color": "#000", + "settings.numberCtrlMinus.background": "#e1e1e1", + "settings.numberCtrlMinus.color": "#000", + + "contextmenu.background": "#d2e7ec", + "contextmenu.Color": "inherit", + "contextmenu.contextmenuSubmenu.background": "#cbccd1", + "contextmenu.contextmenuSubmenu.color": "inherit", + + "favorites.favorite.background": "transparent", + "favorites.favorite.color": "#202124", + "favorites.pendrive.background": "transparent", + "favorites.pendrive.color": "#202124", + "favorites.pendriveTotalCapacity.background": "#eee", + "favorites.pendriveUsedCapacity.background": "#8989e2", + "grid.fileGrid.background": "transparent", + "grid.fileGrid.color": "#202124", + "grid.--selectedGridBorder": "2px #97bfe2", + "grid.--selectedGridBackground": "#c3dee6", + "grid.--selectedGridColor": "#202124", + + "preview.background": "#d0d3dd", + "preview.color": "#202124", + "preview.previewExitBtn.background": "rgb(226, 227, 232)", + "preview.previewExitBtn.color": "#202124", + "preview.previewObject.background": "#d0d3dd", + "preview.previewObject.color": "inherit", + "preview.previewObject.--previewObjectTableBorder": "1px solid #ddd", + "preview.previewObject.--previewObjectTableRowEvenBackground": "#ddd", + "preview.previewObject.--previewObjectTableRowEvenColor": "inherit", + "preview.previewObject.--previewObjectTableRowOddBackground": "inherit", + "preview.previewObject.--previewObjectTableRowOddColor": "inherit", + + "properties.background": "#d2e7ec", + "properties.color": "inherit", + + "prompt.background": "#f7f7f7", + "prompt.promptInput.background": "#ebe9e9", + "prompt.promptInput.color": "#87c1ce", + "prompt.promptOk.background": "#3879d9", + "prompt.promptOk.color": "#fff", + "prompt.promptCancel.background": "#87c1ce", + "prompt.promptCancel.color": "#000", + "prompt.promptExitBtn.background": "#ff47f3", "hljs.color": "#383838", "hljs.background": "#f8f8f8", diff --git a/packages/generator-xplorer-extensions/generators/app/index.js b/packages/generator-xplorer-extensions/generators/app/index.js index b96408ab..0378197d 100644 --- a/packages/generator-xplorer-extensions/generators/app/index.js +++ b/packages/generator-xplorer-extensions/generators/app/index.js @@ -56,7 +56,7 @@ module.exports = class extends Generator { { type: 'list', name: 'themeCategory', - message: 'Select a theme category', + message: 'Select a starter theme', choices: [ { name: 'light', value: 'light' }, { name: 'dark', value: 'dark' }, diff --git a/packages/generator-xplorer-extensions/generators/app/templates/dark-theme.json b/packages/generator-xplorer-extensions/generators/app/templates/dark-theme.json index e2cfa8ab..bf60cd71 100644 --- a/packages/generator-xplorer-extensions/generators/app/templates/dark-theme.json +++ b/packages/generator-xplorer-extensions/generators/app/templates/dark-theme.json @@ -1,97 +1,99 @@ { - "textColor": "#87c1ce", - "fontSize": "16px", - "fontFamily": "system-ui", - "scrollbarTrackBackground": "rgb(128, 128, 128)", - "scrollbarThumbBackground": "rgb(77, 77, 77)", - "scrollbarThumbHoverBackground": "rgb(59, 59, 59)", + "root.color": "#87c1ce", + "root.--scrollbarTrack": "rgb(128, 128, 128)", + "root.--scrollbarThumb": "rgb(77, 77, 77)", + "root.--scrollbarThumbHover": "rgb(59, 59, 59)", + "root.sidebar.background": "rgba(27, 30, 46, var(--sidebar-transparency))", + "root.mainBox.background": "rgba(14, 17, 31, var(--workspace-transparency))", + "root.topbar.background": "rgba(27, 30, 46, var(--topbar-transparency))", + "root.infobar.background": "rgba(36, 40, 59, var(--workspace-transparency))", + "root.loadingBar.background": "#1b1e2e", + "root.loader.background": "#87c1ce", + "root.sidebarSettingButton.background": "inherit", + "root.sidebarSettingButton.color": "#98aec1", - "sidebarBackground": "#1b1e2e", - "mainBackground": "#0e111f", - "topbarBackground": "#1b1e2e", + "windowmanager#minimize.background": "#fbd914", + "windowmanager#minimize.color": "#14141b", + "windowmanager#maximize.background": "#00ca4e", + "windowmanager#maximize.color": "#14141b", + "windowmanager#exit.background": "#ff4743", + "windowmanager#exit.color": "#14141b", + "windowmanager#go-back.background": "transparent", + "windowmanager#go-forward.background": "transparent", + "windowmanager#go-parent-dir.background": "transparent", + "windowmanager#refresh.background": "transparent", + "windowmanager#go-back.color": "#87c1ce", + "windowmanager#go-forward.color": "#87c1ce", + "windowmanager#go-parent-dir.color": "#87c1ce", + "windowmanager#refresh.color": "#87c1ce", + "windowmanager.pathNavigator.background": "#39496a", + "windowmanager.pathNavigator.color": "#87c1ce", + "windowmanager.searchBar.background": "#39496a", + "windowmanager.searchBar.color": "#87c1ce", - "minimizeBackground": "#fbd914", - "minimizeColor": "#14141b", - "maximizeBackground": "#00ca4e", - "maximizeColor": "#14141b", - "exitBackground": "#ff4743", - "exitColor": "#14141b", + "tabs.tab.background": "#39496a", + "tabs.tab.color": "#87c1ce", + "tabs.createNewTab.background": "#39496a", + "tabs.createNewTab.color": "#87c1ce", + "tabs.tabsManager.--tabsScrollbarTrack": "rgb(128, 128, 128)", + "tabs.tabsManager.--tabsScrollbarThumb": "rgb(77, 77, 77)", + "tabs.tabsManager.--tabsScrollbarThumbHover": "rgb(59, 59, 59)", - "loadingBar": "#1b1e2e", - "loader": "#87c1ce", + "animation.grid": "rgba(140, 162, 210 , 0.4),#24283b", + "animation.card": "rgba(140, 162, 210 , 0.7),rgba(140, 162, 210, 0.2)", + "animation.sidebar": "rgba(140, 162, 210, 0.2),rgba(27, 30, 46 , 0.7)", + "animation.tab": "rgba(140, 162, 210, 0.2),rgba(27, 30, 46 , 0.7)", - "tabBackground": "#39496a", - "tabColor": "#87c1ce", - "newTabBackground": "#39496a", - "newTabColor": "#87c1ce", - "navigatorBackground": "transparent", - "navigatorColor": "#87c1ce", - "pathNavigatorBackground": "#39496a", - "pathNavigatorColor": "#87c1ce", - "searchBarBackground": "#39496a", - "searchBarColor": "#87c1ce", + "settings.settingsSidebar.background": "rgba(27, 30, 46, var(--sidebar-transparency))", + "settings.settingsMain.background": "rgba(36, 40, 59, var(--workspace-transparency))", + "settings.active.background": "rgba(140, 162, 210 , 0.25)", + "settings.numberCtrlInput.background": "rgb(135, 193, 206)", + "settings.numberCtrlInput.color": "#000", + "settings.numberCtrlPlus.background": "#4e8895", + "settings.numberCtrlPlus.color": "#122430", + "settings.numberCtrlMinus.background": "#4e8895", + "settings.numberCtrlMinus.color": "#122430", - "settingsSidebarBackground": "#1b1e2e", - "settingsMainBackground": "#24283b", - "settingButtonBackground": "inherit", - "settingButtonColor": "#98aec1", - "settingsActiveTab": "rgba(140, 162, 210 , 0.25)", + "contextmenu.background": "#1b1e2e", + "contextmenu.Color": "inherit", + "contextmenu.contextmenuSubmenu.background": "#1b1e2e", + "contextmenu.contextmenuSubmenu.color": "inherit", - "tabsScrollbarTrack": "rgb(128, 128, 128)", - "tabsScrollbarThumb": "rgb(77, 77, 77)", - "tabsScrollbarThumbHover": "rgb(59, 59, 59)", + "favorites.favorite.background": "transparent", + "favorites.favorite.color": "#87c1ce", + "favorites.pendrive.background": "transparent", + "favorites.pendrive.color": "#87c1ce", + "favorites.pendriveTotalCapacity.background": "#eee", + "favorites.pendriveUsedCapacity.background": "#8989e2", + "grid.fileGrid.background": "transparent", + "grid.fileGrid.color": "#87c1ce", + "grid.--selectedGridBorder": "#1e88e5", + "grid.--selectedGridBackground": "#2893a0", + "grid.--selectedGridColor": "inherit", - "favoriteBackground": "transparent", - "favoriteColor": "#87c1ce", - "pendriveBackground": "transparent", - "pendriveColor": "#87c1ce", - "pendriveTotalCapacityBackground": "#eee", - "pendriveUsedCapacityBackground": "#8989e2", + "preview.background": "#39496a", + "preview.color": "inherit", + "preview.previewExitBtn.background": "#3e537d", + "preview.previewExitBtn.color": "#202124", + "preview.previewObject.background": "#24283b", + "preview.previewObject.color": "inherit", + "preview.previewObject.--previewObjectTableBorder": "1px solid #ddd", + "preview.previewObject.--previewObjectTableRowEvenBackground": "#283d6b", + "preview.previewObject.--previewObjectTableRowEvenColor": "inherit", + "preview.previewObject.--previewObjectTableRowOddBackground": "inherit", + "preview.previewObject.--previewObjectTableRowOddColor": "inherit", - "gridBackground": "transparent", - "gridColor": "#87c1ce", - "selectedGridBorder": "2px solid #1e88e5", - "selectedGridBackground": "#2893a0", - "selectedGridColor": "inherit", + "properties.background": "#39496a", + "properties.color": "inherit", - "gridHoverEffectBackground": "rgba(140, 162, 210 , 0.4),#24283b", - "cardHoverEffectBackground": "rgba(140, 162, 210 , 0.7),rgba(140, 162, 210, 0.2)", - "sidebarHoverEffectBackground": "rgba(140, 162, 210, 0.2),rgba(27, 30, 46 , 0.7)", - "tabHoverEffectBackground": "rgba(140, 162, 210, 0.2),rgba(27, 30, 46 , 0.7)", - - "contextMenuBackground": "#1b1e2e", - "contextMenuColor": "inherit", - "contextMenuSubmenuBackground": "#1b1e2e", - "contextMenuSubmenuColor": "inherit", - - "previewFileBackground": "#39496a", - "previewFileColor": "inherit", - "previewExitButtonBackground": "#3e537d", - "previewExitButtonColor": "#202124", - "previewObjectBackground": "#24283b", - "previewObjectColor": "inherit", - "previewObjectTableBorder": "1px solid #ddd", - "previewObjectTableRowEvenBackground": "#283d6b", - "previewObjectTableRowEvenColor": "inherit", - "previewObjectTableRowOddBackground": "inherit", - "previewObjectTableRowOddColor": "inherit", - - "propertiesBackground": "#39496a", - "promptBackground": "#1b1e2e", - "promptInputBackground": "#292c40", - "promptInputColor": "#87c1ce", - "promptOkBackground": "#3879d9", - "promptOkColor": "#fff", - "promptCancelBackground": "#87c1ce", - "promptCancelColor": "#000", - - "infobarBackground": "#1f2336", - "infobarColor": "inherit", - - "settingsNumberCtrlInputBackground": "rgb(135, 193, 206)", - "settingsNumberCtrlControllerBackground": "#4e8895", - "settingsNumberCtrlInputColor": "#000", - "settingsNumberCtrlControllerColor": "#122430", + "prompt.background": "#1b1e2e", + "prompt.promptInput.background": "#292c40", + "prompt.promptInput.color": "#87c1ce", + "prompt.promptOk.background": "#3879d9", + "prompt.promptOk.color": "#fff", + "prompt.promptCancel.background": "#87c1ce", + "prompt.promptCancel.color": "#000", + "prompt.promptExitBtn.background": "#ff47f3", "hljs.color": "#cbd6e2", "hljs.background": "#0b1c2c", diff --git a/packages/generator-xplorer-extensions/generators/app/templates/light-theme.json b/packages/generator-xplorer-extensions/generators/app/templates/light-theme.json index 9b4f0d0d..6c68a787 100644 --- a/packages/generator-xplorer-extensions/generators/app/templates/light-theme.json +++ b/packages/generator-xplorer-extensions/generators/app/templates/light-theme.json @@ -1,97 +1,99 @@ { - "textColor": "#202124", - "fontSize": "16px", - "fontFamily": "system-ui", - "scrollbarTrackBackground": "rgb(229, 229, 233)", - "scrollbarThumbBackground": "rgb(195, 195, 201)", - "scrollbarThumbHoverBackground": "rgb(187, 187, 187)", + "root.color": "#202124", + "root.--scrollbarTrack": "rgb(185, 185, 185)", + "root.--scrollbarThumb": "rgb(163, 163, 163)", + "root.--scrollbarThumbHover": "#888", + "root.sidebar.background": "rgba(213, 215, 225, var(--sidebar-transparency))", + "root.mainBox.background": "rgba(228, 228, 228, var(--workspace-transparency))", + "root.topbar.background": "rgba(208, 211, 221, var(--topbar-transparency))", + "root.infobar.background": "rgba(214, 215, 220, var(--workspace-transparency))", + "root.loadingBar.background": "#cbccd1", + "root.loader.background": "#6d94a2", + "root.sidebarSettingButton.background": "inherit", + "root.sidebarSettingButton.color": "inherit", - "sidebarBackground": "#FAFAFA", - "mainBackground": "#e4e4e4", - "topbarBackground": "#FAFAFA", + "windowmanager#minimize.background": "#e9cc21", + "windowmanager#minimize.color": "#14141b", + "windowmanager#maximize.background": "#00ca4e", + "windowmanager#maximize.color": "#14141b", + "windowmanager#exit.background": "#ff4743", + "windowmanager#exit.color": "#14141b", + "windowmanager#go-back.background": "transparent", + "windowmanager#go-forward.background": "transparent", + "windowmanager#go-parent-dir.background": "transparent", + "windowmanager#refresh.background": "transparent", + "windowmanager#go-back.color": "#202124", + "windowmanager#go-forward.color": "#202124", + "windowmanager#go-parent-dir.color": "#202124", + "windowmanager#refresh.color": "#202124", + "windowmanager.pathNavigator.background": "#e0e0e0", + "windowmanager.pathNavigator.color": "#202124", + "windowmanager.searchBar.background": "#e0e0e0", + "windowmanager.searchBar.color": "inherit", - "minimizeBackground": "#fbd914", - "minimizeColor": "#14141b", - "maximizeBackground": "#00ca4e", - "maximizeColor": "#14141b", - "exitBackground": "#ff4743", - "exitColor": "#14141b", + "tabs.tab.background": "#e0e0e0", + "tabs.tab.color": "#202124 ", + "tabs.createNewTab.background": "#d5d6db", + "tabs.createNewTab.color": "#202124", + "tabs.tabsManager.--tabsScrollbarTrack": "rgb(185, 185, 185)", + "tabs.tabsManager.--tabsScrollbarThumb": "rgb(163, 163, 163)", + "tabs.tabsManager.--tabsScrollbarThumbHover": "#888", - "loadingBar": "#eeeeee", - "loader": "#8c9a97", + "animation.grid": "rgba(213, 215, 225),#d5d7e1", + "animation.card": "rgba(187,188,193,255),rgba(224,224,224,255)", + "animation.sidebar": "rgba(224,224,224,255),rgba(203,204,209,255)", + "animation.tab": "rgba(224,224,224,255),rgba(203,204,209,255)", - "tabBackground": "#dfdfdf", - "tabColor": "#202124", - "newTabBackground": "#dfdfdf", - "newTabColor": "#202124", - "navigatorBackground": "transparent", - "navigatorColor": "#202124", - "pathNavigatorBackground": "#dfdfdf", - "pathNavigatorColor": "#202124", - "searchBarBackground": "#e0e0e0", - "searchBarColor": "inherit", + "settings.settingsSidebar.background": "rgba(213, 215, 225, var(--sidebar-transparency))", + "settings.settingsMain.background": "rgba(214, 215, 220, var(--workspace-transparency))", + "settings.active.background": "rgb(220, 220, 220)", + "settings.numberCtrlInput.background": "#ebeaea", + "settinns.numberCtrlInput.color": "#000", + "settings.numberCtrlPlus.background": "#e1e1e1", + "settings.numberCtrlPlus.color": "#000", + "settings.numberCtrlMinus.background": "#e1e1e1", + "settings.numberCtrlMinus.color": "#000", - "settingsSidebarBackground": "#FAFAFA", - "settingsMainBackground": "#FEFEFE", - "settingButtonBackground": "inherit", - "settingButtonColor": "inherit", - "settingsActiveTab": "rgb(220, 220, 220)", + "contextmenu.background": "#cbccd1", + "contextmenu.Color": "inherit", + "contextmenu.contextmenuSubmenu.background": "#cbccd1", + "contextmenu.contextmenuSubmenu.color": "inherit", - "tabsScrollbarTrack": "rgb(229, 229, 233)", - "tabsScrollbarThumb": "rgb(195, 195, 201)", - "tabsScrollbarThumbHover": "rgb(187, 187, 187)", + "favorites.favorite.background": "transparent", + "favorites.favorite.color": "#202124", + "favorites.pendrive.background": "transparent", + "favorites.pendrive.color": "#202124", + "favorites.pendriveTotalCapacity.background": "#eee", + "favorites.pendriveUsedCapacity.background": "#8989e2", + "grid.fileGrid.background": "#e0e0e0", + "grid.fileGrid.color": "#202124", + "grid.--selectedGridBorder": "#1e88e5", + "grid.--selectedGridBackground": "#cbcdd6", + "grid.--selectedGridColor": "#202124", - "favoriteBackground": "transparent", - "favoriteColor": "#202124", - "pendriveBackground": "transparent", - "pendriveColor": "#202124", - "pendriveTotalCapacityBackground": "#eee", - "pendriveUsedCapacityBackground": "#8989e2", + "preview.background": "#d0d3dd", + "preview.color": "#202124", + "preview.previewExitBtn.background": "rgb(226, 227, 232)", + "preview.previewExitBtn.color": "#202124", + "preview.previewObject.background": "#d0d3dd", + "preview.previewObject.color": "inherit", + "preview.previewObject.--previewObjectTableBorder": "1px solid #ddd", + "preview.previewObject.--previewObjectTableRowEvenBackground": "#ddd", + "preview.previewObject.--previewObjectTableRowEvenColor": "inherit", + "preview.previewObject.--previewObjectTableRowOddBackground": "inherit", + "preview.previewObject.--previewObjectTableRowOddColor": "inherit", - "gridBackground": "#f5f4f4", - "gridColor": "#202124", - "selectedGridBorder": "2px solid #1e88e5", - "selectedGridBackground": "#dbdbdc", - "selectedGridColor": "#202124", + "properties.background": "#e0e0e0", + "properties.color": "inherit", - "gridHoverEffectBackground": "rgba(234,234,234,255),#c5ccd2", - "cardHoverEffectBackground": "rgba(234,234,234,255),rgba(215,215,216,255)", - "sidebarHoverEffectBackground": "rgba(234,234,234,255),rgba(203,204,209,255)", - "tabHoverEffectBackground": "rgba(234,234,234,255),rgba(203,204,209,255)", - - "contextMenuBackground": "#d1d1d8", - "contextMenuColor": "inherit", - "contextMenuSubmenuBackground": "#d1d1d8", - "contextMenuSubmenuColor": "inherit", - - "previewFileBackground": "#eeeeee", - "previewFileColor": "#202124", - "previewExitButtonBackground": "#dedede", - "previewExitButtonColor": "#202124", - "previewObjectBackground": "#f3f3f3", - "previewObjectColor": "inherit", - "previewObjectTableBorder": "1px solid #ddd", - "previewObjectTableRowEvenBackground": "#ddd", - "previewObjectTableRowEvenColor": "inherit", - "previewObjectTableRowOddBackground": "inherit", - "previewObjectTableRowOddColor": "inherit", - - "propertiesBackground": "#e0e0e0", - "promptBackground": "#f7f7f7", - "promptInputBackground": "#ebe9e9", - "promptInputColor": "#87c1ce", - "promptOkBackground": "#3879d9", - "promptOkColor": "#fff", - "promptCancelBackground": "#87c1ce", - "promptCancelColor": "#000", - - "infobarBackground": "#FAFAFA", - "infobarColor": "inherit", - - "settingsNumberCtrlInputBackground": "#e1e1e1", - "settingsNumberCtrlControllerBackground": "#f1f1f1", - "settingsNumberCtrlInputColor": "#000", - "settingsNumberCtrlControllerColor": "#000", + "prompt.background": "#f7f7f7", + "prompt.promptInput.background": "#ebe9e9", + "prompt.promptInput.color": "#87c1ce", + "prompt.promptOk.background": "#3879d9", + "prompt.promptOk.color": "#fff", + "prompt.promptCancel.background": "#87c1ce", + "prompt.promptCancel.color": "#000", + "prompt.promptExitBtn.background": "#ff47f3", "hljs.color": "#383838", "hljs.background": "#f8f8f8", diff --git a/packages/generator-xplorer-extensions/generators/app/templates/package.json b/packages/generator-xplorer-extensions/generators/app/templates/package.json index 4bbbdd7d..202d7e49 100644 --- a/packages/generator-xplorer-extensions/generators/app/templates/package.json +++ b/packages/generator-xplorer-extensions/generators/app/templates/package.json @@ -14,7 +14,6 @@ { "identifier": "<%= extensionIdentifier %>", "name": "<%= extensionName %>", - "category": "<%= themeCategory %>", "path": "./themes/<%= extensionIdentifier%>-color-theme.json" } ] diff --git a/src-tauri/src/extensions.rs b/src-tauri/src/extensions.rs index 66cbe396..a18c02c8 100644 --- a/src-tauri/src/extensions.rs +++ b/src-tauri/src/extensions.rs @@ -145,7 +145,6 @@ pub fn get_cli_args() -> Result { pub struct ThemeExtensionInformation { pub identifier: String, pub name: String, - pub category: String, pub value: serde_json::Value, } @@ -185,11 +184,6 @@ pub fn build_themes() { Some(field) => field.as_str().unwrap(), None => panic!("There is no name field in your theme"), }; - let category = theme.get("category"); - let category = match category { - Some(field) => field.as_str().unwrap(), - None => panic!("There is no category field in your theme"), - }; let path = theme.get("path"); let path = match path { Some(field) => field.as_str().unwrap(), @@ -206,7 +200,6 @@ pub fn build_themes() { theme_extension_informations.push(ThemeExtensionInformation { identifier: identifier.to_string(), name: name.to_string(), - category: category.to_string(), value: theme_value, }); } diff --git a/src/Components/ContextMenu/contextMenu.ts b/src/Components/ContextMenu/contextMenu.ts index 50d5629f..d838c132 100644 --- a/src/Components/ContextMenu/contextMenu.ts +++ b/src/Components/ContextMenu/contextMenu.ts @@ -154,7 +154,6 @@ const ContextMenu = (): void => { contextMenu.style.top = coorY + 'px'; contextMenu.scrollTop = 0; - updateTheme('contextmenu'); document.addEventListener('click', exitContextMenu); }); const exitContextMenu = () => { diff --git a/src/Components/Files/File Preview/preview.ts b/src/Components/Files/File Preview/preview.ts index ce4b4812..b352668c 100644 --- a/src/Components/Files/File Preview/preview.ts +++ b/src/Components/Files/File Preview/preview.ts @@ -138,7 +138,6 @@ const Preview = async (filePath: string): Promise => { } if (!previewed) PromptError('No preview handler', 'There is no preview handler for this file type yet.'); - updateTheme('preview'); }; export default Preview; export { closePreviewFile }; diff --git a/src/Components/Layout/infobar.ts b/src/Components/Layout/infobar.ts index e1d6430b..24fed608 100644 --- a/src/Components/Layout/infobar.ts +++ b/src/Components/Layout/infobar.ts @@ -1,4 +1,3 @@ -import { updateTheme } from '../Theme/theme'; import Storage from '../../Api/storage'; let infoBarElement: HTMLElement; @@ -24,7 +23,6 @@ const Infobar = async (): Promise => {
`; document.querySelector('.main').appendChild(infoBarElement); - updateTheme('infobar'); }; export default Infobar; export { UpdateInfo }; diff --git a/src/Components/Layout/layout.scss b/src/Components/Layout/layout.scss index 66e967b6..0f9490d1 100644 --- a/src/Components/Layout/layout.scss +++ b/src/Components/Layout/layout.scss @@ -22,7 +22,6 @@ height: 100vh; border-radius: var(--edge-radius) 0 0 var(--edge-radius); overflow: auto; - opacity: var(--sidebar-transparency); #sidebar-nav { flex-grow: 1; margin: 1rem 0; @@ -117,7 +116,6 @@ .topbar { border-radius: 0 var(--edge-radius) 0 0; padding: 15px; - opacity: var(--topbar-transparency); &:focus { cursor: grabbing; } @@ -235,7 +233,6 @@ height: 100%; box-sizing: border-box; display: flex; - opacity: var(--workspace-transparency); #workspace { padding: 1rem; @@ -246,7 +243,6 @@ .infobar { border-radius: 0 0 var(--edge-radius) 0; display: flex; - opacity: var(--workspace-transparency); .infobar-item { padding: 2.5px 10px; } diff --git a/src/Components/Layout/windowManager.ts b/src/Components/Layout/windowManager.ts index 7981ecc7..0c27e851 100644 --- a/src/Components/Layout/windowManager.ts +++ b/src/Components/Layout/windowManager.ts @@ -5,7 +5,6 @@ import { OpenDir } from '../Open/open'; import focusingPath from '../Functions/focusingPath'; import getDirname from '../Functions/path/dirname'; import createSidebar from './sidebar'; -import { updateTheme } from '../Theme/theme'; /** * Reload the page * @returns {Promise} @@ -78,7 +77,6 @@ const windowManager = async (): Promise => { document.querySelector('.path-navigator').addEventListener('change', (event: Event & { target: HTMLInputElement }) => { OpenDir(event.target.value); }); - updateTheme('windowmanager'); const _preference = await Storage.get('preference'); listenWindowClose().then(() => { if (_preference?.on_startup === 'new') Storage.remove(`tabs-${windowName}`); diff --git a/src/Components/Prompt/ask.ts b/src/Components/Prompt/ask.ts index f6806163..f19cec07 100644 --- a/src/Components/Prompt/ask.ts +++ b/src/Components/Prompt/ask.ts @@ -1,4 +1,3 @@ -import { updateTheme } from '../Theme/theme'; import dragElement from '../Functions/dragElement'; interface AskOptions { @@ -30,7 +29,6 @@ const Ask = async (title: string, message: string, options?: AskOptions): Promis dragElement(promptElement.querySelector('.prompt-frame'), promptElement); document.body.appendChild(promptElement); - updateTheme('prompt'); const promptInput = promptElement.querySelector('.prompt-input'); promptInput.setSelectionRange(0, promptInput.value.lastIndexOf('.')); diff --git a/src/Components/Prompt/confirm.ts b/src/Components/Prompt/confirm.ts index 341b6f88..c8f47684 100644 --- a/src/Components/Prompt/confirm.ts +++ b/src/Components/Prompt/confirm.ts @@ -1,4 +1,3 @@ -import { updateTheme } from '../Theme/theme'; import dragElement from '../Functions/dragElement'; import { pauseEnter } from '../Shortcut/shortcut'; @@ -39,7 +38,6 @@ const ConfirmDialog = (title: string, message: string, defaultValue?: 'Yes' | 'N }; document.addEventListener('keydown', keydownhandler); document.body.appendChild(promptElement); - updateTheme('prompt'); }); }; diff --git a/src/Components/Prompt/error.ts b/src/Components/Prompt/error.ts index e0e9ce79..6a7dfec7 100644 --- a/src/Components/Prompt/error.ts +++ b/src/Components/Prompt/error.ts @@ -1,6 +1,5 @@ import beep from '../Functions/beep'; import dragElement from '../Functions/dragElement'; -import { updateTheme } from '../Theme/theme'; import { ErrorLog } from '../Functions/log'; const PromptError = (title: string, message: string): void => { document.querySelectorAll('.prompt').forEach((el) => el.parentNode.removeChild(el)); @@ -18,7 +17,6 @@ const PromptError = (title: string, message: string): void => { document.body.appendChild(promptElement); beep(); dragElement(promptElement.querySelector('.prompt-frame'), promptElement); - updateTheme('prompt'); ErrorLog(`[${title}] ${message}`); document.addEventListener('keydown', (e) => { if (e.key === 'Enter') { diff --git a/src/Components/Properties/properties.ts b/src/Components/Properties/properties.ts index 586cded8..6172fa10 100644 --- a/src/Components/Properties/properties.ts +++ b/src/Components/Properties/properties.ts @@ -62,7 +62,6 @@ const Properties = (filePath: string): void => { 'Accessed At': accessedAt, 'File Attribute': file_attr, }); - updateTheme('properties'); }; export default Properties; diff --git a/src/Components/Setting/Appearance/Appearance.ts b/src/Components/Setting/Appearance/Appearance.ts index 77e7fcc6..7087803a 100644 --- a/src/Components/Setting/Appearance/Appearance.ts +++ b/src/Components/Setting/Appearance/Appearance.ts @@ -171,7 +171,6 @@ const Appearance = async (): Promise => { `; settingsMain.innerHTML = appearancePage; - updateTheme('settings'); settingsMain.querySelectorAll('.number-ctrl').forEach((ctrl) => { const number = ctrl.querySelector('.number-ctrl-input'); ctrl.querySelector('.number-ctrl-minus').addEventListener('click', () => { @@ -210,7 +209,7 @@ const Appearance = async (): Promise => { if (value) { document.body.style.setProperty('--sidebar-transparency', appearance?.windowTransparency ?? '0.8'); } else { - document.body.style.removeProperty('--sidebar-transparency'); + document.body.style.setProperty('--sidebar-transparency', '1'); } Storage.set('appearance', appearance); }); @@ -221,7 +220,7 @@ const Appearance = async (): Promise => { if (value) { document.body.style.setProperty('--workspace-transparency', appearance?.windowTransparency ?? '0.8'); } else { - document.body.style.removeProperty('--workspace-transparency'); + document.body.style.setProperty('--workspace-transparency', '1'); } Storage.set('appearance', appearance); }); @@ -232,7 +231,7 @@ const Appearance = async (): Promise => { if (value) { document.body.style.setProperty('--topbar-transparency', appearance?.windowTransparency ?? '0.8'); } else { - document.body.style.removeProperty('--topbar-transparency'); + document.body.style.setProperty('--topbar-transparency', '1'); } Storage.set('appearance', appearance); }); @@ -256,7 +255,6 @@ const Appearance = async (): Promise => { `; document.querySelector('.tabs-manager').appendChild(windowManager); - updateTheme('windowmanager'); // Minimize the screen windowManager.querySelector('#minimize').addEventListener('click', minimize); // Maximize the screen diff --git a/src/Components/Setting/setting.scss b/src/Components/Setting/setting.scss index b3d35494..ecc2f7b3 100644 --- a/src/Components/Setting/setting.scss +++ b/src/Components/Setting/setting.scss @@ -10,7 +10,6 @@ .settings-sidebar { flex: 1; min-width: 250px; - opacity: var(--sidebar-transparency); border-radius: var(--edge-radius) 0 0 var(--edge-radius); .settings-sidebar-header { padding: 1rem; @@ -37,7 +36,6 @@ padding: 1rem; overflow-y: auto; border-radius: 0 var(--edge-radius) var(--edge-radius) 0; - opacity: var(--workspace-transparency); select { background: inherit; padding: 0.25rem 0.5rem; diff --git a/src/Components/Setting/setting.ts b/src/Components/Setting/setting.ts index 1c1ba6ed..1c159096 100644 --- a/src/Components/Setting/setting.ts +++ b/src/Components/Setting/setting.ts @@ -20,7 +20,6 @@ const Setting = async (): Promise => { document.getElementById(tab.toLowerCase()).parentElement.classList.add('active'); } else document.getElementById(tabs.toLowerCase()).parentElement.classList.remove('active'); }); - updateTheme('settings'); Array.from(document.getElementsByClassName('settings-sidebar-item') as HTMLCollectionOf).forEach((element) => { if (!element.classList.contains('active')) element.style.background = ''; }); @@ -55,7 +54,6 @@ const Setting = async (): Promise => { } }); } - updateTheme('settings'); Appearance(); setActiveTab(defaultTab); diff --git a/src/Components/Theme/theme.json b/src/Components/Theme/theme.json index 4374fd1a..f56723e8 100644 --- a/src/Components/Theme/theme.json +++ b/src/Components/Theme/theme.json @@ -1,87 +1,103 @@ { "dark+": { - "textColor": "#4fe0be", - "fontSize": "16px", - "fontFamily": "system-ui", - "scrollbarTrackBackground": "rgb(139, 164, 248)", - "scrollbarThumbBackground": "rgb(116, 118, 231)", - "scrollbarThumbHoverBackground": "rgb(103, 105, 238)", - "sidebarBackground": "#14141b", - "mainBackground": "#1a1b26", - "topbarBackground": "#14141b", - "minimizeBackground": "#fbd914", - "minimizeColor": "#14141b", - "maximizeBackground": "#00ca4e", - "maximizeColor": "#14141b", - "exitBackground": "#ff4743", - "exitColor": "#14141b", - "loadingBar": "#14141b", - "loader": "#4fe0be", - "tabBackground": "#5f6b94", - "tabColor": "#a2b7ff", - "newTabBackground": "#5f6b94", - "newTabColor": "#a2b7ff", - "navigatorBackground": "transparent", - "navigatorColor": "#4fe0be", - "pathNavigatorBackground": "#5f6b94", - "pathNavigatorColor": "#a2b7ff", - "searchBarBackground": "#5f6b94", - "searchBarColor": "#a2b7ff", - - "settingsSidebarBackground": "#14141b", - "settingsMainBackground": "#1a1b26", - "settingButtonBackground": "inherit", - "settingButtonColor": "#98aec1", - "settingsActiveTab": "rgb(43, 46, 86)", - "tabsScrollbarTrack": "rgb(139, 164, 248)", - "tabsScrollbarThumb": "rgb(116, 118, 231)", - "tabsScrollbarThumbHover": "rgb(103, 105, 238)", - "favoriteBackground": "transparent", - "favoriteColor": "#4fe0be", - "pendriveBackground": "#transparent", - "pendriveColor": "#4fe0be", - "pendriveTotalCapacityBackground": "#eee", - "pendriveUsedCapacityBackground": "#8989e2", - "gridBackground": "transparent", - "gridColor": "inherit", - "selectedGridBorder": "none", - "selectedGridBackground": "#a2b7ff", - "selectedGridColor": "#202124", - "gridHoverEffectBackground": "rgba(79, 86, 109, 1),rgba(35, 35, 53, .5)", - "cardHoverEffectBackground": "rgba(140, 162, 210, 0.5),rgba(27, 30, 46 , 0.7)", - "sidebarHoverEffectBackground": "rgba(45, 45, 57, 0.7),rgba(20, 20, 27, 0.8)", - "tabHoverEffectBackground": "rgba(140, 162, 210, 0.5),rgba(27, 30, 46 , 0.7)", - "contextMenuBackground": "#1b1e2e", - "contextMenuColor": "inherit", - "contextMenuSubmenuBackground": "#1b1e2e", - "contextMenuSubmenuColor": "inherit", - "previewFileBackground": "#a2b7ff", - "previewFileColor": "#202124", - "previewExitButtonBackground": "rgb(198, 203, 228)", - "previewExitButtonColor": "inherit", - "previewObjectBackground": "#1a1b26", - "previewObjectColor": "#4fe0be", - "previewObjectTableBorder": "1px solid #ddd", - "previewObjectTableRowEvenBackground": "#a2b7ff", - "previewObjectTableRowEvenColor": "#1a1b26", - "previewObjectTableRowOddBackground": "inherit", - "previewObjectTableRowOddColor": "#a2b7ff", - "propertiesBackground": "#0a0f19", - "promptBackground": "#1b1e2e", - "promptInputBackground": "#292c40", - "promptInputColor": "#87c1ce", - "promptOkBackground": "#3879d9", - "promptOkColor": "#fff", - "promptCancelBackground": "#87c1ce", - "promptCancelColor": "#000", - - "infobarBackground": "#14141b", - "infobarColor": "inherit", - - "settingsNumberCtrlInputBackground": "rgb(135, 193, 206)", - "settingsNumberCtrlControllerBackground": "#4e8895", - "settingsNumberCtrlInputColor": "#000", - "settingsNumberCtrlControllerColor": "#122430", + "root.color": "#4fe0be", + "root.--scrollbarTrack": "rgb(139, 164, 248)", + "root.--scrollbarThumb": "rgb(116, 118, 231)", + "root.--scrollbarThumbHover": "rgb(103, 105, 238)", + "root.sidebar.background": "rgba(20, 20, 27, var(--sidebar-transparency))", + "root.mainBox.background": "rgba(26, 27, 38, var(--workspace-transparency))", + "root.topbar.background": "rgba(20, 20, 27, var(--topbar-transparency))", + "root.infobar.background": "rgba(29, 29, 41, var(--workspace-transparency))", + "root.loadingBar.background": "#14141b", + "root.loader.background": "#4fe0be", + "root.sidebarSettingButton.background": "inherit", + "root.sidebarSettingButton.color": "#98aec1", + + "windowmanager#minimize.background": "#fbd914", + "windowmanager#minimize.color": "#14141b", + "windowmanager#maximize.background": "#00ca4e", + "windowmanager#maximize.color": "#14141b", + "windowmanager#exit.background": "#ff4743", + "windowmanager#exit.color": "#14141b", + "windowmanager#go-back.background": "transparent", + "windowmanager#go-forward.background": "transparent", + "windowmanager#go-parent-dir.background": "transparent", + "windowmanager#refresh.background": "transparent", + "windowmanager#go-back.color": "#4fe0be", + "windowmanager#go-forward.color": "#4fe0be", + "windowmanager#go-parent-dir.color": "#4fe0be", + "windowmanager#refresh.color": "#4fe0be", + "windowmanager.pathNavigator.background": "#5f6b94", + "windowmanager.pathNavigator.color": "#a2b7ff", + "windowmanager.searchBar.background": "#5f6b94", + "windowmanager.searchBar.color": "#a2b7ff", + + "tabs.tab.background": "#5f6b94", + "tabs.tab.color": "#a2b7ff", + "tabs.createNewTab.background": "#5f6b94", + "tabs.createNewTab.color": "#a2b7ff", + "tabs.tabsManager.--tabsScrollbarTrack": "rgb(139, 164, 248)", + "tabs.tabsManager.--tabsScrollbarThumb": "rgb(116, 118, 231)", + "tabs.tabsManager.--tabsScrollbarThumbHover": "rgb(103, 105, 238)", + + "animation.grid": "rgba(79, 86, 109, 1),rgba(35, 35, 53, .5)", + "animation.sidebar": "rgba(45, 45, 57, 0.7),rgba(20, 20, 27, 0.8)", + "animation.tab": "rgba(140, 162, 210, 0.5),rgba(27, 30, 46 , 0.7)", + "animation.card": "rgba(140, 162, 210, 0.5),rgba(27, 30, 46 , 0.7)", + + "settings.settingsSidebar.background": "rgba(20, 20, 27, var(--sidebar-transparency))", + "settings.settingsMain.background": "rgba(26, 27, 38, var(--workspace-transparency))", + "settings.active.background": "rgb(43, 46, 86)", + "settings.numberCtrlInput.background": "rgb(135, 193, 206)", + "settings.numberCtrlInput.color": "#000", + "settings.numberCtrlPlus.background": "#4e8895", + "settings.numberCtrlPlus.color": "#122430", + "settings.numberCtrlMinus.background": "#4e8895", + "settings.numberCtrlMinus.color": "#122430", + + "contextmenu.background": "#1b1e2e", + "contextmenu.Color": "inherit", + "contextmenu.contextmenuSubmenu.background": "#1b1e2e", + "contextmenu.contextmenuSubmenu.color": "inherit", + + "favorites.favorite.background": "transparent", + "favorites.favorite.color": "#4fe0be", + "favorites.pendrive.background": "#transparent", + "favorites.pendrive.color": "#4fe0be", + "favorites.pendriveTotalCapacity.background": "#eee", + "favorites.pendriveUsedCapacity.background": "#8989e2", + "grid.fileGrid.background": "transparent", + "grid.fileGrid.color": "inherit", + "grid.--selectedGridBorder": "none", + "grid.--selectedGridBackground": "#a2b7ff", + "grid.--selectedGridColor": "#202124", + + "preview.background": "#a2b7ff", + "preview.color": "#202124", + "preview.previewExitBtn.background": "rgb(198, 203, 228)", + "preview.previewExitBtn.color": "inherit", + "preview.previewObject.background": "#1a1b26", + "preview.previewObject.color": "#4fe0be", + "preview.previewObject.--previewObjectTableBorder": "1px solid #ddd", + "preview.previewObject.--previewObjectTableRowEvenBackground": "#a2b7ff", + "preview.previewObject.--previewObjectTableRowEvenColor": "#1a1b26", + "preview.previewObject.--previewObjectTableRowOddBackground": "inherit", + "preview.previewObject.--previewObjectTableRowOddColor": "#a2b7ff", + + "properties.background": "#0a0f19", + "properties.color": "inherit", + + "prompt.background": "#1b1e2e", + "prompt.promptInput.background": "#292c40", + "prompt.promptInput.color": "#87c1ce", + "prompt.promptOk.background": "#3879d9", + "prompt.promptOk.color": "#fff", + "prompt.promptCancel.background": "#87c1ce", + "prompt.promptCancel.color": "#000", + "prompt.promptExitBtn.background": "#ff47f3", + + "infobar.background": "#14141b", + "infobar.color": "inherit", "hljs.color": "#cbd6e2", "hljs.background": "#0b1c2c", @@ -137,88 +153,101 @@ "hljs.metaKeyword.fontWeight": "700" }, "dark": { - "textColor": "#87c1ce", - "fontSize": "16px", - "fontFamily": "system-ui", - "scrollbarTrackBackground": "rgb(128, 128, 128)", - "scrollbarThumbBackground": "rgb(77, 77, 77)", - "scrollbarThumbHoverBackground": "rgb(59, 59, 59)", - "sidebarBackground": "#1b1e2e", - "mainBackground": "#24283b", - "topbarBackground": "#1b1e2e", - "minimizeBackground": "#fbd914", - "minimizeColor": "#14141b", - "maximizeBackground": "#00ca4e", - "maximizeColor": "#14141b", - "exitBackground": "#ff4743", - "exitColor": "#14141b", - "loadingBar": "#1b1e2e", - "loader": "#87c1ce", - "tabBackground": "#39496a", - "tabColor": "#87c1ce", - "newTabBackground": "#39496a", - "newTabColor": "#87c1ce", - "navigatorBackground": "transparent", - "navigatorColor": "#87c1ce", - "pathNavigatorBackground": "#39496a", - "pathNavigatorColor": "#87c1ce", - "searchBarBackground": "#39496a", - "searchBarColor": "#87c1ce", - - "settingsSidebarBackground": "#1b1e2e", - "settingsMainBackground": "#24283b", - "settingButtonBackground": "inherit", - "settingButtonColor": "#98aec1", - "settingsActiveTab": "rgba(140, 162, 210 , 0.25)", - "tabsScrollbarTrack": "rgb(128, 128, 128)", - "tabsScrollbarThumb": "rgb(77, 77, 77)", - "tabsScrollbarThumbHover": "rgb(59, 59, 59)", - "favoriteBackground": "transparent", - "favoriteColor": "#87c1ce", - "pendriveBackground": "transparent", - "pendriveColor": "#87c1ce", - "pendriveTotalCapacityBackground": "#eee", - "pendriveUsedCapacityBackground": "#8989e2", - "gridBackground": "transparent", - "gridColor": "#87c1ce", - "selectedGridBorder": "#1e88e5", - "selectedGridBackground": "#2893a0", - "selectedGridColor": "inherit", - "gridHoverEffectBackground": "rgba(140, 162, 210 , 0.4),#24283b", - "cardHoverEffectBackground": "rgba(140, 162, 210 , 0.7),rgba(140, 162, 210, 0.2)", - "sidebarHoverEffectBackground": "rgba(140, 162, 210, 0.2),rgba(27, 30, 46 , 0.7)", - "tabHoverEffectBackground": "rgba(140, 162, 210, 0.2),rgba(27, 30, 46 , 0.7)", - "contextMenuBackground": "#1b1e2e", - "contextMenuColor": "inherit", - "contextMenuSubmenuBackground": "#1b1e2e", - "contextMenuSubmenuColor": "inherit", - "previewFileBackground": "#39496a", - "previewFileColor": "inherit", - "previewExitButtonBackground": "#3e537d", - "previewExitButtonColor": "#202124", - "previewObjectBackground": "#24283b", - "previewObjectColor": "inherit", - "previewObjectTableBorder": "1px solid #ddd", - "previewObjectTableRowEvenBackground": "#283d6b", - "previewObjectTableRowEvenColor": "inherit", - "previewObjectTableRowOddBackground": "inherit", - "previewObjectTableRowOddColor": "inherit", - "propertiesBackground": "#39496a", - "promptBackground": "#1b1e2e", - "promptInputBackground": "#292c40", - "promptInputColor": "#87c1ce", - "promptOkBackground": "#3879d9", - "promptOkColor": "#fff", - "promptCancelBackground": "#87c1ce", - "promptCancelColor": "#000", - - "infobarBackground": "#1f2336", - "infobarColor": "inherit", - - "settingsNumberCtrlInputBackground": "rgb(135, 193, 206)", - "settingsNumberCtrlControllerBackground": "#4e8895", - "settingsNumberCtrlInputColor": "#000", - "settingsNumberCtrlControllerColor": "#122430", + "root.color": "#87c1ce", + "root.--scrollbarTrack": "rgb(128, 128, 128)", + "root.--scrollbarThumb": "rgb(77, 77, 77)", + "root.--scrollbarThumbHover": "rgb(59, 59, 59)", + "root.sidebar.background": "rgba(27, 30, 46, var(--sidebar-transparency))", + "root.mainBox.background": "rgba(36, 40, 59, var(--workspace-transparency))", + "root.topbar.background": "rgba(27, 30, 46, var(--topbar-transparency))", + "root.infobar.background": "rgba(36, 40, 59, var(--workspace-transparency))", + "root.loadingBar.background": "#1b1e2e", + "root.loader.background": "#87c1ce", + "root.sidebarSettingButton.background": "inherit", + "root.sidebarSettingButton.color": "#98aec1", + + "windowmanager#minimize.background": "#fbd914", + "windowmanager#minimize.color": "#14141b", + "windowmanager#maximize.background": "#00ca4e", + "windowmanager#maximize.color": "#14141b", + "windowmanager#exit.background": "#ff4743", + "windowmanager#exit.color": "#14141b", + "windowmanager#go-back.background": "transparent", + "windowmanager#go-forward.background": "transparent", + "windowmanager#go-parent-dir.background": "transparent", + "windowmanager#refresh.background": "transparent", + "windowmanager#go-back.color": "#87c1ce", + "windowmanager#go-forward.color": "#87c1ce", + "windowmanager#go-parent-dir.color": "#87c1ce", + "windowmanager#refresh.color": "#87c1ce", + "windowmanager.pathNavigator.background": "#39496a", + "windowmanager.pathNavigator.color": "#87c1ce", + "windowmanager.searchBar.background": "#39496a", + "windowmanager.searchBar.color": "#87c1ce", + + "tabs.tab.background": "#39496a", + "tabs.tab.color": "#87c1ce", + "tabs.createNewTab.background": "#39496a", + "tabs.createNewTab.color": "#87c1ce", + "tabs.tabsManager.--tabsScrollbarTrack": "rgb(128, 128, 128)", + "tabs.tabsManager.--tabsScrollbarThumb": "rgb(77, 77, 77)", + "tabs.tabsManager.--tabsScrollbarThumbHover": "rgb(59, 59, 59)", + + "animation.grid": "rgba(140, 162, 210 , 0.4),#24283b", + "animation.card": "rgba(140, 162, 210 , 0.7),rgba(140, 162, 210, 0.2)", + "animation.sidebar": "rgba(140, 162, 210, 0.2),rgba(27, 30, 46 , 0.7)", + "animation.tab": "rgba(140, 162, 210, 0.2),rgba(27, 30, 46 , 0.7)", + + "settings.settingsSidebar.background": "rgba(27, 30, 46, var(--sidebar-transparency))", + "settings.settingsMain.background": "rgba(36, 40, 59, var(--workspace-transparency))", + "settings.active.background": "rgba(140, 162, 210 , 0.25)", + "settings.numberCtrlInput.background": "rgb(135, 193, 206)", + "settings.numberCtrlInput.color": "#000", + "settings.numberCtrlPlus.background": "#4e8895", + "settings.numberCtrlPlus.color": "#122430", + "settings.numberCtrlMinus.background": "#4e8895", + "settings.numberCtrlMinus.color": "#122430", + + "contextmenu.background": "#1b1e2e", + "contextmenu.Color": "inherit", + "contextmenu.contextmenuSubmenu.background": "#1b1e2e", + "contextmenu.contextmenuSubmenu.color": "inherit", + + "favorites.favorite.background": "transparent", + "favorites.favorite.color": "#87c1ce", + "favorites.pendrive.background": "transparent", + "favorites.pendrive.color": "#87c1ce", + "favorites.pendriveTotalCapacity.background": "#eee", + "favorites.pendriveUsedCapacity.background": "#8989e2", + "grid.fileGrid.background": "transparent", + "grid.fileGrid.color": "#87c1ce", + "grid.--selectedGridBorder": "#1e88e5", + "grid.--selectedGridBackground": "#2893a0", + "grid.--selectedGridColor": "inherit", + + "preview.background": "#39496a", + "preview.color": "inherit", + "preview.previewExitBtn.background": "#3e537d", + "preview.previewExitBtn.color": "#202124", + "preview.previewObject.background": "#24283b", + "preview.previewObject.color": "inherit", + "preview.previewObject.--previewObjectTableBorder": "1px solid #ddd", + "preview.previewObject.--previewObjectTableRowEvenBackground": "#283d6b", + "preview.previewObject.--previewObjectTableRowEvenColor": "inherit", + "preview.previewObject.--previewObjectTableRowOddBackground": "inherit", + "preview.previewObject.--previewObjectTableRowOddColor": "inherit", + + "properties.background": "#39496a", + "properties.color": "inherit", + + "prompt.background": "#1b1e2e", + "prompt.promptInput.background": "#292c40", + "prompt.promptInput.color": "#87c1ce", + "prompt.promptOk.background": "#3879d9", + "prompt.promptOk.color": "#fff", + "prompt.promptCancel.background": "#87c1ce", + "prompt.promptCancel.color": "#000", + "prompt.promptExitBtn.background": "#ff47f3", "hljs.color": "#cbd6e2", "hljs.background": "#0b1c2c", @@ -274,88 +303,101 @@ "hljs.metaKeyword.fontWeight": "700" }, "light": { - "textColor": "#202124", - "fontSize": "16px", - "fontFamily": "system-ui", - "scrollbarTrackBackground": "rgb(185, 185, 185)", - "scrollbarThumbBackground": "rgb(163, 163, 163)", - "scrollbarThumbHoverBackground": "#888", - "sidebarBackground": "#d5d7e1", - "mainBackground": "#d6d7dc", - "topbarBackground": "#d0d3dd", - "minimizeBackground": "#e9cc21", - "minimizeColor": "#14141b", - "maximizeBackground": "#00ca4e", - "maximizeColor": "#14141b", - "exitBackground": "#ff4743", - "exitColor": "#14141b", - "loadingBar": "#cbccd1", - "loader": "#6d94a2", - "tabBackground": "#e0e0e0", - "tabColor": "#202124 ", - "newTabBackground": "#d5d6db", - "newTabColor": "#202124", - "navigatorBackground": "transparent", - "navigatorColor": "#202124", - "pathNavigatorBackground": "#e0e0e0", - "pathNavigatorColor": "#202124", - "searchBarBackground": "#e0e0e0", - "searchBarColor": "inherit", - - "settingsSidebarBackground": "#cbccd1", - "settingsMainBackground": "#d5d6db", - "settingButtonBackground": "inherit", - "settingButtonColor": "inherit", - "settingsActiveTab": "rgb(220, 220, 220)", - "tabsScrollbarTrack": "rgb(185, 185, 185)", - "tabsScrollbarThumb": "rgb(163, 163, 163)", - "tabsScrollbarThumbHover": "#888", - "favoriteBackground": "transparent", - "favoriteColor": "#202124", - "pendriveBackground": "transparent", - "pendriveColor": "#202124", - "pendriveTotalCapacityBackground": "#eee", - "pendriveUsedCapacityBackground": "#8989e2", - "gridBackground": "#e0e0e0", - "gridColor": "#202124", - "selectedGridBorder": "#1e88e5", - "selectedGridBackground": "#cbcdd6", - "selectedGridColor": "#202124", - "gridHoverEffectBackground": "rgba(213, 215, 225),#d5d7e1", - "cardHoverEffectBackground": "rgba(187,188,193,255),rgba(224,224,224,255)", - "sidebarHoverEffectBackground": "rgba(224,224,224,255),rgba(203,204,209,255)", - "tabHoverEffectBackground": "rgba(224,224,224,255),rgba(203,204,209,255)", - "contextMenuBackground": "#cbccd1", - "contextMenuColor": "inherit", - "contextMenuSubmenuBackground": "#cbccd1", - "contextMenuSubmenuColor": "inherit", - "previewFileBackground": "#d0d3dd", - "previewFileColor": "#202124", - "previewExitButtonBackground": "rgb(226, 227, 232)", - "previewExitButtonColor": "#202124", - "previewObjectBackground": "#d0d3dd", - "previewObjectColor": "inherit", - "previewObjectTableBorder": "1px solid #ddd", - "previewObjectTableRowEvenBackground": "#ddd", - "previewObjectTableRowEvenColor": "inherit", - "previewObjectTableRowOddBackground": "inherit", - "previewObjectTableRowOddColor": "inherit", - "propertiesBackground": "#e0e0e0", - "promptBackground": "#f7f7f7", - "promptInputBackground": "#ebe9e9", - "promptInputColor": "#87c1ce", - "promptOkBackground": "#3879d9", - "promptOkColor": "#fff", - "promptCancelBackground": "#87c1ce", - "promptCancelColor": "#000", - - "infobarBackground": "#d0d3dd", - "infobarColor": "inherit", - - "settingsNumberCtrlInputBackground": "#ebeaea", - "settingsNumberCtrlControllerBackground": "#e1e1e1", - "settingsNumberCtrlInputColor": "#000", - "settingsNumberCtrlControllerColor": "#000", + "root.color": "#202124", + "root.--scrollbarTrack": "rgb(185, 185, 185)", + "root.--scrollbarThumb": "rgb(163, 163, 163)", + "root.--scrollbarThumbHover": "#888", + "root.sidebar.background": "rgba(213, 215, 225, var(--sidebar-transparency))", + "root.mainBox.background": "rgba(214, 215, 220, var(--workspace-transparency))", + "root.topbar.background": "rgba(208, 211, 221, var(--topbar-transparency))", + "root.infobar.background": "rgba(214, 215, 220, var(--workspace-transparency))", + "root.loadingBar.background": "#cbccd1", + "root.loader.background": "#6d94a2", + "root.sidebarSettingButton.background": "inherit", + "root.sidebarSettingButton.color": "inherit", + + "windowmanager#minimize.background": "#e9cc21", + "windowmanager#minimize.color": "#14141b", + "windowmanager#maximize.background": "#00ca4e", + "windowmanager#maximize.color": "#14141b", + "windowmanager#exit.background": "#ff4743", + "windowmanager#exit.color": "#14141b", + "windowmanager#go-back.background": "transparent", + "windowmanager#go-forward.background": "transparent", + "windowmanager#go-parent-dir.background": "transparent", + "windowmanager#refresh.background": "transparent", + "windowmanager#go-back.color": "#202124", + "windowmanager#go-forward.color": "#202124", + "windowmanager#go-parent-dir.color": "#202124", + "windowmanager#refresh.color": "#202124", + "windowmanager.pathNavigator.background": "#e0e0e0", + "windowmanager.pathNavigator.color": "#202124", + "windowmanager.searchBar.background": "#e0e0e0", + "windowmanager.searchBar.color": "inherit", + + "tabs.tab.background": "#e0e0e0", + "tabs.tab.color": "#202124 ", + "tabs.createNewTab.background": "#d5d6db", + "tabs.createNewTab.color": "#202124", + "tabs.tabsManager.--tabsScrollbarTrack": "rgb(185, 185, 185)", + "tabs.tabsManager.--tabsScrollbarThumb": "rgb(163, 163, 163)", + "tabs.tabsManager.--tabsScrollbarThumbHover": "#888", + + "animation.grid": "rgba(213, 215, 225),#d5d7e1", + "animation.card": "rgba(187,188,193,255),rgba(224,224,224,255)", + "animation.sidebar": "rgba(224,224,224,255),rgba(203,204,209,255)", + "animation.tab": "rgba(224,224,224,255),rgba(203,204,209,255)", + + "settings.settingsSidebar.background": "rgba(213, 215, 225, var(--sidebar-transparency))", + "settings.settingsMain.background": "rgba(214, 215, 220, var(--workspace-transparency))", + "settings.active.background": "rgb(220, 220, 220)", + "settings.numberCtrlInput.background": "#ebeaea", + "settinns.numberCtrlInput.color": "#000", + "settings.numberCtrlPlus.background": "#e1e1e1", + "settings.numberCtrlPlus.color": "#000", + "settings.numberCtrlMinus.background": "#e1e1e1", + "settings.numberCtrlMinus.color": "#000", + + "contextmenu.background": "#cbccd1", + "contextmenu.Color": "inherit", + "contextmenu.contextmenuSubmenu.background": "#cbccd1", + "contextmenu.contextmenuSubmenu.color": "inherit", + + "favorites.favorite.background": "transparent", + "favorites.favorite.color": "#202124", + "favorites.pendrive.background": "transparent", + "favorites.pendrive.color": "#202124", + "favorites.pendriveTotalCapacity.background": "#eee", + "favorites.pendriveUsedCapacity.background": "#8989e2", + "grid.fileGrid.background": "#e0e0e0", + "grid.fileGrid.color": "#202124", + "grid.--selectedGridBorder": "#1e88e5", + "grid.--selectedGridBackground": "#cbcdd6", + "grid.--selectedGridColor": "#202124", + + "preview.background": "#d0d3dd", + "preview.color": "#202124", + "preview.previewExitBtn.background": "rgb(226, 227, 232)", + "preview.previewExitBtn.color": "#202124", + "preview.previewObject.background": "#d0d3dd", + "preview.previewObject.color": "inherit", + "preview.previewObject.--previewObjectTableBorder": "1px solid #ddd", + "preview.previewObject.--previewObjectTableRowEvenBackground": "#ddd", + "preview.previewObject.--previewObjectTableRowEvenColor": "inherit", + "preview.previewObject.--previewObjectTableRowOddBackground": "inherit", + "preview.previewObject.--previewObjectTableRowOddColor": "inherit", + + "properties.background": "#e0e0e0", + "properties.color": "inherit", + + "prompt.background": "#f7f7f7", + "prompt.promptInput.background": "#ebe9e9", + "prompt.promptInput.color": "#87c1ce", + "prompt.promptOk.background": "#3879d9", + "prompt.promptOk.color": "#fff", + "prompt.promptCancel.background": "#87c1ce", + "prompt.promptCancel.color": "#000", + "prompt.promptExitBtn.background": "#ff47f3", "hljs.color": "#383838", "hljs.background": "#f8f8f8", @@ -411,88 +453,101 @@ "hljs.metaKeyword.fontWeight": "700" }, "light+": { - "textColor": "#202124", - "fontSize": "16px", - "fontFamily": "system-ui", - "scrollbarTrackBackground": "rgb(229, 229, 233)", - "scrollbarThumbBackground": "rgb(195, 195, 201)", - "scrollbarThumbHoverBackground": "rgb(187, 187, 187)", - "sidebarBackground": "#FAFAFA", - "mainBackground": "#ffffff", - "topbarBackground": "#FAFAFA", - "minimizeBackground": "#fbd914", - "minimizeColor": "#14141b", - "maximizeBackground": "#00ca4e", - "maximizeColor": "#14141b", - "exitBackground": "#ff4743", - "exitColor": "#14141b", - "loadingBar": "#eeeeee", - "loader": "#8c9a97", - "tabBackground": "#dfdfdf", - "tabColor": "#202124", - "newTabBackground": "#dfdfdf", - "newTabColor": "#202124", - "navigatorBackground": "transparent", - "navigatorColor": "#202124", - "pathNavigatorBackground": "#dfdfdf", - "pathNavigatorColor": "#202124", - "searchBarBackground": "#ebebeb", - "searchBarColor": "inherit", - - "settingsSidebarBackground": "#FAFAFA", - "settingsMainBackground": "#FEFEFE", - "settingButtonBackground": "inherit", - "settingButtonColor": "inherit", - "settingsActiveTab": "rgb(220, 220, 220)", - "tabsScrollbarTrack": "rgb(229, 229, 233)", - "tabsScrollbarThumb": "rgb(195, 195, 201)", - "tabsScrollbarThumbHover": "rgb(187, 187, 187)", - "favoriteBackground": "transparent", - "favoriteColor": "#202124", - "pendriveBackground": "transparent", - "pendriveColor": "#202124", - "pendriveTotalCapacityBackground": "#eee", - "pendriveUsedCapacityBackground": "#8989e2", - "gridBackground": "transparent", - "gridColor": "#202124", - "selectedGridBorder": "#1e88e5", - "selectedGridBackground": "#dbdbdc", - "selectedGridColor": "#202124", - "gridHoverEffectBackground": "rgba(234,234,234,255),#c5ccd2", - "cardHoverEffectBackground": "rgba(234,234,234,255),rgba(215,215,216,255)", - "sidebarHoverEffectBackground": "rgba(234,234,234,255),rgba(203,204,209,255)", - "tabHoverEffectBackground": "rgba(234,234,234,255),rgba(203,204,209,255)", - "contextMenuBackground": "#d1d1d8", - "contextMenuColor": "inherit", - "contextMenuSubmenuBackground": "#d1d1d8", - "contextMenuSubmenuColor": "inherit", - "previewFileBackground": "#eeeeee", - "previewFileColor": "#202124", - "previewExitButtonBackground": "#dedede", - "previewExitButtonColor": "#202124", - "previewObjectBackground": "#f3f3f3", - "previewObjectColor": "inherit", - "previewObjectTableBorder": "1px solid #ddd", - "previewObjectTableRowEvenBackground": "#ddd", - "previewObjectTableRowEvenColor": "inherit", - "previewObjectTableRowOddBackground": "inherit", - "previewObjectTableRowOddColor": "inherit", - "propertiesBackground": "#e0e0e0", - "promptBackground": "#f7f7f7", - "promptInputBackground": "#ebe9e9", - "promptInputColor": "#87c1ce", - "promptOkBackground": "#3879d9", - "promptOkColor": "#fff", - "promptCancelBackground": "#87c1ce", - "promptCancelColor": "#000", - - "infobarBackground": "#FAFAFA", - "infobarColor": "inherit", - - "settingsNumberCtrlInputBackground": "#e1e1e1", - "settingsNumberCtrlControllerBackground": "#f1f1f1", - "settingsNumberCtrlInputColor": "#000", - "settingsNumberCtrlControllerColor": "#000", + "root.color": "#202124", + "root.--scrollbarTrack": "rgb(229, 229, 233)", + "root.--scrollbarThumb": "rgb(195, 195, 201)", + "root.--scrollbarThumbHover": "rgb(187, 187, 187)", + "root.sidebar.background": "rgba(250, 250, 250, var(--sidebar-transparency))", + "root.mainBox.background": "rgba(255, 255, 255, var(--workspace-transparency))", + "root.topbar.background": "rgba(250, 250, 250, var(--topbar-transparency))", + "root.infobar.background": "rgba(250, 250, 250, var(--workspace-transparency))", + "root.loadingBar.background": "#eeeeee", + "root.loader.background": "#8c9a97", + "root.sidebarSettingButton.background": "inherit", + "root.sidebarSettingButton.color": "inherit", + + "windowmanager#minimize.background": "#fbd914", + "windowmanager#minimize.color": "#14141b", + "windowmanager#maximize.background": "#00ca4e", + "windowmanager#maximize.color": "#14141b", + "windowmanager#exit.background": "#ff4743", + "windowmanager#exit.color": "#14141b", + "windowmanager#go-back.background": "transparent", + "windowmanager#go-forward.background": "transparent", + "windowmanager#go-parent-dir.background": "transparent", + "windowmanager#refresh.background": "transparent", + "windowmanager#go-back.color": "#202124", + "windowmanager#go-forward.color": "#202124", + "windowmanager#go-parent-dir.color": "#202124", + "windowmanager#refresh.color": "#202124", + "windowmanager.pathNavigator.background": "#dfdfdf", + "windowmanager.pathNavigator.color": "#202124", + "windowmanager.searchBar.background": "#ebebeb", + "windowmanager.searchBar.color": "inherit", + + "tabs.tab.background": "#dfdfdf", + "tabs.tab.color": "#202124", + "tabs.createNewTab.background": "#dfdfdf", + "tabs.createNewTab.color": "#202124", + "tabs.tabsManager.--tabsScrollbarTrack": "rgb(229, 229, 233)", + "tabs.tabsManager.--tabsScrollbarThumb": "rgb(195, 195, 201)", + "tabs.tabsManager.--tabsScrollbarThumbHover": "rgb(187, 187, 187)", + + "animation.grid": "rgba(234,234,234,255),#c5ccd2", + "animation.card": "rgba(234,234,234,255),rgba(215,215,216,255)", + "animation.sidebar": "rgba(234,234,234,255),rgba(203,204,209,255)", + "animation.tab": "rgba(234,234,234,255),rgba(203,204,209,255)", + + "settings.active.background": "rgb(220, 220, 220)", + "settings.settingsSidebar.background": "rgba(250, 250, 250, var(--sidebar-transparency))", + "settings.settingsMain.background": "rgba(255, 255, 255, var(--workspace-transparency))", + "settings.numberCtrlInput.background": "#e1e1e1", + "settinns.numberCtrlInput.color": "#000", + "settings.numberCtrlPlus.background": "#f1f1f1", + "settings.numberCtrlPlus.color": "#000", + "settings.numberCtrlMinus.background": "#f1f1f1", + "settings.numberCtrlMinus.color": "#000", + + "contextmenu.background": "#dedee3", + "contextmenu.Color": "inherit", + "contextmenu.contextmenuSubmenu.background": "#d1d1d8", + "contextmenu.contextmenuSubmenu.color": "inherit", + + "favorites.favorite.background": "transparent", + "favorites.favorite.color": "#202124", + "favorites.pendrive.background": "transparent", + "favorites.pendrive.color": "#202124", + "favorites.pendriveTotalCapacity.background": "#eee", + "favorites.pendriveUsedCapacity.background": "#8989e2", + "grid.fileGrid.background": "transparent", + "grid.fileGrid.color": "#202124", + "grid.--selectedGridBorder": "#1e88e5", + "grid.--selectedGridBackground": "#dbdbdc", + "grid.--selectedGridColor": "#202124", + + "preview.background": "#eeeeee", + "preview.color": "#202124", + "preview.previewExitBtn.background": "#dedede", + "preview.previewExitBtn.color": "#202124", + "preview.previewObject.background": "#f3f3f3", + "preview.previewObject.color": "inherit", + "preview.previewObject.--previewObjectTableBorder": "1px solid #ddd", + "preview.previewObject.--previewObjectTableRowEvenBackground": "#ddd", + "preview.previewObject.--previewObjectTableRowEvenColor": "inherit", + "preview.previewObject.--previewObjectTableRowOddBackground": "inherit", + "preview.previewObject.--previewObjectTableRowOddColor": "inherit", + + "properties.background": "#e0e0e0", + "properties.color": "inherit", + + "prompt.background": "#f7f7f7", + "prompt.promptInput.background": "#ebe9e9", + "prompt.promptInput.color": "#87c1ce", + "prompt.promptOk.background": "#3879d9", + "prompt.promptOk.color": "#fff", + "prompt.promptCancel.background": "#87c1ce", + "prompt.promptCancel.color": "#000", + "prompt.promptExitBtn.background": "#ff47f3", "hljs.color": "#383838", "hljs.background": "#f8f8f8", diff --git a/src/Components/Theme/theme.ts b/src/Components/Theme/theme.ts index d1364bf8..6c61af2b 100644 --- a/src/Components/Theme/theme.ts +++ b/src/Components/Theme/theme.ts @@ -61,80 +61,48 @@ const getXYCoordinates = (e: MouseEvent): { x: number; y: number } => { }; }; +const ALLOWED_STYLES = [ + 'background', + 'color', + 'font', + 'border', + 'text', + 'cursor', + 'outline', + '--scrollbar', + '--tabs-scrollbar', + '--preview-object', + '--selected-grid', +]; + /** * Change page theme * @param {string} theme - The current theme * @returns {Promise} */ -const changeTheme = async ( - theme?: string, - category?: - | '*' - | 'root' - | 'windowmanager' - | 'tabbing' - | 'settings' - | 'favorites' - | 'grid' - | 'contextmenu' - | 'prompt' - | 'preview' - | 'properties' - | 'infobar' -): Promise => { +const changeTheme = async (theme?: string, category?: '*' | 'root' | 'tabbing' | 'favorites' | 'grid'): Promise => { if (!category) category = '*'; const appearance = await Storage.get('appearance'); if (category === '*' || category === 'root') { + 1; document.body.style.setProperty('--edge-radius', appearance?.frameStyle === 'os' ? '0px' : '10px'); - changeElementTheme(document.querySelector('.main-box'), 'mainBackground', 'background', theme); - changeElementTheme(document.body, 'textColor', 'color', theme); - if (appearance?.fontSize) { - document.body.style.fontSize = appearance?.fontSize; - document.documentElement.style.fontSize = appearance?.fontSize; - } else changeElementTheme(document.body, 'fontSize', 'fontSize', theme); - if (appearance?.fontFamily) { - document.body.style.fontFamily = appearance?.fontFamily; - document.documentElement.style.fontFamily = appearance?.fontFamily; - } else changeElementTheme(document.body, 'fontFamily', 'fontFamily', theme); - if (appearance?.transparentSidebar ?? true) - document.body.style.setProperty('--sidebar-transparency', appearance?.windowTransparency ?? '0.8'); - if (appearance?.transparentWorkspace ?? false) - document.body.style.setProperty('--workspace-transparency', appearance?.windowTransparency ?? '0.8'); - if (appearance?.transparentTopbar ?? false) document.body.style.setProperty('--topbar-transparency', appearance?.windowTransparency ?? '0.8'); - - document.body.style.setProperty( - '--scrollbar-track', - themeJSON ? themeJSON.scrollbarTrackBackground : defaultThemeJSON[theme]?.scrollbarTrackBackground - ); - document.body.style.setProperty( - '--scrollbar-thumb', - themeJSON ? themeJSON.scrollbarThumbBackground : defaultThemeJSON[theme]?.scrollbarThumbBackground - ); - document.body.style.setProperty( - '--scrollbar-thumb-hover', - themeJSON ? themeJSON.scrollbarThumbHoverBackground : defaultThemeJSON[theme]?.scrollbarThumbHoverBackground - ); + document.body.style.fontSize = appearance?.fontSize ?? '16px'; + document.documentElement.style.fontSize = appearance?.fontSize ?? '16px'; + document.body.style.fontFamily = appearance?.fontFamily ?? 'system-ui'; + document.documentElement.style.fontFamily = appearance?.fontFamily ?? 'system-ui'; document.body.style.setProperty( - '--selected-grid-border', - themeJSON ? themeJSON.selectedGridBorder : defaultThemeJSON[theme]?.selectedGridBorder + '--sidebar-transparency', + appearance?.transparentSidebar ?? true ? appearance?.windowTransparency ?? '0.8' : '1' ); document.body.style.setProperty( - '--selected-grid-background', - themeJSON ? themeJSON.selectedGridBackground : defaultThemeJSON[theme]?.selectedGridBackground + '--workspace-transparency', + appearance?.transparentWorkspace ?? false ? appearance?.windowTransparency ?? '0.8' : '1' ); document.body.style.setProperty( - '--selected-grid-color', - themeJSON ? themeJSON.selectedGridColor : defaultThemeJSON[theme]?.selectedGridColor + '--topbar-transparency', + appearance?.transparentTopbar ?? false ? appearance?.windowTransparency ?? '0.8' : '1' ); - changeElementTheme(document.querySelector('.loading-bar'), 'loadingBar', 'background', theme); - changeElementTheme(document.querySelector('.loader'), 'loader', 'background', theme); - - changeElementTheme(document.querySelector('.topbar'), 'topbarBackground', 'background', theme); - changeElementTheme(document.querySelector('.sidebar'), 'sidebarBackground', 'background', theme); - changeElementTheme(document.querySelector('.sidebar-setting-btn'), 'settingButtonBackground', 'background', theme); - changeElementTheme(document.querySelector('.sidebar-setting-btn'), 'settingButtonColor', 'color', theme); - document.querySelectorAll('.sidebar-hover-effect').forEach((obj) => { obj.style.borderRadius = '6px'; changeElementTheme(obj, 'sidebarBackground', 'background', theme); @@ -147,12 +115,9 @@ const changeTheme = async ( const elementIsActive = obj.classList.contains('active'); if (elementIsActive) obj.onmouseleave = null; else { - obj.style.background = `radial-gradient(circle at ${x}px ${y}px, ${getElementStyle( - 'sidebarHoverEffectBackground', - currentTheme - )} )`; + obj.style.background = `radial-gradient(circle at ${x}px ${y}px, ${getElementStyle('animation.sidebar', currentTheme)} )`; obj.onmouseleave = () => { - obj.style.background = getElementStyle('sidebarBackground', currentTheme); + obj.style.background = null; obj.style.borderImage = null; }; } @@ -160,58 +125,61 @@ const changeTheme = async ( } }); - const style = document.querySelector('style#theme-style') ?? document.createElement('style'); - style.id = 'theme-style'; + const style = document.querySelector('style#root') ?? document.createElement('style'); + style.id = 'root'; let styles = ''; + + // Generate CSS styles from user theme for (const key of Object.keys(themeJSON ?? defaultThemeJSON[theme])) { const value = themeJSON ? themeJSON[key] : defaultThemeJSON[theme]?.[key]; + const formalKey = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase()); + const styleKey = formalKey.split('.').at(-1); if (key.startsWith('hljs')) { - const formalKey = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase()); - const styleKey = formalKey.split('.').at(-1); const className = formalKey.split('.').slice(0, -1).join('.').replace('hljs.', 'hljs-'); styles += `.${className} { ${styleKey}: ${value}; }\n`; + } else { + for (const _category of [ + 'root', + 'windowmanager', + 'tabs', + 'settings', + 'favorites', + 'grid', + 'contextmenu', + 'prompt', + 'preview', + 'properties', + ]) { + if (key.startsWith(_category)) { + const usingClassName = formalKey[_category.length] === '.'; + const className = formalKey.split('.').slice(1, -1).join('.'); + const idName = formalKey.split('#').slice(1).join('#').split('.')[0]; + for (const allowed_style of ALLOWED_STYLES) { + if (styleKey.startsWith(allowed_style)) { + if (styleKey.startsWith('--')) { + styles += `:root { ${styleKey}: ${value}; }\n`; + } else { + styles += `${ + usingClassName + ? className === '' + ? _category === 'root' + ? ':root' + : '.' + _category + : '.' + className + : '#' + idName + }{ ${styleKey}: ${value}; }\n`; + } + break; + } + } + } + } } } style.innerHTML = styles; if (!document.head.contains(style)) document.head.appendChild(style); } - if (category === '*' || category === 'windowmanager') { - changeElementTheme(document.querySelector('#minimize'), 'minimizeBackground', 'background', theme); - changeElementTheme(document.querySelector('#minimize'), 'minimizeColor', 'color', theme); - changeElementTheme(document.querySelector('#maximize'), 'maximizeBackground', 'background', theme); - changeElementTheme(document.querySelector('#maximize'), 'maximizeColor', 'color', theme); - changeElementTheme(document.querySelector('#exit'), 'exitBackground', 'background', theme); - changeElementTheme(document.querySelector('#exit'), 'exitColor', 'color', theme); - changeElementTheme(document.querySelector('#go-back'), 'navigatorBackground', 'background', theme); - changeElementTheme(document.querySelector('#go-back'), 'navigatorColor', 'color', theme); - changeElementTheme(document.querySelector('#go-forward'), 'navigatorBackground', 'background', theme); - changeElementTheme(document.querySelector('#go-forward'), 'navigatorColor', 'color', theme); - changeElementTheme(document.querySelector('#refresh'), 'navigatorBackground', 'background', theme); - changeElementTheme(document.querySelector('#refresh'), 'navigatorColor', 'color', theme); - } if (category === '*' || category === 'tabbing') { - changeElementTheme(document.querySelector('.create-new-tab'), 'newTabBackground', 'background', theme); - changeElementTheme(document.querySelector('.create-new-tab'), 'newTabColor', 'color', theme); - changeElementTheme(document.querySelector('.path-navigator'), 'pathNavigatorBackground', 'background', theme); - changeElementTheme(document.querySelector('.path-navigator'), 'pathNavigatorColor', 'color', theme); - changeElementTheme(document.querySelector('.search-bar'), 'searchBarBackground', 'background', theme); - changeElementTheme(document.querySelector('.search-bar'), 'searchBarColor', 'color', theme); - document - .querySelector('.tabs-manager') - .style.setProperty('--tabs-scrollbar-track', themeJSON ? themeJSON.tabsScrollbarTrack : defaultThemeJSON[theme]?.tabsScrollbarTrack); - document - .querySelector('.tabs-manager') - .style.setProperty('--tabs-scrollbar-thumb', themeJSON ? themeJSON.tabsScrollbarThumb : defaultThemeJSON[theme]?.tabsScrollbarThumb); - document - .querySelector('.tabs-manager') - .style.setProperty( - '--tabs-scrollbar-thumb-hover', - themeJSON ? themeJSON.tabsScrollbarThumbHover : defaultThemeJSON[theme]?.tabsScrollbarThumbHover - ); - document.querySelectorAll('.tab').forEach((tab) => { - changeElementTheme(tab, 'tabBackground', 'background', theme); - changeElementTheme(tab, 'tabColor', 'color', theme); - }); document.querySelectorAll('.tab-hover-effect').forEach((obj) => { changeElementTheme(obj, 'tabBackground', 'background', theme); if (obj.getAttribute('being-listened') !== 'true') { @@ -220,109 +188,23 @@ const changeTheme = async ( const rect = (e.target as Element).getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; - obj.style.background = `radial-gradient(circle at ${x}px ${y}px, ${getElementStyle('tabHoverEffectBackground', currentTheme)} )`; + obj.style.background = `radial-gradient(circle at ${x}px ${y}px, ${getElementStyle('animation.tab', currentTheme)} )`; obj.onmouseleave = () => { - obj.style.background = getElementStyle('tabBackground', currentTheme); + obj.style.background = null; obj.style.borderImage = null; }; }); } }); } - if (category === '*' || category === 'settings') { - changeElementTheme(document.querySelector('.settings-sidebar'), 'settingsSidebarBackground', 'background', theme); - changeElementTheme(document.querySelector('.settings-main'), 'settingsMainBackground', 'background', theme); - changeElementTheme(document.querySelector('.active'), 'settingsActiveTab', 'background', theme); - changeElementTheme(document.querySelector('.number-ctrl-minus'), 'settingsNumberCtrlControllerBackground', 'background', theme); - changeElementTheme(document.querySelector('.number-ctrl-plus'), 'settingsNumberCtrlControllerBackground', 'background', theme); - changeElementTheme(document.querySelector('.number-ctrl-input'), 'settingsNumberCtrlInputBackground', 'background', theme); - changeElementTheme(document.querySelector('.number-ctrl-minus'), 'settingsNumberCtrlControllerColor', 'color', theme); - changeElementTheme(document.querySelector('.number-ctrl-plus'), 'settingsNumberCtrlControllerColor', 'color', theme); - changeElementTheme(document.querySelector('.number-ctrl-input'), 'settingsNumberCtrlInputColor', 'color', theme); - } - if (category === '*' || category === 'contextmenu') { - changeElementTheme(document.querySelector('.contextmenu'), 'contextMenuBackground', 'background', theme); - changeElementTheme(document.querySelector('.contextmenu'), 'contextMenuColor', 'color', theme); - document.querySelectorAll('.contextmenu-submenu').forEach((submenu) => { - changeElementTheme(submenu, 'contextMenuSubmenuBackground', 'background', theme); - changeElementTheme(submenu, 'contextMenuSubmenuColor', 'color', theme); - }); - } - if (category === '*' || category === 'preview') { - changeElementTheme(document.querySelector('.preview'), 'previewFileBackground', 'background', theme); - changeElementTheme(document.querySelector('.preview'), 'previewFileColor', 'color', theme); - changeElementTheme(document.querySelector('.preview-exit-btn'), 'previewExitButtonBackground', 'background', theme); - changeElementTheme(document.querySelector('.preview-exit-btn'), 'previewExitButtonColor', 'color', theme); - changeElementTheme(document.querySelector('.preview-object'), 'previewObjectBackground', 'background', theme); - changeElementTheme(document.querySelector('.preview-object'), 'previewObjectColor', 'color', theme); - document - .querySelector('.preview-object') - ?.style?.setProperty( - '--preview-object-table-border', - themeJSON ? themeJSON.previewObjectTableBorder : defaultThemeJSON[theme].previewObjectTableBorder - ); - document - .querySelector('.preview-object') - ?.style?.setProperty( - '--preview-object-table-row-even-bg', - themeJSON ? themeJSON.previewObjectTableRowEvenBackground : defaultThemeJSON[theme].previewObjectTableRowEvenBackground - ); - document - .querySelector('.preview-object') - ?.style?.setProperty( - '--preview-object-table-row-even-color', - themeJSON ? themeJSON.previewObjectTableRowEvenColor : defaultThemeJSON[theme].previewObjectTableRowEvenColor - ); - document - .querySelector('.preview-object') - ?.style?.setProperty( - '--preview-object-table-row-odd-bg', - themeJSON ? themeJSON.previewObjectTableRowOddBackground : defaultThemeJSON[theme].previewObjectTableRowOddBackground - ); - document - .querySelector('.preview-object') - ?.style?.setProperty( - '--preview-object-table-row-odd-color', - themeJSON ? themeJSON.previewObjectTableRowOddColor : defaultThemeJSON[theme].previewObjectTableRowOddColor - ); - document - .querySelector('.preview-object') - ?.setAttribute('data-theme-category', themeJSON ? themeJSON.themeCategory : defaultThemeJSON[theme].themeCategory); - } - if (category === '*' || category === 'properties') { - changeElementTheme(document.querySelector('.properties'), 'propertiesBackground', 'background', theme); - } - if (category === '*' || category === 'prompt') { - changeElementTheme(document.querySelector('.prompt'), 'promptBackground', 'background', theme); - changeElementTheme(document.querySelector('.prompt-input'), 'promptInputColor', 'color', theme); - changeElementTheme(document.querySelector('.prompt-input'), 'promptInputBackground', 'background', theme); - changeElementTheme(document.querySelector('.prompt-exit-btn'), 'exitBackground', 'background', theme); - changeElementTheme(document.querySelector('.prompt-exit-btn'), 'exitColor', 'color', theme); - changeElementTheme(document.querySelector('.prompt-ok'), 'promptOkColor', 'color', theme); - changeElementTheme(document.querySelector('.prompt-ok'), 'promptOkBackground', 'background', theme); - } if (category === '*' || category === 'favorites') { - document.querySelectorAll('.favorite').forEach((favorite) => { - changeElementTheme(favorite, 'favoriteBackground', 'background', theme); - changeElementTheme(favorite, 'favoriteColor', 'color', theme); - }); - document.querySelectorAll('.pendrive').forEach((pendrive) => { - changeElementTheme(pendrive, 'pendriveBackground', 'background', theme); - changeElementTheme(pendrive, 'pendriveColor', 'color', theme); - }); - document.querySelectorAll('.pendrive-total-capacity').forEach((bar) => { - changeElementTheme(bar, 'pendriveTotalCapacityBackground', 'background', theme); - }); - document.querySelectorAll('.pendrive-used-capacity').forEach((bar) => { - changeElementTheme(bar, 'pendriveUsedCapacityBackground', 'background', theme); - }); document.querySelectorAll('.card-hover-effect').forEach((obj) => { if (obj.getAttribute('being-listened') !== 'true') { obj.setAttribute('being-listened', 'true'); obj.addEventListener('mousemove', (e) => { const { x, y } = getXYCoordinates(e); - obj.style.background = `radial-gradient(circle at ${x}px ${y}px, ${getElementStyle('cardHoverEffectBackground', currentTheme)} )`; + obj.style.background = `radial-gradient(circle at ${x}px ${y}px, ${getElementStyle('animation.card', currentTheme)} )`; obj.onmouseleave = () => { obj.style.background = null; obj.style.borderImage = null; @@ -339,22 +221,14 @@ const changeTheme = async ( obj.addEventListener('mousemove', (e) => { const { x, y } = getXYCoordinates(e); - obj.style.background = `radial-gradient(circle at ${x}px ${y}px, ${getElementStyle('gridHoverEffectBackground', currentTheme)} )`; + obj.style.background = `radial-gradient(circle at ${x}px ${y}px, ${getElementStyle('animation.grid', currentTheme)} )`; obj.onmouseleave = () => { - obj.style.background = getElementStyle('gridBackground', currentTheme); + obj.style.background = null; obj.style.borderImage = null; }; }); } }); - document.querySelectorAll('.file-grid').forEach((grid) => { - changeElementTheme(grid, 'gridBackground', 'background', theme); - changeElementTheme(grid, 'gridColor', 'color', theme); - }); - } - if (category === '*' || category === 'infobar') { - changeElementTheme(document.querySelector('.infobar'), 'infobarBackground', 'background', theme); - changeElementTheme(document.querySelector('.infobar'), 'infobarColor', 'color', theme); } return; @@ -364,22 +238,7 @@ const changeTheme = async ( * Update the entire page theme * @returns {Promise} */ -const updateTheme = async ( - category?: - | '*' - | 'root' - | 'windowmanager' - | 'tabbing' - | 'settings' - | 'favorites' - | 'grid' - | 'contextmenu' - | 'prompt' - | 'preview' - | 'properties' - | 'infobar', - customStyleSheet?: JSON -): Promise => { +const updateTheme = async (category?: '*' | 'root' | 'tabbing' | 'favorites' | 'grid', customStyleSheet?: JSON): Promise => { const data: themeData = await Storage.get('theme'); if (customStyleSheet) { themeJSON = customStyleSheet as unknown as themeValue;