Added theme switcher

src/components/global/ThemeSwitch.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { useDark, useToggle } from '@vueuse/core'
+
+const isDark = useDark({ storageKey: "theme", disableTransition: false })
+const toggleDark = useToggle(isDark)
+</script>
+
+<template>
+    <div data-theme-toggle id="theme-switcher" class="wrapper appear-from-top">
+        <button @click="toggleDark()" class="btn-round">
+            <svg v-if="isDark" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M120,40V32a8,8,0,0,1,16,0v8a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-8-8A8,8,0,0,0,50.34,61.66Zm0,116.68-8,8a8,8,0,0,0,11.32,11.32l8-8a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l8-8a8,8,0,0,0-11.32-11.32l-8,8A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l8,8a8,8,0,0,0,11.32-11.32ZM40,120H32a8,8,0,0,0,0,16h8a8,8,0,0,0,0-16Zm88,88a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-8A8,8,0,0,0,128,208Zm96-88h-8a8,8,0,0,0,0,16h8a8,8,0,0,0,0-16Z"></path></svg>
+            <svg v-else xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"></path></svg>
+        </button>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.wrapper {
+    pointer-events: all;
+}
+
+.btn-round {
+    position: relative;
+
+    > svg {
+        width: 1.25em;
+        height: 1.25em;
+    }
+}
+</style>

src/components/maps/MapOverlay.astro

@@ -8,6 +8,7 @@ import SearchMarkers from "./overlay/SearchMarkers.vue";
 import LangSwitcher from "./overlay/LangSwitcher.vue";
 import MapOverlayBreadcrumbs from "./MapOverlayBreadcrumbs.astro";
 import ToastService from "./overlay/ToastService.vue";
+import ThemeSwitch from "../global/ThemeSwitch.vue";
 
 interface Props extends MapOverlayProps {}
 
@@ -41,9 +42,14 @@ const currentUrl = Astro.url
             </SearchMarkers>
         }
 
-        {ENABLE_I18N &&
-            <LangSwitcher currentUrl={currentUrl} client:only="vue" />
-        }
+        
+        <div class="right-menu">
+            {ENABLE_I18N &&
+                <LangSwitcher currentUrl={currentUrl} client:only="vue" />
+            }
+
+            <ThemeSwitch client:only="vue" />
+        </div>
     </div>
 
     {ENABLE_BREADCRUMB &&
@@ -71,5 +77,15 @@ const currentUrl = Astro.url
         align-items: top;
         gap: 1rem;
     }
+
+    .right-menu {
+        display: grid;
+        gap: .5rem;
+        align-content: flex-start;
+
+        @media screen and (width >= 900px) {
+            display: flex;
+        }
+    }
 }
 </style>

src/components/maps/MapOverlayBreadcrumbs.astro

@@ -54,6 +54,9 @@ menu {
     border-radius: 100vmax;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
     pointer-events: all;
+    transition-property: color, background-color, border-color, outline-color;
+    transition-duration: .15s;
+    transition-timing-function: var(--timing-function);
 
     li {
         display: flex;

src/components/maps/overlay/SearchMarkers.vue

@@ -314,6 +314,9 @@ function resetAllFields(actionAfter?: "focusAfter") {
         border-radius: 25px;
         box-shadow: var(--shadow);
         pointer-events: all;
+        transition-property: color, background-color, border-color, outline-color;
+        transition-duration: .15s;
+        transition-timing-function: var(--timing-function);
 
         @media screen and (width >= 900px) {
             width: clamp(25rem, 35dvw, 30rem);