How to conditionally import css files in react/next

What's the best way to dynamically import CSS files, such as

darktheme.css

darktheme.css

and

lighttheme.css

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"]

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

KP-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

darktheme.css

and

lighttheme.css

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"]

[data-theme="dark"]

How to conditionally import css files in react/next

How to conditionally import css files in react/next

Similar Threads