From 34da93e43898242a21653f4b38515f9f94863eef Mon Sep 17 00:00:00 2001
From: Hidde Wieringa <hidde@hiddewieringa.nl>
Date: Sun, 8 Dec 2024 16:14:48 +0100
Subject: [PATCH] Dark mode (#135)

Fixes #125

Add support for Dark mode.

By default the *system* mode is used, which auto-selects the light or
dark mode based on system preferences. The user can select light or dark
mode explicitly in the settings.

Uses Bootstrap's dark mode support.
https://getbootstrap.com/docs/5.3/customize/color-modes/#enable-dark-mode

Requires patching some icons / colors in the MapLibre GL JS UI.

Hardcoded colors have been put into the `colors` map and are now
theme-dependenent.

The style generation outputs a JSON style file per theme, and the UI
selects the style based on the user's preferences.

The resulting contrast between text and the background is a bit lower
than using light mode.

The colors can be tweaked more in separate PRs if needed.
---
 SETUP.md                             |   9 +-
 proxy/css/ui.css                     | 110 +++--
 proxy/index.html                     |  28 +-
 proxy/js/styles.mjs                  | 669 ++++++++++++++++-----------
 proxy/js/ui.js                       |  90 +++-
 proxy/test/ui/cypress/e2e/home.cy.js |  56 ++-
 6 files changed, 624 insertions(+), 338 deletions(-)

diff --git a/SETUP.md b/SETUP.md
index 11ed02a8..b7434e80 100644
--- a/SETUP.md
+++ b/SETUP.md
@@ -14,7 +14,7 @@ The import process will filter the file before importing it. The filtered file w
 
 Start the tile server:
 ```shell
-docker compose up --build martin
+docker compose up --build --watch martin
 ```
 
 Prepare and start the API:
@@ -25,15 +25,12 @@ docker compose up api
 
 Start the web server:
 ```shell
-docker compose up --build martin-proxy
+docker compose up --build --watch martin-proxy
 ```
 
 The OpenRailwayMap is now available on http://localhost:8000.
 
-To ease development, Docker Compose can automatically rebuild containers when dependent files change. Enable *watch mode* with:
-```shell
-docker compose watch
-```
+Docker Compose will automatically rebuild and restart the `martin` and `martin-proxy` containers if relevant files are modified.
 
 ## Deployment
 
diff --git a/proxy/css/ui.css b/proxy/css/ui.css
index 4be598a8..f7382ef8 100644
--- a/proxy/css/ui.css
+++ b/proxy/css/ui.css
@@ -37,7 +37,7 @@ body {
 
   height: 400px;
   width: 300px;
-  background: #fff;
+  background-color: rgba(var(--bs-body-bg-rgb), .9);
   border-radius: 4px;
   box-shadow: 0 0 0 2px rgba(0, 0, 0, .1);
   overflow-y: auto;
@@ -47,40 +47,96 @@ body {
   height: 1400px;
 }
 
-.maplibregl-ctrl-edit .maplibregl-ctrl-icon {
-  background-size: 24px;
-  background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z' fill='%23000000'/%3E%3C/svg%3E");
+/** Patch Maplibre GL to respect the page theme */
+#map-container .maplibregl-ctrl-group,
+.maplibregl-ctrl-attrib.maplibregl-compact,
+.maplibregl-ctrl-attrib a,
+.maplibregl-ctrl-scale {
+  background: var(--bs-body-bg);
+  color: var(--bs-body-color);
+}
+.maplibregl-ctrl-scale {
+  background: rgba(var(--bs-body-bg-rgb), 0.8);
+  color: var(--bs-body-color);
+}
+[data-bs-theme="dark"] .maplibregl-ctrl-scale {
+  border-top-color: var(--bs-border-color);
+  border-right-color: var(--bs-light);
+  border-left-color: var(--bs-light);
+  border-bottom-color: var(--bs-light);
+}
+[data-bs-theme="dark"] .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button {
+  background-color: var(--bs-light);
 }
-.maplibregl-ctrl-configuration .maplibregl-ctrl-icon {
-  background-size: 24px;
-  background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 200 200' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.5 75C41 89.5 54 100 70 100s29-10.5 33.5-25H170a10 10 0 0 0 0-20h-66.5C99 40.5 86 30 70 30S41 40.5 36.5 55H25a10 10 0 0 0 0 20ZM70 50a15 15 0 1 1-15 15 14.73 14.73 0 0 1 15-15Zm105 75h-11.5c-4.5-14.5-17.5-25-33.5-25s-29 10.5-33.5 25H30a10 10 0 0 0 0 20h66.5c4.5 14.5 17.5 25 33.5 25s29-10.5 33.5-25H175a10 10 0 0 0 0-20Zm-45 25a15 15 0 1 1 15-15 14.73 14.73 0 0 1-15 15Z'/%3E%3C/svg%3E");
-}
-.maplibregl-ctrl-group button.maplibregl-ctrl-search {
+
+.maplibregl-ctrl-group button.maplibregl-ctrl-search,
+.maplibregl-ctrl-group button.maplibregl-ctrl-legend {
   padding: 4px;
   width: auto;
+  font-size: 1rem;
 }
-.maplibregl-ctrl-group button.maplibregl-ctrl-search .maplibregl-ctrl-icon {
-  background-size: contain;
-  background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.9536 14.9458L21 21M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z' stroke='%23000000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-position-x: left;
-}
-.maplibregl-ctrl-group button.maplibregl-ctrl-search .maplibregl-ctrl-icon span {
-  margin-left: 1.5rem;
-  font-size: 16px;
+
+.maplibregl-ctrl-group button.maplibregl-ctrl-search .maplibregl-ctrl-icon,
+.maplibregl-ctrl-group button.maplibregl-ctrl-legend .maplibregl-ctrl-icon,
+.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
+.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon,
+.maplibregl-ctrl-group button.maplibregl-ctrl-compass .maplibregl-ctrl-icon,
+.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon,
+.maplibregl-ctrl-group button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon,
+.maplibregl-ctrl-group button.maplibregl-ctrl-edit .maplibregl-ctrl-icon,
+.maplibregl-ctrl-group button.maplibregl-ctrl-configuration .maplibregl-ctrl-icon {
+  background-image: none;
+  background-color: var(--bs-body-color);
+  mask-size: contain;
+  mask-position: center;
+  display: inline-block;
+  vertical-align: top;
 }
 
-.maplibregl-ctrl-group button.maplibregl-ctrl-legend {
-  padding: 4px;
-  width: auto;
+.maplibregl-ctrl-group button.maplibregl-ctrl-search .maplibregl-ctrl-icon {
+  mask-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.9536 14.9458L21 21M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z' stroke='%23000000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  width: 1.5rem;
+  height: 1.4rem;
 }
 .maplibregl-ctrl-group button.maplibregl-ctrl-legend .maplibregl-ctrl-icon {
-  background-size: contain;
-  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg fill='%23000000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' enable-background='new 0 0 52 52' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M26.7,42.8c0.8,0,1.5,0.7,1.5,1.5v3.2c0,0.8-0.7,1.5-1.5,1.5h-3.2c-0.8,0-1.5-0.7-1.5-1.5v-3.2 c0-0.8,0.7-1.5,1.5-1.5H26.7z'/%3E%3Cpath d='M28.2,35.1c0-2.1,1.3-4,3.1-4.8h0.1c5.2-2.1,8.8-7.2,8.8-13.2c0-7.8-6.4-14.2-14.2-14.2 c-7.2,0-13.2,5.3-14.2,12.2v0.1c-0.1,0.9,0.6,1.6,1.5,1.6h3.2c0.8,0,1.4-0.5,1.5-1.1v-0.2c0.7-3.7,4-6.5,7.9-6.5 c4.5,0,8.1,3.6,8.1,8.1c0,2.1-0.8,4-2.1,5.5l-0.1,0.1c-0.9,1-2.1,1.6-3.3,2c-4,1.4-6.7,5.2-6.7,9.4v1.5c0,0.8,0.6,1.4,1.4,1.4h3.2 c0.8,0,1.6-0.6,1.6-1.5L28.2,35.1z'/%3E%3C/g%3E%3C/svg%3E");
-  background-position-x: left;
-}
-.maplibregl-ctrl-group button.maplibregl-ctrl-legend .maplibregl-ctrl-icon span {
-  margin-left: 1.5rem;
-  font-size: 16px;
+  mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg fill='%23000000' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' enable-background='new 0 0 52 52' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M26.7,42.8c0.8,0,1.5,0.7,1.5,1.5v3.2c0,0.8-0.7,1.5-1.5,1.5h-3.2c-0.8,0-1.5-0.7-1.5-1.5v-3.2 c0-0.8,0.7-1.5,1.5-1.5H26.7z'/%3E%3Cpath d='M28.2,35.1c0-2.1,1.3-4,3.1-4.8h0.1c5.2-2.1,8.8-7.2,8.8-13.2c0-7.8-6.4-14.2-14.2-14.2 c-7.2,0-13.2,5.3-14.2,12.2v0.1c-0.1,0.9,0.6,1.6,1.5,1.6h3.2c0.8,0,1.4-0.5,1.5-1.1v-0.2c0.7-3.7,4-6.5,7.9-6.5 c4.5,0,8.1,3.6,8.1,8.1c0,2.1-0.8,4-2.1,5.5l-0.1,0.1c-0.9,1-2.1,1.6-3.3,2c-4,1.4-6.7,5.2-6.7,9.4v1.5c0,0.8,0.6,1.4,1.4,1.4h3.2 c0.8,0,1.6-0.6,1.6-1.5L28.2,35.1z'/%3E%3C/g%3E%3C/svg%3E");
+  width: 1.5rem;
+  height: 1.4rem;
+}
+.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
+  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E");
+  width: 1.8rem;
+  height: 1.8rem;
+}
+.maplibregl-ctrl-group button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
+  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E");
+  width: 1.8rem;
+  height: 1.8rem;
+}
+.maplibregl-ctrl-group button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
+  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E");
+  width: 1.8rem;
+  height: 1.8rem;
+}
+.maplibregl-ctrl-group button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon {
+  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E");
+  width: 1.8rem;
+  height: 1.8rem;
+}
+.maplibregl-ctrl-group button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon {
+  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E");
+  width: 1.8rem;
+  height: 1.8rem;
+}
+.maplibregl-ctrl-group button.maplibregl-ctrl-edit .maplibregl-ctrl-icon {
+  mask-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.1213 2.70705C19.9497 1.53548 18.0503 1.53547 16.8787 2.70705L15.1989 4.38685L7.29289 12.2928C7.16473 12.421 7.07382 12.5816 7.02986 12.7574L6.02986 16.7574C5.94466 17.0982 6.04451 17.4587 6.29289 17.707C6.54127 17.9554 6.90176 18.0553 7.24254 17.9701L11.2425 16.9701C11.4184 16.9261 11.5789 16.8352 11.7071 16.707L19.5556 8.85857L21.2929 7.12126C22.4645 5.94969 22.4645 4.05019 21.2929 2.87862L21.1213 2.70705ZM18.2929 4.12126C18.6834 3.73074 19.3166 3.73074 19.7071 4.12126L19.8787 4.29283C20.2692 4.68336 20.2692 5.31653 19.8787 5.70705L18.8622 6.72357L17.3068 5.10738L18.2929 4.12126ZM15.8923 6.52185L17.4477 8.13804L10.4888 15.097L8.37437 15.6256L8.90296 13.5112L15.8923 6.52185ZM4 7.99994C4 7.44766 4.44772 6.99994 5 6.99994H10C10.5523 6.99994 11 6.55223 11 5.99994C11 5.44766 10.5523 4.99994 10 4.99994H5C3.34315 4.99994 2 6.34309 2 7.99994V18.9999C2 20.6568 3.34315 21.9999 5 21.9999H16C17.6569 21.9999 19 20.6568 19 18.9999V13.9999C19 13.4477 18.5523 12.9999 18 12.9999C17.4477 12.9999 17 13.4477 17 13.9999V18.9999C17 19.5522 16.5523 19.9999 16 19.9999H5C4.44772 19.9999 4 19.5522 4 18.9999V7.99994Z' fill='%23000000'/%3E%3C/svg%3E");
+  width: 1.5rem;
+  height: 1.4rem;
+}
+.maplibregl-ctrl-group button.maplibregl-ctrl-configuration .maplibregl-ctrl-icon {
+  mask-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 200 200' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.5 75C41 89.5 54 100 70 100s29-10.5 33.5-25H170a10 10 0 0 0 0-20h-66.5C99 40.5 86 30 70 30S41 40.5 36.5 55H25a10 10 0 0 0 0 20ZM70 50a15 15 0 1 1-15 15 14.73 14.73 0 0 1 15-15Zm105 75h-11.5c-4.5-14.5-17.5-25-33.5-25s-29 10.5-33.5 25H30a10 10 0 0 0 0 20h66.5c4.5 14.5 17.5 25 33.5 25s29-10.5 33.5-25H175a10 10 0 0 0 0-20Zm-45 25a15 15 0 1 1 15-15 14.73 14.73 0 0 1-15 15Z'/%3E%3C/svg%3E");
+  width: 1.5rem;
+  height: 1.4rem;
 }
 
 .maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact {
diff --git a/proxy/index.html b/proxy/index.html
index 329100d0..a94d19c7 100644
--- a/proxy/index.html
+++ b/proxy/index.html
@@ -27,7 +27,7 @@
 <div id="search-backdrop" class="modal backdrop" tabindex="-1" role="dialog">
   <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
     <div class="modal-content">
-      <div class="modal-header bg-light">
+      <div class="modal-header">
         <h5 class="modal-title">Search</h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="hideSearch()"></button>
       </div>
@@ -94,7 +94,7 @@ <h5 class="modal-title">Search</h5>
 <div id="configuration-backdrop" class="modal backdrop" tabindex="-1" role="dialog">
   <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
     <div class="modal-content">
-      <div class="modal-header bg-light">
+      <div class="modal-header">
         <h5 class="modal-title">Map configuration</h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="hideConfiguration()"></button>
       </div>
@@ -116,13 +116,13 @@ <h5 class="modal-title">Map configuration</h5>
           </div>
           <div class="mb-3">
             <label for="backgroundUrl" class="form-label" >Background map tile URL</label>
-            <div>
+            <div class="mb-1">
               <div class="form-check form-check-inline">
                 <input class="form-check-input" type="radio" name="backgroundType" id="backgroundTypeRaster" value="raster" checked onchange="updateConfiguration('backgroundType', 'raster'); updateBackgroundMapStyle();">
                 <label class="form-check-label" for="backgroundTypeRaster">Raster</label>
               </div>
               <div class="form-check form-check-inline">
-                <input class="form-check-input" type="radio" name="backgroundType" id="backgroundTypeVector" value="raster" checked onchange="updateConfiguration('backgroundType', 'vector'); updateBackgroundMapStyle();">
+                <input class="form-check-input" type="radio" name="backgroundType" id="backgroundTypeVector" value="raster" onchange="updateConfiguration('backgroundType', 'vector'); updateBackgroundMapStyle();">
                 <label class="form-check-label" for="backgroundTypeVector">Vector</label>
               </div>
             </div>
@@ -133,6 +133,26 @@ <h5 class="modal-title">Map configuration</h5>
               Vector tiles: A URL specifying a vector style. See <a href="https://wiki.openstreetmap.org/wiki/Vector_tiles#Providers" target="_blank">the wiki</a> for a list of vector tile providers, for example <code>https://americanamap.org/style.json</code>.
             </small>
           </div>
+          <div class="mb-3">
+            <label class="form-label">Theme</label>
+            <div>
+              <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="theme" id="themeSystem" value="system" checked onchange="onThemeChange('system');">
+                <label class="form-check-label" for="themeSystem">System</label>
+              </div>
+              <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="theme" id="themeLight" value="light" onchange="onThemeChange('light');">
+                <label class="form-check-label" for="themeLight">Light</label>
+              </div>
+              <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="theme" id="themeDark" value="dark" onchange="onThemeChange('dark');">
+                <label class="form-check-label" for="themeDark">Dark</label>
+              </div>
+            </div>
+            <small class="form-text">
+              Control the theme of OpenRailwayMap. The default is to follow the system and browser preferences. A light or dark theme can also be configured.
+            </small>
+          </div>
         </form>
       </div>
     </div>
diff --git a/proxy/js/styles.mjs b/proxy/js/styles.mjs
index 24c99fa7..28f368c1 100644
--- a/proxy/js/styles.mjs
+++ b/proxy/js/styles.mjs
@@ -19,48 +19,146 @@ const knownStyles = [
   'loading_gauge',
   'track_class',
 ];
+const knownThemes = [
+  'light',
+  'dark',
+];
 
 const globalMinZoom = 1;
 const glodalMaxZoom = 20;
 
 const colors = {
-  hover: {
-    main: '#ff0000',
-    // High speed lines and 25kV are the hover color by default
-    alternative: '#ffc107',
-    textHalo: 'yellow',
+  light: {
+    text: {
+      main: 'white',
+      halo: 'black',
+    },
+    halo: 'white',
+    casing: 'white',
+    hover: {
+      main: '#ff0000',
+      // High speed lines and 25kV are the hover color by default
+      alternative: '#ffc107',
+      textHalo: 'yellow',
+    },
+    railwayLine: {
+      text: '#585858',
+    },
+    styles: {
+      standard: {
+        main: '#ff8100',
+        highspeed: '#ff0c00',
+        branch: '#c4b600',
+        narrowGauge: '#c0da00',
+        no_usage: '#000000',
+        disused: '#70584d',
+        tourism: '#5b4d70',
+        abandoned: '#7f6a62',
+        razed: '#94847e',
+        tram: '#d877b8',
+        subway: '#0300c3',
+        light_rail: '#00bd14',
+        siding: '#000000',
+        yard: '#000000',
+        spur: '#87491d',
+        industrial: '#87491d',
+        casing: {
+          railway: '#ffffff',
+          bridge: '#000000',
+        },
+        tunnelCover: 'rgba(255, 255, 255, 50%)',
+        turntable: {
+          fill: '#ababab',
+          casing: '#808080',
+        },
+        stationsText: 'blue',
+        yardText: '#87491D',
+        tramStopText: '#D877B8',
+        defaultText: '#616161',
+        signalBox: {
+          text: '#404040',
+          halo: '#bfffb3',
+        },
+        track: {
+          text: 'white',
+          halo: 'blue',
+          hover: 'yellow',
+        },
+      },
+    },
+    km: {
+      text: 'hsl(268, 100%, 40%)'
+    },
+    signals: {
+      direction: '#a8d8bcff'
+    },
   },
-  styles: {
-    standard: {
-      main: '#ff8100',
-      highspeed: '#ff0c00',
-      branch: '#c4b600',
-      narrowGauge: '#c0da00',
-      no_usage: '#000000',
-      disused: '#70584d',
-      tourism: '#5b4d70',
-      abandoned: '#7f6a62',
-      razed: '#94847e',
-      tram: '#d877b8',
-      subway: '#0300c3',
-      light_rail: '#00bd14',
-      siding: '#000000',
-      yard: '#000000',
-      spur: '#87491d',
-      industrial: '#87491d',
-      casing: {
-        railway: '#ffffff',
-        bridge: '#000000',
-      },
-      turntable: {
-        fill: '#ababab',
-        casing: '#808080',
+  dark: {
+    text: {
+      main: 'white',
+      halo: 'black',
+    },
+    halo: '#333',
+    casing: '#666',
+    hover: {
+      main: '#ff0000',
+      // High speed lines and 25kV are the hover color by default
+      alternative: '#ffc107',
+      textHalo: '#362800',
+    },
+    railwayLine: {
+      text: '#ccc',
+    },
+    styles: {
+      standard: {
+        main: '#ff8100',
+        highspeed: '#ff0c00',
+        branch: '#c4b600',
+        narrowGauge: '#c0da00',
+        no_usage: '#000000',
+        disused: '#70584d',
+        tourism: '#5b4d70',
+        abandoned: '#7f6a62',
+        razed: '#94847e',
+        tram: '#d877b8',
+        subway: '#0300c3',
+        light_rail: '#00bd14',
+        siding: '#000000',
+        yard: '#000000',
+        spur: '#87491d',
+        industrial: '#87491d',
+        casing: {
+          railway: '#ffffff',
+          bridge: '#ddd',
+        },
+        tunnelCover: 'rgba(0, 0, 0, 25%)',
+        turntable: {
+          fill: '#ababab',
+          casing: '#808080',
+        },
+        trackHalo: '#00298d',
+        stationsText: '#bdcfff',
+        yardText: '#ffa35f',
+        tramStopText: '#D877B8',
+        defaultText: '#d2d2d2',
+        signalBox: {
+          text: '#bfffb3',
+          halo: '#404040',
+        },
+        track: {
+          text: 'white',
+          halo: '#00298d',
+          hover: 'yellow',
+        },
       },
     },
+    km: {
+      text: 'hsl(268, 5%, 86%)',
+    },
+    signals: {
+      direction: '#a8d8bcff'
+    },
   },
-  signals: {
-    direction: '#a8d8bcff'
-  }
 };
 
 const turntable_casing_width = 2;
@@ -557,8 +655,8 @@ const railwayLineWidth = ['step', ['zoom'],
     0,
   ],
 ];
-const trainProtectionCasingPaint = dashArray => ({
-  'line-color': 'white',
+const trainProtectionCasingPaint = (theme, dashArray) => ({
+  'line-color': colors[theme].casing,
   'line-width': railwayLineWidth,
   'line-gap-width': 1,
   'line-dasharray': dashArray,
@@ -568,14 +666,14 @@ const trainProtectionLayout = {
   'line-join': 'round',
   'line-cap': 'round',
 };
-const trainProtectionColor = ['case',
-  ['boolean', ['feature-state', 'hover'], false], colors.hover.main,
+const trainProtectionColor = theme => ['case',
+  ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.main,
   ...signals_railway_line.train_protections.flatMap(train_protection =>
     [['==', ['get', 'train_protection'], train_protection.train_protection], train_protection.color]),
   'grey',
 ];
-const trainProtectionFillPaint = dashArray => ({
-  'line-color': trainProtectionColor,
+const trainProtectionFillPaint = (theme, dashArray) => ({
+  'line-color': trainProtectionColor(theme),
   'line-width': railwayLineWidth,
   'line-dasharray': dashArray,
 });
@@ -591,71 +689,71 @@ const razed_dasharray = [1.5, 3.5];
 const construction_dasharray = [4.5, 4.5];
 const proposed_dasharray = [1, 4];
 
-const standardLowFillPaint = {
+const standardLowFillPaint = theme => ({
   'line-color': ['case',
     ['boolean', ['feature-state', 'hover'], false], ['case',
-      ['get', 'highspeed'], colors.hover.alternative,
-      colors.hover.main,
+      ['get', 'highspeed'], colors[theme].hover.alternative,
+      colors[theme].hover.main,
     ],
-    ['get', 'highspeed'], colors.styles.standard.highspeed,
-    colors.styles.standard.main,
+    ['get', 'highspeed'], colors[theme].styles.standard.highspeed,
+    colors[theme].styles.standard.main,
   ],
   'line-width': railwayLineWidth,
-};
-const standardMediumFillPaint = {
+});
+const standardMediumFillPaint = theme => ({
   'line-color': ['case',
     ['boolean', ['feature-state', 'hover'], false], ['case',
-      ['get', 'highspeed'], colors.hover.alternative,
-      colors.hover.main,
+      ['get', 'highspeed'], colors[theme].hover.alternative,
+      colors[theme].hover.main,
     ],
-    ['==', ['get', 'usage'], 'branch'], colors.styles.standard.branch,
-    ['get', 'highspeed'], colors.styles.standard.highspeed,
-    colors.styles.standard.main,
+    ['==', ['get', 'usage'], 'branch'], colors[theme].styles.standard.branch,
+    ['get', 'highspeed'], colors[theme].styles.standard.highspeed,
+    colors[theme].styles.standard.main,
   ],
   'line-width': railwayLineWidth,
-};
-const standardColor = ['case',
+});
+const standardColor = theme => ['case',
   ['boolean', ['feature-state', 'hover'], false], ['case',
-    ['all', ['==', ['get', 'usage'], 'main'], ['get', 'highspeed']], colors.hover.alternative,
-    colors.hover.main,
+    ['all', ['==', ['get', 'usage'], 'main'], ['get', 'highspeed']], colors[theme].hover.alternative,
+    colors[theme].hover.main,
   ],
-  ['==', ['get', 'railway'], 'disused'], colors.styles.standard.disused,
-  ['==', ['get', 'railway'], 'abandoned'], colors.styles.standard.abandoned,
-  ['==', ['get', 'railway'], 'razed'], colors.styles.standard.razed,
+  ['==', ['get', 'railway'], 'disused'], colors[theme].styles.standard.disused,
+  ['==', ['get', 'railway'], 'abandoned'], colors[theme].styles.standard.abandoned,
+  ['==', ['get', 'railway'], 'razed'], colors[theme].styles.standard.razed,
   ['==', ['get', 'feature'], 'rail'],
   ['case',
-    ['all', ['==', ['get', 'usage'], null], ['==', ['get', 'service'], 'spur']], colors.styles.standard.spur,
-    ['all', ['==', ['get', 'usage'], null], ['==', ['get', 'service'], 'yard']], colors.styles.standard.yard,
-    ['all', ['==', ['get', 'usage'], null], ['==', ['get', 'service'], 'crossover']], colors.styles.standard.siding,
-    ['all', ['==', ['get', 'usage'], null], ['==', ['get', 'service'], 'siding']], colors.styles.standard.siding,
-    ['all', ['==', ['get', 'usage'], null], ['==', ['get', 'service'], null]], colors.styles.standard.no_usage,
-    ['==', ['get', 'usage'], 'industrial'], colors.styles.standard.industrial,
-    ['==', ['get', 'usage'], 'tourism'], colors.styles.standard.tourism,
-    ['==', ['get', 'usage'], 'branch'], colors.styles.standard.branch,
-    ['all', ['==', ['get', 'usage'], 'main'], ['get', 'highspeed']], colors.styles.standard.highspeed,
-    ['==', ['get', 'usage'], 'main'], colors.styles.standard.main,
+    ['all', ['==', ['get', 'usage'], null], ['==', ['get', 'service'], 'spur']], colors[theme].styles.standard.spur,
+    ['all', ['==', ['get', 'usage'], null], ['==', ['get', 'service'], 'yard']], colors[theme].styles.standard.yard,
+    ['all', ['==', ['get', 'usage'], null], ['==', ['get', 'service'], 'crossover']], colors[theme].styles.standard.siding,
+    ['all', ['==', ['get', 'usage'], null], ['==', ['get', 'service'], 'siding']], colors[theme].styles.standard.siding,
+    ['all', ['==', ['get', 'usage'], null], ['==', ['get', 'service'], null]], colors[theme].styles.standard.no_usage,
+    ['==', ['get', 'usage'], 'industrial'], colors[theme].styles.standard.industrial,
+    ['==', ['get', 'usage'], 'tourism'], colors[theme].styles.standard.tourism,
+    ['==', ['get', 'usage'], 'branch'], colors[theme].styles.standard.branch,
+    ['all', ['==', ['get', 'usage'], 'main'], ['get', 'highspeed']], colors[theme].styles.standard.highspeed,
+    ['==', ['get', 'usage'], 'main'], colors[theme].styles.standard.main,
     'rgba(255, 255, 255, 1.0)',
   ],
   ['==', ['get', 'feature'], 'narrow_gauge'],
   ['case',
-    ['all', ['==', ['get', 'usage'], 'industrial'], ['==', ['get', 'service'], 'spur']], colors.styles.standard.industrial,
-    colors.styles.standard.narrowGauge,
+    ['all', ['==', ['get', 'usage'], 'industrial'], ['==', ['get', 'service'], 'spur']], colors[theme].styles.standard.industrial,
+    colors[theme].styles.standard.narrowGauge,
   ],
-  ['==', ['get', 'feature'], 'subway'], colors.styles.standard.subway,
-  ['==', ['get', 'feature'], 'light_rail'], colors.styles.standard.light_rail,
-  ['==', ['get', 'feature'], 'tram'], colors.styles.standard.tram,
+  ['==', ['get', 'feature'], 'subway'], colors[theme].styles.standard.subway,
+  ['==', ['get', 'feature'], 'light_rail'], colors[theme].styles.standard.light_rail,
+  ['==', ['get', 'feature'], 'tram'], colors[theme].styles.standard.tram,
   'rgba(255, 255, 255, 1.0)',
 ]
-const standardFillPaint = dashArray => ({
-  'line-color': standardColor,
+const standardFillPaint = (theme, dashArray) => ({
+  'line-color': standardColor(theme),
   'line-width': railwayLineWidth,
   'line-dasharray': dashArray,
 });
-const speedCasingPaint = {
-  'line-color': 'white',
+const speedCasingPaint = theme => ({
+  'line-color': colors[theme].casing,
   'line-width': railwayLineWidth,
   'line-gap-width': 1,
-};
+});
 const speedLayout = {
   'line-join': 'round',
   'line-cap': 'round',
@@ -666,20 +764,20 @@ const maxSpeed = 380
 const startHue = 248
 const endHue = 284;
 
-const speedColor = ['case',
+const speedColor = theme => ['case',
   ['boolean', ['feature-state', 'hover'], false], ['case',
-    ['all', ['>=', ['get', 'maxspeed'], 260], ['<=', ['get', 'maxspeed'], 300]], colors.hover.alternative,
-    colors.hover.main,
+    ['all', ['>=', ['get', 'maxspeed'], 260], ['<=', ['get', 'maxspeed'], 300]], colors[theme].hover.alternative,
+    colors[theme].hover.main,
   ],
   ['==', ['get', 'maxspeed'], null], 'gray',
   // Reverse hue order
   ['concat', 'hsl(', ['%', ['+', ['-', startHue, ['*', startHue + (360 - endHue), ['/', ['-', ['max', minSpeed, ['min', ['get', 'maxspeed'], maxSpeed]], minSpeed], maxSpeed - minSpeed]]], 360], 360], ', 100%, 40%)'],
 ]
 
-const speedFillPaint = {
-  'line-color': speedColor,
+const speedFillPaint = theme => ({
+  'line-color': speedColor(theme),
   'line-width': railwayLineWidth,
-};
+});
 
 const electrification_construction_dashes = [2.5, 2.5];
 const electrification_proposed_dashes = [2, 4];
@@ -707,15 +805,15 @@ const color_12_5kv_60hz = '#999900';
 const color_20kv_50hz = '#FFCC66';
 const color_20kv_60hz = '#FF9966';
 
-const electrificationCasingPaint = {
-  'line-color': 'white',
+const electrificationCasingPaint = theme => ({
+  'line-color': colors[theme].casing,
   'line-width': railwayLineWidth,
   'line-gap-width': 0.75,
-};
-const electrificationColor = (voltageProperty, frequencyProperty) => ['case',
+});
+const electrificationColor = (theme, voltageProperty, frequencyProperty) => ['case',
   ['boolean', ['feature-state', 'hover'], false], ['case',
-    ['==', ['get', voltageProperty], 25000], colors.hover.alternative,
-    colors.hover.main,
+    ['==', ['get', voltageProperty], 25000], colors[theme].hover.alternative,
+    colors[theme].hover.main,
   ],
   ['all', ['==', ['get', frequencyProperty], 60], ['==', ['get', voltageProperty], 25000]], color_25kv_60hz,
   ['all', ['==', ['get', frequencyProperty], 50], ['==', ['get', voltageProperty], 25000]], color_25kv_50hz,
@@ -759,8 +857,8 @@ const electrificationColor = (voltageProperty, frequencyProperty) => ['case',
   ['==', ['get', 'electrification_state'], 'no'], color_no,
   'gray',
 ];
-const electrificationFillPaint = (dashArray, voltageProperty, frequencyProperty) => ({
-  'line-color': electrificationColor(voltageProperty, frequencyProperty),
+const electrificationFillPaint = (theme, dashArray, voltageProperty, frequencyProperty) => ({
+  'line-color': electrificationColor(theme, voltageProperty, frequencyProperty),
   'line-width': railwayLineWidth,
   'line-dasharray': dashArray,
 });
@@ -830,16 +928,16 @@ const color_gauge_narrow = '#C0C0FF';
 const color_gauge_standard = '#808080';
 const color_gauge_unknown = '#C0C0C0';
 
-const gaugeCasingPaint = {
-  'line-color': 'white',
+const gaugeCasingPaint = theme => ({
+  'line-color': colors[theme].casing,
   'line-width': railwayLineWidth,
   'line-gap-width': 0.75,
-};
+});
 
-const gaugeColor = (gaugeProperty, gaugeIntProperty) => ['case',
+const gaugeColor = (theme, gaugeProperty, gaugeIntProperty) => ['case',
   ['boolean', ['feature-state', 'hover'], false], ['case',
-    ['all', ['!=', ['get', gaugeIntProperty], null], ['>=', 1450, ['get', gaugeIntProperty]], ['<=', ['get', gaugeIntProperty], 1524]], colors.hover.alternative,
-    colors.hover.main,
+    ['all', ['!=', ['get', gaugeIntProperty], null], ['>=', 1450, ['get', gaugeIntProperty]], ['<=', ['get', gaugeIntProperty], 1524]], colors[theme].hover.alternative,
+    colors[theme].hover.main,
   ],
   // monorails or tracks with monorail gauge value
   ['any',
@@ -960,8 +1058,8 @@ const gaugeColor = (gaugeProperty, gaugeIntProperty) => ['case',
   ['all', ['!=', ['get', gaugeIntProperty], null], ['>', 63, ['get', gaugeIntProperty]], ['>', ['get', gaugeIntProperty], 0]], color_gauge_unknown,
   'gray',
 ];
-const gaugeFillPaint = (gaugeProperty, gaugeIntProperty, dashArray) => ({
-  'line-color': gaugeColor(gaugeProperty, gaugeIntProperty),
+const gaugeFillPaint = (theme, gaugeProperty, gaugeIntProperty, dashArray) => ({
+  'line-color': gaugeColor(theme, gaugeProperty, gaugeIntProperty),
   'line-width': railwayLineWidth,
   'line-dasharray': dashArray,
 });
@@ -970,12 +1068,12 @@ const gaugeLayout = {
   'line-cap': 'round',
 };
 
-const loadingGaugeCasingPaint = {
-  'line-color': 'white',
+const loadingGaugeCasingPaint = theme => ({
+  'line-color': colors[theme].casing,
   'line-width': railwayLineWidth,
   'line-gap-width': 0.75,
-};
-const loadingGaugeFillPaint = (dashArray) => ({
+});
+const loadingGaugeFillPaint = (theme, dashArray) => ({
   'line-color': ['match', ['get', 'loading_gauge'],
     ...loading_gauges.flatMap(loading_gauge =>
       [loading_gauge.value, loading_gauge.color]
@@ -990,12 +1088,12 @@ const loadingGaugeLayout = {
   'line-cap': 'round',
 };
 
-const trackClassCasingPaint = {
-  'line-color': 'white',
+const trackClassCasingPaint = theme => ({
+  'line-color': colors[theme].casing,
   'line-width': railwayLineWidth,
   'line-gap-width': 0.75,
-};
-const trackClassFillPaint = (dashArray) => ({
+});
+const trackClassFillPaint = (theme, dashArray) => ({
   'line-color': ['match', ['get', 'track_class'],
     ...track_classes.flatMap(track_class =>
       [track_class.value, track_class.color]
@@ -1088,7 +1186,7 @@ const searchResults = {
   }
 };
 
-const railwayKmText = {
+const railwayKmText = theme => ({
   id: 'railway_text_km',
   type: 'symbol',
   minzoom: 10,
@@ -1100,10 +1198,10 @@ const railwayKmText = {
     true,
   ],
   paint: {
-    'text-color': 'hsl(268, 100%, 40%)',
+    'text-color': colors[theme].km.text,
     'text-halo-color': ['case',
-      ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-      'white',
+      ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+      colors[theme].halo,
     ],
     'text-halo-width': 1,
   },
@@ -1117,9 +1215,9 @@ const railwayKmText = {
     'text-font': ['Fira Code Bold'],
     'text-size': 11,
   },
-};
+});
 
-const preferredDirectionLayer = (id, filter, color) => ({
+const preferredDirectionLayer = (theme, id, filter, color) => ({
   id,
   type: 'symbol',
   minzoom: 15,
@@ -1128,7 +1226,7 @@ const preferredDirectionLayer = (id, filter, color) => ({
   filter,
   paint: {
     'icon-color': color,
-    'icon-halo-color': 'white',
+    'icon-halo-color': colors[theme].halo,
     'icon-halo-width': 2.0,
   },
   layout: {
@@ -1148,14 +1246,14 @@ const preferredDirectionLayer = (id, filter, color) => ({
   },
 });
 
-const imageLayerWithOutline = (id, spriteExpression, layer) => [
+const imageLayerWithOutline = (theme, id, spriteExpression, layer) => [
   {
     id: `${id}_outline`,
     ...layer,
     paint: {
       'icon-halo-color': ['case',
-        ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-        'white',
+        ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+        colors[theme].halo,
       ],
       'icon-halo-blur': ['case',
         ['boolean', ['feature-state', 'hover'], false], 1.0,
@@ -1182,7 +1280,7 @@ const imageLayerWithOutline = (id, spriteExpression, layer) => [
 ]
 
 // TODO remove all [switch, [zoom]] to ensure legend displays only visible features
-const layers = {
+const layers = Object.fromEntries(knownThemes.map(theme => [theme, {
   standard: [
     {
       id: 'railway_line_low_casing',
@@ -1195,7 +1293,7 @@ const layers = {
         'line-cap': 'round',
       },
       paint: {
-        'line-color': colors.styles.standard.casing.railway,
+        'line-color': colors[theme].casing,
         'line-width': railwayLineWidth,
         'line-gap-width': railway_casing_add,
       }
@@ -1210,7 +1308,7 @@ const layers = {
         'line-join': 'round',
         'line-cap': 'round',
       },
-      paint: standardLowFillPaint,
+      paint: standardLowFillPaint(theme),
     },
     {
       id: 'railway_text_stations_low',
@@ -1220,8 +1318,8 @@ const layers = {
       source: 'standard_railway_text_stations_low',
       'source-layer': 'standard_railway_text_stations_low',
       paint: {
-        'text-color': 'blue',
-        'text-halo-color': 'white',
+        'text-color': colors[theme].styles.standard.stationsText,
+        'text-halo-color': colors[theme].halo,
         'text-halo-width': 1.5,
       },
       layout: {
@@ -1245,7 +1343,7 @@ const layers = {
         'line-cap': 'round',
       },
       paint: {
-        'line-color': colors.styles.standard.casing.railway,
+        'line-color': colors[theme].casing,
         'line-width': railwayLineWidth,
         'line-gap-width': railway_casing_add,
       }
@@ -1261,7 +1359,7 @@ const layers = {
         'line-join': 'round',
         'line-cap': 'round',
       },
-      paint: standardMediumFillPaint,
+      paint: standardMediumFillPaint(theme),
     },
     {
       id: 'railway_text_stations_med',
@@ -1271,8 +1369,8 @@ const layers = {
       source: 'standard_railway_text_stations_med',
       'source-layer': 'standard_railway_text_stations_med',
       paint: {
-        'text-color': 'blue',
-        'text-halo-color': 'white',
+        'text-color': colors[theme].styles.standard.stationsText,
+        'text-halo-color': colors[theme].halo,
         'text-halo-width': 1.5,
       },
       layout: {
@@ -1302,7 +1400,7 @@ const layers = {
         'line-cap': 'round',
       },
       paint: {
-        'line-color': colors.styles.standard.casing.railway,
+        'line-color': colors[theme].casing,
         'line-width': railwayLineWidth,
         'line-gap-width': railway_tunnel_casing_add,
       }
@@ -1326,7 +1424,7 @@ const layers = {
         'line-cap': 'round',
       },
       paint: {
-        'line-color': colors.styles.standard.casing.railway,
+        'line-color': colors[theme].casing,
         'line-width': railwayLineWidth,
         'line-gap-width': railway_casing_add,
       }
@@ -1343,7 +1441,7 @@ const layers = {
         'line-cap': 'round',
       },
       paint: {
-        'line-color': colors.styles.standard.casing.railway,
+        'line-color': colors[theme].casing,
         'line-width': railwayLineWidth,
         'line-gap-width': railway_casing_add,
         'line-dasharray': construction_dasharray,
@@ -1361,7 +1459,7 @@ const layers = {
         'line-cap': 'round',
       },
       paint: {
-        'line-color': colors.styles.standard.casing.railway,
+        'line-color': colors[theme].casing,
         'line-width': railwayLineWidth,
         'line-gap-width': railway_casing_add,
         'line-dasharray': proposed_dasharray,
@@ -1379,7 +1477,7 @@ const layers = {
         'line-cap': 'round',
       },
       paint: {
-        'line-color': colors.styles.standard.casing.railway,
+        'line-color': colors[theme].casing,
         'line-width': railwayLineWidth,
         'line-gap-width': railway_casing_add,
         'line-dasharray': abandoned_dasharray,
@@ -1397,7 +1495,7 @@ const layers = {
         'line-cap': 'round',
       },
       paint: {
-        'line-color': colors.styles.standard.casing.railway,
+        'line-color': colors[theme].casing,
         'line-width': railwayLineWidth,
         'line-gap-width': railway_casing_add,
         'line-dasharray': razed_dasharray,
@@ -1420,10 +1518,10 @@ const layers = {
         'line-join': 'round',
         'line-cap': 'round',
       },
-      paint: standardFillPaint([1]),
+      paint: standardFillPaint(theme, [1]),
     },
     {
-      id: 'railway_tunnel_bright',
+      id: 'railway_tunnel_cover',
       type: 'line',
       minzoom: 8,
       source: 'high',
@@ -1440,12 +1538,11 @@ const layers = {
         'line-cap': 'round',
       },
       paint: {
-        ...standardFillPaint([1]),
-        'line-color': 'rgba(255, 255, 255, 50%)',
+        ...standardFillPaint(theme, [1]),
+        'line-color': colors[theme].styles.standard.tunnelCover,
       }
     },
-    preferredDirectionLayer(
-      'railway_tunnel_preferred_direction',
+    preferredDirectionLayer(theme, 'railway_tunnel_preferred_direction',
       ['all',
         ['get', 'tunnel'],
         ['any',
@@ -1454,7 +1551,7 @@ const layers = {
           ['==', ['get', 'preferred_direction'], 'both'],
         ],
       ],
-      standardColor,
+      standardColor(theme),
     ),
     {
       id: 'railway_construction_fill',
@@ -1467,7 +1564,7 @@ const layers = {
         'line-join': 'round',
         'line-cap': 'round',
       },
-      paint: standardFillPaint(construction_dasharray),
+      paint: standardFillPaint(theme, construction_dasharray),
     },
     {
       id: 'railway_proposed_fill',
@@ -1480,7 +1577,7 @@ const layers = {
         'line-join': 'round',
         'line-cap': 'round',
       },
-      paint: standardFillPaint(proposed_dasharray),
+      paint: standardFillPaint(theme, proposed_dasharray),
     },
     {
       id: 'railway_abandoned_fill',
@@ -1493,7 +1590,7 @@ const layers = {
         'line-join': 'round',
         'line-cap': 'round',
       },
-      paint: standardFillPaint(abandoned_dasharray),
+      paint: standardFillPaint(theme, abandoned_dasharray),
     },
     {
       id: 'railway_razed_fill',
@@ -1506,7 +1603,7 @@ const layers = {
         'line-join': 'round',
         'line-cap': 'round',
       },
-      paint: standardFillPaint(razed_dasharray),
+      paint: standardFillPaint(theme, razed_dasharray),
     },
     {
       id: 'railway_line_fill',
@@ -1526,10 +1623,9 @@ const layers = {
         'line-join': 'round',
         'line-cap': 'round',
       },
-      paint: standardFillPaint([1]),
+      paint: standardFillPaint(theme, [1]),
     },
-    preferredDirectionLayer(
-      'railway_preferred_direction',
+    preferredDirectionLayer(theme, 'railway_preferred_direction',
       ['all',
         ['!', ['get', 'bridge']],
         ['!', ['get', 'tunnel']],
@@ -1539,7 +1635,7 @@ const layers = {
           ['==', ['get', 'preferred_direction'], 'both'],
         ]
       ],
-      standardColor,
+      standardColor(theme),
     ),
     {
       id: 'railway_bridge_railing',
@@ -1561,7 +1657,7 @@ const layers = {
         ['!=', ['get', 'railway'], 'razed'],
       ],
       paint: {
-        'line-color': colors.styles.standard.casing.bridge,
+        'line-color': colors[theme].styles.standard.casing.bridge,
         'line-width': railwayLineWidth,
         'line-gap-width': bridge_casing_add,
       }
@@ -1586,7 +1682,7 @@ const layers = {
         ['!=', ['get', 'railway'], 'razed'],
       ],
       paint: {
-        'line-color': colors.styles.standard.casing.railway,
+        'line-color': colors[theme].casing,
         'line-width': railwayLineWidth,
         'line-gap-width': railway_casing_add,
       }
@@ -1608,7 +1704,7 @@ const layers = {
         'line-join': 'round',
         'line-cap': 'round',
       },
-      paint: standardFillPaint([1]),
+      paint: standardFillPaint(theme, [1]),
     },
     {
       id: 'railway_turntables_fill',
@@ -1617,7 +1713,7 @@ const layers = {
       source: 'openrailwaymap_standard',
       'source-layer': 'standard_railway_turntables',
       paint: {
-        'fill-color': colors.styles.standard.turntable.fill,
+        'fill-color': colors[theme].styles.standard.turntable.fill,
       }
     },
     {
@@ -1627,7 +1723,7 @@ const layers = {
       source: 'openrailwaymap_standard',
       'source-layer': 'standard_railway_turntables',
       paint: {
-        'line-color': colors.styles.standard.turntable.casing,
+        'line-color': colors[theme].styles.standard.turntable.casing,
         'line-width': turntable_casing_width,
       }
     },
@@ -1644,6 +1740,7 @@ const layers = {
       }
     },
     ...imageLayerWithOutline(
+      theme,
       'railway_symbols_low',
       ['get', 'feature'],
       {
@@ -1658,6 +1755,7 @@ const layers = {
       },
     ),
     ...imageLayerWithOutline(
+      theme,
       'railway_symbols_med_high',
       ['get', 'feature'],
       {
@@ -1696,6 +1794,7 @@ const layers = {
       },
     ),
     ...imageLayerWithOutline(
+      theme,
       'railway_symbols_med',
       ['get', 'feature'],
       {
@@ -1715,6 +1814,7 @@ const layers = {
       },
     ),
     ...imageLayerWithOutline(
+      theme,
       'railway_symbols_high',
       ['get', 'feature'],
       {
@@ -1729,7 +1829,7 @@ const layers = {
         },
       },
     ),
-    railwayKmText,
+    railwayKmText(theme),
     {
       id: 'railway_text_track_numbers',
       type: 'symbol',
@@ -1739,10 +1839,10 @@ const layers = {
       filter: ['!=', ['get', 'track_ref'], null],
       paint: {
         'text-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-          'white',
+          ['boolean', ['feature-state', 'hover'], false], colors[theme].styles.standard.track.hover,
+          colors[theme].styles.standard.track.text,
         ],
-        'text-halo-color': 'blue',
+        'text-halo-color': colors[theme].styles.standard.track.halo,
         'text-halo-width': 4,
         'text-halo-blur': 2,
       },
@@ -2000,10 +2100,10 @@ const layers = {
         ['!=', ['get', 'standard_label'], null],
       ],
       paint: {
-        'text-color': '#585858',
+        'text-color': colors[theme].railwayLine.text,
         'text-halo-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-          'white',
+          ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+          colors[theme].halo,
         ],
         'text-halo-width': 2,
       },
@@ -2029,14 +2129,15 @@ const layers = {
       source: 'openrailwaymap_standard',
       'source-layer': 'standard_railway_switch_ref',
       paint: {
+        'text-color': colors[theme].text.main,
         'text-halo-color': ['case',
           // Invert coloring on hover
           ['boolean', ['feature-state', 'hover'], false], ['case',
             ['get', 'railway_local_operated'], 'white',
-            colors.hover.textHalo,
+            colors[theme].hover.textHalo,
           ],
           ['get', 'railway_local_operated'], 'yellow',
-          'white'
+          colors[theme].halo
         ],
         'text-halo-width': 2,
       },
@@ -2079,19 +2180,19 @@ const layers = {
       ],
       paint: {
         'text-color': ['case',
-          ['==', ['get', 'railway'], 'yard'], '#87491D',
-          ['==', ['get', 'railway'], 'tram_stop'], '#D877B8',
-          ['==', ['get', 'railway'], 'station'], 'blue',
-          ['==', ['get', 'railway'], 'halt'], 'blue',
-          '#616161',
+          ['==', ['get', 'railway'], 'yard'], colors[theme].styles.standard.yardText,
+          ['==', ['get', 'railway'], 'tram_stop'], colors[theme].styles.standard.tramStopText,
+          ['==', ['get', 'railway'], 'station'], colors[theme].styles.standard.stationsText,
+          ['==', ['get', 'railway'], 'halt'], colors[theme].styles.standard.stationsText,
+          colors[theme].styles.standard.defaultText,
         ],
         'text-halo-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-          ['==', ['get', 'railway'], 'yard'], '#F1F1F1',
-          ['==', ['get', 'railway'], 'tram_stop'], 'white',
-          ['==', ['get', 'railway'], 'station'], 'white',
-          ['==', ['get', 'railway'], 'halt'], 'white',
-          '#F1F1F1',
+          ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+          // ['==', ['get', 'railway'], 'yard'], colors[theme].halo,
+          // ['==', ['get', 'railway'], 'tram_stop'], colors[theme].halo,
+          // ['==', ['get', 'railway'], 'station'], colors[theme].halo,
+          // ['==', ['get', 'railway'], 'halt'], colors[theme].halo,
+          colors[theme].halo,
         ],
         'text-halo-width': 1.5,
       },
@@ -2124,7 +2225,7 @@ const layers = {
       source: 'openrailwaymap_low',
       maxzoom: 7,
       'source-layer': 'railway_line_low',
-      paint: speedCasingPaint,
+      paint: speedCasingPaint(theme),
       layout: speedLayout,
     },
     {
@@ -2133,7 +2234,7 @@ const layers = {
       source: 'openrailwaymap_low',
       maxzoom: 7,
       'source-layer': 'railway_line_low',
-      paint: speedFillPaint,
+      paint: speedFillPaint(theme),
       layout: speedLayout,
     },
     {
@@ -2143,7 +2244,7 @@ const layers = {
       minzoom: 7,
       maxzoom: 8,
       'source-layer': 'railway_line_med',
-      paint: speedCasingPaint,
+      paint: speedCasingPaint(theme),
       layout: speedLayout,
     },
     {
@@ -2153,7 +2254,7 @@ const layers = {
       minzoom: 7,
       maxzoom: 8,
       'source-layer': 'railway_line_med',
-      paint: speedFillPaint,
+      paint: speedFillPaint(theme),
       layout: speedLayout,
     },
     {
@@ -2162,7 +2263,7 @@ const layers = {
       source: 'high',
       minzoom: 8,
       'source-layer': 'railway_line_high',
-      paint: speedCasingPaint,
+      paint: speedCasingPaint(theme),
       layout: speedLayout,
     },
     {
@@ -2171,17 +2272,16 @@ const layers = {
       source: 'high',
       minzoom: 8,
       'source-layer': 'railway_line_high',
-      paint: speedFillPaint,
+      paint: speedFillPaint(theme),
       layout: speedLayout,
     },
-    preferredDirectionLayer(
-      'railway_preferred_direction',
+    preferredDirectionLayer(theme, 'railway_preferred_direction',
       ['any',
         ['==', ['get', 'preferred_direction'], 'forward'],
         ['==', ['get', 'preferred_direction'], 'backward'],
         ['==', ['get', 'preferred_direction'], 'both'],
       ],
-      speedColor,
+      speedColor(theme),
     ),
     {
       id: 'speed_railway_signal_direction',
@@ -2211,10 +2311,10 @@ const layers = {
         ],
       ],
       paint: {
-        'icon-color': colors.signals.direction,
+        'icon-color': colors[theme].signals.direction,
         'icon-halo-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-          'white',
+          ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+          colors[theme].halo,
         ],
         'icon-halo-width': 2.0,
         'icon-halo-blur': 2.0,
@@ -2233,6 +2333,7 @@ const layers = {
       },
     },
     ...imageLayerWithOutline(
+      theme,
       'speed_railway_signals',
       ['get', 'feature'],
       {
@@ -2257,9 +2358,10 @@ const layers = {
           ['!=', ['get', 'feature'], null],
         ],
         paint: {
+          'text-color': colors[theme].text.main,
           'text-halo-color': ['case',
-            ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-            'white'
+            ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+            colors[theme].halo
           ],
           'text-halo-width': 1.5,
           'text-halo-blur': 1,
@@ -2276,7 +2378,7 @@ const layers = {
         },
       },
     ),
-    railwayKmText,
+    railwayKmText(theme),
     {
       id: 'speed_railway_line_text',
       type: 'symbol',
@@ -2302,9 +2404,10 @@ const layers = {
         true,
       ],
       paint: {
+        'text-color': colors[theme].text.main,
         'text-halo-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-          'white'
+          ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+          colors[theme].halo,
         ],
         'text-halo-width': 1.5,
       },
@@ -2328,7 +2431,7 @@ const layers = {
       source: 'openrailwaymap_low',
       maxzoom: 7,
       'source-layer': 'railway_line_low',
-      paint: trainProtectionCasingPaint([1]),
+      paint: trainProtectionCasingPaint(theme, [1]),
       layout: trainProtectionLayout,
     },
     {
@@ -2337,7 +2440,7 @@ const layers = {
       source: 'openrailwaymap_low',
       maxzoom: 7,
       'source-layer': 'railway_line_low',
-      paint: trainProtectionFillPaint([1]),
+      paint: trainProtectionFillPaint(theme, [1]),
       layout: trainProtectionLayout,
     },
     {
@@ -2347,7 +2450,7 @@ const layers = {
       maxzoom: 8,
       source: 'openrailwaymap_med',
       'source-layer': 'railway_line_med',
-      paint: trainProtectionCasingPaint([1]),
+      paint: trainProtectionCasingPaint(theme, [1]),
       layout: trainProtectionLayout,
     },
     {
@@ -2357,7 +2460,7 @@ const layers = {
       maxzoom: 8,
       source: 'openrailwaymap_med',
       'source-layer': 'railway_line_med',
-      paint: trainProtectionFillPaint([1]),
+      paint: trainProtectionFillPaint(theme, [1]),
       layout: trainProtectionLayout,
     },
     {
@@ -2367,7 +2470,7 @@ const layers = {
       minzoom: 8,
       'source-layer': 'railway_line_high',
       filter: ['==', ['get', 'railway'], 'construction'],
-      paint: trainProtectionCasingPaint([2, 2]),
+      paint: trainProtectionCasingPaint(theme, [2, 2]),
       layout: trainProtectionLayout,
     },
     {
@@ -2377,7 +2480,7 @@ const layers = {
       minzoom: 8,
       'source-layer': 'railway_line_high',
       filter: ['!=', ['get', 'railway'], 'construction'],
-      paint: trainProtectionCasingPaint([1]),
+      paint: trainProtectionCasingPaint(theme, [1]),
       layout: trainProtectionLayout,
     },
     {
@@ -2387,7 +2490,7 @@ const layers = {
       source: 'high',
       'source-layer': 'railway_line_high',
       filter: ['==', ['get', 'railway'], 'construction'],
-      paint: trainProtectionFillPaint([2, 2]),
+      paint: trainProtectionFillPaint(theme, [2, 2]),
       layout: trainProtectionLayout,
     },
     {
@@ -2397,11 +2500,10 @@ const layers = {
       source: 'high',
       'source-layer': 'railway_line_high',
       filter: ['!=', ['get', 'railway'], 'construction'],
-      paint: trainProtectionFillPaint([1]),
+      paint: trainProtectionFillPaint(theme, [1]),
       layout: trainProtectionLayout,
     },
-    preferredDirectionLayer(
-      'railway_preferred_direction',
+    preferredDirectionLayer(theme, 'railway_preferred_direction',
       ['any',
         ['==', ['get', 'preferred_direction'], 'forward'],
         ['==', ['get', 'preferred_direction'], 'backward'],
@@ -2418,7 +2520,7 @@ const layers = {
       filter: ['==', ["geometry-type"], 'Point'],
       paint: {
         'circle-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.main,
+          ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.main,
           '#008206',
         ],
         'circle-radius': 4,
@@ -2438,7 +2540,7 @@ const layers = {
       ],
       paint: {
         'fill-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.main,
+          ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.main,
           '#008206',
         ],
         'fill-outline-color': 'white',
@@ -2470,10 +2572,10 @@ const layers = {
         ['!=', ['get', 'feature'], ''],
       ],
       paint: {
-        'icon-color': colors.signals.direction,
+        'icon-color': colors[theme].signals.direction,
         'icon-halo-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-          'white',
+          ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+          colors[theme].halo,
         ],
         'icon-halo-width': 2.0,
         'icon-halo-blur': 2.0,
@@ -2492,6 +2594,7 @@ const layers = {
       },
     },
     ...imageLayerWithOutline(
+      theme,
       'railway_signals_medium',
       ['case',
         ['==', ['slice', ['get', 'feature'], 0, 20], 'de/blockkennzeichen-'], 'de/blockkennzeichen',
@@ -2510,6 +2613,7 @@ const layers = {
       },
     ),
     ...imageLayerWithOutline(
+      theme,
       'railway_signals_high',
       ['get', 'feature'],
       {
@@ -2518,9 +2622,10 @@ const layers = {
         source: 'openrailwaymap_signals',
         'source-layer': 'signals_railway_signals',
         paint: {
+          'text-color': colors[theme].text.main,
           'text-halo-color': ['case',
-            ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-            'white'
+            ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+            colors[theme].halo
           ],
           'text-halo-width': ['case',
             ['==', ['slice', ['get', 'feature'], 0, 20], 'de/blockkennzeichen-'], 2.0,
@@ -2570,10 +2675,10 @@ const layers = {
       source: 'openrailwaymap_signals',
       'source-layer': 'signals_signal_boxes',
       paint: {
-        'text-color': '#404040',
+        'text-color': colors[theme].styles.standard.signalBox.text,
         'text-halo-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-          '#bfffb3',
+          ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+          colors[theme].styles.standard.signalBox.halo,
         ],
         'text-halo-width': 1.5,
       },
@@ -2584,7 +2689,7 @@ const layers = {
         'text-offset': ['literal', [0, 1]],
       }
     },
-    railwayKmText,
+    railwayKmText(theme),
     {
       id: 'signal_boxes_text_high',
       type: 'symbol',
@@ -2592,10 +2697,10 @@ const layers = {
       source: 'openrailwaymap_signals',
       'source-layer': 'signals_signal_boxes',
       paint: {
-        'text-color': '#404040',
+        'text-color': colors[theme].styles.standard.signalBox.text,
         'text-halo-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-          '#bfffb3',
+          ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+          colors[theme].styles.standard.signalBox.halo,
         ],
         'text-halo-width': 1.5,
       },
@@ -2615,7 +2720,7 @@ const layers = {
       maxzoom: 7,
       source: 'openrailwaymap_low',
       'source-layer': 'railway_line_low',
-      paint: electrificationCasingPaint,
+      paint: electrificationCasingPaint(theme),
       layout: electrificationLayout,
     },
     {
@@ -2624,7 +2729,7 @@ const layers = {
       maxzoom: 7,
       source: 'openrailwaymap_low',
       'source-layer': 'railway_line_low',
-      paint: electrificationFillPaint([1], 'voltage', 'frequency'),
+      paint: electrificationFillPaint(theme, [1], 'voltage', 'frequency'),
       layout: electrificationLayout,
     },
     {
@@ -2634,7 +2739,7 @@ const layers = {
       maxzoom: 8,
       source: 'openrailwaymap_med',
       'source-layer': 'railway_line_med',
-      paint: electrificationCasingPaint,
+      paint: electrificationCasingPaint(theme),
       layout: electrificationLayout,
     },
     {
@@ -2644,7 +2749,7 @@ const layers = {
       maxzoom: 8,
       source: 'openrailwaymap_med',
       'source-layer': 'railway_line_med',
-      paint: electrificationFillPaint([1], 'voltage', 'frequency'),
+      paint: electrificationFillPaint(theme, [1], 'voltage', 'frequency'),
       layout: electrificationLayout,
     },
     {
@@ -2653,7 +2758,7 @@ const layers = {
       minzoom: 8,
       source: 'high',
       'source-layer': 'railway_line_high',
-      paint: electrificationCasingPaint,
+      paint: electrificationCasingPaint(theme),
       layout: electrificationLayout,
     },
     {
@@ -2662,7 +2767,7 @@ const layers = {
       minzoom: 8,
       source: 'high',
       'source-layer': 'railway_line_high',
-      paint: electrificationFillPaint([1], 'voltage', 'frequency'),
+      paint: electrificationFillPaint(theme, [1], 'voltage', 'frequency'),
       layout: electrificationLayout,
     },
     {
@@ -2672,7 +2777,7 @@ const layers = {
       source: 'high',
       'source-layer': 'railway_line_high',
       filter: ['==', ['get', 'electrification_state'], 'proposed'],
-      paint: electrificationFillPaint(electrification_proposed_dashes, 'future_voltage', 'future_frequency'),
+      paint: electrificationFillPaint(theme, electrification_proposed_dashes, 'future_voltage', 'future_frequency'),
       layout: electrificationLayout,
     },
     {
@@ -2682,17 +2787,16 @@ const layers = {
       source: 'high',
       'source-layer': 'railway_line_high',
       filter: ['==', ['get', 'electrification_state'], 'construction'],
-      paint: electrificationFillPaint(electrification_construction_dashes, 'future_voltage', 'future_frequency'),
+      paint: electrificationFillPaint(theme, electrification_construction_dashes, 'future_voltage', 'future_frequency'),
       layout: electrificationLayout,
     },
-    preferredDirectionLayer(
-      'railway_preferred_direction',
+    preferredDirectionLayer(theme, 'railway_preferred_direction',
       ['any',
         ['==', ['get', 'preferred_direction'], 'forward'],
         ['==', ['get', 'preferred_direction'], 'backward'],
         ['==', ['get', 'preferred_direction'], 'both'],
       ],
-      electrificationColor('voltage', 'frequency'),
+      electrificationColor(theme, 'voltage', 'frequency'),
     ),
     {
       id: 'electrification_signals_direction',
@@ -2705,10 +2809,10 @@ const layers = {
         ['!=', ['get', 'feature'], ''],
       ],
       paint: {
-        'icon-color': colors.signals.direction,
+        'icon-color': colors[theme].signals.direction,
         'icon-halo-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-          'white',
+          ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+          colors[theme].halo,
         ],
         'icon-halo-width': 2.0,
         'icon-halo-blur': 2.0,
@@ -2727,6 +2831,7 @@ const layers = {
       },
     },
     ...imageLayerWithOutline(
+      theme,
       'electrification_signals',
       ['get', 'feature'],
       {
@@ -2735,9 +2840,10 @@ const layers = {
         source: 'openrailwaymap_electrification',
         'source-layer': 'electrification_signals',
         paint: {
+          'text-color': colors[theme].text.main,
           'text-halo-color': ['case',
-            ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-            'white'
+            ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+            colors[theme].halo
           ],
           'text-halo-width': 1.5,
           'text-halo-blur': 1,
@@ -2754,7 +2860,7 @@ const layers = {
         },
       },
     ),
-    railwayKmText,
+    railwayKmText(theme),
     {
       id: 'electrification_railway_text_high',
       type: 'symbol',
@@ -2879,9 +2985,10 @@ const layers = {
         true,
       ],
       paint: {
+        'text-color': colors[theme].text.main,
         'text-halo-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-          'white'
+          ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+          colors[theme].halo
         ],
         'text-halo-width': 1.5,
       },
@@ -2906,7 +3013,7 @@ const layers = {
       maxzoom: 7,
       source: 'openrailwaymap_low',
       'source-layer': 'railway_line_low',
-      paint: gaugeCasingPaint,
+      paint: gaugeCasingPaint(theme),
       layout: gaugeLayout,
     },
     {
@@ -2915,7 +3022,7 @@ const layers = {
       maxzoom: 7,
       source: 'openrailwaymap_low',
       'source-layer': 'railway_line_low',
-      paint: gaugeFillPaint('gauge0', 'gaugeint0', [1]),
+      paint: gaugeFillPaint(theme, 'gauge0', 'gaugeint0', [1]),
       layout: gaugeLayout,
     },
     {
@@ -2925,7 +3032,7 @@ const layers = {
       maxzoom: 8,
       source: 'openrailwaymap_med',
       'source-layer': 'railway_line_med',
-      paint: gaugeCasingPaint,
+      paint: gaugeCasingPaint(theme),
       layout: gaugeLayout,
     },
     {
@@ -2935,7 +3042,7 @@ const layers = {
       maxzoom: 8,
       source: 'openrailwaymap_med',
       'source-layer': 'railway_line_med',
-      paint: gaugeFillPaint('gauge0', 'gaugeint0', [1]),
+      paint: gaugeFillPaint(theme, 'gauge0', 'gaugeint0', [1]),
       layout: gaugeLayout,
     },
     {
@@ -2945,7 +3052,7 @@ const layers = {
       source: 'high',
       'source-layer': 'railway_line_high',
       filter: ['!=', ['get', 'railway'], 'construction'],
-      paint: gaugeCasingPaint,
+      paint: gaugeCasingPaint(theme),
       layout: gaugeLayout,
     },
     {
@@ -2969,7 +3076,7 @@ const layers = {
       source: 'high',
       'source-layer': 'railway_line_high',
       filter: ['!=', ['get', 'railway'], 'construction'],
-      paint: gaugeFillPaint('gauge0', 'gaugeint0', [1]),
+      paint: gaugeFillPaint(theme, 'gauge0', 'gaugeint0', [1]),
       layout: gaugeLayout,
     },
     {
@@ -2979,7 +3086,7 @@ const layers = {
       source: 'high',
       'source-layer': 'railway_line_high',
       filter: ['==', ['get', 'railway'], 'construction'],
-      paint: gaugeFillPaint('gauge0', 'gaugeint0', gauge_construction_dashes),
+      paint: gaugeFillPaint(theme, 'gauge0', 'gaugeint0', gauge_construction_dashes),
       layout: gaugeLayout,
     },
     {
@@ -2992,7 +3099,7 @@ const layers = {
         ['!=', ['get', 'gauge1'], null],
         ['!=', ['get', 'railway'], 'construction'],
       ],
-      paint: gaugeFillPaint('gauge1', 'gaugeint1', gauge_dual_gauge_dashes),
+      paint: gaugeFillPaint(theme, 'gauge1', 'gaugeint1', gauge_dual_gauge_dashes),
       layout: gaugeLayout,
     },
     {
@@ -3005,7 +3112,7 @@ const layers = {
         ['!=', ['get', 'gauge1'], null],
         ['==', ['get', 'railway'], 'construction'],
       ],
-      paint: gaugeFillPaint('gauge1', 'gaugeint1', dual_construction_dashes),
+      paint: gaugeFillPaint(theme, 'gauge1', 'gaugeint1', dual_construction_dashes),
       layout: gaugeLayout,
     },
     {
@@ -3018,7 +3125,7 @@ const layers = {
         ['!=', ['get', 'gauge2'], null],
         ['!=', ['get', 'railway'], 'construction'],
       ],
-      paint: gaugeFillPaint('gauge2', 'gaugeint2', gauge_multi_gauge_dashes),
+      paint: gaugeFillPaint(theme, 'gauge2', 'gaugeint2', gauge_multi_gauge_dashes),
       layout: gaugeLayout,
     },
     {
@@ -3031,19 +3138,18 @@ const layers = {
         ['!=', ['get', 'gauge2'], null],
         ['==', ['get', 'railway'], 'construction'],
       ],
-      paint: gaugeFillPaint('gauge2', 'gaugeint2', multi_construction_dashes),
+      paint: gaugeFillPaint(theme, 'gauge2', 'gaugeint2', multi_construction_dashes),
       layout: gaugeLayout,
     },
-    preferredDirectionLayer(
-      'railway_preferred_direction',
+    preferredDirectionLayer(theme, 'railway_preferred_direction',
       ['any',
         ['==', ['get', 'preferred_direction'], 'forward'],
         ['==', ['get', 'preferred_direction'], 'backward'],
         ['==', ['get', 'preferred_direction'], 'both'],
       ],
-      gaugeColor('gauge0', 'gaugeint0'),
+      gaugeColor(theme, 'gauge0', 'gaugeint0'),
     ),
-    railwayKmText,
+    railwayKmText(theme),
     {
       id: 'gauge_railway_text_high',
       type: 'symbol',
@@ -3168,9 +3274,10 @@ const layers = {
         true,
       ],
       paint: {
+        'text-color': colors[theme].text.main,
         'text-halo-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-          'white'
+          ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+          colors[theme].halo
         ],
         'text-halo-width': 1.5,
       },
@@ -3195,7 +3302,7 @@ const layers = {
       maxzoom: 7,
       source: 'openrailwaymap_low',
       'source-layer': 'railway_line_low',
-      paint: loadingGaugeCasingPaint,
+      paint: loadingGaugeCasingPaint(theme),
       layout: loadingGaugeLayout,
     },
     {
@@ -3204,7 +3311,7 @@ const layers = {
       maxzoom: 7,
       source: 'openrailwaymap_low',
       'source-layer': 'railway_line_low',
-      paint: loadingGaugeFillPaint([1]),
+      paint: loadingGaugeFillPaint(theme, [1]),
       layout: loadingGaugeLayout,
     },
     {
@@ -3214,7 +3321,7 @@ const layers = {
       maxzoom: 8,
       source: 'openrailwaymap_med',
       'source-layer': 'railway_line_med',
-      paint: loadingGaugeCasingPaint,
+      paint: loadingGaugeCasingPaint(theme),
       layout: loadingGaugeLayout,
     },
     {
@@ -3224,7 +3331,7 @@ const layers = {
       maxzoom: 8,
       source: 'openrailwaymap_med',
       'source-layer': 'railway_line_med',
-      paint: loadingGaugeFillPaint([1]),
+      paint: loadingGaugeFillPaint(theme, [1]),
       layout: loadingGaugeLayout,
     },
     {
@@ -3234,7 +3341,7 @@ const layers = {
       source: 'high',
       'source-layer': 'railway_line_high',
       filter: ['!=', ['get', 'railway'], 'construction'],
-      paint: loadingGaugeCasingPaint,
+      paint: loadingGaugeCasingPaint(theme),
       layout: loadingGaugeLayout,
     },
     {
@@ -3258,7 +3365,7 @@ const layers = {
       source: 'high',
       'source-layer': 'railway_line_high',
       filter: ['!=', ['get', 'railway'], 'construction'],
-      paint: loadingGaugeFillPaint([1]),
+      paint: loadingGaugeFillPaint(theme, [1]),
       layout: loadingGaugeLayout,
     },
     {
@@ -3268,15 +3375,15 @@ const layers = {
       source: 'high',
       'source-layer': 'railway_line_high',
       filter: ['==', ['get', 'railway'], 'construction'],
-      paint: loadingGaugeFillPaint(gauge_construction_dashes),
+      paint: loadingGaugeFillPaint(theme, gauge_construction_dashes),
       layout: loadingGaugeLayout,
     },
-    preferredDirectionLayer('railway_preferred_direction', ['any',
+    preferredDirectionLayer(theme, 'railway_preferred_direction', ['any',
       ['==', ['get', 'preferred_direction'], 'forward'],
       ['==', ['get', 'preferred_direction'], 'backward'],
       ['==', ['get', 'preferred_direction'], 'both'],
     ]),
-    railwayKmText,
+    railwayKmText(theme),
     {
       id: 'loading_gauge_railway_text_high',
       type: 'symbol',
@@ -3401,9 +3508,10 @@ const layers = {
         true,
       ],
       paint: {
+        'text-color': colors[theme].text.main,
         'text-halo-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-          'white'
+          ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+          colors[theme].halo
         ],
         'text-halo-width': 1.5,
       },
@@ -3437,7 +3545,7 @@ const layers = {
       maxzoom: 7,
       source: 'openrailwaymap_low',
       'source-layer': 'railway_line_low',
-      paint: trackClassFillPaint([1]),
+      paint: trackClassFillPaint(theme, [1]),
       layout: trackClassLayout,
     },
     {
@@ -3457,7 +3565,7 @@ const layers = {
       maxzoom: 8,
       source: 'openrailwaymap_med',
       'source-layer': 'railway_line_med',
-      paint: trackClassFillPaint([1]),
+      paint: trackClassFillPaint(theme, [1]),
       layout: trackClassLayout,
     },
     {
@@ -3491,7 +3599,7 @@ const layers = {
       source: 'high',
       'source-layer': 'railway_line_high',
       filter: ['!=', ['get', 'railway'], 'construction'],
-      paint: trackClassFillPaint([1]),
+      paint: trackClassFillPaint(theme, [1]),
       layout: trackClassLayout,
     },
     {
@@ -3501,15 +3609,15 @@ const layers = {
       source: 'high',
       'source-layer': 'railway_line_high',
       filter: ['==', ['get', 'railway'], 'construction'],
-      paint: trackClassFillPaint(gauge_construction_dashes),
+      paint: trackClassFillPaint(theme, gauge_construction_dashes),
       layout: loadingGaugeLayout,
     },
-    preferredDirectionLayer('railway_preferred_direction', ['any',
+    preferredDirectionLayer(theme, 'railway_preferred_direction', ['any',
       ['==', ['get', 'preferred_direction'], 'forward'],
       ['==', ['get', 'preferred_direction'], 'backward'],
       ['==', ['get', 'preferred_direction'], 'both'],
     ]),
-    railwayKmText,
+    railwayKmText(theme),
     {
       id: 'track_class_railway_text_high',
       type: 'symbol',
@@ -3634,9 +3742,10 @@ const layers = {
         true,
       ],
       paint: {
+        'text-color': colors[theme].text.main,
         'text-halo-color': ['case',
-          ['boolean', ['feature-state', 'hover'], false], colors.hover.textHalo,
-          'white'
+          ['boolean', ['feature-state', 'hover'], false], colors[theme].hover.textHalo,
+          colors[theme].halo
         ],
         'text-halo-width': 1.5,
       },
@@ -3653,9 +3762,9 @@ const layers = {
     },
     searchResults,
   ],
-};
+}]));
 
-const makeStyle = selectedStyle => ({
+const makeStyle = (selectedStyle, theme) => ({
   center: [12.55, 51.14], // default
   zoom: 3.75, // default
   glyphs: `${origin}/font/{fontstack}/{range}`,
@@ -3673,7 +3782,7 @@ const makeStyle = selectedStyle => ({
     }
   ],
   version: 8,
-  layers: layers[selectedStyle],
+  layers: layers[theme][selectedStyle],
 });
 
 const legendData = {
@@ -5273,8 +5382,8 @@ const layerVisibleAtZoom = (zoom) =>
 const legendPointToMapPoint = (zoom, [x, y]) =>
   [x * coordinateFactor(zoom), y * coordinateFactor(zoom)]
 
-function makeLegendStyle(style) {
-  const sourceStyle = makeStyle(style);
+function makeLegendStyle(style, theme) {
+  const sourceStyle = makeStyle(style, theme);
   const sourceLayers = sourceStyle.layers.filter(layer => layer.type !== 'raster' && layer.type !== 'background');
   const legendZoomLevels = [...Array(glodalMaxZoom - globalMinZoom + 1).keys()].map(zoom => globalMinZoom + zoom);
 
@@ -5312,7 +5421,11 @@ function makeLegendStyle(style) {
       },
       minzoom: legendZoom,
       maxzoom: legendZoom + 1,
-      paint: {},
+      paint: {
+        'text-color': colors[theme].text.main,
+        'text-halo-color': colors[theme].halo,
+        'text-halo-width': 1,
+      },
       layout: {
         'text-field': '{legend}',
         'text-font': ['Noto Sans Medium'],
@@ -5447,6 +5560,8 @@ function makeLegendStyle(style) {
 }
 
 knownStyles.forEach(style => {
-  fs.writeFileSync(`${style}.json`, JSON.stringify(makeStyle(style)));
-  fs.writeFileSync(`legend-${style}.json`, JSON.stringify(makeLegendStyle(style)));
+  knownThemes.forEach(theme => {
+    fs.writeFileSync(`${style}-${theme}.json`, JSON.stringify(makeStyle(style, theme)));
+    fs.writeFileSync(`legend-${style}-${theme}.json`, JSON.stringify(makeLegendStyle(style, theme)));
+  });
 });
diff --git a/proxy/js/ui.js b/proxy/js/ui.js
index d9c17fa0..23a70027 100644
--- a/proxy/js/ui.js
+++ b/proxy/js/ui.js
@@ -12,7 +12,10 @@ const backgroundOpacityControl = document.getElementById('backgroundOpacity');
 const backgroundTypeRasterControl = document.getElementById('backgroundTypeRaster');
 const backgroundTypeVectorControl = document.getElementById('backgroundTypeVector');
 const backgroundUrlControl = document.getElementById('backgroundUrl');
-const backgroundMapContainer = document.getElementById('background-map')
+const themeSystemControl = document.getElementById('themeSystem');
+const themeDarkControl = document.getElementById('themeDark');
+const themeLightControl = document.getElementById('themeLight');
+const backgroundMapContainer = document.getElementById('background-map');
 const legend = document.getElementById('legend')
 const legendMapContainer = document.getElementById('legend-map')
 
@@ -209,6 +212,14 @@ function showConfiguration() {
     backgroundTypeVectorControl.checked = true;
   }
   backgroundUrlControl.value = configuration.backgroundUrl ?? defaultConfiguration.backgroundUrl;
+  const theme = configuration.theme ?? defaultConfiguration.theme;
+  if (theme === 'system') {
+    themeSystemControl.checked = true;
+  } else if (theme === 'dark') {
+    themeDarkControl.checked = true
+  } else if (theme === 'light') {
+    themeLightControl.checked = true;
+  }
 
   configurationBackdrop.style.display = 'block';
 }
@@ -274,6 +285,11 @@ const knownStyles = {
   track_class: 'Track class',
 };
 
+const knownThemes = [
+  'light',
+  'dark',
+]
+
 function hashToObject(hash) {
   if (!hash) {
     return {};
@@ -387,6 +403,24 @@ function updateBackgroundMapStyle() {
   backgroundMap.setStyle(buildBackgroundMapStyle());
 }
 
+function resolveTheme(configuredTheme) {
+  return configuredTheme === 'system'
+    ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+    : configuredTheme;
+}
+
+function onThemeChange(theme) {
+  updateConfiguration('theme', theme);
+  updateTheme();
+  onStyleChange();
+}
+
+function updateTheme() {
+  const resolvedTheme = resolveTheme(configuration.theme ?? defaultConfiguration.theme)
+  document.documentElement.setAttribute('data-bs-theme', resolvedTheme);
+  selectedTheme = resolvedTheme;
+}
+
 function updateBackgroundMapContainer() {
   backgroundMapContainer.style.filter = `saturate(${clamp(configuration.backgroundSaturation ?? defaultConfiguration.backgroundSaturation, 0.0, 1.0)}) opacity(${clamp(configuration.backgroundOpacity ?? defaultConfiguration.backgroundOpacity, 0.0, 1.0)})`;
 }
@@ -396,23 +430,34 @@ const defaultConfiguration = {
   backgroundOpacity: 1.0,
   backgroundType: 'raster',
   backgroundUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-}
+  theme: 'system',
+};
 let configuration = readConfiguration(localStorage);
 configuration = migrateConfiguration(localStorage, configuration);
 
+let selectedTheme;
+updateTheme();
+
 const coordinateFactor = legendZoom => Math.pow(2, 5 - legendZoom);
 
 const legendPointToMapPoint = (zoom, [x, y]) =>
   [x * coordinateFactor(zoom), y * coordinateFactor(zoom)]
 
 const mapStyles = Object.fromEntries(
-  Object.keys(knownStyles)
-    .map(style => [style, `${location.origin}/style/${style}.json`])
+  knownThemes.map(theme =>
+    [theme, Object.fromEntries(
+      Object.keys(knownStyles)
+        .map(style => [style, `${location.origin}/style/${style}-${theme}.json`])
+    )
+    ])
 );
 
 const legendStyles = Object.fromEntries(
-  Object.keys(knownStyles)
-    .map(style => [style, `${location.origin}/style/legend-${style}.json`])
+  knownThemes.map(theme => [theme, Object.fromEntries(
+    Object.keys(knownStyles)
+      .map(style => [style, `${location.origin}/style/legend-${style}-${theme}.json`])
+  )
+  ])
 );
 
 const legendMap = new maplibregl.Map({
@@ -442,28 +487,26 @@ const map = new maplibregl.Map({
   maxPitch: 0,
 });
 
-const onStyleChange = changedStyle => {
-  selectedStyle = changedStyle;
-
+const onStyleChange = () => {
   // Change styles
-  map.setStyle(mapStyles[changedStyle], {
+  map.setStyle(mapStyles[selectedTheme][selectedStyle], {
     validate: false,
   });
-  legendMap.setStyle(legendStyles[changedStyle], {
+  legendMap.setStyle(legendStyles[selectedTheme][selectedStyle], {
     validate: false,
     transformStyle: (previous, next) => {
       onStylesheetChange(next);
-      return next;
+     return next;
     },
   });
 
   // Update URL
-  const updatedHash = putStyleInHash(window.location.hash, changedStyle);
+  const updatedHash = putStyleInHash(window.location.hash, selectedStyle);
   const location = window.location.href.replace(/(#.+)?$/, updatedHash);
   window.history.replaceState(window.history.state, null, location);
 }
 
-onStyleChange(selectedStyle);
+onStyleChange();
 
 class StyleControl {
   constructor(options) {
@@ -506,8 +549,8 @@ class SearchControl {
     button.type = 'button';
     button.title = 'Search for places'
     button.onclick = _ => showSearch();
-    const icon = createDomElement('span', 'maplibregl-ctrl-icon', button);
-    const text = createDomElement('span', '', icon);
+    createDomElement('span', 'maplibregl-ctrl-icon', button);
+    const text = createDomElement('span', '', button);
     text.innerText = 'Search'
 
     return this._container;
@@ -568,8 +611,8 @@ class LegendControl {
     const button = createDomElement('button', 'maplibregl-ctrl-legend', this._container);
     button.type = 'button';
     button.title = 'Show/hide map legend';
-    const icon = createDomElement('span', 'maplibregl-ctrl-icon', button);
-    const text = createDomElement('span', '', icon);
+    createDomElement('span', 'maplibregl-ctrl-icon', button);
+    const text = createDomElement('span', '', button);
     text.innerText = 'Legend'
 
     button.onclick = () => this.options.onLegendToggle()
@@ -588,7 +631,10 @@ const legendEntriesCount = Object.fromEntries(Object.keys(knownStyles).map(key =
 
 map.addControl(new StyleControl({
   initialSelection: selectedStyle,
-  onStyleChange,
+  onStyleChange: style => {
+    selectedStyle = style;
+    onStyleChange();
+  },
 }));
 map.addControl(new maplibregl.NavigationControl({
   showCompass: true,
@@ -687,8 +733,8 @@ function popupContent(properties) {
 
 map.on('load', () => onMapZoom(map.getZoom()));
 map.on('zoomend', () => onMapZoom(map.getZoom()));
-map.on('move', () => backgroundMap.jumpTo({ center: map.getCenter(), zoom: map.getZoom(), bearing: map.getBearing()}));
-map.on('zoom', () => backgroundMap.jumpTo({ center: map.getCenter(), zoom: map.getZoom(), bearing: map.getBearing()}));
+map.on('move', () => backgroundMap.jumpTo({center: map.getCenter(), zoom: map.getZoom(), bearing: map.getBearing()}));
+map.on('zoom', () => backgroundMap.jumpTo({center: map.getCenter(), zoom: map.getZoom(), bearing: map.getBearing()}));
 
 let hoveredFeature = null
 map.on('mousemove', event => {
@@ -776,6 +822,6 @@ fetch(`${location.origin}/bounds.json`)
   })
   .then(result => {
     map.setMaxBounds(result);
-    backgroundMap.jumpTo({ center: map.getCenter(), zoom: map.getZoom(), bearing: map.getBearing()});
+    backgroundMap.jumpTo({center: map.getCenter(), zoom: map.getZoom(), bearing: map.getBearing()});
   })
   .catch(error => console.error('Error during fetching of import map bounds', error))
diff --git a/proxy/test/ui/cypress/e2e/home.cy.js b/proxy/test/ui/cypress/e2e/home.cy.js
index 3c8c286c..25a87e95 100644
--- a/proxy/test/ui/cypress/e2e/home.cy.js
+++ b/proxy/test/ui/cypress/e2e/home.cy.js
@@ -3,7 +3,7 @@
  * but there is no wait to make cypress wait for map load events.
  */
 describe('home page', () => {
-  it('switching layers', () => {
+  it('switching layers (light mode)', () => {
     cy.visit('/#view=9.88/52.5134/13.4024&')
 
     cy.contains('Infrastructure').click()
@@ -46,6 +46,58 @@ describe('home page', () => {
     cy.screenshot()
   })
 
+  it('switching layers (dark mode)', () => {
+    cy.visit('/#view=9.88/52.5134/13.4024&')
+
+    cy.get('.maplibregl-ctrl-configuration').click()
+    cy.contains('Map configuration').should('be.visible')
+    cy.get('label').contains('Dark').click()
+
+    cy.screenshot()
+
+    cy.get('#configuration-backdrop .btn-close').click()
+    cy.contains('Map configuration').should('not.be.visible')
+
+    cy.contains('Infrastructure').click()
+    cy.url().should('include', 'style=standard')
+
+    cy.wait(3000)
+    cy.screenshot()
+
+    cy.contains('Speed').click()
+    cy.url().should('include', 'style=speed')
+
+    cy.wait(3000)
+    cy.screenshot()
+
+    cy.contains('Train protection').click()
+    cy.url().should('include', 'style=signals')
+
+    cy.wait(3000)
+    cy.screenshot()
+
+    cy.contains('Electrification').click()
+    cy.url().should('include', 'style=electrification')
+
+    cy.wait(3000)
+    cy.screenshot()
+
+    cy.contains('Gauge').click()
+    cy.url().should('include', 'style=gauge')
+
+    cy.wait(3000)
+    cy.screenshot()
+
+    cy.contains('Loading gauge').click()
+    cy.url().should('include', 'style=loading_gauge')
+
+    cy.contains('Track class').click()
+    cy.url().should('include', 'style=track_class')
+
+    cy.wait(3000)
+    cy.screenshot()
+  })
+
   it('legend', () => {
     cy.visit('/#view=9.88/52.5134/13.4024&')
 
@@ -91,7 +143,7 @@ describe('home page', () => {
 
     cy.get('.maplibregl-ctrl-configuration').click()
 
-    cy.wait(3000)
+    cy.contains('Map configuration').should('be.visible')
     cy.screenshot()
   })
 })