moved file tree colors to theme
mellbacon committed
May 7, 2023 at 23:13 UTC
87712deb73e14e76a48a1e293439a5367505918e
5 files changed
+35
-17
src/config/themes/dark-theme.json
+8
@@ -42,6 +42,14 @@
42
"tabActiveForeground": "#ffffff",
43
"tabHoverBackground": "2b2b2b",
44
"tabHoverForeground": "#ffffff"
45
+ },
46
+ "filetree": {
47
+ "treeNodeBackground": "",
48
+ "treeNodeForeground": "#808080",
49
+ "treeNodeHoverBackground": "#353535",
50
+ "treeNodeHoverForeground": "#ffffff",
51
+ "treeNodeSelectedBackground": "",
52
+ "treeNodeSelectedForeground": "#34b0f8"
53
}
54
}
55
}
src/lib/FileTree/FileTreeList.svelte
-8
@@ -159,10 +159,6 @@
159
cursor: pointer;
160
padding-left: 1rem;
161
}
162
- .tree-label:hover {
163
- color: white;
164
- background-color: #353535;
165
- }
162
.tree-label {
163
display: flex;
164
min-height: 1.6rem;
@@ -171,14 +167,10 @@
167
:global(svg) {
168
width: 20px;
169
height: 20px;
174
- color: white;
170
padding: 0 5px 0 0;
171
}
172
}
173
.root > .tree-label .item-label {
174
font-weight: bold;
175
}
181
- .selected {
182
- color: #34b0f8;
183
- }
176
</style>
\ No newline at end of file
src/lib/FileTree/FileTreeNode.svelte
-8
@@ -78,10 +78,6 @@
78
cursor: pointer;
79
padding-left: 1rem;
80
}
81
- .tree-label:hover {
82
- color: white;
83
- background-color: #353535;
84
- }
81
.tree-label {
82
display: flex;
83
min-height: 1.6rem;
@@ -91,13 +87,9 @@
87
:global(svg){
88
width: 20px;
89
height: 20px;
94
- color: white;
90
padding: 0 5px 0 0;
91
}
92
}
98
- .selected {
99
- color: #34b0f8;
100
- }
93
.no-arrow {
94
display: flex;
95
margin-right: 15px;
src/lib/FileTree/FileTreeView.svelte
-1
@@ -22,7 +22,6 @@
22
}
23
.tree {
24
width: 100%;
25
- color: gray;
25
padding: 10px 0;
26
}
27
</style>
src/theme.scss
+27
@@ -36,6 +36,13 @@ $tab-container-height: 2rem;
36
--editor-tabHoverBackground: #2b2b2b;
37
--editor-tabHoverForeground: #ffffff;
38
39
+ --filetree-treeNodeBackground: transparent;
40
+ --filetree-treeNodeForeground: #808080;
41
+ --filetree-treeNodeHoverBackground: #353535;
42
+ --filetree-treeNodeHoverForeground: #ffffff;
43
+ --filetree-treeNodeSelectedBackground: transparent;
44
+ --filetree-treeNodeSelectedForeground: #34b0f8;
45
+
46
--statusbar-background: transparent;
47
--statusbar-foreground: #ffffff;
48
}
@@ -93,6 +100,26 @@ html {
100
background-color: var(--window-borderColor);
101
}
102
103
+.tree {
104
+ color: var(--filetree-treeNodeForeground);
105
+ .hover {
106
+ background-color: var(--header-background) !important;
107
+ }
108
+ .tree-label {
109
+ svg {
110
+ color: var(--window-foreground);
111
+ }
112
+ &:hover {
113
+ color: var(--filetree-treeNodeHoverForeground);
114
+ background-color: var(--filetree-treeNodeHoverBackground);
115
+ }
116
+ &.selected {
117
+ color: var(--filetree-treeNodeSelectedForeground);
118
+ background-color: var(--filetree-treeNodeSelectedBackground);
119
+ }
120
+ }
121
+}
122
+
123
#editor-tabs {
124
background-color: var(--header-background);
125
height: calc($tab-container-height + 5px);