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.
- NodeJS (check for it's installation on terminal using npm -v)
- Clone the repository
git clone https://github.com/Awesome-React-Modules/React-Dark.git
- Install Dependencies
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;
Find Codepen Implementation of the module here
import React, { Component } from 'react';
import Darktheme from "react-dark";
export default class Example extends Component {
render() {
return (
<div className="App">
<Darktheme/>
//This will set the Background color to dark
</div>
)
}
}
export default Example;
- Set-up the React-Dark module by dowloading its dependencies, using
npm install
command. - Build the module using
npm run build
- Link the module for testing using
npm link
command. - Change your directory to
test-server
directory, usingcd test-server
- Install the dependecies using
npm install
- Now run
npm link react-dark
- Congratulations! You have set-up the test server for react-dark.
Now just run
npm start
fromtest-server
directory to launch the test-server. - You don't need to stop this server, the changes made in the module will be reflected automatically each time you build them using
npm run build
Please read CONTRIBUTING.md for information on how to contribute to React-Pincode.
- Write clean and readable code with proper formatting.
- Create a branch and push your code in the branch.
- Please follow PR template to create PR.
- Please read our Code of Conduct .
Apoorv Taneja Aditya Srivastava
Feel Free to ask your queries!!
Happy Coding ๐ ๐