fix map in dark mode

sandwichfarm · Apr 11, 2024 · f366f06 · f366f06
1 parent 14eb65f
commit f366f06
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 10 deletions.
diff --git a/src/lib/assets/themes/classic.css b/src/lib/assets/themes/classic.css
@@ -141,6 +141,25 @@
     --mrpBlockJumpLight1: theme(colors.black/0);
     --mrpBlockJumpLight2: theme(colors.black/90);
   }
+
+  /* map */
+  /* .mrp-map-light {
+    --vis-map-feature-color: #dce3eb
+    --vis-map-boundary-color: #ffffff
+    --vis-map-point-label-text-color-dark: #5b5f6d
+    --vis-map-point-label-text-color-light: #fff
+    --vis-map-point-label-font-weight: 600
+    --vis-map-point-label-font-size: 12px
+    --vis-map-point-label-font-family
+  }
+
+  .mrp-map-dark {
+    --vis-map-feature-color: #5b5f6d
+    --vis-map-boundary-color: #2a2a2a
+    --vis-map-point-label-text-color-dark: #fff
+    --vis-map-point-label-text-color-light: #5b5f6d
+  } */
+
   /* 
   .text-2xl {
     @apply text-2xl;

diff --git a/src/lib/components/blocks/map/map.svelte b/src/lib/components/blocks/map/map.svelte
@@ -173,7 +173,7 @@
   </span>
   geo
   </h3>
-  <VisSingleContainer data={$data}>
+  <VisSingleContainer data={$data} class="mrp-map-light dark:mrp-map-dark">
     <VisTopoJSONMap 
       topojson={WorldMapTopoJSON} 
       mapFitToPoints={true} 

diff --git a/src/lib/components/partials/theme-mode.svelte b/src/lib/components/partials/theme-mode.svelte
@@ -8,21 +8,28 @@
 
       localStorage.setItem('theme', darkMode ? 'dark' : 'light');
 
-      darkMode
-          ? document.documentElement.classList.add('dark')
-          : document.documentElement.classList.remove('dark');
+      if(darkMode) {
+        document.documentElement.classList.add('dark') 
+        document.body.classList.add('theme-dark')
+      }
+      else {
+        document.documentElement.classList.remove('dark')
+        document.body.classList.remove('theme-dark')
+      }
   }
 
   if (browser) {
       if (
-          localStorage.theme === 'dark' ||
-          (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+        localStorage.theme === 'dark' ||
+        (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
       ) {
-          document.documentElement.classList.add('dark');
-          darkMode = true;
+        document.documentElement.classList.add('dark') 
+        document.body.classList.add('theme-dark')
+        darkMode = true;
       } else {
-          document.documentElement.classList.remove('dark');
-          darkMode = false;
+        document.documentElement.classList.remove('dark')
+        document.body.classList.remove('theme-dark')
+        darkMode = false;
       }
   }