Kevin Powell - Community•16mo ago

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;
}

[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?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

How to conditionally import css files in react/next