diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ + diff --git a/README.md b/README.md index 4760741..3064781 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,9 @@ # React Dark -React Dark is a published NPM module that can be integrated inside any ReactJS application. It can be used to integrate dark theme in a few easy steps. It provides you a functionality to customize dark themes as per the need. It also comes with a toggler to switch themes easily. +![Light Mode](https://github.com/aditianshu/React-Dark/blob/multiDark/Screenshot%20(128).png) -
- - - -
- - -#### Snippet of the working application is displayed below. - -* ###### Light Theme -[](https://github.com/plxity/React-Dark-Theme) -* ###### Dark Theme -[](https://github.com/plxity/React-Dark-Theme) +![Dark Mode](https://github.com/aditianshu/React-Dark/blob/multiDark/Screenshot%20(127).png) ## Important @@ -49,7 +37,7 @@ and use it on any class. For example :- } ``` -2) Now decalre the variables which you would like to change when it is changed to dark mode. +2) Now decalre the variables which you would like to change when it is changed to dark mode, it gives three custom dark themes. ``` [data-theme="dark"] { @@ -98,7 +86,7 @@ export default Example; ### Playground -Find Codepen Implementation of the module [here](https://codepen.io/kuljeet-123/pen/zYGWyoY) +Find Codepen Implementation of the module [here](https://codepen.io/aditianshu/pen/OJVavKd?editors=0110) ### Development and Testing diff --git a/Screenshot (127).png b/Screenshot (127).png new file mode 100644 index 0000000..49fa15b Binary files /dev/null and b/Screenshot (127).png differ diff --git a/Screenshot (128).png b/Screenshot (128).png new file mode 100644 index 0000000..28e6662 Binary files /dev/null and b/Screenshot (128).png differ diff --git a/src/App.css b/src/App.css index 4ac4c25..6e1438a 100644 --- a/src/App.css +++ b/src/App.css @@ -1,60 +1,49 @@ +select { + position: relative; + background: var(--bg-color); + border: none; + outline: none; + font-size: 16px; + color: var(--heading-color); + border-bottom: 2px solid black; + padding-bottom: 8px; + min-width: 150px; + text-align: left; + outline: none; + cursor: pointer; + z-index: 2; + display: inline-block; +} - .switch { - position: relative; - display: inline-block; - width: 45px; - height: 24px; - } - - .switch input { - opacity: 0; - width: 0; - height: 0; - } - - .slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgb(175, 175, 175); - -webkit-transition: 0.4s; - transition: 0.4s; - } - - .slider:before { - position: absolute; - content: ""; - height: 16px; - width: 16px; - left: 4px; - bottom: 4px; - background-color: white; - -webkit-transition: 0.4s; - transition: 0.4s; - } - - input:checked + .slider { - background-color: rgb(71, 68, 68); - } - - input:focus + .slider { - box-shadow: 0 0 1px rgb(71, 68, 68); - } - - input:checked + .slider:before { - -webkit-transform: translateX(21px); - -ms-transform: translateX(21px); - transform: translateX(21px); - } - - .slider.round { - border-radius: 34px; - } - - .slider.round:before { - border-radius: 50%; - } - \ No newline at end of file + +[data-theme="dark"] { + --bg-color: #1b262c; + --heading-color: #fff; + transition: + background-color 1s ease-in-out, + color 1s ease-in-out; +} + +[data-theme ="darkGrey"]{ + --bg-color: #222831; + --heading-color: #fff; + transition: + background-color 1s ease-in-out, + color 1s ease-in-out; +} + +[data-theme ="darkBlue"]{ + --bg-color: #17223B; + --heading-color: #fff; + transition: + background-color 1s ease-in-out, + color 1s ease-in-out; +} + +:root { + --bg-color: #fff; + --heading-color: #000; + transition: + background-color 1s ease-in-out, + color 1s ease-in-out; +} diff --git a/src/index.js b/src/index.js index 6c936a9..f1dae63 100644 --- a/src/index.js +++ b/src/index.js @@ -1,40 +1,61 @@ import React, { Component } from "react"; import "./App.css"; -class Darktheme extends Component { +class Darktheme extends React.Component { + constructor(props) { + super(props); + this.state = { value: 'select'}; } + componentDidMount() { - const presentTheme = localStorage.getItem("theme"); - if (presentTheme) { - document.documentElement.setAttribute("data-theme", presentTheme); - if (presentTheme === "dark") { - document.querySelector('.switch input[type="checkbox"]').checked = true; + const presentTheme = localStorage.getItem("theme"); + if (presentTheme) { + document.documentElement.setAttribute("data-theme", presentTheme); + } + else{ + document.documentElement.setAttribute("data-theme", "dark"); + } + } + + switchTheme(e) { + if (e.target.value === "darkGrey") { + document.documentElement.setAttribute("data-theme", "darkGrey"); + localStorage.setItem("theme", "darkGrey"); + } + else if (e.target.value === "darkBlue") { + document.documentElement.setAttribute("data-theme", "darkBlue"); + localStorage.setItem("theme", "darkBlue"); + } + else if (e.target.value === "dark") { + document.documentElement.setAttribute("data-theme", "dark"); + localStorage.setItem("theme", "dark"); + } + else { + document.documentElement.setAttribute("data-theme", "normal"); + localStorage.setItem("theme", "normal"); } } - } - - switchTheme(e) { - if (e.target.checked) { - document.documentElement.setAttribute("data-theme", "dark"); - localStorage.setItem("theme", "dark"); - } else { - document.documentElement.setAttribute("data-theme", "normal"); - localStorage.setItem("theme", "normal"); + + onChange(e) { + this.setState({ + value: e.target.value + }) + this.switchTheme(e); + } + + + render() { + return ( +
+ + +
+ ); } } - - onChange(e) { - this.switchTheme(e); - } - - render() { - return ( -
- -
- ); - } -} export default Darktheme;