diff --git a/web/src/components/icons/Cobalt.svelte b/web/src/components/icons/Cobalt.svelte index a14ac29c7..bdfa59914 100644 --- a/web/src/components/icons/Cobalt.svelte +++ b/web/src/components/icons/Cobalt.svelte @@ -1,4 +1,4 @@ - - + + diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte index 9f3b51ef4..2fbd8eb12 100644 --- a/web/src/components/sidebar/SidebarTab.svelte +++ b/web/src/components/sidebar/SidebarTab.svelte @@ -56,7 +56,7 @@ text-align: center; gap: 3px; padding: var(--padding) 3px; - color: var(--sidebar-highlight); + color: var(--sidebar-text); font-size: var(--sidebar-font-size); opacity: 0.75; height: fit-content; @@ -82,7 +82,7 @@ } .sidebar-tab.active { - color: var(--sidebar-bg); + color: var(--sidebar-highlight-text); background: var(--sidebar-highlight); opacity: 1; transform: none; diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index ed02b3456..83d80e30b 100644 --- a/web/src/routes/+layout.svelte +++ b/web/src/routes/+layout.svelte @@ -122,9 +122,11 @@ --dialog-backdrop: rgba(255, 255, 255, 0.3); - --sidebar-bg: #000000; - --sidebar-highlight: #ffffff; - --sidebar-hover: rgba(255, 255, 255, 0.1); + --sidebar-bg: #f4f4f4; + --sidebar-text: var(--secondary); + --sidebar-highlight: var(--secondary); + --sidebar-highlight-text: var(--primary); + --sidebar-hover: rgba(0, 0, 0, 0.1); --input-border: #adadb7; @@ -198,7 +200,10 @@ --dialog-backdrop: rgba(0, 0, 0, 0.3); --sidebar-bg: #101010; - --sidebar-highlight: #f2f2f2; + --sidebar-text: var(--secondary); + --sidebar-highlight: var(--secondary); + --sidebar-highlight-text: var(--sidebar-bg); + --sidebar-hover: rgba(255, 255, 255, 0.1); --input-border: #383838;