messing with themes
mellbacon committed
Jan 20, 2023 at 13:23 UTC
bc1edc9328ea54797c640a2ca9fba2cacd1f8329
4 files changed
+105
-4
src/components/Settings/settings/general/AppearanceSettings.svelte
+2
-4
@@ -3,11 +3,9 @@
3
import Dropdown from "../../../../components/Input/Dropdown.svelte";
4
import { systemfonts, setFont, autosave } from "../../../../config/config";
5
import CheckmarkInput from "../../../../components/Input/CheckmarkInput.svelte";
6
+ import { getThemes } from "../../../../config/themehandler";
7
7
- let themes = [
8
- {id: 0, name: "Light"},
9
- {id: 1, name: "Dark"},
10
- ]
8
+ let themes = getThemes();
9
let fonts = [
10
{id: 0, name: "No fonts found"},
11
]
src/config/themehandler.ts
new
+16
@@ -0,0 +1,16 @@
1
+import { themes } from "./themes/themes";
2
+
3
+export function getThemes() {
4
+ let themelist = [];
5
+ let id = 0;
6
+ for (const theme of themes) {
7
+ themelist = [...themelist, {id: id, name: theme["theme-name"]}];
8
+ id++;
9
+ }
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
src/config/themes/dark-theme.json
new
+81
@@ -0,0 +1,81 @@
1
+{
2
+ "theme-name": "Dark",
3
+ "author": "e",
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
+ }
69
+ },
70
+ "components": {
71
+ "filetree": {
72
+ "background": "#161616",
73
+ "foreground": "#ffffff",
74
+ "nodeHoverBackground": "#363636",
75
+ "nodeHoverForeground": "#ffffff",
76
+ "nodeActiveBackground": "#363636",
77
+ "nodeActiveForeground": ""
78
+ }
79
+ }
80
+ }
81
+}
\ No newline at end of file
src/config/themes/themes.ts
new
+6
@@ -0,0 +1,6 @@
1
+export const themes = [
2
+ {
3
+ "theme-name": "Dark",
4
+ "theme-id": "dark"
5
+ },
6
+]
\ No newline at end of file