Dark color scheme for the site
The site follows the visitor's dark setting.
Life cycle: Redesign, example 31 of 34. Worked out on the Fit & Healthy site of Exponential 6.0.15+.
Contents
In the Layouts editor
No layout change; check every background color editors can choose.
With templates
- Add
@media (prefers-color-scheme: dark) { ... }rules to your stylesheet for the page background, text and thebg-color-*classes.
Which to choose
CSS.
Check
- Text contrast at least 4.5:1 in both schemes.
Related pages
- Styling your blocks
- Redesign examples, every page
- Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.
Become an Exponential Partner
Partners share their information, provide funding, contribute back and develop the products with us, and that is how Exponential grows. A partner website and dashboard are planned for mid-2027: please become a partner today to speed up our growth rate and land new features faster.