Building multiple themes with CSS..

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 ca…


This content originally appeared on DEV Community and was authored by sakethk

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-scheme media query.
  • I am using data-theme attribute to set color scheme. Whenever scheme changes just we need to update data-theme attribute value.

Here is the Codepen. You can find color schemes and some other styles for Card, Heading and Paragraph in CSS section.


This content originally appeared on DEV Community and was authored by sakethk


Print Share Comment Cite Upload Translate Updates
APA

sakethk | Sciencx (2021-07-09T13:33:26+00:00) Building multiple themes with CSS... Retrieved from https://www.scien.cx/2021/07/09/building-multiple-themes-with-css/

MLA
" » Building multiple themes with CSS..." sakethk | Sciencx - Friday July 9, 2021, https://www.scien.cx/2021/07/09/building-multiple-themes-with-css/
HARVARD
sakethk | Sciencx Friday July 9, 2021 » Building multiple themes with CSS..., viewed ,<https://www.scien.cx/2021/07/09/building-multiple-themes-with-css/>
VANCOUVER
sakethk | Sciencx - » Building multiple themes with CSS... [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/09/building-multiple-themes-with-css/
CHICAGO
" » Building multiple themes with CSS..." sakethk | Sciencx - Accessed . https://www.scien.cx/2021/07/09/building-multiple-themes-with-css/
IEEE
" » Building multiple themes with CSS..." sakethk | Sciencx [Online]. Available: https://www.scien.cx/2021/07/09/building-multiple-themes-with-css/. [Accessed: ]
rf:citation
» Building multiple themes with CSS.. | sakethk | Sciencx | https://www.scien.cx/2021/07/09/building-multiple-themes-with-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts