Just a quick note to let you know that today we have added a custom dark mode with a theme selector to the right of the top menu.
The automatic implementation(prefers-color-scheme) has been replaced by a management based on the [data-theme="dark"] selector that allowed the dark theme to be displayed when the user selected it in their browser. Some, like Opera, have a"force dark mode" option that paints a pretty decent dark version, but with some bugs like inverting images showing them in negative and not allowing to configure anything.
I have chosen to use HTML and JS inserted with GeneratePress elements and CSS in a long snippet with all the annotations to have a complete list of what has been adjusted in case I want to improve it or change it someday, as well as having total control over the loading of styles and an absolute visual consistency throughout the website.
These are the main improvements compared to the automatic version:
- Rendering optimisation: Elimination of flickering and conflicts through a unified CSS style hierarchy that ensures immediate loading of the dark theme.
- Visual consistency: Precise adjustment of colours and filters on dynamic elements (GenerateBlocks, Query Loops, tabs and accordions) to avoid legibility problems (grey colours on white background).
- Control of dynamic elements: Correction of blending filters
(mix-blend-mode) and opacities in images and menus, ensuring that elements such as the Polylang icon or the cards on the documentary page maintain their correct contrast under any conditions. - Technical clean-up: Debugging of redundant selectors and unification of CSS rules to facilitate future maintenance without impact on performance and CLS.
This, which can also be done with a plugin, with the logical limitations, I have decided to do it with code, not only to save myself a plugin, but also to have granular control and fine tuning for any small detail and to be able to act on the possible impact it may have on the loading speed.
If anyone is interested in the code, which is no big deal either, just whistle and I'll post it here. If you are one of those who like to browse the obscure and find something that could be improved, feel free to leave a comment or click hard on the yellow "Report bug" button at the bottom of any post.
