diff --git a/src/about.html b/src/about.html
index 429dc3f..9768609 100644
--- a/src/about.html
+++ b/src/about.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" color-mode="light">
 	<head>
 		<script
 			language="javascript"
diff --git a/src/blog.html b/src/blog.html
index 80d3b92..8247aae 100644
--- a/src/blog.html
+++ b/src/blog.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" color-mode="light">
 	<head>
 		<script
 			language="javascript"
diff --git a/src/blog_docker.html b/src/blog_docker.html
index dee8890..8f6f1b3 100644
--- a/src/blog_docker.html
+++ b/src/blog_docker.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" color-mode="light">
 	<head>
 		<script
 			language="javascript"
diff --git a/src/common/navbar.html b/src/common/navbar.html
index 1dfc228..9d6a98f 100644
--- a/src/common/navbar.html
+++ b/src/common/navbar.html
@@ -16,7 +16,7 @@
 		/>
 	</a>
 
-	<!-- Toggler/collapsibe Button -->
+	<!-- Toggler/collapsible Button -->
 	<button
 		class="navbar-toggler"
 		type="button"
@@ -158,4 +158,11 @@
 			</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>
diff --git a/src/common/navbar.txt b/src/common/navbar.txt
index 85aa165..88ad5df 100644
--- a/src/common/navbar.txt
+++ b/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/collapsibe 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> </nav> ')
\ No newline at end of file
+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> ')
\ No newline at end of file
diff --git a/src/documentation.html b/src/documentation.html
index 4d0525d..971e6d5 100644
--- a/src/documentation.html
+++ b/src/documentation.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" color-mode="light">
 	<head>
 		<script
 			language="javascript"
diff --git a/src/index.html b/src/index.html
index 7f5f5b4..ddf590a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" color-mode="light">
 	<head>
 		<script
 			language="javascript"
diff --git a/src/personal.html b/src/personal.html
index 3b66ba0..3d3ec5c 100644
--- a/src/personal.html
+++ b/src/personal.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" color-mode="light">
 	<head>
 		<script
 			language="javascript"
diff --git a/src/portfolio.html b/src/portfolio.html
index fdf4da3..a7ee30e 100644
--- a/src/portfolio.html
+++ b/src/portfolio.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" color-mode="light">
 	<head>
 		<script
 			language="javascript"
diff --git a/src/scripts/dark-mode-switch.min.js b/src/scripts/dark-mode-switch.min.js
new file mode 100644
index 0000000..eb92047
--- /dev/null
+++ b/src/scripts/dark-mode-switch.min.js
@@ -0,0 +1,28 @@
+const darkSwitch = document.getElementById("darkSwitch");
+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");
+}
+
+function resetTheme() {
+	darkSwitch.checked
+		? (documentElement.setAttribute("color-mode", "dark"),
+		  localStorage.setItem("darkSwitch", "dark"))
+		: (documentElement.setAttribute("color-mode", "light"),
+		  localStorage.removeItem("darkSwitch"));
+}
+
+window.addEventListener("load", () => {
+	darkSwitch &&
+		(initTheme(),
+		darkSwitch.addEventListener("change", () => {
+			resetTheme();
+		}));
+});
diff --git a/src/style/styles.css b/src/style/styles.css
index 9e1465d..a834b50 100644
--- a/src/style/styles.css
+++ b/src/style/styles.css
@@ -1,8 +1,29 @@
+/****************
+ * Color Themes *
+ ****************/
+/* Light Mode */
+:root[color-mode="light"] {
+	--primary-color: #ffcb05;
+	--secondary-color: #00274c;
+	--tertiary-color: #30c5ff;
+	--background-color: #e8eef2;
+	--font-color: #000000;
+}
+
+/* Dark Mode */
+:root[color-mode="dark"] {
+	--primary-color: purple;
+	--secondary-color: #00274c;
+	--tertiary-color: #30c5ff;
+	--background-color: #e8eef2;
+	--font-color: #000000;
+}
+
 /***********
  * General *
  ***********/
 body {
-	background-color: #e8eef2;
+	background-color: var(--background-color);
 	padding-top: 65px;
 	font-family: Arial, Verdana, Tahoma, sans-serif;
 }
@@ -11,16 +32,16 @@ body {
  * Main Content *
  ****************/
 .my-nav {
-	background: #00274c;
+	background: var(--secondary-color);
 	font-size: 18px;
 }
 
 .my-nav .nav-link {
-	color: #ffcb05;
+	color: var(--primary-color);
 }
 
 .my-nav .nav-link:hover {
-	color: #30c5ff;
+	color: var(--tertiary-color);
 }
 
 .my-nav .navbar-toggler-icon {
@@ -28,18 +49,18 @@ body {
 }
 
 .my-nav .navbar-toggler {
-	background: #ffcb05; /* pick your color */
+	background: var(--primary-color);
 }
 
 .container-fluid {
-	color: #000000;
+	color: var(--font-color);
 	font-size: 18px;
 }
 
 .container-fluid h1 {
 	padding: 10px 10px;
-	background: #00274c;
-	color: #ffcb05;
+	background: var(--secondary-color);
+	color: var(--primary-color);
 }
 
 .row {
