DEV Community

sakethk
sakethk

Posted on

3

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 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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

đź‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay