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)