diff --git a/site/css/auto.scss b/site/css/auto.scss
index d284bcb..a792788 100644
--- a/site/css/auto.scss
+++ b/site/css/auto.scss
@@ -2,4 +2,4 @@
 
 @media (prefers-color-scheme: dark) {
 	<%- include("dark.scss"); %>
-}
\ No newline at end of file
+}
diff --git a/site/css/dark.scss b/site/css/dark.scss
index 83eaf2e..cf98b1b 100644
--- a/site/css/dark.scss
+++ b/site/css/dark.scss
@@ -1,23 +1,48 @@
 :root {
-	--accent-color: #f9c72f;
-	--content-background-color: #111;
-	--shadow-color: #151515;
-	--ui-background-color: #111;
-	--ui-text-color: white;
-	--secondary-ui-text-color: #999;
-	--content-text-color: #ddd;
+	--accent-color: var(--dark-accent-color);
+	--content-background-color: var(--dark-content-background-color);
+	--shadow-color: var(--dark-shadow-color);
+	--ui-background-color: var(--dark-ui-background-color);
+	--ui-text-color: var(--dark-ui-text-color);
+	--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
+	--content-text-color: var(--dark-content-text-color);
+
+	// Syntax highdarking
+	--atom-base: var(--dark-atom-base);
+	--atom-mono-1: var(--dark-atom-mono-1);
+	--atom-mono-2: var(--dark-atom-mono-2);
+	--atom-mono-3: var(--dark-atom-mono-3);
+	--atom-hue-1: var(--dark-atom-hue-1);
+	--atom-hue-2: var(--dark-atom-hue-2);
+	--atom-hue-3: var(--dark-atom-hue-3);
+	--atom-hue-4: var(--dark-atom-hue-4);
+	--atom-hue-5: var(--dark-atom-hue-5);
+	--atom-hue-5-2: var(--dark-atom-hue-5-2);
+	--atom-hue-6: var(--dark-atom-hue-6);
+	--atom-hue-6-2: var(--dark-atom-hue-6-2);
+}
+
+.theme-inverted {
+	--accent-color: var(--light-accent-color);
+	--content-background-color: var(--light-content-background-color);
+	--shadow-color: var(--light-shadow-color);
+	--ui-background-color: var(--light-ui-background-color);
+	--ui-text-color: var(--light-ui-text-color);
+	--secondary-ui-text-color: var(--light-secondary-ui-text-color);
+	--content-text-color: var(--light-content-text-color);
 
 	// Syntax highlighting
-	--atom-base: #282c34;
-	--atom-mono-1: #abb2bf;
-	--atom-mono-2: #818896;
-	--atom-mono-3: #5c6370;
-	--atom-hue-1: #56b6c2;
-	--atom-hue-2: #61aeee;
-	--atom-hue-3: #c678dd;
-	--atom-hue-4: #98c379;
-	--atom-hue-5: #e06c75;
-	--atom-hue-5-2: #be5046;
-	--atom-hue-6: #d19a66;
-	--atom-hue-6-2: #e6c07b;
-}
\ No newline at end of file
+	--atom-base: var(--light-atom-base);
+	--atom-mono-1: var(--light-atom-mono-1);
+	--atom-mono-2: var(--light-atom-mono-2);
+	--atom-mono-3: var(--light-atom-mono-3);
+	--atom-hue-1: var(--light-atom-hue-1);
+	--atom-hue-2: var(--light-atom-hue-2);
+	--atom-hue-3: var(--light-atom-hue-3);
+	--atom-hue-4: var(--light-atom-hue-4);
+	--atom-hue-5: var(--light-atom-hue-5);
+	--atom-hue-5-2: var(--light-atom-hue-5-2);
+	--atom-hue-6: var(--light-atom-hue-6);
+	--atom-hue-6-2: var(--light-atom-hue-6-2);
+}
+
diff --git a/site/css/light.scss b/site/css/light.scss
index 4368a3e..7b4c667 100644
--- a/site/css/light.scss
+++ b/site/css/light.scss
@@ -1,23 +1,47 @@
 :root {
-	--accent-color: #0638d0;
-	--content-background-color: white;
-	--shadow-color: #f7f7f7;
-	--ui-background-color: white;
-	--ui-text-color: black;
-	--secondary-ui-text-color: #666;
-	--content-text-color: #222;
+	--accent-color: var(--light-accent-color);
+	--content-background-color: var(--light-content-background-color);
+	--shadow-color: var(--light-shadow-color);
+	--ui-background-color: var(--light-ui-background-color);
+	--ui-text-color: var(--light-ui-text-color);
+	--secondary-ui-text-color: var(--light-secondary-ui-text-color);
+	--content-text-color: var(--light-content-text-color);
 
 	// Syntax highlighting
-	--atom-base: #fafafa;
-	--atom-mono-1: #383a42;
-	--atom-mono-2: #686b77;
-	--atom-mono-3: #a0a1a7;
-	--atom-hue-1: #0184bb;
-	--atom-hue-2: #4078f2;
-	--atom-hue-3: #a626a4;
-	--atom-hue-4: #50a14f;
-	--atom-hue-5: #e45649;
-	--atom-hue-5-2: #c91243;
-	--atom-hue-6: #986801;
-	--atom-hue-6-2: #c18401;
-}
\ No newline at end of file
+	--atom-base: var(--light-atom-base);
+	--atom-mono-1: var(--light-atom-mono-1);
+	--atom-mono-2: var(--light-atom-mono-2);
+	--atom-mono-3: var(--light-atom-mono-3);
+	--atom-hue-1: var(--light-atom-hue-1);
+	--atom-hue-2: var(--light-atom-hue-2);
+	--atom-hue-3: var(--light-atom-hue-3);
+	--atom-hue-4: var(--light-atom-hue-4);
+	--atom-hue-5: var(--light-atom-hue-5);
+	--atom-hue-5-2: var(--light-atom-hue-5-2);
+	--atom-hue-6: var(--light-atom-hue-6);
+	--atom-hue-6-2: var(--light-atom-hue-6-2);
+}
+
+.theme-inverted {
+	--accent-color: var(--dark-accent-color);
+	--content-background-color: var(--dark-content-background-color);
+	--shadow-color: var(--dark-shadow-color);
+	--ui-background-color: var(--dark-ui-background-color);
+	--ui-text-color: var(--dark-ui-text-color);
+	--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
+	--content-text-color: var(--dark-content-text-color);
+
+	// Syntax highdarking
+	--atom-base: var(--dark-atom-base);
+	--atom-mono-1: var(--dark-atom-mono-1);
+	--atom-mono-2: var(--dark-atom-mono-2);
+	--atom-mono-3: var(--dark-atom-mono-3);
+	--atom-hue-1: var(--dark-atom-hue-1);
+	--atom-hue-2: var(--dark-atom-hue-2);
+	--atom-hue-3: var(--dark-atom-hue-3);
+	--atom-hue-4: var(--dark-atom-hue-4);
+	--atom-hue-5: var(--dark-atom-hue-5);
+	--atom-hue-5-2: var(--dark-atom-hue-5-2);
+	--atom-hue-6: var(--dark-atom-hue-6);
+	--atom-hue-6-2: var(--dark-atom-hue-6-2);
+}
diff --git a/site/css/main.scss b/site/css/main.scss
index 2116de7..70e741c 100644
--- a/site/css/main.scss
+++ b/site/css/main.scss
@@ -1,6 +1,95 @@
 <%- include("normalize.css") %>
 <%- include("syntax-highlighting.css") %>
 
