Always Dark NavBar

js/src/components/MobilizonLogo.vue

@@ -1,7 +1,5 @@
 <template>
   <svg
-    class="bg-white dark:bg-zinc-900 dark:fill-white"
-    :class="{ 'bg-gray-900': invert }"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 248.16 46.78"
   >
@@ -31,11 +29,3 @@
   </svg>
 </template>
 
-<script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    invert?: boolean;
-  }>(),
-  { invert: false }
-);
-</script>

js/src/components/NavBar.vue

@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 dark:bg-zinc-900"
+    class="bg-zinc-900 border-gray-200 px-2 sm:px-4 py-2.5"
     id="navbar"
   >
     <div
@@ -18,7 +18,7 @@
           <template #trigger>
             <button
               type="button"
-              class="flex sm:mr-3 text-sm rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
+              class="flex sm:mr-3 text-sm rounded-full md:mr-0 focus:ring-4 focus:ring-gray-600"
               id="user-menu-button"
               aria-expanded="false"
             >
@@ -33,10 +33,11 @@
                   loading="lazy"
                 />
               </figure>
-              <AccountCircle v-else :size="32" />
+              <AccountCircle style="color:white" v-else :size="32" />
             </button>
           </template>
 
+
           <!-- Dropdown menu -->
           <div
             class="z-50 text-base list-none bg-white rounded divide-y divide-gray-100 dark:bg-zinc-700 dark:divide-gray-600 max-w-xs"