I am designing a dark-theme mode for my react app, I got two CSS files,
- antd.css (light theme)
- 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?
Top comments (9)
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!
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?
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!
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')
}
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.
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!
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.
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.
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...