diff --git a/src/App.module.css b/src/App.module.css
index 34bd3630..3645010f 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -1,3 +1,15 @@
+@media (prefers-color-scheme: dark) {
+    .sidebarContent {
+        background-color: black;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .sidebarContent {
+        background-color: white;
+    }
+}
+
 .appWrapper {
     width: 100%;
     height: 100%;
@@ -44,7 +56,6 @@
     display: flex;
     flex-direction: column;
     border-radius: 0.5rem;
-    background-color: white;
     max-height: calc(100% - 2rem);
     margin: 0.5rem;
 
diff --git a/src/custom.d.ts b/src/custom.d.ts
index c0489278..665a721b 100644
--- a/src/custom.d.ts
+++ b/src/custom.d.ts
@@ -11,7 +11,7 @@ declare module 'config' {
     const keys: {
         graphhopper: string
         omniscale: string
-        maptiler: string
+        stadiamaps: string
         thunderforest: string
         kurviger: string
     }
diff --git a/src/index.html b/src/index.html
index c655258f..c8214ba1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -29,6 +29,21 @@
                 min-height: 100%;
             }
 
+            /* TODO NOW:
+               1. set black background for selectors that set padding otherwise it is white frame like the map options or context menu
+               2. white graphhopper logo for dark mode
+               3. custom model box and heightgraph
+               4. buy stadia maps standard and remove maptiler or fix maptiler for dark mode
+               5. over over icons should not nearly hide them
+               6. white is too bright for auto complete and preview panel background is still white
+             */
+            @media (prefers-color-scheme: dark) {
+                body {
+                    background-color: black;
+                    color: white;
+                }
+            }
+
             ul {
                 list-style-type: none;
                 margin: 0;
diff --git a/src/layers/DefaultMapPopup.module.css b/src/layers/DefaultMapPopup.module.css
index 511c6a04..7ade97bb 100644
--- a/src/layers/DefaultMapPopup.module.css
+++ b/src/layers/DefaultMapPopup.module.css
@@ -1,3 +1,14 @@
+@media (prefers-color-scheme: dark) {
+    .popup {
+        background-color: black;
+    }
+}
+@media (prefers-color-scheme: light) {
+    .popup {
+        background-color: white;
+    }
+}
+
 /* todo: this was just copy-pasted from https://openlayers.org/en/latest/examples/popup.html.
    the popup looks ugly still, but at the very minimum the background color needs to be set to make it visible.
    the popup design needs an overhaul anyway... https://github.com/graphhopper/graphhopper-maps/issues/136
@@ -6,7 +17,6 @@
     position: absolute;
     bottom: 12px;
     left: -50px;
-    background-color: white;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
     padding: 0 15px 0 15px;
     border-radius: 10px;
diff --git a/src/layers/UseBackgroundLayer.tsx b/src/layers/UseBackgroundLayer.tsx
index 43237ad4..c7b7708d 100644
--- a/src/layers/UseBackgroundLayer.tsx
+++ b/src/layers/UseBackgroundLayer.tsx
@@ -3,7 +3,8 @@ import { useEffect } from 'react'
 import { RasterStyle, StyleOption } from '@/stores/MapOptionsStore'
 import TileLayer from 'ol/layer/Tile'
 import { XYZ } from 'ol/source'
-import { apply } from 'ol-mapbox-style'
+import { applyBackground, applyStyle } from 'ol-mapbox-style'
+import VectorTileLayer from 'ol/layer/VectorTile'
 
 export default function useBackgroundLayer(map: Map, styleOption: StyleOption) {
     useEffect(() => {
@@ -29,8 +30,10 @@ function removeCurrentBackgroundLayers(map: Map) {
 
 function addNewBackgroundLayers(map: Map, styleOption: StyleOption) {
     if (styleOption.type === 'vector') {
-        // todo: handle promise return value?
-        apply(map, styleOption.url)
+        const layer = new VectorTileLayer({ declutter: true })
+        applyBackground(layer, styleOption.url)
+        applyStyle(layer, styleOption.url)
+        map.addLayer(layer)
     } else {
         const rasterStyle = styleOption as RasterStyle
         const tileLayer = new TileLayer({
diff --git a/src/map/ContextMenuContent.module.css b/src/map/ContextMenuContent.module.css
index 03558f8a..f0320267 100644
--- a/src/map/ContextMenuContent.module.css
+++ b/src/map/ContextMenuContent.module.css
@@ -1,3 +1,15 @@
+@media (prefers-color-scheme: dark) {
+    .wrapper {
+        background-color: black;
+    }
+    .entry {
+        color: white;
+    }
+    .entry:hover {
+        color: black;
+    }
+}
+
 .wrapper {
     display: flex;
     flex-direction: column;
diff --git a/src/map/MapOptions.modules.css b/src/map/MapOptions.modules.css
index 238935b7..51ebd762 100644
--- a/src/map/MapOptions.modules.css
+++ b/src/map/MapOptions.modules.css
@@ -1,3 +1,10 @@
+@media (prefers-color-scheme: dark) {
+    .mapOptionsContainer {
+        background-color: black;
+        color: white;
+    }
+}
+
 .mapOptionsContainer {
     display: flex;
 }
diff --git a/src/pathDetails/PathDetails.tsx b/src/pathDetails/PathDetails.tsx
index 5cdff25c..0e272306 100644
--- a/src/pathDetails/PathDetails.tsx
+++ b/src/pathDetails/PathDetails.tsx
@@ -1,6 +1,7 @@
 import { useContext, useEffect, useRef, useState } from 'react'
 import styles from '@/pathDetails/PathDetails.module.css'
 import { HeightGraph } from 'heightgraph/src/heightgraph'
+// TODO NOW same problem like for custom model box:
 import 'heightgraph/src/heightgraph.css'
 import { Path } from '@/api/graphhopper'
 import Dispatcher from '@/stores/Dispatcher'
diff --git a/src/sidebar/CustomModelBox.module.css b/src/sidebar/CustomModelBox.module.css
index 814841ed..6698b6c4 100644
--- a/src/sidebar/CustomModelBox.module.css
+++ b/src/sidebar/CustomModelBox.module.css
@@ -1,3 +1,17 @@
+@media (prefers-color-scheme: dark) {
+    .examples {
+        background-color: black;
+        color: white;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .examples {
+        background-color: white;
+        color: rgba(0, 60, 136, 0.7);
+    }
+}
+
 .customModelBox {
     margin: 0.6em 0;
     padding: 0 0;
@@ -32,8 +46,6 @@
     border-right: #ececec solid 1px;
     padding-left: 1em;
     margin-left: 0;
-    background-color: white;
-    color: rgba(0, 60, 136, 0.7);
 }
 
 .examples option {
diff --git a/src/sidebar/CustomModelBox.tsx b/src/sidebar/CustomModelBox.tsx
index ce4df748..3c9c2a58 100644
--- a/src/sidebar/CustomModelBox.tsx
+++ b/src/sidebar/CustomModelBox.tsx
@@ -1,13 +1,14 @@
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/addon/hint/show-hint.css'
 import 'codemirror/addon/lint/lint.css'
-// todo: this belongs to this app and we should not take it from the demo...
+// TODO NOW why does this not work?
+// import './custom-model-style.css'
 import 'custom-model-editor/demo/style.css'
 import styles from '@/sidebar/CustomModelBox.module.css'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { create } from 'custom-model-editor/src/index'
 import Dispatcher from '@/stores/Dispatcher'
-import { DismissLastError, SetCustomModel } from '@/actions/Actions'
+import { SetCustomModel } from '@/actions/Actions'
 import { CustomModel } from '@/stores/QueryStore'
 import { tr } from '@/translation/Translation'
 import PlainButton from '@/PlainButton'
@@ -49,18 +50,12 @@ const examples: { [key: string]: CustomModel } = {
         },
     },
     cargo_bike: {
-        speed: [
-            { if: "road_class == TRACK", limit_to: "2" },
-        ],
-        priority: [
-            { if: "max_width < 1.5 || road_class == STEPS", multiply_by: "0" },
-        ],
+        speed: [{ if: 'road_class == TRACK', limit_to: '2' }],
+        priority: [{ if: 'max_width < 1.5 || road_class == STEPS', multiply_by: '0' }],
     },
     combined: {
         distance_influence: 100,
-        speed: [
-            { if: 'road_class == TRACK || road_environment == FERRY || surface == DIRT', limit_to: '10' }
-        ],
+        speed: [{ if: 'road_class == TRACK || road_environment == FERRY || surface == DIRT', limit_to: '10' }],
         priority: [
             { if: 'road_environment == TUNNEL || toll == ALL', multiply_by: '0.5' },
             { if: 'max_weight < 3 || max_height < 2.5', multiply_by: '0.0' },
@@ -99,7 +94,9 @@ export default function CustomModelBox({
             } catch (e) {}
         }
         instance.value =
-            initialCustomModelStr == null ? customModel2prettyString(examples['default_example']) : initialCustomModelStr
+            initialCustomModelStr == null
+                ? customModel2prettyString(examples['default_example'])
+                : initialCustomModelStr
 
         if (enabled)
             // When we got a custom model from the url parameters we send the request right away
diff --git a/src/sidebar/MobileSidebar.module.css b/src/sidebar/MobileSidebar.module.css
index 235cfcdd..78b9865d 100644
--- a/src/sidebar/MobileSidebar.module.css
+++ b/src/sidebar/MobileSidebar.module.css
@@ -1,3 +1,15 @@
+@media (prefers-color-scheme: light) {
+    .background {
+        background-color: white;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .background {
+        background-color: black;
+    }
+}
+
 .sidebar {
     height: 100%;
     display: flex;
@@ -7,7 +19,6 @@
 
 .background {
     pointer-events: all; /* we want all the content to behave normally*/
-    background-color: white;
 }
 
 .fullHeight {
diff --git a/src/sidebar/RoutingResult.module.css b/src/sidebar/RoutingResult.module.css
index a5ea0c93..ef5c97fd 100644
--- a/src/sidebar/RoutingResult.module.css
+++ b/src/sidebar/RoutingResult.module.css
@@ -1,3 +1,17 @@
+@media (prefers-color-scheme: dark) {
+    .resultSelectableArea {
+        background-color: black;
+        color: white;
+        border-left-color: black !important;
+    }
+    .resultSummary {
+        border-left-color: black !important;
+    }
+    .routeHints div, .routeHints {
+        background-color: black;
+    }
+}
+
 .resultRow {
     border-bottom: 1px lightgray solid;
 }
diff --git a/src/sidebar/custom-model-style.css b/src/sidebar/custom-model-style.css
new file mode 100644
index 00000000..7d2106cb
--- /dev/null
+++ b/src/sidebar/custom-model-style.css
@@ -0,0 +1,21 @@
+@media (prefers-color-scheme: dark) {
+    .customModelBox.CodeMirror {
+        background-color: red !important;
+    }
+}
+
+.cm-s-default .cm-string {
+    color: #067d17 !important;
+}
+
+.cm-s-default .cm-property {
+    color: #871094 !important;
+}
+
+.cm-s-default .cm-number {
+    color: #1750eb !important;
+}
+
+.cm-s-default .cm-atom {
+    color: #0033b3 !important;
+}
diff --git a/src/sidebar/instructions/Instructions.module.css b/src/sidebar/instructions/Instructions.module.css
index 2c1f516b..1446898a 100644
--- a/src/sidebar/instructions/Instructions.module.css
+++ b/src/sidebar/instructions/Instructions.module.css
@@ -1,4 +1,7 @@
-.instructionsList {
+@media (prefers-color-scheme: dark) {
+    .instructionsList {
+        color: white;
+    }
 }
 
 .instruction {
diff --git a/src/sidebar/search/AddressInput.module.css b/src/sidebar/search/AddressInput.module.css
index 5ac3a2bf..632bd87b 100644
--- a/src/sidebar/search/AddressInput.module.css
+++ b/src/sidebar/search/AddressInput.module.css
@@ -22,6 +22,22 @@
     -webkit-appearance: none;
 }
 
+@media (prefers-color-scheme: dark) {
+    .input,
+    .fullscreen {
+        background-color: black;
+    }
+    .input {
+        color: white;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .fullscreen {
+        background-color: white;
+    }
+}
+
 @media (max-width: 44rem) {
     .fullscreen {
         position: fixed;
@@ -29,7 +45,6 @@
         bottom: 0;
         left: 0;
         right: 0;
-        background-color: white;
         z-index: 5;
         padding: 0.5rem;
     }
diff --git a/src/sidebar/search/AddressInputAutocomplete.module.css b/src/sidebar/search/AddressInputAutocomplete.module.css
index d692d7f1..4e2fe202 100644
--- a/src/sidebar/search/AddressInputAutocomplete.module.css
+++ b/src/sidebar/search/AddressInputAutocomplete.module.css
@@ -1,3 +1,15 @@
+@media (prefers-color-scheme: dark) {
+    .autocompleteItem {
+        background-color: black;
+        color: white;
+    }
+
+    .highlightedItem,
+    .selectableItem:hover {
+        background-color: darkgray !important; /* to avoid !important create light color-scheme */
+    }
+}
+
 .autocompleteItem:not(:last-child) {
     border-bottom: 1px lightgray solid;
 }
diff --git a/src/sidebar/search/routingProfiles/RoutingProfiles.modules.css b/src/sidebar/search/routingProfiles/RoutingProfiles.modules.css
index 1da6b9ee..7a39f47e 100644
--- a/src/sidebar/search/routingProfiles/RoutingProfiles.modules.css
+++ b/src/sidebar/search/routingProfiles/RoutingProfiles.modules.css
@@ -1,3 +1,25 @@
+@media (prefers-color-scheme: dark) {
+    .selectedProfile {
+        background-color: rgba(255, 255, 255, 0.2);
+        color: darkgray;
+    }
+
+    .selectedProfile:hover {
+        color: lightgray;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .selectedProfile {
+        background-color: rgba(39, 93, 173, 0.2);
+        color: #275dad;
+    }
+
+    .selectedProfile:hover {
+        color: #275dad;
+    }
+}
+
 .profilesParent {
     display: flex;
     flex-direction: row;
@@ -12,15 +34,6 @@
     padding-right: 0.5em;
 }
 
-.selectedProfile {
-    background-color: rgba(39, 93, 173, 0.2);
-    color: #275dad;
-}
-
-.selectedProfile:hover {
-    color: #275dad;
-}
-
 .profileBtn {
     border-radius: 50%;
     margin: 0.1em;
diff --git a/src/stores/MapOptionsStore.ts b/src/stores/MapOptionsStore.ts
index dbd85523..3e7bb957 100644
--- a/src/stores/MapOptionsStore.ts
+++ b/src/stores/MapOptionsStore.ts
@@ -4,7 +4,7 @@ import { MapIsLoaded, SelectMapLayer, ToggleRoutingGraph, ToggleUrbanDensityLaye
 import config from 'config'
 
 const osApiKey = config.keys.omniscale
-const mapTilerKey = config.keys.maptiler
+const stadiaMapsKey = config.keys.stadiamaps
 const thunderforestApiKey = config.keys.thunderforest
 const kurvigerApiKey = config.keys.kurviger
 
@@ -44,18 +44,16 @@ const isRetina = window.devicePixelRatio > 1 || (window.matchMedia && window.mat
 const tilePixelRatio = isRetina ? 2 : 1
 const retina2x = isRetina ? '@2x' : ''
 
-const mapTiler: VectorStyle = {
-    name: 'MapTiler',
+const stadiaMapsSatellite: VectorStyle = {
+    name: 'Stadia Maps Satellite TODO',
     type: 'vector',
-    url: 'https://api.maptiler.com/maps/1f566542-c726-4cc5-8f2d-2309b90083db/style.json?key=' + mapTilerKey,
-    attribution: osmAttribution + ', &copy; <a href="https://www.maptiler.com/copyright/" target="_blank">MapTiler</a>',
-}
-const mapTilerSatellite: VectorStyle = {
-    name: 'MapTiler Satellite',
-    type: 'vector',
-    url: 'https://api.maptiler.com/maps/hybrid/style.json?key=' + mapTilerKey,
-    attribution: osmAttribution + ', &copy; <a href="https://www.maptiler.com/copyright/" target="_blank">MapTiler</a>',
+    // url: 'https://tiles.stadiamaps.com/styles/alidade_satellite.json?key=' + stadiaMapsKey, // TODO NOW not available in free
+    url: 'https://tiles.stadiamaps.com/styles/osm_bright.json?key=' + stadiaMapsKey,
+    attribution:
+        osmAttribution +
+        ', &copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="http://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a>',
 }
+
 const osmOrg: RasterStyle = {
     name: 'OpenStreetMap',
     type: 'raster',
@@ -161,6 +159,14 @@ const mapillion: VectorStyle = {
         osmAttribution +
         ', &copy; <a href="https://mapilion.com/attribution" target="_blank">Mapilion</a> <a href="http://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a>',
 }
+const mapillionDark: VectorStyle = {
+    name: 'Mapilion Dark',
+    type: 'vector',
+    url: 'https://tiles.mapilion.com/assets/dark-matter/style.json?key=' + kurvigerApiKey,
+    attribution:
+        osmAttribution +
+        ', &copy; <a href="https://mapilion.com/attribution" target="_blank">Mapilion</a> <a href="http://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a>',
+}
 const osmDe: RasterStyle = {
     name: 'OpenStreetmap.de',
     type: 'raster',
@@ -202,14 +208,14 @@ const styleOptions: StyleOption[] = [
     omniscale,
     osmOrg,
     esriSatellite,
-    mapTilerSatellite,
-    mapTiler,
+    stadiaMapsSatellite,
     tfTransport,
     tfCycle,
     tfOutdoors,
     tfAtlas,
     kurviger,
     mapillion,
+    mapillionDark,
     osmDe,
     lyrk,
     wanderreitkarte,