fix subsection-header bg

src/components/layout/HeaderComponent.vue

@@ -45,6 +45,7 @@
         </div>
 
         <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
+          
           <DarkMode />
           
           <!-- Profile dropdown -->

src/components/partials/DarkMode.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="toggle-dark-mode  cursor-pointer">
-  <svg @click="toggleDark()" v-if="!isDark" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="#fff">
+  <svg v-on:click="toggleDark()" v-if="!isDark" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="#fff">
     <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
   </svg>
-  <svg @click="toggleDark()" v-if="isDark" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="#fff">
+  <svg v-on:click="toggleDark()" v-if="isDark" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="#fff">
     <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
   </svg>
   </div>
@@ -13,11 +13,12 @@
 import { useDark, useToggle } from "@vueuse/core";
 
 const isDark = useDark({
-  selector: "body", //element to add attribute to
-  attribute: "theme", // attribute name
-  valueDark: "dark", // attribute value for dark mode
-  valueLight: "light", // attribute value for light mode
-});
+        selector: "body", //element to add attribute to
+        attribute: "theme", // attribute name
+        valueDark: "dark", // attribute value for dark mode
+        valueLight: "light", // attribute value for light mode
+      })
+
 const toggleDark = useToggle(isDark);
 
 </script>

src/components/relays/pages/RelaysFind.vue

@@ -7,8 +7,10 @@
     :activeSubsectionProp="activeSubsection" /> 
 
   <div id="wrapper" class="mx-auto max-w-7xl">  
-    <div class="pt-5 px-1 sm:px-6 lg:px-8" :class="{
-      'absolute z-900 w-1/2 top-32 bg-white/50': this.store.layout.mapIsExpanded
+    <div id="subsection_header" class="pt-5 px-1 sm:px-6 lg:px-8" :class="{
+      'absolute z-900 w-1/2 top-32': this.store.layout.mapIsExpanded,
+      // 'bg-white/50': !this.isMapDark,
+      // 'bg-black/50': this.isMapDark
     }"
       style="z-index:9999">
       <div class="sm:flex sm:items-center">
@@ -145,6 +147,7 @@ export default defineComponent({
   },
 
   async mounted() {
+    console.log('map expanded', this.store.layout.mapIsExpanded, 'is dark', localStorage.getItem('isDark'))
     //console.log("findrelays mounted", this.results)
     this.navSubsection.forEach( item => this.relaysCount[item.slug] = 0 ) //move this
 
@@ -168,6 +171,9 @@ export default defineComponent({
         return this.store.relays.getAll.filter( (relay) => this.results?.[relay]?.aggregate == subsection).length 
       }
     },
+    isMapDark: function(){
+      // return this.store.layout.mapIsExpanded && this.$storage.('isDark') == true
+    },
     parseHash
   }),
 

src/styles/main.scss

@@ -12,11 +12,17 @@
   height:32px;
 }
 
+#subsection_header {
+  background-color: rgba(255,255,255, .5)
+}
+
 body[theme=dark] {
   background: #16171d;
   color: #fff;
 
-  
+  #subsection_header {
+    background-color: rgba(22, 23, 29, .5)
+  }
 
   #relays_list_wrapper {
     @apply bg-black/20 rounded-lg