changed sidebar tab to look better than vscode
mellbacon committed
Apr 28, 2023 at 19:51 UTC
383c294351d2bc01ca5d9596851d243cff54b492
5 files changed
+10
-7
src/config/themehandler.ts
+2
-1
@@ -18,12 +18,13 @@ export async function loadTheme(name: string) {
18
const category = entries[0];
19
for (const property of Object.entries(entries[1])) {
20
const name = property[0];
21
- const value = property[1];
21
+ let value = property[1];
22
23
const cssValue = `${category}-${name}`;
24
25
for (const style of stylesheet.style) {
26
if (style === `--${cssValue}`) {
27
+ value = value === "" ? "transparent" : value;
28
stylesheet.style.setProperty(`--${cssValue}`, value);
29
}
30
}
src/config/themes/dark-theme.json
+2
-2
@@ -24,9 +24,9 @@
24
"foreground": "#ffffff",
25
"tabHoverBackground": "#363636",
26
"tabHoverForeground": "#ffffff",
27
- "tabActiveBackground": "",
27
+ "tabActiveBackground": "#326ed6",
28
"tabActiveForeground": "#ffffff",
29
- "tabActiveBorder": "#4589ff"
29
+ "tabActiveBorder": ""
30
},
31
"statusbar": {
32
"background": "#171717",
src/lib/Sidebar.svelte
+1
-1
@@ -50,6 +50,6 @@
50
<style lang="scss">
51
#sidebar {
52
height: 100%;
53
- min-width: 2.8rem;
53
+ min-width: 3rem;
54
}
55
</style>
\ No newline at end of file
src/lib/SidebarTab.svelte
+4
-3
@@ -14,12 +14,13 @@
14
display: flex;
15
justify-content: center;
16
align-items: center;
17
- width: 100%;
18
- height: 2.8rem;
17
+ height: 2.5rem;
18
+ margin: 5px;
19
+ border-radius: 3px;
20
cursor: pointer;
21
:global(svg) {
22
width: 22px;
23
height: 22px;
24
}
25
}
25
-</style>
\ No newline at end of file
26
+</style>
src/theme.scss
+1
@@ -72,6 +72,7 @@ html {
72
.sidebar-tab {
73
&.active {
74
box-shadow: inset 3.5px 0px 0 0 var(--sidebar-tabActiveBorder);
75
+ background-color: var(--sidebar-tabActiveBackground);
76
}
77
&:hover {
78
background-color: var(--sidebar-tabHoverBackground);