0

I am working on a site, and I've made 2 different files with separate css for dark mode and light mode respectively. Each of these files have multiple subclasses with separate css within. For example there are 2 files, dark.css (dark mode) and main.css (light mode) and each of these has various stuff within like h1, h5, h6, .navbar and a lot more. How do I change the toggle so that on the pressing of the button, the page imports dark.css instead of main.css and vice versa.

I tried various methods using sites but they all refer to making separate classes which is a lengthy procedure which I do not like too much. So is there an easier like the one I mentioned above that uses js? I do not want to change any class names and I want to use the files as they are and just want to change the html for the toggle button and possibly the js for it.

Thanks in advance!

CoderPro1000
  • 47
  • 6
  • You could also use [css-variables](https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8) and then you don't need to retype every class that changes. Just change the variables to their new colors – Reyno May 06 '21 at 06:54
  • Consider using one file with CSS variables – T J May 06 '21 at 06:57

0 Answers0