diff --git a/themes/theme/static/darkmode-js.min.js b/themes/theme/static/darkmode-js.min.js
deleted file mode 100644
index 0b505c0..0000000
--- a/themes/theme/static/darkmode-js.min.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("darkmode-js",[],t):"object"==typeof exports?exports["darkmode-js"]=t():e["darkmode-js"]=t()}("undefined"!=typeof self?self:this,(function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){var o=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(e,n):{};o.get||o.set?Object.defineProperty(t,n,o):t[n]=e[n]}return t.default=e,t}(n(1));var r=o.default;t.default=r,o.IS_BROWSER&&function(e){e.Darkmode=o.default}(window),e.exports=t.default},function(e,t,n){"use strict";function o(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.IS_BROWSER=void 0;var r="undefined"!=typeof window;t.IS_BROWSER=r;var a=function(){function e(t){if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),r){t=Object.assign({},{bottom:"32px",right:"32px",left:"unset",time:"0.3s",mixColor:"#fff",backgroundColor:"#fff",buttonColorDark:"#100f2c",buttonColorLight:"#fff",label:"",saveInCookies:!0,autoMatchOsTheme:!0},t);var n="\n      .darkmode-layer {\n        position: fixed;\n        pointer-events: none;\n        background: ".concat(t.mixColor,";\n        transition: all ").concat(t.time," ease;\n        mix-blend-mode: difference;\n      }\n\n      .darkmode-layer--button {\n        width: 2.9rem;\n        height: 2.9rem;\n        border-radius: 50%;\n        right: ").concat(t.right,";\n        bottom: ").concat(t.bottom,";\n        left: ").concat(t.left,";\n      }\n\n      .darkmode-layer--simple {\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        transform: scale(1) !important;\n      }\n\n      .darkmode-layer--expanded {\n        transform: scale(100);\n        border-radius: 0;\n      }\n\n      .darkmode-layer--no-transition {\n        transition: none;\n      }\n\n      .darkmode-toggle {\n        background: ").concat(t.buttonColorDark,";\n        width: 3rem;\n        height: 3rem;\n        position: fixed;\n        border-radius: 50%;\n        border:none;\n        right: ").concat(t.right,";\n        bottom: ").concat(t.bottom,";\n        left: ").concat(t.left,";\n        cursor: pointer;\n        transition: all 0.5s ease;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      .darkmode-toggle--white {\n        background: ").concat(t.buttonColorLight,";\n      }\n\n      .darkmode-toggle--inactive {\n        display: none;\n      }\n\n      .darkmode-background {\n        background: ").concat(t.backgroundColor,";\n        position: fixed;\n        pointer-events: none;\n        z-index: -10;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n      }\n\n      img, .darkmode-ignore {\n        isolation: isolate;\n        display: inline-block;\n      }\n\n      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n        .darkmode-toggle {display: none !important}\n      }\n\n      @supports (-ms-ime-align:auto), (-ms-accelerator:true) {\n        .darkmode-toggle {display: none !important}\n      }\n    "),o=document.createElement("div"),a=document.createElement("button"),d=document.createElement("div");a.innerHTML=t.label,a.classList.add("darkmode-toggle--inactive"),o.classList.add("darkmode-layer"),d.classList.add("darkmode-background");var i="true"===window.localStorage.getItem("darkmode"),s=t.autoMatchOsTheme&&window.matchMedia("(prefers-color-scheme: dark)").matches,l=null===window.localStorage.getItem("darkmode");(!0===i&&t.saveInCookies||l&&s)&&(o.classList.add("darkmode-layer--expanded","darkmode-layer--simple","darkmode-layer--no-transition"),a.classList.add("darkmode-toggle--white"),document.body.classList.add("darkmode--activated")),document.body.insertBefore(a,document.body.firstChild),document.body.insertBefore(o,document.body.firstChild),document.body.insertBefore(d,document.body.firstChild),this.addStyle(n),this.button=a,this.layer=o,this.saveInCookies=t.saveInCookies,this.time=t.time}}var t,n,a;return t=e,(n=[{key:"addStyle",value:function(e){var t=document.createElement("link");t.setAttribute("rel","stylesheet"),t.setAttribute("type","text/css"),t.setAttribute("href","data:text/css;charset=UTF-8,"+encodeURIComponent(e)),document.head.appendChild(t)}},{key:"showWidget",value:function(){var e=this;if(r){var t=this.button,n=this.layer,o=1e3*parseFloat(this.time);t.classList.add("darkmode-toggle"),t.classList.remove("darkmode-toggle--inactive"),n.classList.add("darkmode-layer--button"),t.addEventListener("click",(function(){var r=e.isActivated();r?(n.classList.remove("darkmode-layer--simple"),t.setAttribute("disabled",!0),setTimeout((function(){n.classList.remove("darkmode-layer--no-transition"),n.classList.remove("darkmode-layer--expanded"),t.removeAttribute("disabled")}),1)):(n.classList.add("darkmode-layer--expanded"),t.setAttribute("disabled",!0),setTimeout((function(){n.classList.add("darkmode-layer--no-transition"),n.classList.add("darkmode-layer--simple"),t.removeAttribute("disabled")}),o)),t.classList.toggle("darkmode-toggle--white"),document.body.classList.toggle("darkmode--activated"),window.localStorage.setItem("darkmode",!r)}))}}},{key:"toggle",value:function(){if(r){var e=this.layer,t=this.isActivated();e.classList.toggle("darkmode-layer--simple"),document.body.classList.toggle("darkmode--activated"),window.localStorage.setItem("darkmode",!t)}}},{key:"isActivated",value:function(){return r?document.body.classList.contains("darkmode--activated"):null}}])&&o(t.prototype,n),a&&o(t,a),e}();t.default=a}])}));
\ No newline at end of file
diff --git a/themes/theme/static/enable-darkmode.js b/themes/theme/static/enable-darkmode.js
deleted file mode 100644
index 0757490..0000000
--- a/themes/theme/static/enable-darkmode.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const options = {
-	bottom: '16px',
-	right: '16px',
-	buttonColorDark: '#666',
-	buttonColorLight: '#aaa',
-	label: '🌙',
-};
-new Darkmode(options).showWidget();
diff --git a/themes/theme/templates/base.html b/themes/theme/templates/base.html
index 0724ec2..692e40d 100644
--- a/themes/theme/templates/base.html
+++ b/themes/theme/templates/base.html
@@ -1,3 +1,12 @@
+{% if PROD %}
+<?php
+	$themeClass = '';
+	if (!empty($_COOKIE['theme'])) {
+		$themeClass = $_COOKIE['theme'];
+	}
+?>
+{% endif %}
+
 <!DOCTYPE html>
 <html lang="en">
 	<head>
