Dynamically swap css in react - css

Question

Im generating two css files from my sass files with defined color variables
Lets call them dark.css and light.css
Now what i want to do is dynamically swap these two css to change themes
So far I have something like this
...
componentDidUpdate() {
if (this.props.colorScheme === 'dark') {
require('../../../static/css/style-dark.css');
} else {
require('../../../static/css/style-light.css');
}
}
}
...
Above doesnt really work.Well it wroks ..partially
The problem is that theme is switched only once e.g default one is light then it can be changed to dark but after that no matter what i cant change it back to light
Had somebady similar problem? maybe this isnt a right way at all so any ideas are apprecited

Answer 1

I think you can do something like that...
Create a js styles file instead of css styles file.
example file1.js
export default = ({
backgroundColor: 'red',
color: 'blue',
paddingTop: 20,
paddingBottom: 20,
});
// file 1
//export default({ <-- replace this line in your file
const file1 = {
backgroundColor: 'red',
color: 'blue',
paddingTop: 20,
paddingBottom: 20,
};
// file 2
//export default({ <-- replace this line in your file
const file2 = {
backgroundColor: 'yellow',
color: 'black',
paddingTop: 40,
paddingBottom: 40,
};
class Dashboard extends React.Component {
constructor(props) {
super(props);
this.state = {
theme: 1,
styles: {...file1},
};
}
changeTheme = () => {
this.setState({
styles: this.state.theme === 1 ? {...file2} : {...file1},
theme: this.state.theme === 1 ? 2 : 1,
});
};
render() {
return (
<div style={this.state.styles}>
Hello
<button onClick={this.changeTheme}>
Change Theme
</button>
</div>
);
}
}
ReactDOM.render(
<Dashboard />,
document.querySelector('#app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>