From a2d4b78a373aeae3ffb229a2d8bfcf247396a5d0 Mon Sep 17 00:00:00 2001 From: Sravan Balaji Date: Sat, 24 Oct 2020 17:47:00 -0400 Subject: [PATCH] Dracula Dark Theme - Clean up dark mode javascript - Change label with color mode - Change dark mode colors to dracula style - Change document load to ready so CSS is applied faster --- src/common/navbar.html | 8 ++++++- src/common/navbar.txt | 2 +- src/scripts/dark-mode-switch.min.js | 33 ++++++++++++++++++++--------- src/style/styles.css | 14 +++++++----- 4 files changed, 40 insertions(+), 17 deletions(-) diff --git a/src/common/navbar.html b/src/common/navbar.html index 9d6a98f..fb6fe59 100644 --- a/src/common/navbar.html +++ b/src/common/navbar.html @@ -160,9 +160,15 @@ +
- +
diff --git a/src/common/navbar.txt b/src/common/navbar.txt index 88ad5df..ea0c212 100644 --- a/src/common/navbar.txt +++ b/src/common/navbar.txt @@ -1 +1 @@ -document.write(' ') \ No newline at end of file +document.write(' ') \ No newline at end of file diff --git a/src/scripts/dark-mode-switch.min.js b/src/scripts/dark-mode-switch.min.js index eb92047..c3a5ec4 100644 --- a/src/scripts/dark-mode-switch.min.js +++ b/src/scripts/dark-mode-switch.min.js @@ -1,25 +1,38 @@ +// Reference: https://github.com/coliff/dark-mode-switch + const darkSwitch = document.getElementById("darkSwitch"); +const darkSwitchLabel = document.getElementById("darkSwitchLabel"); const documentElement = document.documentElement; function initTheme() { const e = null !== localStorage.getItem("darkSwitch") && "dark" === localStorage.getItem("darkSwitch"); - (darkSwitch.checked = e), - e - ? documentElement.setAttribute("color-mode", "dark") - : documentElement.setAttribute("color-mode", "light"); + + darkSwitch.checked = e; + + if (e) { + documentElement.setAttribute("color-mode", "dark"); + darkSwitchLabel.innerHTML = "Dark Mode"; + } else { + documentElement.setAttribute("color-mode", "light"); + darkSwitchLabel.innerHTML = "Light Mode"; + } } function resetTheme() { - darkSwitch.checked - ? (documentElement.setAttribute("color-mode", "dark"), - localStorage.setItem("darkSwitch", "dark")) - : (documentElement.setAttribute("color-mode", "light"), - localStorage.removeItem("darkSwitch")); + if (darkSwitch.checked) { + documentElement.setAttribute("color-mode", "dark"); + localStorage.setItem("darkSwitch", "dark"); + darkSwitchLabel.innerHTML = "Dark Mode"; + } else { + documentElement.setAttribute("color-mode", "light"); + localStorage.removeItem("darkSwitch"); + darkSwitchLabel.innerHTML = "Light Mode"; + } } -window.addEventListener("load", () => { +$(document).ready(() => { darkSwitch && (initTheme(), darkSwitch.addEventListener("change", () => { diff --git a/src/style/styles.css b/src/style/styles.css index a834b50..640816e 100644 --- a/src/style/styles.css +++ b/src/style/styles.css @@ -12,11 +12,11 @@ /* Dark Mode */ :root[color-mode="dark"] { - --primary-color: purple; - --secondary-color: #00274c; - --tertiary-color: #30c5ff; - --background-color: #e8eef2; - --font-color: #000000; + --primary-color: #bd93f9; + --secondary-color: #44475a; + --tertiary-color: #50fa7b; + --background-color: #282a36; + --font-color: #f8f8f2; } /*********** @@ -137,3 +137,7 @@ body { margin: auto; display: block; } + +label { + color: var(--primary-color); +}