@@ -24,12 +33,22 @@
 		{% include 'fonts.css' %}
 		</style>
 
-		<script defer src="/theme/darkmode-js.min.js"></script>
-		<script defer src="/theme/enable-darkmode.js"></script>
 		<script defer src="/theme/instant-page.js"></script>
+
+		<noscript>
+			<style type="text/css">
+				.theme-select {
+					display: none !important;
+				}
+			</style>
+		</noscript>
 	</head>
 
+{% if PROD %}
+	<body class="<?php echo $themeClass; ?>">
+{% else %}
 	<body>
+{% endif %}
 		<div class="container">
 			<div class="sidebar">
 				<img src="/theme/me.jpg" class="me" alt="A picture of me smiling" />
@@ -42,6 +61,9 @@
 						<a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram logo" src="/theme/telegram.svg" /></a>
 						<a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github logo" src="/theme/github.svg" /></a>
 					</p>
+					<p class='theme-select'>
+						<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
+					</p>
 				</div>
 			</div>
 			<div class="content">
@@ -54,12 +76,32 @@
 							<a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram logo" src="/theme/telegram.svg" /></a>
 							<a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github logo" src="/theme/github.svg" /></a>
 						</p>
+						<p class='theme-select'>
+							<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
+						</p>
 					</div>
 				</div>
 				{% block content %}
 				{% endblock %}
 			</div>
 		</div>
+
+	<script>
+		function setTheme(theme) {
+			console.log('Setting theme to', theme);
+
+			if (theme == 'dark') {
+				document.body.classList.add('dark');
+				document.body.classList.remove('light');
+			} else if (theme == 'light') {
+				document.body.classList.add('light');
+				document.body.classList.remove('dark');
+			}
+
+			document.cookie = 'theme=' + theme + '; Max-Age=31536000; Path=/; SameSite=Lax';
+		}
+	</script>
+
 	</body>
 </html>
 		
