Add auto theme selection in style.

static/style.css

@@ -1,17 +1,8 @@
 /* General */
 
 :root {
-	--accent: aqua;
+	--nsfw: #ff5c5d;
-	--green: #5cff85;
-	--nsfw: #FF5C5D;
 	--admin: #ea0027;
-	--text: white;
-	--foreground: #222;
-	--background: #0F0F0F;
-	--outside: #1F1F1F;
-	--post: #161616;
-	--highlighted: #333;
-	--shadow: 0 1px 3px rgba(0,0,0,0.5);
 }
 
 ::selection {
@@ -136,18 +127,81 @@ aside {
 	opacity: 0.5;
 }
 
-/* Light Theme */
+/* Color themes */
+
+:root {
+	/* Light theme */
+	--accent-light: #009a9a;
+	--green-light: #00a229;
+	--text-light: black;
+	--foreground-light: #f5f5f5;
+	--background-light: #ddd;
+	--outside-light: #ececec;
+	--post-light: #eee;
+	--highlighted-light: white;
+	--shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+	/* Dark theme */
+	--accent-dark: aqua;
+	--green-dark: #5cff85;
+	--text-dark: white;
+	--foreground-dark: #222;
+	--background-dark: #0f0f0f;
+	--outside-dark: #1f1f1f;
+	--post-dark: #161616;
+	--highlighted-dark: #333;
+	--shadow-dark: 0 1px 3px rgba(0, 0, 0, 0.5);
+
+	/* Fallback to dark (default) */
+	--accent: var(--accent-dark);
+	--green: var(--green-dark);
+	--text: var(--text-dark);
+	--foreground: var(--foreground-dark);
+	--background: var(--background-dark);
+	--outside: var(--outside-dark);
+	--post: var(--post-dark);
+	--highlighted: var(--highlighted-dark);
+	--shadow: var(--shadow-dark);
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--accent: var(--accent-light);
+		--green: var(--green-light);
+		--text: var(--text-light);
+		--foreground: var(--foreground-light);
+		--background: var(--background-light);
+		--outside: var(--outside-light);
+		--post: var(--post-light);
+		--highlighted: var(--highlighted-light);
+		--shadow: var(--shadow-light);
+	}
+}
+
+/* Override themes */
 
 .light {
-	--accent: #009a9a;
+	--accent: var(--accent-light);
-	--green: #00a229;
+	--green: var(--green-light);
-	--text: black;
+	--text: var(--text-light);
-	--foreground: #f5f5f5;
+	--foreground: var(--foreground-light);
-	--background: #DDD;
+	--background: var(--background-light);
-	--outside: #ECECEC;
+	--outside: var(--outside-light);
-	--post: #eee;
+	--post: var(--post-light);
-	--highlighted: white;
+	--highlighted: var(--highlighted-light);
-	--shadow: 0 1px 3px rgba(0,0,0,0.1);
+	--shadow: var(--shadow-light);
+}
+
+.dark {
+	--accent: var(--accent-dark);
+	--green: var(--green-dark);
+	--text: var(--text-dark);
+	--foreground: var(--foreground-dark);
+	--background: var(--background-dark);
+	--outside: var(--outside-dark);
+	--post: var(--post-dark);
+	--highlighted: var(--highlighted-dark);
+	--shadow: var(--shadow-dark);
 }
 
 /* User & Subreddit */