ensure sidebar is actually light in light mode

imputnet · Sep 27, 2024 · e43c9f6 · e43c9f6
1 parent 6e80703
commit e43c9f6
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/web/src/components/icons/Cobalt.svelte b/web/src/components/icons/Cobalt.svelte
@@ -1,4 +1,4 @@
 <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0 15.6363L0 12.8594L9.47552 8.293L0 3.14038L0 0.363525L12.8575 7.4908V9.21862L0 15.6363Z" fill="white"/>
-    <path d="M11.1425 15.6363V12.8594L20.6181 8.293L11.1425 3.14038V0.363525L24 7.4908V9.21862L11.1425 15.6363Z" fill="white"/>
+    <path d="M0 15.6363L0 12.8594L9.47552 8.293L0 3.14038L0 0.363525L12.8575 7.4908V9.21862L0 15.6363Z" fill="currentColor"/>
+    <path d="M11.1425 15.6363V12.8594L20.6181 8.293L11.1425 3.14038V0.363525L24 7.4908V9.21862L11.1425 15.6363Z" fill="currentColor"/>
 </svg>
diff --git 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
@@ -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;