Switch to new color system

src/components/navigation.module.scss

@@ -7,9 +7,9 @@
     width: 100%;
     height: 100%;
     z-index: 1200;
-    background-color: rgba($background, 0.9);
+    background-color: var(--color-background-glass);
     backdrop-filter: blur(10px);
-    color: white;
+    color: var(--color-text);
     overflow: auto;
     opacity: 0;
     transition: opacity 0.25s, left 0.25s;
@@ -22,11 +22,6 @@
         pointer-events: auto;
     }
 
-    @media (prefers-color-scheme: light) {
-        background-color: rgba($lightBackground, 0.9);
-        color: black;
-    }
-
     .inner {
         display: flex;
         flex-direction: column;
@@ -75,23 +70,14 @@
     left: 0;
     display: flex;
     width: 100%;
-    background: rgba($background, 0.95);
-    color: $textColor;
+    background: var(--color-background-transparent);
+    color: var(--color-text);
     backdrop-filter: blur(5px);
     z-index: 999;
     transition: background-color 0.25s, color 0.25s;
 
     @supports (backdrop-filter: blur(5px)) {
-        background: rgba($background, 0.9);
-    }
-
-    @media (prefers-color-scheme: light) {
-        background: rgba($lightBackground, 0.95);
-        color: $lightTextColor;
-
-        @supports (backdrop-filter: blur(5px)) {
-            background: rgba($lightBackground, 0.9);
-        }
+        background: var(--color-background-glass);
     }
 
     .topBarInner {
@@ -135,7 +121,7 @@
                 transition: border-color 0.25s;
 
                 @media (prefers-color-scheme: light) {
-                    border-color: $accentColor;
+                    border-color: var(--color-accent);
                 }
             }
 
@@ -150,7 +136,7 @@
 
 .homeBar.homeBarTransparent {
     background: transparent;
-    color: $textColor;
+    color: white;
     backdrop-filter: blur(0);
 }
 

src/components/scambox/Chatbox.module.scss

@@ -26,7 +26,7 @@
         margin-bottom: 20px;
         background-image: linear-gradient(
             to top,
-            $background,
+            var(--color-background),
             transparent 20px
         );
     }
@@ -35,8 +35,16 @@
         border-radius: 0;
         margin-top: 20px;
         margin-bottom: 20px;
-        background-image: linear-gradient(to top, $background, transparent 20px),
-            linear-gradient(to bottom, $background, transparent 20px);
+        background-image: linear-gradient(
+                to top,
+                var(--color-background),
+                transparent 20px
+            ),
+            linear-gradient(
+                to bottom,
+                var(--color-background),
+                transparent 20px
+            );
     }
 
     &.openTop {
@@ -44,37 +52,10 @@
         margin-top: 20px;
         background-image: linear-gradient(
             to bottom,
-            $background,
+            var(--color-background),
             transparent 20px
         );
     }
-
-    @media (prefers-color-scheme: light) {
-        &.openBottom {
-            background-image: linear-gradient(
-                to top,
-                $lightBackground,
-                transparent 20px
-            );
-        }
-
-        &.openBoth {
-            background-image: linear-gradient(
-                    to top,
-                    $lightBackground,
-                    transparent 20px
-                ),
-                linear-gradient(to bottom, $lightBackground, transparent 20px);
-        }
-
-        &.openTop {
-            background-image: linear-gradient(
-                to bottom,
-                $lightBackground,
-                transparent 20px
-            );
-        }
-    }
 }
 
 .chatnotice {
@@ -104,7 +85,7 @@
     &.alignRight {
         align-items: flex-end;
 
-        --msg-color: #{$accentColor};
+        --msg-color: #{map.get($theme, "accent")};
     }
 
     .name {