How can I dynmically change the imported css file

Question

so I am working on this project and I am using next js (react) and a certain css package that is really helpful and it has two themes Dark mode and Light mode. but they are both in separate css files meaning that if I want to use the light mode I have to import it this way :

import '-packagename/light-something.css'

and for Dark mode:

import '-packagename/dark-something.css'

my question here is if there a possibility to have a certain button event to dynamically change from dark to light mode, like a theme button.

I think it is easy to do [themes using css variables](https://stackoverflow.com/a/66829464/2873538). But it may not help you as you are using a package for themes. — Ajeet Shah, Apr 08 '21 at 01:17

score 1 · Answer 1 · answered Apr 08 '21 at 01:14

Following is way to do conditional rendering as per your case

if (condition) {
    import('lightcss')
   //incase of any module you could use it in then block
   //it's irrelevant  in ur case
    .then(('Menu') => {
        Menu.open();
    })
    .catch(error => {
     import("darkcss")
}) ;
}

score 0 · Answer 2 · edited Apr 08 '21 at 01:45

I did something like what you want:

'./myImports.js':

const myImport = (option) => {

        switch (option) {
                case 'a': return require('./myCSSFile.css');
                case 'b': return require('./othercss.css');
                default: return require('./myCSSFile.css');
        }
}

export default myImport;

'./mycomponent1.js':

import myImport from './myImports';

myImport('a');

How can I dynmically change the imported css file

2 Answers2