refactor: new way to customize theme

kimlimjustin · Dec 15, 2021 · e3a7755 · e3a7755
1 parent 24798ae
commit e3a7755
Show file tree

Hide file tree

Showing 23 changed files with 827 additions and 942 deletions.
diff --git a/example/themes/shades of purple/package.json b/example/themes/shades of purple/package.json
@@ -6,15 +6,14 @@
 	"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": {
 		"themes": [
 			{
 				"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
@@ -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
@@ -14,7 +14,6 @@
 			{
 				"identifier": "winter",
 				"name": "Winter",
-				"category": "light",
 				"path": "./themes/winter-color-theme.json"
 			}
 		]