diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss
index c4c3f085..44561cfd 100644
--- a/src/assets/scss/_buttons.scss
+++ b/src/assets/scss/_buttons.scss
@@ -5,8 +5,9 @@
     gap: .5rem;
     font-size: .9em;
     font-weight: 500;
+    color: var(--foreground);
     border: 1px solid transparent;
-    border-radius: .2rem;
+    border-radius: var(--border-radius);
     cursor: pointer;
     transition-property: color, background-color, border-color;
     transition-duration: .2s;
@@ -23,7 +24,7 @@
             &:hover,
             &:focus-visible {
                 color: var(--background);
-                background-color: var(--blue-500);
+                background-color: var(--accent);
             }
         }
 
@@ -40,7 +41,7 @@
             &:hover,
             &:focus-visible {
                 color: var(--background);
-                background-color: var(--blue-500);
+                background-color: var(--accent);
             }
         }
     }
@@ -97,6 +98,7 @@
     transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
 
     svg {
+        fill: var(--foreground);
         width: 1.15em;
         transition-property: fill;
         transition-duration: .15s;
@@ -105,18 +107,18 @@
 
     &:hover,
     &:focus-visible {
-        outline-color: color-mix(in srgb, var(--blue-500) 20%, transparent);
-        border-color: var(--blue-500);
+        outline-color: color-mix(in srgb, var(--accent) 20%, transparent);
+        border-color: var(--accent);
         
         svg {
-            fill: var(--blue-500);
+            fill: var(--accent);
         }
     }
 
     &.active {
         color: var(--background);
-        background-color: var(--blue-500);
-        border-color: var(--blue-700);
+        background-color: var(--accent);
+        border-color: color-mix(in srgb, var(--accent) 75%, var(--background));
 
         svg {
             fill: var(--background);
diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss
index b5da0f1a..8cb7f756 100644
--- a/src/assets/scss/theme.scss
+++ b/src/assets/scss/theme.scss
@@ -41,10 +41,18 @@
     --foreground: var(--black);
     --background: var(--white);
     --border: var(--slate-400);
+    --accent: var(--blue-500);
+
     --border-radius: .25rem;
     --shadow: color-mix(in srgb, var(--foreground) 10%, transparent) 0px 4px 12px;
 }
 
+.dark {
+    --foreground: var(--slate-300);
+    --background: var(--slate-950);
+    --border: var(--slate-600);
+}
+
 html {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     color: var(--foreground);
diff --git a/src/components/maps/MapOverlayBreadcrumbs.astro b/src/components/maps/MapOverlayBreadcrumbs.astro
index 7349c9b3..d4cea186 100644
--- a/src/components/maps/MapOverlayBreadcrumbs.astro
+++ b/src/components/maps/MapOverlayBreadcrumbs.astro
@@ -14,7 +14,7 @@ const { breadcrumbs = [] } = Astro.props
             {breadcrumbs.map((breadcrumb, index) => (
                 <li>
                     {index === breadcrumbs.length - 1 &&
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="folder"><path d="M245,110.64A16,16,0,0,0,232,104H216V88a16,16,0,0,0-16-16H130.67L102.94,51.2a16.14,16.14,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V208h0a8,8,0,0,0,8,8H211.1a8,8,0,0,0,7.59-5.47l28.49-85.47A16.05,16.05,0,0,0,245,110.64ZM93.34,64,123.2,86.4A8,8,0,0,0,128,88h72v16H69.77a16,16,0,0,0-15.18,10.94L40,158.7V64Z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="icon folder"><path d="M245,110.64A16,16,0,0,0,232,104H216V88a16,16,0,0,0-16-16H130.67L102.94,51.2a16.14,16.14,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V208h0a8,8,0,0,0,8,8H211.1a8,8,0,0,0,7.59-5.47l28.49-85.47A16.05,16.05,0,0,0,245,110.64ZM93.34,64,123.2,86.4A8,8,0,0,0,128,88h72v16H69.77a16,16,0,0,0-15.18,10.94L40,158.7V64Z"></path></svg>
 
                         <span class="breadcrumb" aria-current="page">
                             <h1 class="label">
@@ -23,7 +23,7 @@ const { breadcrumbs = [] } = Astro.props
                         </span>
                     }
                     {!(index === breadcrumbs.length - 1) &&
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="folder"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#0f172a" viewBox="0 0 256 256" class="icon folder"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>
 
                         <a href={breadcrumb.url} class="breadcrumb" class:list={{ active: index === breadcrumbs.length - 1 }} data-astro-prefetch="hover">
                             <span class="label">
@@ -31,7 +31,7 @@ const { breadcrumbs = [] } = Astro.props
                             </span>
                         </a>
 
-                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#0f172a" viewBox="0 0 256 256"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#0f172a" viewBox="0 0 256 256" class="icon"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg>
                     }
                 </li>
             ))}
@@ -48,6 +48,7 @@ menu {
     margin-top: .5rem;
     padding-block: .25rem;
     padding-inline: .8rem;
+    color: var(--foreground);
     border: 1px solid var(--border);
     background: var(--background);
     border-radius: 100vmax;
@@ -59,6 +60,10 @@ menu {
         align-items: center;
         gap: .25ch;
 
+        svg {
+            fill: var(--foreground);
+        }
+
         &:has(a:hover, a:focus-visible) {
             svg.folder {
                 fill: var(--blue-500);
@@ -83,7 +88,7 @@ menu {
         }
 
         .icon {
-            width: 1.1em;
+            fill: var(--foreground);
         }
 
         .label {
diff --git a/src/components/maps/overlay/MarkerCreator.vue b/src/components/maps/overlay/MarkerCreator.vue
index bdb355d4..c24036f1 100644
--- a/src/components/maps/overlay/MarkerCreator.vue
+++ b/src/components/maps/overlay/MarkerCreator.vue
@@ -275,6 +275,7 @@ menu {
     padding-block: .25rem;
     top: calc(var(--mouse-y) - .5rem);
     left: calc(var(--mouse-x) + .75rem);
+    color: var(--foreground);
     background-color: var(--background);
     border: 1px solid var(--border);
     border-radius: .3rem;
@@ -295,13 +296,17 @@ menu {
             cursor: pointer;
             width: 100%;
 
+            svg {
+                fill: var(--foreground);
+            }
+
             &:hover,
             &:focus-within {
-                color: var(--blue-700);
-                background-color: var(--slate-100);
+                color: color-mix(in srgb, var(--accent) 90%, var(--background));
+                background-color: color-mix(in srgb, var(--accent) 10%, var(--background));
 
                 svg {
-                    fill: var(--blue-700);
+                    fill: color-mix(in srgb, var(--accent) 75%, var(--background));
                 }
             }
         }
diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue
index 2f649dfa..904ddd1e 100644
--- a/src/components/maps/overlay/SearchMarkers.vue
+++ b/src/components/maps/overlay/SearchMarkers.vue
@@ -308,6 +308,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
         margin-left: calc(45px + .5rem);
         padding: .5rem 1.2rem;
         width: calc(100% - 3rem);
+        color: var(--foreground);
         background: var(--background);
         border: 1px solid var(--border);
         border-radius: 25px;
@@ -338,7 +339,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
                 flex-grow: 1;
 
                 &::placeholder {
-                    color: var(--slate-400);
+                    color: color-mix(in srgb, var(--foreground) 75%, var(--background));
                 }
             }
 
@@ -348,7 +349,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
                 transform: translateY(-50%);
                 left: 0;
                 width: $search-icon-size;
-                fill: var(--slate-400);
+                fill: color-mix(in srgb, var(--foreground) 75%, var(--background));
                 pointer-events: none;
             }
 
@@ -375,16 +376,20 @@ function resetAllFields(actionAfter?: "focusAfter") {
                 }
 
                 &:hover {
+                    .icon {
+                        color: var(--foreground);
+                    }
+
                     &::before {
-                        background-color: var(--slate-300);
+                        background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
                     }
                 }
 
                 &:focus-visible {
                     &::before {
-                        background-color: var(--slate-200);
-                        outline: 1px dotted var(--slate-500);
-                        outline: 4px auto var(--slate-900);
+                        background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
+                        outline: 1px dotted color-mix(in srgb, var(--foreground) 50%, var(--background));
+                        outline: 4px auto color-mix(in srgb, var(--foreground) 90%, var(--background));
                     }
                 }
             }
@@ -399,22 +404,22 @@ function resetAllFields(actionAfter?: "focusAfter") {
 
                 &:hover {
                     &::before {
-                        background-color: var(--slate-300);
+                        background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
                     }
                 }
 
                 &:focus-visible {
                     &::before {
-                        background-color: var(--slate-200);
-                        outline: 1px dotted var(--slate-500);
-                        outline: 4px auto var(--slate-900);
+                        background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
+                        outline: 1px dotted color-mix(in srgb, var(--foreground) 50%, var(--background));
+                        outline: 4px auto color-mix(in srgb, var(--foreground) 90%, var(--background));
                     }
                 }
             }
 
             .close-btn {
                 font-size: 1.1em;
-                color: var(--slate-500);
+                color: color-mix(in srgb, var(--foreground) 75%, var(--background));
             }
         }
 
@@ -453,7 +458,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
                 }
 
                 &:hover:not(:has(a:hover)) {
-                    background-color: var(--slate-100);
+                    background-color: color-mix(in srgb, var(--foreground) 10%, var(--background));
 
                     .title {
                         text-decoration: underline;
@@ -490,9 +495,14 @@ function resetAllFields(actionAfter?: "focusAfter") {
                     .title {
                         font-weight: 500;
                         text-underline-offset: 2px;
+
+                        & + .desc {
+                            margin-top: .25rem;
+                        }
                     }
+
                     .desc {
-                        color: var(--slate-500);
+                        color: color-mix(in srgb, var(--foreground) 50%, var(--background));
 
                         .map-link {
                             margin-top: .5rem;
@@ -528,12 +538,12 @@ function resetAllFields(actionAfter?: "focusAfter") {
                         top: 50%;
                         transform: translateY(-50%);
                         right: .75rem;
-                        fill: var(--slate-400);
+                        fill: color-mix(in srgb, var(--foreground) 70%, var(--background));
                     }
 
                     &:focus-visible {
-                        outline: 1px dotted var(--slate-500);
-                        outline: 4px auto var(--slate-900);
+                        outline: 1px dotted color-mix(in srgb, var(--foreground) 50%, var(--background));
+                        outline: 4px auto color-mix(in srgb, var(--foreground) 90%, var(--background));
 
                         .title {
                             text-decoration: underline;
@@ -600,8 +610,9 @@ function resetAllFields(actionAfter?: "focusAfter") {
 
         &[data-focused="true"] {
             margin-bottom: 1em;
+
             .input-w {
-                border-bottom: 1px solid var(--slate-200);
+                border-bottom: 1px solid color-mix(in srgb, var(--foreground) 20%, var(--background));
                 margin-bottom: .5rem;
                 padding-bottom: .5rem;
 
diff --git a/src/components/maps/overlay/SearchMarkersTags.vue b/src/components/maps/overlay/SearchMarkersTags.vue
index d8b2f70c..39330989 100644
--- a/src/components/maps/overlay/SearchMarkersTags.vue
+++ b/src/components/maps/overlay/SearchMarkersTags.vue
@@ -125,6 +125,7 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
         padding-inline: .8rem;
         font-weight: 600;
         font-size: .85em;
+        color: var(--foreground);
         background: var(--background);
         border: 1px solid var(--border);
         border-radius: 100vmax;
@@ -145,6 +146,10 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
             width: 1.1em;
         }
 
+        svg {
+            fill: var(--foreground);
+        }
+
         .label {
             text-underline-offset: .15rem;
         }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 969f7720..d36c1701 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -58,7 +58,7 @@ const lang = getLangFromUrl(Astro.url) || defaultLang;
         <link rel="stylesheet" href="/leaflet-measure/leaflet-measure.css" rel="preload" />
         <script is:inline type="text/javascript" src="/js/leaflet-measure.min.js"></script>
 	</head>
-	<body>
+	<body class="">
 		<slot />
 	</body>
 </html>