Is it possible to unload dynamic imported module?

I am designing a dark-theme mode for my react app, I got two CSS files,

1. antd.css (light theme)
2. antd.dark.css (dark theme)

I wanted to import these CSS files dynamically, to be more specific I want to import these files based on a particular condition.

In the above code, "userTheme" is a react state, whose default value is 'false' [type: boolean], I have created a switch button which set the value of "userTheme" state.

Below is the screenshot of my react app. [userTheme: false] // showing light theme

Below is the screenshot of my react app when I switched it to dark mode. [userTheme: true] // showing dark theme

Below is the screenshot of my react-app when I switched back to light-theme.
[userTheme: false] // but showing still dark theme

The problem is, it is still in the dark mode (i guess that is because antd.dark.css file is still loaded), I checked my "userTheme" state value it is set to 'false' in react state.

Is there any way to unload stylesheet dynamically in this case? Maybe that will solve this problem. Can anyone please tell me how can I fix this?

Comments

[Gabriele Cimato]

Someone who's done this before might give you more insight but I don't think you should be unloading css files! You should go a different route and have components in your app be aware that they should switch to a dark theme and have them use a different css class.

Your dark theme css file should have these additional classes NOT conflicting with the original css file.

Example:

Original:
.nav-bar

Dark theme:
.nav-bar-dark

And you can leverage context to have components know they should switch to the dark theme class. Your CSS files should NOT conflict otherwise the latest one will take precedence (the C in CSS is for Cascading). I'm not sure I explained this properly but feel free to ask questions!

[Sayuj Sehgal]

Ok, I am getting your point, but what if my dark theme file also contains the same class name as the original.

Example
Original:
.nav-bar

Dark theme:
.nav-bar

Then, how can I resolve this?

[Gabriele Cimato]

That's the point of my reply, you shouldn't do that.

You should toggle between CSS classes not alter the content of it. Also you can't really unload a CSS file anyway. Let me know if this was helpful!

[Sayuj Sehgal]

Ok, that is helpful, but Can you please suggest a way to toggle between two CSS stylesheets dynamically in react js?

Example:

if(theme == 'light'){
import('light.css')
}else{
import('dark.css')
}

[Gabriele Cimato]

That's fine but if classes collide then the last stylesheet loaded will win so you won't be able to toggle back.

Which is the problem you're having right now.

[Sayuj Sehgal]

Yeah, you got it😂, today I was thinking about this problem and got one solution in my head, if I use link stylesheet tag and then dynamically change the href link then I can overcome this problem!

[Eli Sklar]

Yea, I wanna know as well - I do get what @Gabriele Cimato is saying, but there's also should be some kid of logic that tells webpack "hey this module is no longer the valid module I want to load" - for whatever reason.

I do wonder how they'd go about implementing it though.

[Eli Sklar]

Just to remind us that this is a valid request - the browser does know how to handle unloaded CSS - so the example provided by OP is exactly what the browser already knows how to do, while webpack doesn't.

[Forrest]

So, this IS actually possible now thanks to the new JS feature "cssStyleSheets"
developer.mozilla.org/en-US/docs/W...
Only problem is that it doesnt seem to be supported by create-react-app, although it is supported by webpacks css-loader. I created an issue to discuss it here
github.com/facebook/create-react-a...