The user of a computer already tells the operating system how preferred its contents are displayed. At the moment Windows, Linux and OSX users can decide whether the display should be in light or dark. With i0S 13, Apple's mobile world gets this feature. Android does not support it yet, but one can strongly assume that the dark mode will be implemented. So, depending on the operating system, it can be chosen day-dependent or fixed, whether the contents are displayed dark or light. Since users can identify themselves better with the device, this trend will be confirmed.
Every visitor of a website has a certain expectation and rewards this according to his preferences, either stays longer on the website or is more convinced of what the website offers.
With the CSS property "prefers-color-scheme" you can realize the light or dark mode for newer browsers to better respond to the user of the website. This mode is already supported by the current browsers like Firefox, Chrome, Safari
:root {
--box-background: hsl(49, 100%, 50%);
}
@media (prefers-color-scheme: light) {
:root {
--box-background: hsl(49, 100%, 50%);
}
}
@media (prefers-color-scheme: dark) {
:root {
--box-background: hsl(49, calc(100% * 0.6), calc(50% * 0.25));
}
}
.box {
background-color: var(--box-background)
}To adjust the colors via CSS, you use CSS variables. Then it is very easy to define these colors globally for the light and dark mode and depending on the user's settings, to output them. If you use the CSS Calc property you could adjust the saturation and brightness.
To use Javascript, access the "Scheme" with "matchMedia":
const darkTheme = window.matchMedia('(prefers-color-scheme: dark)')
Things that are not visible at first glance, such as light or dark mode, can bring the small nuance of advantage to increase the conversion rate, and also be a differentiation from the competition. Appealing websites have significantly more success.
As an experienced web developer from the Stuttgart area I can advise you on a reasonable use of new web technologies.
Progressive Web App indispensable for any website? Read More...
15 tips for improving a PWA (Progressive Web App) Read More...
WebP images - new speed for the website Read More...