This article is about building a site with multiple color schemes. It will change the theme without reloading the document, without adding theme class names dynamically and without duplicating the code.
I am using CSS variables in this example. You can try this even if you are using SASS or LESS.
In this example we will create a document that has background color, Dropdown (to pick scheme) , card, heading and paragraph. Here I am creating six color schemes and have given random names to them. Below are the names
- Light
- Dark
- Sunset
- Moon light
- Cartoon
- bluecrystal
In dropdown you will find the system option i.e., your OS theme. If your are using Dark mode in your OS, it will be Dark. Else, it will be Light.
For each scheme i defined four colors
- —main-bg-color (Body backgound color)
- —card-shadow-color (Card shadow)
- —primary-text-color (Heading text color)
- —secondry-text-color (Paragraph text color)
Important
- We are getting system theme with the help of
prefers-color-schememedia query. - I am using
data-themeattribute to set color scheme. Whenever scheme changes just we need to updatedata-themeattribute value.
Here is the Codepen. You can find color schemes and some other styles for Card, Heading and Paragraph in CSS section.
{% codepen https://codepen.io/saketh-kowtha/pen/OJmXGXN %}