Multi dark #20

.vscode/settings.json

@@ -0,0 +1 @@
+

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)
 
-<div align="center">
-    <img src="https://forthebadge.com/images/badges/powered-by-responsibility.svg" >
-    <img src="https://forthebadge.com/images/badges/built-with-love.svg" >
-    <img src="https://forthebadge.com/images/badges/made-with-javascript.svg" >
-</div>
-
-
-#### Snippet of the working application is displayed below.
-
-* ###### Light Theme
-[<img src="./light_theme.png" style="width: 100%;" />](https://github.com/plxity/React-Dark-Theme)
-* ###### Dark Theme
-[<img src="./dark_theme.png" style="width: 100%;" />](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

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%;
-  }
-
+
+[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;
+}

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 (
+              <div className="container">
+              <label htmlFor="select1" ></label>
+              <select value={this.state.value} onChange={e => this.onChange(e)} className="form-control">
+                   <option value="select">Change Theme</option>
+                    <option value="normal">Normal</option>
+                    <option value="dark">Dark</option>
+                  <option value="darkGrey">Dark Grey</option>
+                    <option value="darkBlue">Dark Blue</option>
+              </select>
+              </div>
+      );
     }
   }
-
-  onChange(e) {
-    this.switchTheme(e);
-  }
-
-  render() {
-    return (
-      <div className="App">
-        <label className="switch">
-          <input type="checkbox" onChange={e => this.onChange(e)} />
-          <span className="slider round"></span>
-        </label>
-      </div>
-    );
-  }
-}
 export default Darktheme;