Dark mode

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;
 

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
     }

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;

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;

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({

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;

src/map/MapOptions.modules.css

@@ -1,3 +1,10 @@
+@media (prefers-color-scheme: dark) {
+    .mapOptionsContainer {
+        background-color: black;
+        color: white;
+    }
+}
+
 .mapOptionsContainer {
     display: flex;
 }

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'

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 {

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

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 {

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;
 }

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;
+}

src/sidebar/instructions/Instructions.module.css

@@ -1,4 +1,7 @@
-.instructionsList {
+@media (prefers-color-scheme: dark) {
+    .instructionsList {
+        color: white;
+    }
 }
 
 .instruction {

src/sidebar/search/AddressInput.module.css

@@ -22,14 +22,29 @@
     -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;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
-        background-color: white;
         z-index: 5;
         padding: 0.5rem;
     }

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;
 }

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;