diff --git a/themes/theme/templates/style.css b/themes/theme/templates/style.css
index dc39b2a..191e96d 100644
--- a/themes/theme/templates/style.css
+++ b/themes/theme/templates/style.css
@@ -5,20 +5,15 @@ html {
 body {
 	text-rendering: optimizeLegibility;
 	font: 1.2rem/1.0 Lato,sans-serif;
-	background-color: rgb(245, 245, 245);
-	background-color: white;
 }
 
 a {
-	color: #000000;
 	text-decoration: none;
 	outline: none;
-	border-bottom: 1px solid #000;
 }
 
 pre {
 	font-size: 1rem;
-	background-color: #eee;
 	padding: 1rem;
 }
 
@@ -27,6 +22,12 @@ pre {
 	margin: 2rem auto 0 auto;
 }
 
+.theme-select {
+	font-size: 1rem;
+	margin-bottom: 0;
+	cursor: pointer;
+}
+
 .sidebar {
 	margin-top: 2px;
 	float: left;
@@ -63,7 +64,7 @@ pre {
 
 .topbar .me {
 	float: left;
-	height: 6rem;
+	height: 6.5rem;
 	width: auto;
 }
 
@@ -74,7 +75,6 @@ pre {
 }
 
 .topbar .contact-icons {
-	margin-top: 1.5rem;
 	margin-left: 0.25rem;
 	margin-bottom: 0;
 }
@@ -89,9 +89,12 @@ pre {
 	margin-right: 1rem;
 }
 
+.topbar .theme-select {
+	margin-top: 0.5rem;
+}
+
 .toc {
 	float: right;
-	background-color: #eee;
 	padding: 0.75rem;
 	padding-top: 0;
 	margin-left: 0.75rem;
@@ -107,7 +110,6 @@ pre {
 }
 
 .content p.metadata {
-	color: #555;
 	font: 1rem/1.0 Apparatus SIL,serif;
 	font-style: italic;
 }
@@ -164,24 +166,118 @@ pre {
 	}
 }
 
-.darkmode-toggle {
-	z-index: 500;
-	background: black !important;
+
+
+body {
+	background-color: #fff;
+	color: #000;
 }
 
-.darkmode-toggle--white {
-	z-index: 500;
-	background: grey !important;
+a {
+	color: #000;
+	border-bottom: 1px solid #000;
 }
 
-.darkmode--activated .content img {
+pre {
+	background-color: #eee;
+}
+
+.toc {
+	background-color: #eee;
+}
+
+.content p.metadata {
+	color: #555;
+}
+
+body.dark {
+	background-color: #000;
+	color: #fff;
+}
+
+body.dark a {
+	color: #fff;
+	border-bottom: 1px solid #fff;
+}
+
+body.dark pre {
+	background-color: #222;
+}
+
+body.dark .toc {
+	background-color: #222;
+}
+
+body.dark .content p.metadata {
+	color: #aaa;
+}
+
+body.dark .content img {
 	filter: brightness(75%);
 }
 
-.darkmode--activated video {
-	mix-blend-mode: difference;
-}
-
-.darkmode--activated .contact-icons img {
+body.dark .contact-icons img {
 	filter: invert(1);
 }
+
+@media (prefers-color-scheme: dark) {
+	body.light {
+		background-color: #fff;
+		color: #000;
+	}
+
+	body.light a {
+		color: #000;
+		border-bottom: 1px solid #000;
+	}
+
+	body.light pre {
+		background-color: #eee;
+	}
+
+	body.light .toc {
+		background-color: #eee;
+	}
+
+	body.light .content p.metadata {
+		color: #555;
+	}
+
+	body.light .contact-icons img {
+		filter: none;
+	}
+
+	body.light .content img {
+		filter: none;
+	}
+
+	body {
+		background-color: #000;
+		color: #fff;
+	}
+
+	a {
+		color: #fff;
+		border-bottom: 1px solid #fff;
+	}
+
+	pre {
+		background-color: #222;
+	}
+
+	.toc {
+		background-color: #222;
+	}
+
+	.content p.metadata {
+		color: #aaa;
+	}
+
+	.content img {
+		filter: brightness(75%);
+	}
+
+	.contact-icons img {
+		filter: invert(1);
+	}
+}