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