Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago
lko

How to conditionally import css files in react/next

What's the best way to dynamically import CSS files, such as darktheme.css and lighttheme.css, based on the selected theme, when using next-themes, which allows the theme to be specified as either a CSS variable or a JavaScript variable? I know I could do this:

[data-theme="dark"] body {
  color: white;
  background: black;
}


But I should add 
[data-theme="dark"]
 to each line of the file and it's around 500 lines long. Additionally, I might want to switch themes, and replacing files manually is not a good idea. Is there a more efficient and scalable way to handle this?
Was this page helpful?