Multi dark #20

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

src/App.css

@@ -1,60 +1,37 @@
+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;
+}
+
+[data-theme ="darkGrey"]{
+  --bg-color: #222831;
+	--heading-color: #fff;
+}
+
+[data-theme ="darkBlue"]{
+  --bg-color: #17223B;
+	--heading-color: #fff;
+}
+
+:root {
+	--bg-color: #fff;
+	--heading-color: #000;
+}

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", "normal");
+      }
+      }
+
+    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;