5 files changed, 46 insertions, 2 deletions
diff --git a/about.html b/about.html
index 23d14e7..e0154b8 100644
--- a/about.html
+++ b/about.html
@@ -8,6 +8,10 @@
 
 <body>
 
+	<div class="dark-mode-container">
+		<input type="checkbox" id="--dark-theme-check">Dark Mode</input>
+	</div>
+
 	<h1>About Me</h1>
 
 	<p>
diff --git a/app.js b/app.js
index 55c26c7..122cad7 100644
--- a/app.js
+++ b/app.js
@@ -1 +1,26 @@
-console.log('Hello from app.js!');
-\ No newline at end of file
+console.log('Hello from app.js!');
+
+const toggleTheme = function() {
+	document.documentElement.style.setProperty(this.id, Number(this.checked));
+	localStorage.setItem(this.id, Number(this.checked));
+};
+
+const initInput = function(styleVariable=null) {
+	let initValue = localStorage.getItem(styleVariable);
+	if (initValue) {
+		initValue = Number(initValue);
+		document.documentElement.style.setProperty(styleVariable, initValue);
+	} else {
+		initValue = getComputedStyle(document.body).getPropertyValue(styleVariable);
+	};
+
+	const inputObject = document.getElementById(styleVariable);
+	if (inputObject) {
+		inputObject.addEventListener('change', toggleTheme);
+		if (inputObject.type == 'checkbox') {
+			inputObject.checked = initValue
+		};
+	};
+};
+
+initInput('--dark-theme-check');
diff --git a/index.html b/index.html
index 8f0e28b..83361b8 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,9 @@
 </head>
 
 <body>
-
+	<div class="dark-mode-container">
+		<input type="checkbox" id="--dark-theme-check">Dark Mode</input>
+	</div>
 	<h1>Christian Hodgden</h1>
 	<p>
 		Welcome to my website! It is currently under development. 
diff --git a/projects_blog/NNetwork.html b/projects_blog/NNetwork.html
index b26aeb6..c44beba 100644
--- a/projects_blog/NNetwork.html
+++ b/projects_blog/NNetwork.html
@@ -6,6 +6,10 @@
 </head>
 <body>
 
+	<div class="dark-mode-container">
+		<input type="checkbox" id="--dark-theme-check">Dark Mode</input>
+	</div>
+
 	<h1>NNetwork</h1>
 	<p class="header-sub-text">A simple neural network in R as an R6 class object</p>
 	<nav class="nav-footer">
diff --git a/style.css b/style.css
index 52c1bbe..87104fd 100644
--- a/style.css
+++ b/style.css
@@ -90,4 +90,13 @@ a:visited {
 
 a:hover {
 	color: hsl(calc(var(--contrast-hue) - 150), 100%, var(--contrast-lightness))
+}
+
+.dark-mode-container {
+	float: right;
+}
+
+input[type='checkbox'] {
+	border-color: var(--foreground-accent-color);
+	background-color: var(--background-accent-color);
 }
 \ No newline at end of file