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

@@ -160,9 +160,15 @@
 	</div>
 
 	<!-- Dark Mode Toggle -->
+	<!-- Reference: https://github.com/coliff/dark-mode-switch -->
 	<div class="custom-control custom-switch">
 		<input type="checkbox" class="custom-control-input" id="darkSwitch" />
-		<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
+		<label
+			class="custom-control-label"
+			for="darkSwitch"
+			id="darkSwitchLabel"
+			>Dark Mode</label
+		>
 	</div>
 	<script src="./scripts/dark-mode-switch.min.js"></script>
 </nav>

src/common/navbar.txt

@@ -1 +1 @@
-document.write('<nav class="navbar my-nav navbar-expand-md fixed-top"> <!-- Brand --> <a class="navbar-brand" href="./index.html"> <img src="./assets/branding/logo.png" alt="Icon" width="30px" height="30px" class="d-inline-block align-top" /> <img src="./assets/branding/name.png" alt="Name" height="30px" class="d-inline-block align-center" /> </a> <!-- Toggler/collapsible Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" > <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <!-- About --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./about.html" id="navbardrop" data-toggle="dropdown" > About </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./about.html#bio"> Bio </a> <a class="dropdown-item" href="./about.html#contact_me"> Contact Me </a> </div> </li> <!-- Portfolio --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./portfolio.html" id="navbardrop" data-toggle="dropdown" > Portfolio </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./portfolio.html#resume"> Resume </a> <a class="dropdown-item" href="./portfolio.html#education"> Education </a> <a class="dropdown-item" href="./portfolio.html#professional_experience" > Professional Experience </a> <!-- <a class="dropdown-item" href="./portfolio.html#research"> Research </a> <a class="dropdown-item" href="./portfolio.html#projects"> Projects </a> --> </div> </li> <!-- Personal --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./personal.html" id="navbardrop" data-toggle="dropdown" > Personal </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./personal.html#software"> Software </a> <a class="dropdown-item" href="./personal.html#hardware"> Hardware </a> <a class="dropdown-item" href="./personal.html#video_games"> Video Games </a> <a class="dropdown-item" href="./personal.html#podcasts"> Podcasts </a> <a class="dropdown-item" href="./personal.html#music"> Music </a> </div> </li> <!-- Blog --> <li class="nav-item"> <a class="nav-link" href="./blog.html"> Blog </a> </li> <!-- Documentation --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./documentation.html" id="navbardrop" data-toggle="dropdown" > Documentation </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./documentation.html#introduction" > Introduction </a> <a class="dropdown-item" href="./documentation.html#website_hosting" > Website Hosting </a> <a class="dropdown-item" href="./documentation.html#web_design" > Web Design </a> <a class="dropdown-item" href="./documentation.html#aesthetics" > Aesthetics </a> <a class="dropdown-item" href="./documentation.html#inspiration" > Inspiration </a> </div> </li> </ul> </div> <!-- Dark Mode Toggle --> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="darkSwitch" /> <label class="custom-control-label" for="darkSwitch">Dark Mode</label> </div> <script src="./scripts/dark-mode-switch.min.js"></script> </nav> ')
+document.write('<nav class="navbar my-nav navbar-expand-md fixed-top"> <!-- Brand --> <a class="navbar-brand" href="./index.html"> <img src="./assets/branding/logo.png" alt="Icon" width="30px" height="30px" class="d-inline-block align-top" /> <img src="./assets/branding/name.png" alt="Name" height="30px" class="d-inline-block align-center" /> </a> <!-- Toggler/collapsible Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" > <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <!-- About --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./about.html" id="navbardrop" data-toggle="dropdown" > About </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./about.html#bio"> Bio </a> <a class="dropdown-item" href="./about.html#contact_me"> Contact Me </a> </div> </li> <!-- Portfolio --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./portfolio.html" id="navbardrop" data-toggle="dropdown" > Portfolio </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./portfolio.html#resume"> Resume </a> <a class="dropdown-item" href="./portfolio.html#education"> Education </a> <a class="dropdown-item" href="./portfolio.html#professional_experience" > Professional Experience </a> <!-- <a class="dropdown-item" href="./portfolio.html#research"> Research </a> <a class="dropdown-item" href="./portfolio.html#projects"> Projects </a> --> </div> </li> <!-- Personal --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./personal.html" id="navbardrop" data-toggle="dropdown" > Personal </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./personal.html#software"> Software </a> <a class="dropdown-item" href="./personal.html#hardware"> Hardware </a> <a class="dropdown-item" href="./personal.html#video_games"> Video Games </a> <a class="dropdown-item" href="./personal.html#podcasts"> Podcasts </a> <a class="dropdown-item" href="./personal.html#music"> Music </a> </div> </li> <!-- Blog --> <li class="nav-item"> <a class="nav-link" href="./blog.html"> Blog </a> </li> <!-- Documentation --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="./documentation.html" id="navbardrop" data-toggle="dropdown" > Documentation </a> <div class="dropdown-menu"> <a class="dropdown-item" href="./documentation.html#introduction" > Introduction </a> <a class="dropdown-item" href="./documentation.html#website_hosting" > Website Hosting </a> <a class="dropdown-item" href="./documentation.html#web_design" > Web Design </a> <a class="dropdown-item" href="./documentation.html#aesthetics" > Aesthetics </a> <a class="dropdown-item" href="./documentation.html#inspiration" > Inspiration </a> </div> </li> </ul> </div> <!-- Dark Mode Toggle --> <!-- Reference: https://github.com/coliff/dark-mode-switch --> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="darkSwitch" /> <label class="custom-control-label" for="darkSwitch" id="darkSwitchLabel" >Dark Mode</label > </div> <script src="./scripts/dark-mode-switch.min.js"></script> </nav> ')

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
+	darkSwitch.checked = e;
-			? documentElement.setAttribute("color-mode", "dark")
+
-			: documentElement.setAttribute("color-mode", "light");
+	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
+	if (darkSwitch.checked) {
-		? (documentElement.setAttribute("color-mode", "dark"),
+		documentElement.setAttribute("color-mode", "dark");
-		  localStorage.setItem("darkSwitch", "dark"))
+		localStorage.setItem("darkSwitch", "dark");
-		: (documentElement.setAttribute("color-mode", "light"),
+		darkSwitchLabel.innerHTML = "Dark Mode";
-		  localStorage.removeItem("darkSwitch"));
+	} else {
+		documentElement.setAttribute("color-mode", "light");
+		localStorage.removeItem("darkSwitch");
+		darkSwitchLabel.innerHTML = "Light Mode";
+	}
 }
 
-window.addEventListener("load", () => {
+$(document).ready(() => {
 	darkSwitch &&
 		(initTheme(),
 		darkSwitch.addEventListener("change", () => {

src/style/styles.css

@@ -12,11 +12,11 @@
 
 /* Dark Mode */
 :root[color-mode="dark"] {
-	--primary-color: purple;
+	--primary-color: #bd93f9;
-	--secondary-color: #00274c;
+	--secondary-color: #44475a;
-	--tertiary-color: #30c5ff;
+	--tertiary-color: #50fa7b;
-	--background-color: #e8eef2;
+	--background-color: #282a36;
-	--font-color: #000000;
+	--font-color: #f8f8f2;
 }
 
 /***********
@@ -137,3 +137,7 @@ body {
 	margin: auto;
 	display: block;
 }
+
+label {
+	color: var(--primary-color);
+}