DEV Community

Cover image for How I make dark/light theme
João Vitor Minosso
João Vitor Minosso

Posted on

How I make dark/light theme

I'm developing a website that requires a dark/light theme switch, and I've come across various approaches to achieve this, including:

  • Using Tailwind CSS
  • Creating a Context to store the theme
  • Utilizing an external React library
  • Employing TypeScript styled components
  • Simply using CSS

How would you choose an approach for a small application? I opted to use just CSS because it's the method I'm less familiar with. Now, I realize that it's actually the simplest way to accomplish this task. I used the :root:has(#theme-switch:not(:checked)) selector, and it worked smoothly in all my module.css files.

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