Fix Pandora color override

src/components/global/Header.astro

@@ -65,6 +65,19 @@ SunLight
   </div>
 </header>
 
+<style is:global>
+[data-color-mode="light"] {
+    --pandora-text: black;
+    --pandora-shadows: rgb(200, 200, 200);
+    --pandora-borders: rgba(255,255,255,0.25);
+}
+[data-color-mode="dark"] {
+    --pandora-text: white;
+    --pandora-shadows: rgb(16, 16, 16);
+    --pandora-borders: rgba(5, 4, 4, 0.25);
+}
+</style>
+
 <script is:inline>
 /* 
 @licstart  The following is the entire license notice for the 

src/styles/index.scss

@@ -45,13 +45,7 @@
     src: url(/fonts/Major_Mono_Display/MajorMonoDisplay-Regular.ttf);
 }
 
-:root {
+
-    --border-color: rgba(255, 255, 255, 0.25);
-    --border-color-hover: rgba(255, 255, 255, 0.50);
-    --pandora-text: white;
-    --pandora-shadows: rgba(19, 21, 26, 0.5);
-    --pandora-borders: white;
-}
 
 body {
     margin: auto;
@@ -143,11 +137,6 @@ a {
 
 :is(body) {
     @include color-mode(light) {
-        :root {
-            --pandora-text: black !important;
-            --pandora-shadows: black !important;
-            --pandora-borders: black !important;
-        }
       color: black !important;
       background-color: white !important;
       .theme-is-light {display: inherit}
@@ -186,11 +175,6 @@ a {
       }
     }
     @include color-mode(dark) {
-        :root {
-            --pandora-text: white;
-            --pandora-shadows: white;
-            --pandora-borders: white;
-        }
       color: white !important;
       background-color: black !important;
       .theme-is-light {display: none}