Skilloverse is now available in dark mode – so it’s easier on your eyes when doing your freelancer networking in dark surroundings. If you open Skilloverse on a device which supports dark mode and it’s activated, Skilloverse will appear with mostly dark colours instead of light colours. Here’s the difference, side-by-side:
Technical details
This is made possible via the @media(prefers-color-scheme: dark) { ... } media query in CSS. For our particular implementation in Skilloverse, we used this CSS feature in combination with CSS custom properties, aka CSS variables. In principle, our code is based on what’s shown below:
:root {
--background-color: white;
--foreground-color: black;
}
@media(prefers-color-scheme: dark) {
:root {
--background-color: black;
--foreground-color: white;
}
}
body {
background-color: var(--background-color);
color: var(--foreground-color);
}Here, some CSS custom properties are set at the root level: one for a white background colour, --background-color, and one a black foreground colour, --foreground-color; i.e. text colour. When, however, a device is set to prefer a dark colour scheme, these colours get reversed (in reality, picking more finely tuned colours will likely produce a better outcome). Inside this media query, the root level CSS custom property values are overridden. Finally, in the style definition for the body selector, we use these colour variables. The result: the colours applied to the body are automatically selected based on the device’s dark mode settings.
This is a small snippet of code, but that is the basic pattern that is behind our entire dark mode implementation.
While implementing dark mode, it was helpful to search for all CSS properties containing the text “color” and convert them to use CSS custom properties instead of hard-coded colours and then make sure those CSS custom properties had appropriate values at the root for both light and dark modes of the website.
Browsing around other freelance websites, it seems like we may be one of the first online freelancer platforms to implement a dark mode. Hope everyone enjoys it.
