diff --git a/templates/base.html b/templates/base.html
index 507f14db5c337a0df0ef60e419e4067e4cb7c616..c8d5d76179b1bdc7c0815bb6783ebffb0c36a138 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -12,34 +12,50 @@ 		<link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL69vf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv76+/8LBwQkAAAAAAAAAAAAAAAC+vb3/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL+9vf/Bv78JAAAAAAAAAAAAAAAAu7q6/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC7ubr/vr29CAAAAAAAAAAAy8nJAZ6foP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnqGj/6GipAoAAAAAHLjU/xcXHf/BwsL/I8XY/yPK3v8XGiD/IbjL/yPF2f8XGiD/Fxkf/yLF2f8gnK3/Fxog/62ztv8fwNf/FRcd/x271v8mz93/GRsi/xkXHf8p097/GiIp/xobIv8p0t3/KdPe/xocIv8fYmr/KNPe/xoZH/8aHCL/J87c/xy81/8VFxz/IsPZ/8zS0/8XGiD/Ir/R/yPH2/8XGiD/Fxkf/yPH2/8dd4T/GBog/yPJ3f8jyNr/uru9/xcUGv8cudb/EhITDKi5vRKlvMP/RUpOERwcHRAdOj4QHTk8EBwdHRAdNTgQHTo/EBwcHRAcHB0QSGduEKW4vf+koqQfHzg+EBqz0ewSFRv7EyMr/xq51vsTERb7ExUb+xq41fsau9j7ExUb+xiPp/sZudb7ExUb+xMVG/sZuNX/GKvI/BIUGfMdvdn/IrfL/xcaIP8n1eb/J9Dh/xkcIf8ZGR7/J8/f/xxCSv8ZGyH/J9Dg/ybQ4P8ZHCL/FSQs/yPK3/8UExj/GE1b/ybS5P8ZGB7/Ghwj/ynW5P8p2Ob/Ghwi/yWrtv8p1eH/Ghwi/xocIv8p1uT/J8XT/xkcIv8m1un/Hb7d/xUYH/8hzOr/HtHu/xcaIf8XGB//I8vi/xgxOv8XGSD/I8rg/yPK4P8XGiD/GUFL/yPP6f8SERj/Fhkh/x3A4f8AAAAAJ2f9/ydr//8mZPH/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlYu38J2v//ydo/f8AAAAAAAAAAAd8/fkFqf//Iob8sAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMY39awWr//8FfP3/AAAAAAAAAAAFm/7/SfD//wR+/f8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOB/f9B7v//BaX+/wAAAAAAAAAAQ878SAyZ/v9n1v4KAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADu9v8DDJb+/z3N/XgAAAAA3/sAAN/7AADf+wAA3/sAAAAAAAAAAAAAAAAAAN/7AAAAAAAAAAAAAAAAAAAAAAAAj/EAAI/5AACP8QAA3/sAAA==" rel="icon" type="image/x-icon" />
 
 		<style>
 			:root {
+				--base-background: white;
+				--base-color: black;
+				--link-color: blue;
 				--first-child-width: 150px;
 				--primary-color: gainsboro;
 				--secondary-color: black;
 				--tertiary-color: #eee;
 				--code-color: #f9f9f9;
 				--border-width: 1px;
+				--header-color: black;
 				--header-border-width: 2px;
 			}
 
+			@media (prefers-color-scheme: dark) {
+				:root {
+					--base-background: black;
+					--base-color: white;
+					--link-color: white;
+					--primary-color: white;
+					--secondary-color: white;
+					--code-color: black;
+					--header-color: black;
+				}
+			}
+
 			* { box-sizing: border-box; }
 
 			html { scroll-padding-top: 1.5em; }
-			body { font-family: sans-serif; padding: 0 1em; line-height: 160%; display: flex; flex-direction: column; gap: 4em; }
+			body { font-family: sans-serif; padding: 0 1em; line-height: 160%; display: flex; flex-direction: column; gap: 4em; background: var(--base-background); color: var(--base-color); }
 			table { width: 100%; border: var(--border-width) solid var(--primary-color); border-collapse: collapse; }
-			table thead { background: var(--primary-color); border: var(--border-width) solid var(--secondary-color); }
+			table thead { background: var(--primary-color); border: var(--border-width) solid var(--secondary-color); color: var(--header-color); }
 			table td, table th { text-align: left; padding: 0.3em 0.5em; }
 			table tbody tr { border-bottom: var(--border-width) solid var(--primary-color); vertical-align: middle; }
 			table tr td:first-child { width: var(--first-child-width); }
 			table td.tags { display: flex; gap: 0.5em; justify-content: flex-end; align-items: center; }
 			table td.tags mark { padding: 0 0.4em; background: var(--primary-color); font-size: small; }
 
-			a { color: blue; text-decoration: none; }
+			a { color: var(--link-color); text-decoration: none; }
 			a:hover { text-decoration: underline; }
 
 			header { border-bottom: var(--header-border-width) solid var(--secondary-color); padding: 0.5em 0; display: flex; }
 			header nav:first-child { display: flex; width: var(--first-child-width); }
 			header nav:last-child { display: flex; gap: 1.5em; }
-			header nav:last-child a { color: black; }
+			header nav:last-child a { color: var(--base-color); }
 
 			footer { color: gray; }
 			footer a { color: gray; text-decoration: underline; }