From 154e87f60b1159a6f8cf3008e2c17afd0bf18fce Mon Sep 17 00:00:00 2001 From: aditianshu <55697933+aditianshu@users.noreply.github.com> Date: Sun, 29 Mar 2020 02:22:59 +0530 Subject: [PATCH 1/7] changes to implement multiple dark theme --- .vscode/settings.json | 3 ++ src/index.js | 83 +++++++++++++++++++++++++++---------------- 2 files changed, 55 insertions(+), 31 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 6c936a9..ecca203 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", "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 ( +
+ + +
+ ); } } - - onChange(e) { - this.switchTheme(e); - } - - render() { - return ( -
- -
- ); - } -} export default Darktheme; From d94509deca6faa77bf97067213f3b0ba78ed232f Mon Sep 17 00:00:00 2001 From: aditianshu <55697933+aditianshu@users.noreply.github.com> Date: Sun, 29 Mar 2020 02:26:49 +0530 Subject: [PATCH 2/7] Changes in css --- src/App.css | 95 ++++++++++++++++++++--------------------------------- 1 file changed, 36 insertions(+), 59 deletions(-) diff --git a/src/App.css b/src/App.css index 4ac4c25..0e2dba9 100644 --- a/src/App.css +++ b/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%; - } - \ No newline at end of file + +[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; +} \ No newline at end of file From f6758460a2b381364bdb327574021b79882d4016 Mon Sep 17 00:00:00 2001 From: aditianshu <55697933+aditianshu@users.noreply.github.com> Date: Thu, 2 Apr 2020 01:18:36 +0530 Subject: [PATCH 3/7] changed default --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index ecca203..f1dae63 100644 --- a/src/index.js +++ b/src/index.js @@ -12,7 +12,7 @@ class Darktheme extends React.Component { document.documentElement.setAttribute("data-theme", presentTheme); } else{ - document.documentElement.setAttribute("data-theme", "normal"); + document.documentElement.setAttribute("data-theme", "dark"); } } From 8691d59c8f25408289df2f11334361fd30aff63c Mon Sep 17 00:00:00 2001 From: Aditi Anshu <55697933+aditianshu@users.noreply.github.com> Date: Sat, 4 Apr 2020 23:47:38 +0530 Subject: [PATCH 4/7] Removed changes --- .vscode/settings.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 6f3a291..8b13789 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1 @@ -{ - "liveServer.settings.port": 5501 -} \ No newline at end of file + From 7ae4da2f3dca9f58cfe29afe676ce08d1aac89e9 Mon Sep 17 00:00:00 2001 From: Aditi Anshu <55697933+aditianshu@users.noreply.github.com> Date: Mon, 6 Apr 2020 03:43:59 +0530 Subject: [PATCH 5/7] Transition delay and animation added --- src/App.css | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index 0e2dba9..6e1438a 100644 --- a/src/App.css +++ b/src/App.css @@ -19,19 +19,31 @@ select { [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; -} \ No newline at end of file + transition: + background-color 1s ease-in-out, + color 1s ease-in-out; +} From ccd98237020e305c80bd60157300d25a246974c4 Mon Sep 17 00:00:00 2001 From: Aditi Anshu <55697933+aditianshu@users.noreply.github.com> Date: Mon, 6 Apr 2020 03:48:40 +0530 Subject: [PATCH 6/7] Add files via upload --- Screenshot (127).png | Bin 0 -> 18109 bytes Screenshot (128).png | Bin 0 -> 8178 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 Screenshot (127).png create mode 100644 Screenshot (128).png diff --git a/Screenshot (127).png b/Screenshot (127).png new file mode 100644 index 0000000000000000000000000000000000000000..49fa15b4404b45c910e899d220d6ca9b487fb8cd GIT binary patch literal 18109 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 literal 0 HcmV?d00001 diff --git a/Screenshot (128).png b/Screenshot (128).png new file mode 100644 index 0000000000000000000000000000000000000000..28e66622b728f303f7b76d28ad4481b9bad1cb55 GIT binary patch literal 8178 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 Date: Mon, 6 Apr 2020 03:59:55 +0530 Subject: [PATCH 7/7] Updated --- README.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 797eda0..05855a6 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,9 @@ # React Dark - -[](https://github.com/plxity/React-Dark-Theme) +![Light Mode](https://github.com/aditianshu/React-Dark/blob/multiDark/Screenshot%20(128).png) -[](https://github.com/plxity/React-Dark-Theme) +![Dark Mode](https://github.com/aditianshu/React-Dark/blob/multiDark/Screenshot%20(127).png) ## Important @@ -43,7 +42,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"] { @@ -90,7 +89,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