+:root {
+	--light-accent-color: #0638d0;
+	--dark-accent-color: #f9c72f;
+	--light-content-background-color: white;
+	--dark-content-background-color: #111;
+	--light-shadow-color: #f7f7f7;
+	--dark-shadow-color: #151515;
+	--light-ui-background-color: white;
+	--dark-ui-background-color: #111;
+	--light-ui-text-color: black;
+	--dark-ui-text-color: white;
+	--light-secondary-ui-text-color: #666;
+	--dark-secondary-ui-text-color: #999;
+	--light-content-text-color: #222;
+	--dark-content-text-color: #ddd;
+
+	// Syntax highlighting
+	--light-atom-base: #fafafa;
+	--dark-atom-base: #282c34;
+	--light-atom-mono-1: #383a42;
+	--dark-atom-mono-1: #abb2bf;
+	--light-atom-mono-2: #686b77;
+	--dark-atom-mono-2: #818896;
+	--light-atom-mono-3: #a0a1a7;
+	--dark-atom-mono-3: #5c6370;
+	--light-atom-hue-1: #0184bb;
+	--dark-atom-hue-1: #56b6c2;
+	--light-atom-hue-2: #4078f2;
+	--dark-atom-hue-2: #61aeee;
+	--light-atom-hue-3: #a626a4;
+	--dark-atom-hue-3: #c678dd;
+	--light-atom-hue-4: #50a14f;
+	--dark-atom-hue-4: #98c379;
+	--light-atom-hue-5: #e45649;
+	--dark-atom-hue-5: #e06c75;
+	--light-atom-hue-5-2: #c91243;
+	--dark-atom-hue-5-2: #be5046;
+	--light-atom-hue-6: #986801;
+	--dark-atom-hue-6: #d19a66;
+	--light-atom-hue-6-2: #c18401;
+	--dark-atom-hue-6-2: #e6c07b;
+}
+.theme-light {
+	--accent-color: var(--light-accent-color);
+	--content-background-color: var(--light-content-background-color);
+	--shadow-color: var(--light-shadow-color);
+	--ui-background-color: var(--light-ui-background-color);
+	--ui-text-color: var(--light-ui-text-color);
+	--secondary-ui-text-color: var(--light-secondary-ui-text-color);
+	--content-text-color: var(--light-content-text-color);
+
+	// Syntax highlighting
+	--atom-base: var(--light-atom-base);
+	--atom-mono-1: var(--light-atom-mono-1);
+	--atom-mono-2: var(--light-atom-mono-2);
+	--atom-mono-3: var(--light-atom-mono-3);
+	--atom-hue-1: var(--light-atom-hue-1);
+	--atom-hue-2: var(--light-atom-hue-2);
+	--atom-hue-3: var(--light-atom-hue-3);
+	--atom-hue-4: var(--light-atom-hue-4);
+	--atom-hue-5: var(--light-atom-hue-5);
+	--atom-hue-5-2: var(--light-atom-hue-5-2);
+	--atom-hue-6: var(--light-atom-hue-6);
+	--atom-hue-6-2: var(--light-atom-hue-6-2);
+}
+.theme-dark {
+	--accent-color: var(--dark-accent-color);
+	--content-background-color: var(--dark-content-background-color);
+	--shadow-color: var(--dark-shadow-color);
+	--ui-background-color: var(--dark-ui-background-color);
+	--ui-text-color: var(--dark-ui-text-color);
+	--secondary-ui-text-color: var(--dark-secondary-ui-text-color);
+	--content-text-color: var(--dark-content-text-color);
+
+	// Syntax highdarking
+	--atom-base: var(--dark-atom-base);
+	--atom-mono-1: var(--dark-atom-mono-1);
+	--atom-mono-2: var(--dark-atom-mono-2);
+	--atom-mono-3: var(--dark-atom-mono-3);
+	--atom-hue-1: var(--dark-atom-hue-1);
+	--atom-hue-2: var(--dark-atom-hue-2);
+	--atom-hue-3: var(--dark-atom-hue-3);
+	--atom-hue-4: var(--dark-atom-hue-4);
+	--atom-hue-5: var(--dark-atom-hue-5);
+	--atom-hue-5-2: var(--dark-atom-hue-5-2);
+	--atom-hue-6: var(--dark-atom-hue-6);
+	--atom-hue-6-2: var(--dark-atom-hue-6-2);
+}
+
 // Fonts
 $sansSerif: Avenir, Lucida Grande, Arial, sans-serif;
 $serif: Charter, Georgia, serif;
@@ -154,6 +243,11 @@ article {
 			color: var(--secondary-ui-text-color);
 		}
 	}
+
+	.theme-dark, .theme-light, .theme-inverted {
+		color: var(--content-text-color);
+		background-color: var(--content-background-color);
+	}
 }
 
 #comments-container {
diff --git a/site/layouts/default.html.ejs b/site/layouts/default.html.ejs
index adc494a..fdfe8ff 100644
--- a/site/layouts/default.html.ejs
+++ b/site/layouts/default.html.ejs
@@ -115,4 +115,4 @@
 	</footer>
 
 </body>
-</html>
\ No newline at end of file
+</html>