@setoelkahfi / svara / commits / 73375e5

style: update theme handling

feat: added light theme Signed-off-by: mellobacon <mellodev@outlook.com>

mellobacon committed Nov 29, 2023 at 21:49 UTC 73375e5e2ec430ad18c41ea3f157456eb96545b2
22 files changed +364 -123
src/App.svelte
+2
@@ -13,6 +13,7 @@
13 import { loadDefaultSettings } from "./config/config";
14 import { error } from "tauri-plugin-log-api";
15 import ToolView from "./lib/ToolView.svelte";
16 + import { getExtensions } from "./config/extensionhandler";
17 let resolution = writable(0);
18
19 let minPanelSize = 10;
@@ -20,6 +21,7 @@
21 let bottomPanelSize = 20;
22
23 onMount(async () => {
24 + getExtensions();
25 await loadDefaultSettings();
26 let size = await appWindow.innerSize();
27 resolution.set(size.width);
src/config/extensionhandler.ts new
+14
@@ -0,0 +1,14 @@
1 +import { writable } from 'svelte/store';
2 +
3 +export let themes = writable([]);
4 +export async function getExtensions() {
5 + // get default themes
6 + let default_themes = [];
7 + let themes_dir = await import("./extensions/default_themes/package.json");
8 + let id = 0;
9 + for (let theme of themes_dir["theme"]) {
10 + let theme_data = {id: id++, name: theme['theme-name'], scheme: theme['color-scheme'], path: theme.path};
11 + default_themes = [...default_themes, theme_data];
12 + }
13 + themes.set(default_themes);
14 +}
src/config/extensions/default_themes/package.json new
+20
@@ -0,0 +1,20 @@
1 +{
2 + "name": "default_themes",
3 + "author": "mellobacon",
4 + "version": "0.1.0",
5 + "description": "",
6 + "theme": [
7 + {
8 + "theme-name": "Dark",
9 + "identifier": "default_dark",
10 + "path": "./themes/default_dark.json",
11 + "color-scheme": "dark"
12 + },
13 + {
14 + "theme-name": "Light",
15 + "identifier": "default_light",
16 + "path": "./themes/default_light.json",
17 + "color-scheme": "light"
18 + }
19 + ]
20 +}
\ No newline at end of file
src/config/extensions/default_themes/themes/default_dark.json renamed
+36 -4
@@ -6,6 +6,7 @@
6 "foreground": "#ffffff",
7 "background": "#171717",
8 "borderColor": "#414040",
9 + "accent": "#376ba3",
10 "dropdownBackground": "#2D2D2D",
11 "dropdownButtonBackground": "#2D2D2D",
12 "dropdownButtonForeground": "#ffffff",
@@ -17,12 +18,31 @@
18 "inputBorder": "#6f6f6f",
19 "inputFocusBorder": "#34b0f8",
20 "inputLabelForeground": "#c6c6c6",
20 - "scrollbarBackground": "#4c4c4c38"
21 + "scrollbarBackground": "#4c4c4c38",
22 + "inputPlaceholderForeground": "#8C8C8C",
23 + "selectBackground": "#1f1f1f",
24 + "selectButtonBackground": "#333",
25 + "selectButtonForeground": "#ffffff",
26 + "selectItemHoverBackground": "#373737",
27 + "selectItemHoverForeground": "#ffffff",
28 + "buttonBackground": "#222222",
29 + "buttonForeground": "#ffffff",
30 + "buttonHoverBackground": "#323232",
31 + "buttonHoverForeground": "#ffffff",
32 + "boxShadow": "#000000cc",
33 + "menuShortcutForeground": "#8c8c8c",
34 + "disabledTextForeground": "#6b6b6b",
35 + "invalidTextForeground": "#fa4d56",
36 + "readonlyTextForeground": "#2d2d2d",
37 + "linkForeground": "#939393",
38 + "linkHoverForeground": "#4d73ad",
39 + "descriptionForeground": "#939393"
40 },
41 "header": {
42 "background": "#2D2D2D",
43 "foreground": "#ffffff",
25 - "buttonHoverBackground": "#414040"
44 + "buttonHoverBackground": "#414040",
45 + "borderColor": "#1d1d1d"
46 },
47 "sidebar": {
48 "background": "#171717",
@@ -35,7 +55,9 @@
55 },
56 "statusbar": {
57 "background": "#171717",
38 - "foreground": "#ffffff"
58 + "foreground": "#8c8c8c",
59 + "buttonBackgroundHover": "#414040",
60 + "buttonForegroundHover": "#ffffff"
61 },
62 "editor": {
63 "background": "#171717",
@@ -53,7 +75,8 @@
75 "gutterForeground": "#898989",
76 "gutterActiveForeground": "#ffffff",
77 "gutterActiveBackground": "#212121",
56 - "activeLineBackground": "#212121"
78 + "activeLineBackground": "#212121",
79 + "activeLineBorder": ""
80 },
81 "filetree": {
82 "treeNodeBackground": "",
@@ -62,6 +85,15 @@
85 "treeNodeHoverForeground": "#ffffff",
86 "treeNodeSelectedBackground": "#353535",
87 "treeNodeSelectedForeground": "#34b0f8"
88 + },
89 + "modal": {
90 + "background": "#fdfdfd",
91 + "foreground": "#000000",
92 + "shadow": "#acacac50",
93 + "buttonBackground": "#2276b2",
94 + "buttonForeground": "#f9f9f9",
95 + "buttonHoverBackground": "#1c88d4",
96 + "buttonHoverForeground": "#000000"
97 }
98 }
99 }
src/config/extensions/default_themes/themes/default_light.json new
+99
@@ -0,0 +1,99 @@
1 +{
2 + "theme-name": "Light",
3 + "author": "mellobacon",
4 + "theme": {
5 + "window": {
6 + "foreground": "#505050",
7 + "background": "#FAFAFA",
8 + "borderColor": "#DDDDDD",
9 + "accent": "#0079AD",
10 + "dropdownBackground": "#E9E9E9",
11 + "dropdownButtonBackground": "#E9E9E9",
12 + "dropdownButtonForeground": "#4B4B4B",
13 + "dropdownButtonHoverForeground": "#d6d6d6",
14 + "dropdownItemHoverBackground": "#d6d6d6",
15 + "dropdownItemHoverForeground": "#000000",
16 + "inputBackground": "#E9E9E9",
17 + "inputForeground": "#505050",
18 + "inputBorder": "#D6D6D6",
19 + "inputFocusBorder": "#34b0f8",
20 + "inputLabelForeground": "#000000",
21 + "scrollbarBackground": "#4c4c4c38",
22 + "inputPlaceholderForeground": "#8C8C8C",
23 + "selectBackground": "#d6d6d6",
24 + "selectButtonBackground": "#DDDDDD",
25 + "selectButtonForeground": "#000000",
26 + "selectItemHoverBackground": "#e9e9e9",
27 + "selectItemHoverForeground": "#000000",
28 + "buttonBackground": "#e5e5e5",
29 + "buttonForeground": "#000000",
30 + "buttonHoverBackground": "#d3d3d3",
31 + "buttonHoverForeground": "#000000",
32 + "boxShadow": "#000000cc",
33 + "menuShortcutForeground": "#8c8c8c",
34 + "disabledTextForeground": "#6b6b6b",
35 + "invalidTextForeground": "#fa4d56",
36 + "readonlyTextForeground": "#2d2d2d",
37 + "linkForeground": "#939393",
38 + "linkHoverForeground": "#4d73ad",
39 + "descriptionForeground": "#939393"
40 + },
41 + "header": {
42 + "background": "#F0F0F0",
43 + "foreground": "#000000",
44 + "buttonHoverBackground": "#d6d6d6",
45 + "borderColor": "#d6d6d6"
46 + },
47 + "sidebar": {
48 + "background": "#FAFAFA",
49 + "foreground": "#000000",
50 + "tabHoverBackground": "#d3d3d3",
51 + "tabHoverForeground": "#000000",
52 + "tabActiveBackground": "#326ed6",
53 + "tabActiveForeground": "#ffffff",
54 + "tabActiveBorder": ""
55 + },
56 + "statusbar": {
57 + "background": "#FAFAFA",
58 + "foreground": "#000000",
59 + "buttonBackgroundHover": "#e9e9e9",
60 + "buttonForegroundHover": "#000000"
61 + },
62 + "editor": {
63 + "background": "#FAFAFA",
64 + "foreground": "#212121",
65 + "tabContainerBackground": "#2D2D2D",
66 + "tabBackground": "#F0F0F0",
67 + "tabForeground": "#000000",
68 + "tabBorderColor": "#DDDDDD",
69 + "tabActiveBorderColor": "#34b0f8",
70 + "tabActiveBackground": "#FAFAFA",
71 + "tabActiveForeground": "#212121",
72 + "tabHoverBackground": "#e9e9e9",
73 + "tabHoverForeground": "#212121",
74 + "tabSaveStateColor": "#000000",
75 + "gutterForeground": "#6E6E6E",
76 + "gutterActiveForeground": "#000000",
77 + "gutterActiveBackground": "#7e7e7e2b",
78 + "activeLineBackground": "#7e7e7e2b",
79 + "activeLineBorder": ""
80 + },
81 + "filetree": {
82 + "treeNodeBackground": "",
83 + "treeNodeForeground": "#3D3D3D",
84 + "treeNodeHoverBackground": "#d6d6d6",
85 + "treeNodeHoverForeground": "#000000",
86 + "treeNodeSelectedBackground": "#C1C1C1",
87 + "treeNodeSelectedForeground": "#000000"
88 + },
89 + "modal": {
90 + "background": "#fdfdfd",
91 + "foreground": "#000000",
92 + "shadow": "#acacac50",
93 + "buttonBackground": "#2276b2",
94 + "buttonForeground": "#f9f9f9",
95 + "buttonHoverBackground": "#1c88d4",
96 + "buttonHoverForeground": "#f9f9f9"
97 + }
98 + }
99 +}
src/config/themehandler.ts
+20 -10
@@ -1,20 +1,31 @@
1 -import { themes } from "./themes/themes";
1 +import { homeDir, join } from "@tauri-apps/api/path";
2 +import { themes } from "./extensionhandler";
3 import { info } from "tauri-plugin-log-api";
4 +import { exists, readDir } from "@tauri-apps/api/fs";
5 +import { get } from "svelte/store";
6
7 export function getThemes() {
5 - let themelist = [];
6 - let id = 0;
7 - for (const theme of themes) {
8 - themelist = [...themelist, {id: id, name: theme["theme-name"]}];
9 - id++;
10 - }
11 - return themelist;
8 + return get(themes);
9 }
10
11 const stylesheet = document.styleSheets[0].cssRules[0] as CSSStyleRule;
12 export async function loadTheme(name: string) {
13 + let theme = get(themes).find(n => n.name === name);
14 info(`Loading theme: ${name}...`, {file: "themehandler.ts", line: 16});
17 - let json = await import(`../config/themes/${name.toLowerCase()}-theme.json`);
15 +
16 + // load base theme
17 + let json = await import(`./extensions/default_themes/themes/default_${theme.scheme}.json`);
18 + processStyles(json);
19 +
20 + // load custom theme if it exists
21 + //const path = await join(await homeDir(), ".nucleus", "extensions");
22 + //if (await exists(path)) {
23 + //const custom_themes = await readDir(path);
24 + //}
25 +
26 + info("Theme loaded sucessfully.", {file: "themehandler.ts", line: 35});
27 +}
28 +function processStyles(json) {
29 const theme = Object.entries(json.theme);
30 for (const entries of theme) {
31 const category = entries[0];
@@ -32,7 +43,6 @@ export async function loadTheme(name: string) {
43 }
44 }
45 }
35 - info("Theme loaded sucessfully.", {file: "themehandler.ts", line: 35});
46 }
47 export function getThemeProperty(styleName: string) {
48 for (const style of stylesheet.style) {
src/config/themes/themes.ts deleted
-6
@@ -1,6 +0,0 @@
1 -export const themes = [
2 - {
3 - "theme-name": "Dark",
4 - "theme-id": "dark"
5 - },
6 -]
\ No newline at end of file
src/lib/EditorTabList.svelte
-1
@@ -122,7 +122,6 @@
122 height: 100%;
123 display: flex;
124 align-items: center;
125 - color: white;
125 padding: 0 5px;
126 }
127 </style>
\ No newline at end of file
src/lib/FileTree.svelte
-5
@@ -69,8 +69,6 @@
69
70 <style lang="scss">
71 .toolbar-button {
72 - background-color: #222222;
73 - color: #fff;
72 font-family: inherit;
73 text-align: center;
74 padding: 7px 30px;
@@ -81,9 +79,6 @@
79 padding: 5px 25px;
80 font-size: 0.875rem;
81 border-radius: 2px;
84 - &:hover {
85 - background-color: #323232;
86 - }
82 &:focus {
83 outline-color: #2276b2;
84 }
src/lib/Header.svelte
-4
@@ -176,11 +176,7 @@
176 text-align: center;
177 padding: 0 5px;
178 font-size: 0.875rem;
179 - color: white;
179 cursor: pointer;
181 - &:not(#close):hover {
182 - background-color: #262626;
183 - }
180 &#close:hover {
181 background-color: #ff3131;
182 }
src/lib/Settings.svelte
+1 -4
@@ -25,7 +25,7 @@
25 await appSettings.save();
26 }
27 async function handleThemeSelect(e) {
28 - await appSettings.set("nucleus.theme", e.detail.selection);
28 + await appSettings.set("nucleus.theme", e.detail.selection.name);
29 await appSettings.save();
30 }
31 async function handleInput(e) {
@@ -78,7 +78,6 @@
78 display: none !important;
79 }
80 .settings-container {
81 - background-color: #171717;
81 height: 100%;
82 display: flex;
83 }
@@ -98,7 +97,6 @@
97 .settings-directory {
98 min-width: 13rem;
99 height: 100%;
101 - border-right: 0.5px solid #333;
100 overflow: hidden;
101 display: flex;
102 align-items: center;
@@ -123,7 +121,6 @@
121 &::after {
122 height: 0.05rem;
123 width: 100%;
126 - background-color: #333;
124 content: "";
125 display: block;
126 margin-top: 10px;
src/lib/Sidebar.svelte
-1
@@ -68,7 +68,6 @@
68 .divider {
69 width: 2.3rem;
70 height: .0625rem;
71 - background-color: #333;
71 margin: 0 auto;
72 }
73 </style>
\ No newline at end of file
src/lib/SidebarView.svelte
-1
@@ -37,7 +37,6 @@
37 width: 100%;
38 height: 15%;
39 justify-self: end;
40 - background-color: #171717;
40 border-top: #414040 1px solid;
41 border-left: #414040 1px solid;
42 border-bottom: #414040 1px solid;
src/lib/Statusbar.svelte
-4
@@ -78,7 +78,6 @@
78 }
79 }
80 #title {
81 - color: #8c8c8c;
81 display: flex;
82 justify-content: flex-start;
83 align-items: center;
@@ -102,10 +101,8 @@
101 height: 100%;
102 padding: 0 5px;
103 position: relative;
105 - color: #8c8c8c;
104 &:hover {
105 cursor: pointer;
108 - background-color: #363636;
106 }
107 }
108 span {
@@ -121,7 +118,6 @@
118 flex-grow: 1;
119 font-size: 13px;
120 height: 100%;
124 - color: #8c8c8c;
121 span {
122 padding: 0 7px;
123 height: 100%;
src/lib/Tab/Tab.svelte
-1
@@ -100,7 +100,6 @@
100 }
101 }
102 .close-tab span:hover {
103 - background-color: #414040;
103 transition: 0.1s;
104 border-radius: 3px;
105 }
src/lib/utility/ContextMenu.svelte
-4
@@ -87,7 +87,6 @@
87 padding: 0.25rem;
88 z-index: 9999;
89 position: absolute;
90 - box-shadow: 0 2px 6px rgba(0, 0, 0, .8);
90 border-radius: 3px;
91 }
92 .context-menu-option {
@@ -104,12 +103,9 @@
103 padding: 0 10px;
104 }
105 .option-shortcut {
107 - color: #8c8c8c;
106 margin-left: 10px;
109 -
107 }
108 .disabled {
112 - color: #6b6b6b;
109 cursor: not-allowed;
110 }
111 </style>
\ No newline at end of file
src/lib/utility/Dropdown.svelte
-3
@@ -81,7 +81,6 @@
81 min-width: 11.5rem;
82 width: max-content;
83 align-items: center;
84 - box-shadow: 0 2px 6px rgba(0, 0, 0, .8);
84 border-radius: 3px;
85 z-index: 9999;
86 }
@@ -99,11 +98,9 @@
98 padding: 0 10px;
99 }
100 .shortcut {
102 - color: #8c8c8c;
101 margin-left: 20px;
102 }
103 .disabled {
106 - color: #6b6b6b;
104 cursor: not-allowed;
105 }
106 </style>
\ No newline at end of file
src/lib/utility/Input.svelte
-5
@@ -53,7 +53,6 @@
53 </div>
54
55 <style lang="scss">
56 - $invalid-color: #fa4d56;
56 .input-container {
57 display: flex;
58 flex-direction: column;
@@ -78,12 +77,8 @@
77 .hint-text {
78 padding: 0 2px;
79 font-size: 0.9rem;
81 - &.invalid {
82 - color: $invalid-color;
83 - }
80 }
81 .readonly {
82 cursor: not-allowed;
87 - background-color: #2d2d2d;
83 }
84 </style>
\ No newline at end of file
src/lib/utility/NotSupported.svelte
-9
@@ -15,7 +15,6 @@
15
16 <style lang="scss">
17 .container {
18 - background-color: #171717;
18 height: 100%;
19 display: flex;
20 .unsupported {
@@ -28,20 +27,12 @@
27 :global(svg) {
28 width: 48px;
29 height: 48px;
31 - color: #376ba3;
30 padding: 20px 0;
31 }
34 - .desc {
35 - color: #939393;
36 - }
32 .link {
33 font-size: 0.9rem;
39 - color: #939393;
34 cursor: pointer;
35 text-decoration: underline;
42 - &:hover {
43 - color: #4d73ad;
44 - }
36 padding: 5px 0;
37 }
38 }
src/lib/utility/Popup.svelte
-10
@@ -48,14 +48,12 @@
48 align-items: center;
49 width: 100vw;
50 height: 100vh;
51 - background-color: rgba(0, 0, 0, 0.521);
51 z-index: 3;
52 }
53 .popup-container {
54 position: static;
55 min-height: 25%;
56 min-width: 45%;
58 - background-color: #262626;
57 border-radius: 2px;
58 }
59 @media(min-width: 42rem) {
@@ -110,16 +108,8 @@
108 display: flex;
109 justify-content: center;
110 align-items: center;
113 - background-color: #2276b2;
114 - color: #f9f9f9;
111 cursor: pointer;
112 padding: 0 10px;
117 - &:hover {
118 - background-color: #1c88d4;
119 - }
120 - &:focus {
121 - outline-color: #2276b2;
122 - }
113 }
114 }
115 }
src/lib/utility/Select.svelte
+4 -10
@@ -14,9 +14,10 @@
14 export let selected = items[0].name;
15 const default_value = selected;
16
17 - function handleSelect(name) {
17 + function handleSelect(item) {
18 + const name = item.name;
19 selected = name;
19 - dispatch("select", {selection: name});
20 + dispatch("select", {selection: item});
21 }
22
23 afterUpdate(() => {
@@ -47,7 +48,7 @@
48 {#each items as item}
49 <!-- svelte-ignore a11y-click-events-have-key-events -->
50 <div id={item.id.toString()} class="item" on:click={() => {
50 - handleSelect(item.name);
51 + handleSelect(item);
52 open = false;
53 }}>
54 {item.name}
@@ -80,13 +81,11 @@
81 .select-list {
82 min-width: 7rem;
83 button {
83 - color: white;
84 display: flex;
85 align-items: center;
86 justify-content: center;
87 min-height: 2rem;
88 width: 100%;
89 - background-color: #333;
89 padding: 0 20px;
90 span {
91 display: flex;
@@ -104,8 +103,6 @@
103 }
104 .item-list {
105 position: absolute;
107 - border: 1px solid #333;
108 - background-color: #1f1f1f;
106 max-height: 15rem;
107 overflow-y: overlay;
108 min-width: 20rem;
@@ -123,9 +120,6 @@
120 justify-content: space-between;
121 cursor: pointer;
122 padding: 0 20px;
126 - &:hover {
127 - background-color: #373737;
128 - }
123 }
124 }
125 .default {
src/theme.scss
+168 -41
@@ -3,63 +3,93 @@ $statusbar-height: 1.5rem;
3 $tab-container-height: 2rem;
4
5 :root {
6 - --window-foreground: #ffffff;
7 - --window-background: #171717;
8 - --window-borderColor: #414040;
9 -
10 - --window-dropdownBackground: #2D2D2D;
11 - --window-dropdownButtonBackground: #2D2D2D;
12 - --window-dropdownButtonHoverForeground: #ffffff;
13 - --window-dropdownItemHoverBackground: #171717;
14 - --window-dropdownItemHoverForeground: #ffffff;
6 + --window-foreground: "";
7 + --window-background: "";
8 + --window-borderColor: "";
9 + --window-accent: "";
10 +
11 + --window-dropdownBackground: "";
12 + --window-dropdownButtonBackground: "";
13 + --window-dropdownButtonHoverForeground: "";
14 + --window-dropdownItemHoverBackground: "";
15 + --window-dropdownItemHoverForeground: "";
16 --window-inputBackground: "";
17 --window-inputForeground: "";
18 --window-inputBorder: "";
19 --window-inputFocusBorder: "";
20 --window-inputLabelForeground: "";
21 --window-scrollbar-backgroundColor: #eeffff17;
22 + --window-selectBackground: "";
23 + --window-selectForeground: "";
24 + --window-selectButtonBackground: "";
25 + --window-selectButtonForeground: "";
26 + --window-selectItemHoverBackground: "";
27 + --window-selectItemHoverForeground: "";
28 + --window-buttonBackground: "";
29 + --window-buttonForeground: "";
30 + --window-buttonHoverBackground: "";
31 + --window-buttonHoverForeground: "";
32 + --window-boxShadow: "";
33 + --window-menuShortcutForeground: "";
34 + --window-disabledTextForeground: "";
35 + --window-invalidTextForeground: "";
36 + --window-readonlyTextForeground: "";
37 + --window-linkForeground: "";
38 + --window-linkHoverForeground: "";
39 + --window-descriptionForeground: "";
40
22 - --header-background: #2D2D2D;
23 - --header-foreground: #ffffff;
24 - --header-buttonHoverBackground: #414040;
41 + --header-background: "";
42 + --header-foreground: "";
43 + --header-buttonHoverBackground: "";
44 + --header-borderColor: "";
45
46 --sidebar-background: transparent;
27 - --sidebar-foreground: #ffffff;
28 - --sidebar-tabHoverBackground: #363636;
29 - --sidebar-tabHoverForeground: #ffffff;
47 + --sidebar-foreground: "";
48 + --sidebar-tabHoverBackground: "";
49 + --sidebar-tabHoverForeground: "";
50 --sidebar-tabActiveBackground: transparent;
31 - --sidebar-tabActiveForeground: #ffffff;
51 + --sidebar-tabActiveForeground: "";
52 --sidebar-tabActiveBorder: red;
53
34 - --editor-tabContainerBackground: #2D2D2D;
54 + --editor-tabContainerBackground: "";
55
36 - --editor-tabBackground: #1c1c1c;
37 - --editor-tabForeground: #ffffff;
38 - --editor-tabBorderColor: #bdd4ff;
39 - --editor-tabActiveBorderColor: #1b5fdd;
40 - --editor-tabActiveBackground: #1c1c1c;
41 - --editor-tabActiveForeground: #ffffff;
42 - --editor-tabHoverBackground: #2b2b2b;
43 - --editor-tabHoverForeground: #ffffff;
44 - --editor-tabSaveStateColor: #ffffff;
56 + --editor-tabBackground: "";
57 + --editor-tabForeground: "";
58 + --editor-tabBorderColor: "";
59 + --editor-tabActiveBorderColor: "";
60 + --editor-tabActiveBackground: "";
61 + --editor-tabActiveForeground: "";
62 + --editor-tabHoverBackground: "";
63 + --editor-tabHoverForeground: "";
64 + --editor-tabSaveStateColor: "";
65
46 - --editor-background: #171717;
47 - --editor-foreground: #e7e7e7;
48 - --editor-gutter-foreground: #898989;
49 - --editor-gutter-activeForeground: #ffffff;
50 - --editor-gutter-activeBackground: #212121;
51 - --editor-activeLineBackground: #212121;
66 + --editor-background: "";
67 + --editor-foreground: "";
68 + --editor-gutter-foreground: "";
69 + --editor-gutterActiveForeground: "";
70 + --editor-gutterActiveBackground: "";
71 + --editor-activeLineBackground: "";
72
73
74 --filetree-treeNodeBackground: transparent;
55 - --filetree-treeNodeForeground: #808080;
56 - --filetree-treeNodeHoverBackground: #353535;
57 - --filetree-treeNodeHoverForeground: #ffffff;
75 + --filetree-treeNodeForeground: "";
76 + --filetree-treeNodeHoverBackground: "";
77 + --filetree-treeNodeHoverForeground: "";
78 --filetree-treeNodeSelectedBackground: transparent;
59 - --filetree-treeNodeSelectedForeground: #34b0f8;
79 + --filetree-treeNodeSelectedForeground: "";
80 +
81 + --modal-background: "";
82 + --modal-foreground: "";
83 + --modal-shadow: "";
84 + --modal-buttonBackground: "";
85 + --modal-buttonForeground: "";
86 + --modal-buttonHoverBackground: "";
87 + --modal-buttonHoverForeground: ""
88
89 --statusbar-background: transparent;
62 - --statusbar-foreground: #ffffff;
90 + --statusbar-foreground: "";
91 + --statusbar-buttonBackgroundHover: "";
92 + --statusbar-buttonForegroundHover: "";
93 }
94
95 html {
@@ -72,13 +102,22 @@ html {
102 #statusbar {
103 border-top: solid 1px var(--window-borderColor);
104 height: calc($statusbar-height + 0.1rem);
105 + color: var(--statusbar-foreground);
106 + background-color: var(--statusbar-background);
107 + .tool:hover {
108 + background-color: var(--statusbar-buttonBackgroundHover);
109 + color: var(--statusbar-buttonForegroundHover);
110 + }
111 }
112 #workspace {
113 line-height: $header-height;
114 }
115 #header {
116 background-color: var(--header-background);
81 - box-shadow: rgb(29 29 29) 0px 1.5px 0px;
117 + box-shadow: var(--header-borderColor) 0px 1.5px 0px;
118 +}
119 +.window-button:not(.close):hover {
120 + background-color: var(--header-buttonHoverBackground);
121 }
122 .dropdown-button {
123 &:hover {
@@ -97,6 +136,44 @@ html {
136 background-color: var(--window-dropdownItemHoverBackground);
137 }
138 }
139 +.select {
140 + button {
141 + background-color: var(--window-selectButtonBackground);
142 + color: var(--window-selectButtonForeground);
143 + }
144 + .item-list {
145 + border: 1px solid #333;
146 + background-color: var(--window-selectBackground);
147 + .item:hover {
148 + background-color: var(--window-selectItemHoverBackground);
149 + color: var(--window-selectItemHoverForeground);
150 + }
151 + }
152 +}
153 +.context-menu, .dropdown-list {
154 + box-shadow: 0 2px 6px var(--window-boxShadow);
155 +}
156 +.option-shortcut, .shortcut {
157 + color: var(--window-menuShortcutForeground);
158 +}
159 +.disabled {
160 + color: var(--window-disabledTextForeground);
161 +}
162 +.invalid {
163 + color: var(--window-invalidTextForeground);
164 +}
165 +.readonly {
166 + color: var(--window-readonlyTextForeground);
167 +}
168 +.link {
169 + color: var(--window-linkForeground);
170 + &:hover {
171 + color: var(--window-linkHoverForeground);
172 + }
173 +}
174 +.desc {
175 + color: var(--window-descriptionForeground);
176 +}
177
178 label {
179 color: var(--window-inputLabelForeground);
@@ -132,10 +209,22 @@ button:focus {
209 border-right: 1px solid var(--window-borderColor);
210 }
211
212 +#sidebarview {
213 + #tool-view .toolbar-button {
214 + background-color: var(--window-buttonBackground);
215 + color: var(--window-buttonForeground);
216 + &:hover {
217 + background-color: var(--window-buttonHoverBackground);
218 + color: var(--window-buttonHoverForeground);
219 + }
220 + }
221 +}
222 +
223 .sidebar-tab {
224 &.active {
225 box-shadow: inset 3.5px 0px 0 0 var(--sidebar-tabActiveBorder);
226 background-color: var(--sidebar-tabActiveBackground);
227 + color: var(--sidebar-tabActiveForeground);
228 }
229 &:hover {
230 background-color: var(--sidebar-tabHoverBackground);
@@ -168,6 +257,7 @@ button:focus {
257
258 #editor-tabs {
259 background-color: var(--header-background);
260 + color: var(--header-foreground);
261 height: calc($tab-container-height + 5px);
262 box-shadow: inset 0px -1px 0 0 var(--window-borderColor);
263
@@ -185,6 +275,9 @@ button:focus {
275 color: var(--editor-tabActiveForeground);
276 }
277 }
278 + .close-tab span:hover {
279 + background-color: var(--editor-tabBorderColor);
280 + }
281 .tab-content .save-state {
282 background-color: var(--editor-tabSaveStateColor);
283 }
@@ -195,6 +288,21 @@ button:focus {
288
289 #tabview {
290 height: calc(100% - 2.3rem);
291 + &>div:not(.editor) {
292 + background-color: var(--window-background);
293 + }
294 + >.container svg {
295 + color: var(--window-accent);
296 + }
297 +}
298 +
299 +.settings {
300 + .heading::after {
301 + background-color: var(--window-borderColor);
302 + }
303 +}
304 +.settings-directory {
305 + border-right: 0.5px solid var(--window-borderColor);
306 }
307
308 .cm-content {
@@ -206,12 +314,12 @@ button:focus {
314 }
315 .cm-gutters {
316 background-color: var(--editor-background) !important;
209 - color: var(--editor-gutter-foreground);
317 + color: var(--editor-gutter-foreground) !important;
318 border: none !important;
319 }
320 .cm-activeLineGutter {
213 - color: var(--editor-gutter-activeForeground) !important;
214 - background-color: var(--editor-gutter-activeBackground) !important;
321 + color: var(--editor-gutterActiveForeground) !important;
322 + background-color: var(--editor-gutterActiveBackground) !important;
323 }
324 .cm-scroller {
325 background-color: var(--editor-background);
@@ -230,4 +338,23 @@ button:focus {
338 }
339 .rename-input .divider {
340 background-color: var(--window-inputBorder);
341 +}
342 +
343 +.popup-wrapper {
344 + background-color: var(--modal-shadow);
345 + .popup-container {
346 + background-color: var(--modal-background);
347 + color: var(--modal-foreground);
348 + button {
349 + background-color: var(--modal-buttonBackground);
350 + color: var(--modal-buttonForeground);
351 + &:hover {
352 + background-color: var(--modal-buttonHoverBackground);
353 + color: var(--modal-buttonHoverForeground);
354 + }
355 + &:focus {
356 + outline-color: var(--window-inputFocusBorder);
357 + }
358 + }
359 + }
360 }
\ No newline at end of file