Testing out darkmode. Will not use Javascript, and no checkbox hacks (yet) to allow switching. You will be served what you configured in your operating system. The code looks roughly like this: :root { /* allow light and dark color schemes */ color-scheme: light dark; /* declare variables and use system colours */ --nav-color: Canvas; --nav-background-color: CanvasText; --main-color: CanvasText; --main-background-color: Canvas; } element { color: var(--main-color); font-family: sans-serif; background-color: var(--main-background-color); } Instead of defining our own colours, we will use provided system colours. This has the advantage, that the colours are already set according to the colour scheme the user has chosen. These colours are then put into CSS custom properties and used to style elements. The decoupling via custom properties is not strictly needed, but provides a useful abstraction.

If the darkmode proves to be useful, it will be rolled out also to the webdev tools section.

Edit, changed the webdev tools section, see the next article.