CODEWITHSUNDEEP
javascriptcssreactjsuser-interfaceweb-development-server
BlaCkAb
BlaCkAb

Reputation: 46

How can I dynmically change the imported css file

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.

Upvotes: 2

Views: 750

Answers (2)

Fernando Toledo
Fernando Toledo

Reputation: 21

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');

Upvotes: 0

HAK
HAK

Reputation: 458

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

Upvotes: 1

Related Questions