This Module will remember your last theme set and will save it for the future. So when a user starts up an application again it will set the last applied theme automatically.
npm install --save react-dark
Add dark mode feature to your React App in just three simple steps.
- Declare root variables (as per your choice). This will be displayed when dark mode is not enabled.
For example :-
:root {
--bg-color: #fff;
--heading-color: #000;
}
and use it on any class. For example :-
.main_heading{
color: var(--heading-color)
}
- Now decalre the variables which you would like to change when it is changed to dark mode.
[data-theme="dark"] {
--bg-color: #000;
--heading-color: #fff;
}
- And now your are good to go. Just import the module and use it inside your React Application.
import Darktheme from "react-dark";
import React, { Component } from 'react';
import Darktheme from "react-dark";
export default class Example extends Component {
render() {
return (
<div>
<Darktheme />
</div>
)
}
}
export default Example;