added theming
mellbacon committed
Apr 28, 2023 at 02:45 UTC
97888066773f5ff196f3a7adec69433472e0836f
4 files changed
+96
-111
src/config/themehandler.ts
+17
-4
@@ -10,7 +10,20 @@ export function getThemes() {
10
return themelist;
11
}
12
13
-/*export async function loadTheme() {
14
- let theme = await import("../config/themes/dark-theme.json");
15
- return theme.theme;
16
-}*/
\ No newline at end of file
13
+export async function loadTheme(name: string) {
14
+ let json = await import(`../config/themes/${name.toLowerCase()}-theme.json`);
15
+ const theme = Object.entries(json.theme);
16
+ for (const entries of theme) {
17
+ const category = entries[0];
18
+ for (const property of Object.entries(entries[1])) {
19
+ const name = property[0];
20
+ const value = property[1];
21
+
22
+ const cssValue = `${category}-${name}`;
23
+ if (getComputedStyle(document.documentElement).getPropertyValue(`--${cssValue}`)) {
24
+ document.documentElement.style.setProperty(`--${cssValue}`, value);
25
+ //console.log(cssValue + ": " + value);
26
+ }
27
+ }
28
+ }
29
+}
src/config/themes/dark-theme.json
+32
-74
@@ -1,81 +1,39 @@
1
{
2
"theme-name": "Dark",
3
- "author": "e",
3
+ "author": "mellobacon",
4
"theme": {
5
"window": {
6
- "general": {
7
- "borderColor": "#333",
8
- "foreground": "#ffffff",
9
- "accentForeground": "",
10
- "background": "#161616",
11
- "itemHoverBackground": "#363636",
12
- "itemHoverForeground": "#ffffff",
13
- "inputBackground": "#1f1f1f",
14
- "inputActiveBackground": "",
15
- "dropdownBackground": "#1f1f1f",
16
- "dropdownActiveBackground": "",
17
- "dropdownItemHoverBackground": "#373737",
18
- "dropdownItemActiveBackground": "",
19
- "dropdownItemActiveForeground": "",
20
- "scrollbarBackground": "#4c4c4c38"
21
- },
22
- "titlebar": {
23
- "background": "#161616",
24
- "foreground": "#ffffff",
25
- "menuItemHoverBackground": "#b1b1b133",
26
- "menuItemHoverForeground": ""
27
- },
28
- "sidebar": {
29
- "background": "#161616",
30
- "foreground": "#ffffff",
31
- "tabHoverBackground": "#363636",
32
- "tabHoverForeground": "#ffffff",
33
- "tabActiveBackground": "",
34
- "tabActiveForeground": "#ffffff",
35
- "tabActiveBorder": "#4589ff"
36
- },
37
- "statusbar": {
38
- "background": "#161616",
39
- "foreground": "#ffffff",
40
- "toolHoverBackground": "#363636",
41
- "toolHoverForeground": "#ffffff",
42
- "toolActiveBackground": "",
43
- "toolActiveForeground": "",
44
- "toolAlertColor": "#4589ff",
45
- "toolAlertBackgroundColor": {
46
- "message": "",
47
- "warning": "",
48
- "error": ""
49
- }
50
- },
51
- "tabContainer": {
52
- "background": "#161616",
53
- "foreground": "#ffffff",
54
- "tabBackground": "#1c1c1c",
55
- "tabForeground": "#ffffff",
56
- "tabBorderColor": "#bdd4ff",
57
- "tabActiveBorderColor": "#1b5fdd",
58
- "tabActiveBackground": "",
59
- "tabActiveForeground": "",
60
- "tabHoverBackground": "#2b2b2b",
61
- "tabHoverForeground": "",
62
- "tabUnsavedColor": "#ffffff",
63
- "tabUnsavedBorderColor": "#dd6f1b"
64
- },
65
- "editor": {
66
- "background": "#1c1c1c",
67
- "foreground": "#ffffff"
68
- }
6
+ "foreground": "#ffffff",
7
+ "background": "#171717",
8
+ "borderColor": "#414040",
9
+ "dropdownBackground": "#2D2D2D",
10
+ "dropdownButtonBackground": "#2D2D2D",
11
+ "dropdownButtonForeground": "#ffffff",
12
+ "dropdownButtonHoverForeground": "#ffffff",
13
+ "dropdownItemHoverBackground": "#171717",
14
+ "dropdownItemHoverForeground": "#ffffff",
15
+ "scrollbarBackground": "#4c4c4c38"
16
},
70
- "components": {
71
- "filetree": {
72
- "background": "#161616",
73
- "foreground": "#ffffff",
74
- "nodeHoverBackground": "#363636",
75
- "nodeHoverForeground": "#ffffff",
76
- "nodeActiveBackground": "#363636",
77
- "nodeActiveForeground": ""
78
- }
17
+ "header": {
18
+ "background": "#2D2D2D",
19
+ "foreground": "#ffffff",
20
+ "buttonHoverBackground": "#414040"
21
+ },
22
+ "sidebar": {
23
+ "background": "#171717",
24
+ "foreground": "#ffffff",
25
+ "tabHoverBackground": "#363636",
26
+ "tabHoverForeground": "#ffffff",
27
+ "tabActiveBackground": "",
28
+ "tabActiveForeground": "#ffffff",
29
+ "tabActiveBorder": "#4589ff"
30
+ },
31
+ "statusbar": {
32
+ "background": "#171717",
33
+ "foreground": "#ffffff"
34
+ },
35
+ "editor": {
36
+ "tabContainerBackground": "#2D2D2D"
37
}
38
}
81
-}
\ No newline at end of file
39
+}
src/global.css
-3
@@ -16,8 +16,6 @@ html {
16
font-size: 16px;
17
line-height: 24px;
18
font-weight: 400;
19
-
20
- color: #ffffff;
19
user-select: none;
20
-webkit-user-select: none;
21
@@ -67,7 +65,6 @@ button {
65
padding: 0;
66
background: none;
67
border: none;
70
- color: white;
68
}
69
70
.editor-panes .splitpanes__pane {
src/theme.scss
+47
-30
@@ -1,27 +1,38 @@
1
-$foreground: #ffffff;
2
-$window-background-color: #171717;
3
-$header-background-color: #2D2D2D;
4
-
5
-$toolbar-button-hover-color: #414040;
6
-
7
-$dropdown-background-color: $header-background-color;
8
-$dropdownButton-background-color: $header-background-color;
9
-$dropdownButtonText-hover-color: $foreground;
10
-$dropdownItem-hover-color: $window-background-color;
11
-$dropdownItemText-hover-color: $foreground;
12
-
13
-$tab-hover-color: #363636;
14
-$tabBorder-active-color: red;
15
-
1
$header-height: 2rem;
2
$statusbar-height: 1.5rem;
3
$footer-height: 1.6rem;
4
$tab-container-height: 2rem;
5
21
-$border-color: #414040;
6
+:root {
7
+ --window-foreground: #ffffff;
8
+ --window-background: #171717;
9
+ --window-borderColor: #414040;
10
+
11
+ --window-dropdownBackground: #2D2D2D;
12
+ --window-dropdownButtonBackground: #2D2D2D;
13
+ --window-dropdownButtonHoverForeground: #ffffff;
14
+ --window-dropdownItemHoverBackground: #171717;
15
+ --window-dropdownItemHoverForeground: #ffffff;
16
+
17
+ --header-background: #2D2D2D;
18
+ --header-foreground: #ffffff;
19
+ --header-buttonHoverBackground: #414040;
20
+
21
+ --sidebar-background: transparent;
22
+ --sidebar-foreground: #ffffff;
23
+ --sidebar-tabHoverBackground: #363636;
24
+ --sidebar-tabHoverForeground: #ffffff;
25
+ --sidebar-tabActiveBackground: transparent;
26
+ --sidebar-tabActiveForeground: #ffffff;
27
+ --sidebar-tabActiveBorder: red;
28
+
29
+ --statusbar-background: transparent;
30
+ --statusbar-foreground: #ffffff;
31
+}
32
33
html {
24
- background-color: $window-background-color;
34
+ background-color: var(--window-background);
35
+ color: var(--window-foreground);
36
}
37
#handle, #header {
38
height: $header-height;
@@ -30,24 +41,24 @@ html {
41
height: $statusbar-height;
42
}
43
#header {
33
- background-color: $header-background-color;
34
- border-bottom: 1px solid $border-color;
44
+ background-color: var(--header-background);
45
+ box-shadow: rgb(29 29 29) 0px 1.5px 0px;
46
}
47
.dropdown-button {
48
&:hover {
38
- background-color: $toolbar-button-hover-color;
49
+ background-color: var(--header-buttonHoverBackground);
50
}
51
}
52
.dropdown-list {
42
- background-color: $dropdown-background-color;
53
+ background-color: var(--window-dropdownBackground);
54
}
55
.dropdown-item {
56
&:hover {
46
- background-color: $dropdownItem-hover-color;
57
+ background-color: var(--window-dropdownItemHoverBackground);
58
}
59
}
60
.divider {
50
- background-color: $border-color;
61
+ background-color: var(--window-borderColor);
62
}
63
64
#main {
@@ -55,25 +66,31 @@ html {
66
}
67
68
#sidebar {
58
- border-right: 1px solid $border-color;
69
+ border-right: 1px solid var(--window-borderColor);
70
}
71
72
.sidebar-tab {
73
&.active {
63
- box-shadow: inset -2px 0px 0 0 $tabBorder-active-color;
74
+ box-shadow: inset -2px 0px 0 0 var(--sidebar-tabActiveBorder);
75
}
76
&:hover {
66
- background-color: $tab-hover-color;
77
+ background-color: var(--sidebar-tabHoverBackground);
78
}
79
}
80
81
.editor-panes .splitpanes__splitter {
71
- background-color: $border-color;
82
+ background-color: var(--window-borderColor);
83
+}
84
+
85
+#editor-tabs {
86
+ background-color: var(--header-background);
87
+ height: $tab-container-height;
88
+ box-shadow: inset 0px -1px 0 0 var(--window-borderColor);
89
}
90
91
#statusbar {
75
- border-top: 1px solid $border-color;
92
+ border-top: 1px solid var(--window-borderColor);
93
#title {
77
- border-right: 1px solid $border-color;
94
+ border-right: 1px solid var(--window-borderColor);
95
}
79
-}
\ No newline at end of file
96
+}