Dark mode

[karussell]

Dark mode is IMO in general not worth the effort, but very useful for driving at night (#279).

In Firefox you can explicitly switch to dark mode in the settings and then you can try it here.

Still there are many TODOs:

• make it possible to switch via javascript. Use something like this which should avoid the media queries all over the code too.
• didn't find a way to change the CSS for custom model box and heightgraph -> this was probably fixed in use css for custom model box from local file #318
• white graphhopper logo for dark mode
• buy stadia maps standard and remove maptiler or fix maptiler for dark mode
• a "mouse over" over the profile icons should not nearly hide them
• white is too bright for auto complete and preview panel background is still white
• set black background for selectors that set padding otherwise it is white frame like the map options or context menu

[Janekdererste]

Still getting notifications on this project :-)

The following is pretty similar to the stackoverflow link, but slightly different I think. You can set css variables within media queries too. I found this really helpfull when I implemented a dark mode.

:root {
            --header: #04A777;
            --highlight: #C92C6D;
            --text: #011627;
            --background: #fff;
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --header: #04A777;
                --highlight: #C92C6D;
                --text: #FAFAFA;
                --background: #232327;
            }
        }

and then use those vars throughout the css

html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            background: var(--background);
            font: 100% system-ui;
        }

        a, body {
            color: var(--text)
        }

[karussell]

Still getting notifications on this project :-)

Haha :)

How would I be able to switch the mode via JavaScript for your example? (The use case would be the navigation night and then I would automatically switch to the dark map tiles but also dark CSS)

For the stackoverflow I would probably create a mode state and set the css accordingly and as it is sprinkled all over the project I would probably have to use useContext.

[Janekdererste]

You could do something along the lines of these snippets https://css-tricks.com/updating-a-css-variable-with-javascript/

[karussell]

Nice & thanks. Didn't know that this is possible :)