diff --git a/files/static/dist/main.css b/files/static/dist/main.css
index c537a75cc..d3f580787 100644
--- a/files/static/dist/main.css
+++ b/files/static/dist/main.css
@@ -674,11 +674,11 @@ video {
 		ul {
 	margin-bottom: 0.75rem;
 }
-		.comment-text ul, .post-body ul {
+		.comment-text > ul, .post-body > ul {
 	list-style-type: disc;
 	padding-left: 1rem;
 }
-		.comment-text ol, .post-body ol {
+		.comment-text > ol, .post-body > ol {
 	list-style-type: decimal;
 	padding-left: 1rem;
 }
@@ -1137,6 +1137,12 @@ video {
 .h-48 {
 	height: 12rem;
 }
+.h-0\.5 {
+	height: 0.125rem;
+}
+.h-0 {
+	height: 0px;
+}
 .h-1 {
 	height: 0.25rem;
 }
@@ -1152,17 +1158,11 @@ video {
 .h-5 {
 	height: 1.25rem;
 }
-.h-0\.5 {
-	height: 0.125rem;
-}
-.h-0 {
-	height: 0px;
-}
 .h-7 {
 	height: 1.75rem;
 }
-.max-h-12 {
-	max-height: 3rem;
+.max-h-10 {
+	max-height: 2.5rem;
 }
 .max-h-\[20rem\] {
 	max-height: 20rem;
@@ -1248,6 +1248,9 @@ video {
 .max-w-3xl {
 	max-width: 48rem;
 }
+.max-w-xl {
+	max-width: 36rem;
+}
 .max-w-screen-2xl {
 	max-width: 1536px;
 }
@@ -1257,9 +1260,6 @@ video {
 .max-w-md {
 	max-width: 28rem;
 }
-.max-w-xl {
-	max-width: 36rem;
-}
 .flex-1 {
 	flex: 1 1 0%;
 }
@@ -1612,6 +1612,9 @@ video {
 	--tw-bg-opacity: 1;
 	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
+.bg-primary\/20 {
+	background-color: rgba(var(--color-primary), 0.2);
+}
 .bg-gray-500 {
 	--tw-bg-opacity: 1;
 	background-color: rgba(var(--color-500), var(--tw-bg-opacity));
@@ -1697,8 +1700,8 @@ video {
 	--tw-bg-opacity: 1;
 	background-color: rgba(229, 235, 231, var(--tw-bg-opacity));
 }
-.bg-black\/50 {
-	background-color: rgba(0, 0, 0, 0.5);
+.bg-black\/40 {
+	background-color: rgba(0, 0, 0, 0.4);
 }
 .bg-\[\#dc2626\] {
 	--tw-bg-opacity: 1;
@@ -1719,6 +1722,198 @@ video {
 	--tw-bg-opacity: 1;
 	background-color: rgba(219, 39, 119, var(--tw-bg-opacity));
 }
+.bg-\[\#d4d4d8\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(212, 212, 216, var(--tw-bg-opacity));
+}
+.bg-\[\#e4e4e7\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
+}
+.bg-\[\#334155\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(51, 65, 85, var(--tw-bg-opacity));
+}
+.bg-\[\#cbd5e1\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(203, 213, 225, var(--tw-bg-opacity));
+}
+.bg-\[\#e2e8f0\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(226, 232, 240, var(--tw-bg-opacity));
+}
+.bg-\[\#0284c7\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(2, 132, 199, var(--tw-bg-opacity));
+}
+.bg-\[\#1e293b\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(30, 41, 59, var(--tw-bg-opacity));
+}
+.bg-\[\#a16207\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(161, 98, 7, var(--tw-bg-opacity));
+}
+.bg-\[\#fde047\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(253, 224, 71, var(--tw-bg-opacity));
+}
+.bg-\[\#fff8ac\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(255, 248, 172, var(--tw-bg-opacity));
+}
+.bg-\[\#be185d\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(190, 24, 93, var(--tw-bg-opacity));
+}
+.bg-\[\#f9a8d4\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(249, 168, 212, var(--tw-bg-opacity));
+}
+.bg-\[\#fcdff0\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(252, 223, 240, var(--tw-bg-opacity));
+}
+.bg-\[\#ec4899\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(236, 72, 153, var(--tw-bg-opacity));
+}
+.bg-\[\#524c37\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(82, 76, 55, var(--tw-bg-opacity));
+}
+.bg-\[\#dbdad1\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(219, 218, 209, var(--tw-bg-opacity));
+}
+.bg-\[\#ebe9e5\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(235, 233, 229, var(--tw-bg-opacity));
+}
+.bg-\[\#059669\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(5, 150, 105, var(--tw-bg-opacity));
+}
+.bg-\[\#4338ca\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(67, 56, 202, var(--tw-bg-opacity));
+}
+.bg-\[\#a5b4fc\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(165, 180, 252, var(--tw-bg-opacity));
+}
+.bg-\[\#c7d2fe\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(199, 210, 254, var(--tw-bg-opacity));
+}
+.bg-\[\#f97316\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(249, 115, 22, var(--tw-bg-opacity));
+}
+.bg-\[\#37341f\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(55, 52, 31, var(--tw-bg-opacity));
+}
+.bg-\[\#34d399\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(52, 211, 153, var(--tw-bg-opacity));
+}
+.bg-\[\#4d7c0f\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(77, 124, 15, var(--tw-bg-opacity));
+}
+.bg-\[\#bef264\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(190, 242, 100, var(--tw-bg-opacity));
+}
+.bg-\[\#d9f99d\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(217, 249, 157, var(--tw-bg-opacity));
+}
+.bg-\[\#ca8a04\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(202, 138, 4, var(--tw-bg-opacity));
+}
+.bg-\[\#0e7490\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(14, 116, 144, var(--tw-bg-opacity));
+}
+.bg-\[\#155e75\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(21, 94, 117, var(--tw-bg-opacity));
+}
+.bg-\[\#0d9488\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(13, 148, 136, var(--tw-bg-opacity));
+}
+.bg-black {
+	--tw-bg-opacity: 1;
+	background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+}
+.bg-\[\#374151\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(55, 65, 81, var(--tw-bg-opacity));
+}
+.bg-\[\#1f2937\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(31, 41, 55, var(--tw-bg-opacity));
+}
+.bg-\[\#44403c\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(68, 64, 60, var(--tw-bg-opacity));
+}
+.bg-\[\#d6d3d1\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(214, 211, 209, var(--tw-bg-opacity));
+}
+.bg-\[\#991b1b\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(153, 27, 27, var(--tw-bg-opacity));
+}
+.bg-\[\#d73987\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(215, 57, 135, var(--tw-bg-opacity));
+}
+.bg-\[\#6d28d9\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(109, 40, 217, var(--tw-bg-opacity));
+}
+.bg-\[\#00001f\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(0, 0, 31, var(--tw-bg-opacity));
+}
+.bg-\[\#44423b\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(68, 66, 59, var(--tw-bg-opacity));
+}
+.bg-\[\#d6d4d1\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(214, 212, 209, var(--tw-bg-opacity));
+}
+.bg-\[\#e7e5e3\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(231, 229, 227, var(--tw-bg-opacity));
+}
+.bg-\[\#0891b2\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(8, 145, 178, var(--tw-bg-opacity));
+}
+.bg-\[\#001f1b\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(0, 31, 27, var(--tw-bg-opacity));
+}
+.bg-\[\#48ec87\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(72, 236, 135, var(--tw-bg-opacity));
+}
+.bg-\[\#524737\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(82, 71, 55, var(--tw-bg-opacity));
+}
+.bg-\[\#dbd8d1\] {
+	--tw-bg-opacity: 1;
+	background-color: rgba(219, 216, 209, var(--tw-bg-opacity));
+}
 .bg-gray-300\/40 {
 	background-color: rgba(var(--color-300), 0.4);
 }
@@ -1733,16 +1928,9 @@ video {
 .bg-opacity-40 {
 	--tw-bg-opacity: 0.4;
 }
-.bg-gradient-to-r {
-	background-image: linear-gradient(to right, var(--tw-gradient-stops));
-}
 .bg-gradient-to-t {
 	background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
-.from-red-200 {
-	--tw-gradient-from: #fecaca;
-	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(254, 202, 202, 0));
-}
 .from-gray-300 {
 	--tw-gradient-from: rgb(var(--color-300));
 	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--color-300), 0));
@@ -2083,10 +2271,6 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(220, 38, 38, var(--tw-text-opacity));
 }
-.text-gray-900 {
-	--tw-text-opacity: 1;
-	color: rgba(var(--color-900), var(--tw-text-opacity));
-}
 .text-gray-200 {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-200), var(--tw-text-opacity));
@@ -2103,6 +2287,10 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(245, 158, 11, var(--tw-text-opacity));
 }
+.text-gray-900 {
+	--tw-text-opacity: 1;
+	color: rgba(var(--color-900), var(--tw-text-opacity));
+}
 .text-red-900 {
 	--tw-text-opacity: 1;
 	color: rgba(127, 29, 29, var(--tw-text-opacity));
@@ -2147,10 +2335,64 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(220, 38, 38, var(--tw-text-opacity));
 }
+.text-black\/40 {
+	color: rgba(0, 0, 0, 0.4);
+}
 .text-\[\#db2777\] {
 	--tw-text-opacity: 1;
 	color: rgba(219, 39, 119, var(--tw-text-opacity));
 }
+.text-white\/50 {
+	color: rgba(255, 255, 255, 0.5);
+}
+.text-\[\#0284c7\] {
+	--tw-text-opacity: 1;
+	color: rgba(2, 132, 199, var(--tw-text-opacity));
+}
+.text-\[\#ec4899\] {
+	--tw-text-opacity: 1;
+	color: rgba(236, 72, 153, var(--tw-text-opacity));
+}
+.text-\[\#059669\] {
+	--tw-text-opacity: 1;
+	color: rgba(5, 150, 105, var(--tw-text-opacity));
+}
+.text-\[\#f97316\] {
+	--tw-text-opacity: 1;
+	color: rgba(249, 115, 22, var(--tw-text-opacity));
+}
+.text-\[\#34d399\] {
+	--tw-text-opacity: 1;
+	color: rgba(52, 211, 153, var(--tw-text-opacity));
+}
+.text-\[\#ca8a04\] {
+	--tw-text-opacity: 1;
+	color: rgba(202, 138, 4, var(--tw-text-opacity));
+}
+.text-\[\#0d9488\] {
+	--tw-text-opacity: 1;
+	color: rgba(13, 148, 136, var(--tw-text-opacity));
+}
+.text-\[\#991b1b\] {
+	--tw-text-opacity: 1;
+	color: rgba(153, 27, 27, var(--tw-text-opacity));
+}
+.text-\[\#feed08\] {
+	--tw-text-opacity: 1;
+	color: rgba(254, 237, 8, var(--tw-text-opacity));
+}
+.text-\[\#0891b2\] {
+	--tw-text-opacity: 1;
+	color: rgba(8, 145, 178, var(--tw-text-opacity));
+}
+.text-\[\#48ec87\] {
+	--tw-text-opacity: 1;
+	color: rgba(72, 236, 135, var(--tw-text-opacity));
+}
+.text-\[\#155e75\] {
+	--tw-text-opacity: 1;
+	color: rgba(21, 94, 117, var(--tw-text-opacity));
+}
 .antialiased {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
@@ -2234,25 +2476,77 @@ video {
 			scrollbar-width: none;  /* Firefox */
 		}
 
-.theme-tron {
+.theme-blood-orange {
 	--color-primary: 249,115,22;
 	--color-100: 224,231,255;
-	--color-200: 199,210,254;
+	--color-200: 218, 225, 254;
 	--color-300: 165,180,252;
 	--color-400: 129,140,248;
-	--color-500: 121,124,242;
+	--color-500: 125, 128, 236;
 	--color-600: 79,70,229;
 	--color-700: 67,56,202;
 	--color-800: 55,48,163;
 	--color-900: 49,46,129;
 }
 
+.theme-lake-tahoe {
+	--color-primary: 13,148,136;
+	--color-100: 245,253,254;
+	--color-200: 185,239,245;
+	--color-300: 157,237,247;
+	--color-400: 126,213,226;
+	--color-500: 56,173,193;
+	--color-600: 8,145,178;
+	--color-700: 23,108,131;
+	--color-800: 17,76,94;
+	--color-900: 12,47,60;
+}
+
+.theme-alpine {
+	--color-primary: 8,145,178;
+	--color-100: 245,244,242;
+	--color-200: 231,229,227;
+	--color-300: 214,212,209;
+	--color-400: 168,164,158;
+	--color-500: 120,115,108;
+	--color-600: 87,83,78;
+	--color-700: 68,66,59;
+	--color-800: 41,39,36;
+	--color-900: 28,26,23;
+}
+
+.theme-cambridge {
+	--color-primary: 153,27,27;
+	--color-100: 231,229,228;
+	--color-200: 231,229,228;
+	--color-300: 214,211,209;
+	--color-400: 168,162,158;
+	--color-500: 120,113,108;
+	--color-600: 87,83,78;
+	--color-700: 68,64,60;
+	--color-800: 41,37,36;
+	--color-900: 28,25,23;
+}
+
+.theme-limon {
+	--color-primary: 202,138,4;
+	--color-100: 236,252,203;
+	--color-200: 234,255,195;
+	--color-300: 200,242,126;
+	--color-400: 136,182,61;
+	--color-500: 131,181,54;
+	--color-600: 101,163,13;
+	--color-700: 72,113,16;
+	--color-800: 63,98,18;
+	--color-900: 54,83,20;
+}
+
 .theme-mocha {
 	--color-primary: 5,150,105;
 	--color-100: 246,246,244;
 	--color-200: 235,233,229;
 	--color-300: 219,218,209;
-	--color-400: 155,175,161;
+	--color-400: 175, 169, 155;
 	--color-500: 148,144,129;
 	--color-600: 99,96,77;
 	--color-700: 82,76,55;
@@ -2260,6 +2554,19 @@ video {
 	--color-900: 40,37,17;
 }
 
+.theme-choco-mint {
+	--color-primary: 37, 193, 136;
+	--color-100: 246,246,244;
+	--color-200: 235,232,229;
+	--color-300: 219,218,209;
+	--color-400: 177,171,158;
+	--color-500: 130,123,110;
+	--color-600: 99,96,77;
+	--color-700: 70,62,47;
+	--color-800: 52,44,32;
+	--color-900: 40,37,17;
+}
+
 .theme-dramblr {
 	--color-primary: 2,132,199;
 	--color-100: 241,245,249;
@@ -2268,11 +2575,63 @@ video {
 	--color-400: 148,163,184;
 	--color-500: 100,116,139;
 	--color-600: 71,85,105;
-	--color-700: 51,65,85;
+	--color-700: 45,60,80;
 	--color-800: 30,41,59;
 	--color-900: 15,23,42;
 }
 
+.theme-haskell {
+	--color-primary: 72,236,135;
+	--color-100: 251,207,232;
+	--color-200: 251,207,232;
+	--color-300: 251,207,232;
+	--color-400: 244,114,182;
+	--color-500: 236,72,153;
+	--color-600: 219,39,119;
+	--color-700: 0,0,31;
+	--color-800: 0,0,31;
+	--color-900: 0,0,31;
+}
+
+.theme-war-games {
+	--color-primary: 236,72,153;
+	--color-100: 207,251,231;
+	--color-200: 207,251,231;
+	--color-300: 207,251,231;
+	--color-400: 114,244,173;
+	--color-500: 72,236,135;
+	--color-600: 39,219,138;
+	--color-700: 0,23,21;
+	--color-800: 0,23,21;
+	--color-900: 0,23,21;
+}
+
+.theme-yale {
+	--color-primary: 109,40,217;
+	--color-100: 254,231,244;
+	--color-200: 254,231,244;
+	--color-300: 254,231,244;
+	--color-400: 255,245,117;
+	--color-500: 254,237,8;
+	--color-600: 219,39,119;
+	--color-700: 215,57,135;
+	--color-800: 215,57,135;
+	--color-900: 157,23,77;
+}
+
+.theme-abyss {
+	--color-primary: 219,39,119;
+	--color-100: 189,189,193;
+	--color-200: 189,189,193;
+	--color-300: 189,189,193;
+	--color-400: 161,161,171;
+	--color-500: 117,117,126;
+	--color-600: 82,82,91;
+	--color-700: 0,0,0;
+	--color-800: 0,0,0;
+	--color-900: 0,0,0;
+}
+
 .theme-midnight {
 	--color-primary: 219,39,119;
 	--color-100: 243,244,246;
@@ -2291,8 +2650,8 @@ video {
 	--color-100: 244,244,245;
 	--color-200: 228,228,231;
 	--color-300: 212,212,216;
-	--color-400: 161,161,170;
-	--color-500: 113,113,122;
+	--color-400: 161,161,171;
+	--color-500: 117,117,126;
 	--color-600: 82,82,91;
 	--color-700: 63,63,70;
 	--color-800: 39,39,42;
@@ -2300,9 +2659,9 @@ video {
 }
 
 .theme-bubblegum {
-	--color-primary: 2,132,199;
-	--color-100: 252,231,243;
-	--color-200: 251,207,232;
+	--color-primary: 236,72,153;
+	--color-100: 254,236,246;
+	--color-200: 252,223,240;
 	--color-300: 249,168,212;
 	--color-400: 244,114,182;
 	--color-500: 236,72,153;
@@ -2314,13 +2673,13 @@ video {
 
 .theme-canary {
 	--color-primary: 2,132,199;
-	--color-100: 254,249,195;
-	--color-200: 254,240,138;
-	--color-300: 253,224,71;
-	--color-400: 250,204,21;
-	--color-500: 234,179,8;
-	--color-600: 202,138,4;
-	--color-700: 161,98,7;
+	--color-100: 254,248,190;
+	--color-200: 247,237,160;
+	--color-300: 247,231,109;
+	--color-400: 210,179,55;
+	--color-500: 199,159,39;
+	--color-600: 187,129,6;
+	--color-700: 170,106,14;
 	--color-800: 133,77,14;
 	--color-900: 113,63,18;
 }
@@ -2338,6 +2697,19 @@ video {
 	--color-900: 17,40,23;
 }
 
+.theme-savile-row {
+	--color-primary: 21,94,117;
+	--color-100: 246,245,244;
+	--color-200: 235,233,229;
+	--color-300: 219,216,209;
+	--color-400: 175,169,155;
+	--color-500: 148,143,129;
+	--color-600: 99,92,78;
+	--color-700: 82,71,55;
+	--color-800: 55,46,31;
+	--color-900: 40,31,17;
+}
+
 /* ----------------------- VARIABLES --------------------- */
 /*:root {
 	--color-primary: 220, 38, 38;
@@ -2379,6 +2751,11 @@ video {
 	--tw-ring-opacity: 1;
 	--tw-ring-color: rgba(186, 230, 253, var(--tw-ring-opacity));
 	--tw-ring-opacity: 0.5;
+}
+	.dark .form-input {
+	--tw-border-opacity: 1;
+	border-color: rgba(var(--color-900), var(--tw-border-opacity));
+	background-color: rgba(255, 255, 255, .06);
 }
 	@media (min-width: 640px) {
 
@@ -2512,6 +2889,49 @@ video {
 	color: rgba(var(--color-900), var(--tw-text-opacity));
 }
 
+	/* ---------------------- DROPDOWNS --------------------- */
+	.dropdown-item-primary {
+	display: block;
+	width: 100%;
+	background-image: linear-gradient(to top, var(--tw-gradient-stops));
+	padding-left: 1rem;
+	padding-right: 1rem;
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+	text-align: left;
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	--tw-text-opacity: 1;
+	color: rgba(var(--color-200), var(--tw-text-opacity));
+}
+	.dropdown-item-primary:hover {
+	--tw-bg-opacity: 1;
+	background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+	--tw-gradient-from: rgb(var(--color-primary));
+	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--color-primary), 0));
+	--tw-gradient-to: rgba(var(--color-primary), 0.8);
+	--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+	.dropdown-item-primary:focus {
+	background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+	--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+	.dark .dropdown-item-primary {
+	background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+	.dark .dropdown-item-primary:hover {
+	--tw-bg-opacity: 1;
+	background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+	--tw-gradient-from: rgba(var(--color-primary), 0.8);
+	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
+	--tw-gradient-to: rgb(var(--color-primary));
+}
+	.dark .dropdown-item-primary:focus {
+	background-image: linear-gradient(to top, var(--tw-gradient-stops));
+}
+
 	/* ----------------------- BADGES ----------------------- */
 	.badge {
 	border-radius: 0.25rem;
@@ -2574,6 +2994,18 @@ video {
 	--tw-text-opacity: 1;
 	color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
+	.patron {
+	border-radius: 0.25rem;
+	padding-left: 0.25rem;
+	padding-right: 0.25rem;
+	padding-top: 0.125rem;
+	padding-bottom: 0.125rem;
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	font-weight: 700;
+	line-height: 1.5;
+			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
+}
 
 	/* ---------------------- TOOLTIPS ---------------------- */
 	.tooltip-inner {
@@ -2582,7 +3014,6 @@ video {
 	}
 
 	/* ----------------------- EMOJI ------------------------ */
-
 	img.emoji {
 		width: 30px;
 		height: 30px;
@@ -2965,9 +3396,9 @@ video {
 	outline-offset: 2px;
 }
 
-	.peer:checked ~ .peer-checked\:border-primary {
+	.peer:checked ~ .peer-checked\:border-blue-500 {
 	--tw-border-opacity: 1;
-	border-color: rgba(var(--color-primary), var(--tw-border-opacity));
+	border-color: rgba(14, 165, 233, var(--tw-border-opacity));
 }
 
 	.peer:checked ~ .peer-checked\:bg-gray-400 {
@@ -2975,6 +3406,10 @@ video {
 	background-color: rgba(var(--color-400), var(--tw-bg-opacity));
 }
 
+	.peer:checked ~ .peer-checked\:bg-blue-600\/10 {
+	background-color: rgba(2, 132, 199, 0.1);
+}
+
 	.peer:checked ~ .peer-checked\:shadow-inner {
 	--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -2989,14 +3424,23 @@ video {
 	border-color: rgba(var(--color-700), var(--tw-border-opacity));
 }
 
+	.dark .dark\:border-gray-600 {
+	--tw-border-opacity: 1;
+	border-color: rgba(var(--color-600), var(--tw-border-opacity));
+}
+
+	.dark .dark\:border-gray-800 {
+	--tw-border-opacity: 1;
+	border-color: rgba(var(--color-800), var(--tw-border-opacity));
+}
+
 	.dark .dark\:border-gray-900 {
 	--tw-border-opacity: 1;
 	border-color: rgba(var(--color-900), var(--tw-border-opacity));
 }
 
-	.dark .dark\:border-gray-600 {
-	--tw-border-opacity: 1;
-	border-color: rgba(var(--color-600), var(--tw-border-opacity));
+	.dark .dark\:border-white\/\[\.05\] {
+	border-color: rgba(255, 255, 255, .05);
 }
 
 	.dark .dark\:bg-gray-900 {
@@ -3014,6 +3458,10 @@ video {
 	background-color: rgba(var(--color-800), var(--tw-bg-opacity));
 }
 
+	.dark .dark\:bg-white\/\[\.05\] {
+	background-color: rgba(255, 255, 255, .05);
+}
+
 	.dark .dark\:bg-gray-700\/40 {
 	background-color: rgba(var(--color-700), 0.4);
 }
@@ -3022,15 +3470,6 @@ video {
 	background-image: none;
 }
 
-	.dark .dark\:from-gray-800 {
-	--tw-gradient-from: rgb(var(--color-800));
-	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(var(--color-800), 0));
-}
-
-	.dark .dark\:to-gray-700 {
-	--tw-gradient-to: rgb(var(--color-700));
-}
-
 	.dark .dark\:text-gray-400 {
 	--tw-text-opacity: 1;
 	color: rgba(var(--color-400), var(--tw-text-opacity));
@@ -3076,6 +3515,10 @@ video {
 	color: rgba(var(--color-400), var(--tw-text-opacity));
 }
 
+	.dark .dark\:focus\:bg-transparent:focus {
+	background-color: transparent;
+}
+
 	@media (min-width: 640px) {
 
 	.sm\:static {
diff --git a/files/static/src/main.css b/files/static/src/main.css
index 6a1837985..a093bc014 100644
--- a/files/static/src/main.css
+++ b/files/static/src/main.css
@@ -2,25 +2,77 @@
 @tailwind components;
 @tailwind utilities;
 
-.theme-tron {
+.theme-blood-orange {
 	--color-primary: 249,115,22;
 	--color-100: 224,231,255;
-	--color-200: 199,210,254;
+	--color-200: 218, 225, 254;
 	--color-300: 165,180,252;
 	--color-400: 129,140,248;
-	--color-500: 121,124,242;
+	--color-500: 125, 128, 236;
 	--color-600: 79,70,229;
 	--color-700: 67,56,202;
 	--color-800: 55,48,163;
 	--color-900: 49,46,129;
 }
 
+.theme-lake-tahoe {
+	--color-primary: 13,148,136;
+	--color-100: 245,253,254;
+	--color-200: 185,239,245;
+	--color-300: 157,237,247;
+	--color-400: 126,213,226;
+	--color-500: 56,173,193;
+	--color-600: 8,145,178;
+	--color-700: 23,108,131;
+	--color-800: 17,76,94;
+	--color-900: 12,47,60;
+}
+
+.theme-alpine {
+	--color-primary: 8,145,178;
+	--color-100: 245,244,242;
+	--color-200: 231,229,227;
+	--color-300: 214,212,209;
+	--color-400: 168,164,158;
+	--color-500: 120,115,108;
+	--color-600: 87,83,78;
+	--color-700: 68,66,59;
+	--color-800: 41,39,36;
+	--color-900: 28,26,23;
+}
+
+.theme-cambridge {
+	--color-primary: 153,27,27;
+	--color-100: 231,229,228;
+	--color-200: 231,229,228;
+	--color-300: 214,211,209;
+	--color-400: 168,162,158;
+	--color-500: 120,113,108;
+	--color-600: 87,83,78;
+	--color-700: 68,64,60;
+	--color-800: 41,37,36;
+	--color-900: 28,25,23;
+}
+
+.theme-limon {
+	--color-primary: 202,138,4;
+	--color-100: 236,252,203;
+	--color-200: 234,255,195;
+	--color-300: 200,242,126;
+	--color-400: 136,182,61;
+	--color-500: 131,181,54;
+	--color-600: 101,163,13;
+	--color-700: 72,113,16;
+	--color-800: 63,98,18;
+	--color-900: 54,83,20;
+}
+
 .theme-mocha {
 	--color-primary: 5,150,105;
 	--color-100: 246,246,244;
 	--color-200: 235,233,229;
 	--color-300: 219,218,209;
-	--color-400: 155,175,161;
+	--color-400: 175, 169, 155;
 	--color-500: 148,144,129;
 	--color-600: 99,96,77;
 	--color-700: 82,76,55;
@@ -28,6 +80,19 @@
 	--color-900: 40,37,17;
 }
 
+.theme-choco-mint {
+	--color-primary: 37, 193, 136;
+	--color-100: 246,246,244;
+	--color-200: 235,232,229;
+	--color-300: 219,218,209;
+	--color-400: 177,171,158;
+	--color-500: 130,123,110;
+	--color-600: 99,96,77;
+	--color-700: 70,62,47;
+	--color-800: 52,44,32;
+	--color-900: 40,37,17;
+}
+
 .theme-dramblr {
 	--color-primary: 2,132,199;
 	--color-100: 241,245,249;
@@ -36,11 +101,63 @@
 	--color-400: 148,163,184;
 	--color-500: 100,116,139;
 	--color-600: 71,85,105;
-	--color-700: 51,65,85;
+	--color-700: 45,60,80;
 	--color-800: 30,41,59;
 	--color-900: 15,23,42;
 }
 
+.theme-haskell {
+	--color-primary: 72,236,135;
+	--color-100: 251,207,232;
+	--color-200: 251,207,232;
+	--color-300: 251,207,232;
+	--color-400: 244,114,182;
+	--color-500: 236,72,153;
+	--color-600: 219,39,119;
+	--color-700: 0,0,31;
+	--color-800: 0,0,31;
+	--color-900: 0,0,31;
+}
+
+.theme-war-games {
+	--color-primary: 236,72,153;
+	--color-100: 207,251,231;
+	--color-200: 207,251,231;
+	--color-300: 207,251,231;
+	--color-400: 114,244,173;
+	--color-500: 72,236,135;
+	--color-600: 39,219,138;
+	--color-700: 0,23,21;
+	--color-800: 0,23,21;
+	--color-900: 0,23,21;
+}
+
+.theme-yale {
+	--color-primary: 109,40,217;
+	--color-100: 254,231,244;
+	--color-200: 254,231,244;
+	--color-300: 254,231,244;
+	--color-400: 255,245,117;
+	--color-500: 254,237,8;
+	--color-600: 219,39,119;
+	--color-700: 215,57,135;
+	--color-800: 215,57,135;
+	--color-900: 157,23,77;
+}
+
+.theme-abyss {
+	--color-primary: 219,39,119;
+	--color-100: 189,189,193;
+	--color-200: 189,189,193;
+	--color-300: 189,189,193;
+	--color-400: 161,161,171;
+	--color-500: 117,117,126;
+	--color-600: 82,82,91;
+	--color-700: 0,0,0;
+	--color-800: 0,0,0;
+	--color-900: 0,0,0;
+}
+
 .theme-midnight {
 	--color-primary: 219,39,119;
 	--color-100: 243,244,246;
@@ -59,8 +176,8 @@
 	--color-100: 244,244,245;
 	--color-200: 228,228,231;
 	--color-300: 212,212,216;
-	--color-400: 161,161,170;
-	--color-500: 113,113,122;
+	--color-400: 161,161,171;
+	--color-500: 117,117,126;
 	--color-600: 82,82,91;
 	--color-700: 63,63,70;
 	--color-800: 39,39,42;
@@ -68,9 +185,9 @@
 }
 
 .theme-bubblegum {
-	--color-primary: 2,132,199;
-	--color-100: 252,231,243;
-	--color-200: 251,207,232;
+	--color-primary: 236,72,153;
+	--color-100: 254,236,246;
+	--color-200: 252,223,240;
 	--color-300: 249,168,212;
 	--color-400: 244,114,182;
 	--color-500: 236,72,153;
@@ -82,13 +199,13 @@
 
 .theme-canary {
 	--color-primary: 2,132,199;
-	--color-100: 254,249,195;
-	--color-200: 254,240,138;
-	--color-300: 253,224,71;
-	--color-400: 250,204,21;
-	--color-500: 234,179,8;
-	--color-600: 202,138,4;
-	--color-700: 161,98,7;
+	--color-100: 254,248,190;
+	--color-200: 247,237,160;
+	--color-300: 247,231,109;
+	--color-400: 210,179,55;
+	--color-500: 199,159,39;
+	--color-600: 187,129,6;
+	--color-700: 170,106,14;
 	--color-800: 133,77,14;
 	--color-900: 113,63,18;
 }
@@ -106,6 +223,19 @@
 	--color-900: 17,40,23;
 }
 
+.theme-savile-row {
+	--color-primary: 21,94,117;
+	--color-100: 246,245,244;
+	--color-200: 235,233,229;
+	--color-300: 219,216,209;
+	--color-400: 175,169,155;
+	--color-500: 148,143,129;
+	--color-600: 99,92,78;
+	--color-700: 82,71,55;
+	--color-800: 55,46,31;
+	--color-900: 40,31,17;
+}
+
 /* ----------------------- VARIABLES --------------------- */
 /*:root {
 	--color-primary: 220, 38, 38;
@@ -178,10 +308,10 @@
 		ul {
 			@apply mb-3
 		}
-		.comment-text ul, .post-body ul {
+		.comment-text > ul, .post-body > ul {
 			@apply list-disc pl-4
 		}
-		.comment-text ol, .post-body ol {
+		.comment-text > ol, .post-body > ol {
 			@apply list-decimal pl-4
 		}
 		strong {
@@ -216,7 +346,7 @@
 
 	/* ----------------------- INPUTS ----------------------- */
 	.form-input {
-		@apply text-lg sm:text-base appearance-none block w-full rounded shadow-inner p-2 bg-white border border-gray-300 hover:border-gray-400 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 
+		@apply text-lg sm:text-base appearance-none block w-full rounded shadow-inner p-2 bg-white dark:bg-white/[.06] border border-gray-300 hover:border-gray-400 dark:border-gray-900 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50;
 	}
 
 	/* ---------------------- BUTTONS ----------------------- */
@@ -239,6 +369,11 @@
 		@apply bg-gradient-to-t from-gray-200 to-gray-100 hover:from-gray-100 hover:to-gray-200 border-gray-300 text-gray-700 focus:text-gray-900;
 	}
 
+	/* ---------------------- DROPDOWNS --------------------- */
+	.dropdown-item-primary {
+		@apply block w-full text-left px-4 py-2 text-sm text-gray-200 hover:bg-white dark:hover:bg-black bg-gradient-to-t dark:bg-gradient-to-t hover:from-primary hover:to-primary/80 dark:hover:from-primary/80 dark:hover:to-primary hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-b dark:focus:bg-gradient-to-t;
+	}
+
 	/* ----------------------- BADGES ----------------------- */
 	.badge {
 		@apply px-1 py-0.5 text-sm text-shadow-light font-bold leading-normal rounded bg-gradient-to-t;
@@ -264,6 +399,9 @@
 	.badge-primary {
 		@apply bg-primary text-white;
 	}
+	.patron {
+		@apply px-1 py-0.5 text-sm text-shadow-light font-bold leading-normal rounded;
+	}
 
 	/* ---------------------- TOOLTIPS ---------------------- */
 	.tooltip-inner {
@@ -272,7 +410,6 @@
 	}
 
 	/* ----------------------- EMOJI ------------------------ */
-
 	img.emoji {
 		width: 30px;
 		height: 30px;
diff --git a/files/templates/CHRISTMAS/comments.html b/files/templates/CHRISTMAS/comments.html
index f64bc7d4f..fa4d80dfb 100644
--- a/files/templates/CHRISTMAS/comments.html
+++ b/files/templates/CHRISTMAS/comments.html
@@ -178,7 +178,7 @@
 </div>
 {% endif %}
 
-<div id="comment-{{c.id}}" class="comment anchor {% if c.unread %}bg-gradient-to-r from-red-200{% endif %} relative flex mt-4 md:mt-6 {% if standalone and level==1 %} mt-0{% endif %}{% if c.collapse_for_user(v) or (standalone and c.over_18 and not (v and v.over_18)) %} collapsed items-center opacity-50 md:hover:opacity-100{% endif %}">
+<div id="comment-{{c.id}}" class="comment anchor {% if c.unread %}bg-primary/20{% endif %} relative flex mt-4 md:mt-6 {% if standalone and level==1 %} mt-0{% endif %}{% if c.collapse_for_user(v) or (standalone and c.over_18 and not (v and v.over_18)) %} collapsed items-center opacity-50 md:hover:opacity-100{% endif %}">
 
 	{% if c.collapse_for_user(v) or (standalone and c.over_18 and not (v and v.over_18)) %}
 	<div id="comment-collapse-{{c.id}}" class="z-20 absolute w-full h-full bottom-0 left-0 right-0 top-0 cursor-pointer" onclick="collapse_comment('{{c.id}}')"></div>
@@ -189,14 +189,14 @@
 	<span class="comment-collapse-desktop hidden" {% if not c.unread %}style="border-left: 2px solid #{{c.author.namecolor}};"{% endif %} onclick="collapse_comment('{{c.id}}')"></span>
 
 	<div class="flex flex-col flex-shrink-0 items-center mr-2.5 {{ 'md:mr-4' if not c.parent_comment_id or standalone else 'md:mr-3' }}">
-		<div class="relative {{ 'santa' if c.author.patron else 'cap' }}">
+		<button class="relative {{ 'santa' if c.author.patron else 'cap' }}" onclick="collapse_comment('{{c.id}}')">
 			{% if standalone or level==1 %}
 			<img loading="lazy" src="{{ c.author.profile_url }}" class="hidden md:block flex-shrink-0 w-14 h-14 p-[3px] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover lozad" alt="{{ c.author.username }} avatar"/>
 			{% else %}
 			<img loading="lazy" src="{{ c.author.profile_url }}" class="hidden md:block flex-shrink-0 w-9 h-9 p-[3px] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover lozad" alt="{{ c.author.username }} avatar"/>
 			{% endif %}
-		</div>
-		<button onclick="collapse_comment('{{c.id}}')" class="invisible-on-collapse md:ml-4 w-[1px] md:w-4 h-full border-l border-gray-400 dark:border-gray-700"></button>
+		</button>
+		<button onclick="collapse_comment('{{c.id}}')" class="invisible-on-collapse md:ml-4 w-[1px] md:w-4 h-full border-l border-gray-400 dark:border-gray-600"></button>
 	</div>
 
 	<div class="w-full">
@@ -420,9 +420,9 @@
 		{% include "CHRISTMAS/ban_modal.html" %}
 	{% endif %}
 
-		<div class="modal fade" id="deleteCommentModal" tabindex="-1" role="dialog" aria-labelledby="deleteCommentModalTitle" aria-hidden="true">
+	<div class="modal fade" id="deleteCommentModal" tabindex="-1" role="dialog" aria-labelledby="deleteCommentModalTitle" aria-hidden="true">
 		<div class="modal-dialog modal-dialog-centered" role="document">
-			<div class="modal-content">
+			<div class="modal-content mx-auto max-w-xl bg-gray-100 dark:bg-gray-700 rounded-md shadow-lg">
 				<div class="modal-header">
 					<h5 class="modal-title">Delete comment?</h5>
 					<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
@@ -432,14 +432,18 @@
 				<div class="modal-body text-center">
 
 					<div class="py-4">
-						<i class="fad fa-trash-alt text-muted" style="font-size: 3.5rem;"></i>
+						<i class="fad fa-trash-alt text-gray-400" style="font-size: 3.5rem;"></i>
 					</div>
 
-					<p>Your comment will be removed everywhere on {{'SITE_NAME' | app_config}}. This action can be undone.</p>
+					<p>
+						Your comment will be removed everywhere on {{'SITE_NAME' | app_config}}. This action can be undone.
+					</p>
 				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-link text-muted" data-bs-dismiss="modal">Cancel</button>
-					<button id="deleteCommentButton" class="btn btn-danger">Delete comment</button>
+				<div class="flex justify-end space-x-2 border-t border-gray-400 dark:border-gray-800 p-4">
+					<button type="button" class="px-4 py-2 text-sm font-bold text-gray-500 hover:text-gray-400" data-bs-dismiss="modal">
+						Cancel
+					</button>
+					<button id="deleteCommentButton" class="btn btn-red">Delete comment</button>
 				</div>
 			</div>
 		</div>
@@ -500,7 +504,7 @@
 	}
 
 	.popover {
-		max-width: 100%;
+		max-width: 50%;
 		box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
 		border-color: #dadada;
 	}
@@ -522,10 +526,6 @@
 		overflow: hidden;
 	}
 
-	.mt-n6 {
-		margin-top: -1.75rem !important;
-	}
-
 	.avatar-72 {
 		width: 72px;
 		height: 72px;
diff --git a/files/templates/CHRISTMAS/comments/CommentActions.html b/files/templates/CHRISTMAS/comments/CommentActions.html
index afec47516..71bc48fdf 100644
--- a/files/templates/CHRISTMAS/comments/CommentActions.html
+++ b/files/templates/CHRISTMAS/comments/CommentActions.html
@@ -80,31 +80,31 @@
 			</button>
 			<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownComment-{{c.id}}Actions">
 				<li class="hidden">
-					<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/votes?link={{c.fullname}}">
+					<a class="dropdown-item dropdown-item-primary" href="/votes?link={{c.fullname}}">
 						<i class="fas fa-poll fa-sm fa-fw mr-4"></i>Votes
 					</a>
 				</li>
 				<li class="hidden">
-					<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="{{c.permalink}}">
+					<a class="dropdown-item dropdown-item-primary" href="{{c.permalink}}">
 						<i class="fas fa-book-open fa-sm fa-fw mr-4"></i>Context
 					</a>
 				</li>
 				{% if v and c.parent_submission and c.author_id==v.id %}
 				<li class="hidden md:block">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="toggleEdit('{{c.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="toggleEdit('{{c.id}}')">
 						<i class="fas fa-edit fa-sm fa-fw mr-4"></i>Edit
 					</button>
 				</li>
 
 				{% if c.deleted_utc > 0 %}
 				<li class="hidden md:block">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast('/undelete/comment/{{c.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast('/undelete/comment/{{c.id}}')">
 						<i class="fas fa-trash-alt fa-sm fa-fw mr-4"></i>Undelete
 					</button>
 				</li>
 				{% else %}
 				<li class="hidden md:block">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" data-bs-toggle="modal" data-bs-target="#deleteCommentModal" onclick="delete_commentModal('{{c.id}}')">
+					<button class="dropdown-item dropdown-item-primary" data-bs-toggle="modal" data-bs-target="#deleteCommentModal" onclick="delete_commentModal('{{c.id}}')">
 						<i class="fas fa-trash-alt fa-sm fa-fw mr-4"></i>Delete
 					</button>
 				</li>
@@ -113,12 +113,12 @@
 
 				{% if v and v.admin_level==6 and v.id==c.author_id %}
 				<li id="undistinguish-{{c.id}}" class="hidden {% if c.distinguish_level %}md:block{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast3('/distinguish_comment/{{c.id}}','distinguish-{{c.id}}','undistinguish-{{c.id}}','no')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast3('/distinguish_comment/{{c.id}}','distinguish-{{c.id}}','undistinguish-{{c.id}}','no')">
 						<i class="fas fa-id-badge text-info fa-sm fa-fw mr-4"></i>Undistinguish
 					</button>
 				</li>
 				<li id="distinguish-{{c.id}}" class="hidden {% if not c.distinguish_level %}md:block{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast3('/distinguish_comment/{{c.id}}','distinguish-{{c.id}}','undistinguish-{{c.id}}','yes')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast3('/distinguish_comment/{{c.id}}','distinguish-{{c.id}}','undistinguish-{{c.id}}','yes')">
 						<i class="fas fa-id-badge text-info fa-sm fa-fw mr-4"></i>Distinguish
 					</button>
 				</li>
@@ -126,17 +126,17 @@
 
 				{% if v and not v.id==c.author_id and not (c.post and c.post.award_count("ghosts")) %}
 				<li class="hidden {% if c.is_blocking %}md:block{% endif %} text-green-600">
-					<button id="unblock-{{c.id}}" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast3('/settings/unblock?username={{c.author.username}}','block-{{c.id}}','unblock-{{c.id}}')">
+					<button id="unblock-{{c.id}}" class="dropdown-item dropdown-item-primary" onclick="post_toast3('/settings/unblock?username={{c.author.username}}','block-{{c.id}}','unblock-{{c.id}}')">
 						<i class="fas fa-eye-slash fa-sm fa-fw mr-4"></i>Unblock user
 					</button>
 				</li>
 				<li id="prompt-{{c.id}}" class="hidden text-red-600">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast3('/settings/block?username={{c.author.username}}','prompt-{{c.id}}','unblock-{{c.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast3('/settings/block?username={{c.author.username}}','prompt-{{c.id}}','unblock-{{c.id}}')">
 						<i class="fas fa-eye-slash fa-sm fa-fw mr-4"></i>Are you sure?
 					</button>
 				</li>
 				<li class="hidden {% if not c.is_blocking %}md:block{% endif %} text-red-600">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" id="block-{{c.id}}" onclick="document.getElementById('block-{{c.id}}').classList.toggle('md:block');document.getElementById('prompt-{{c.id}}').classList.toggle('md:block');">
+					<button class="dropdown-item dropdown-item-primary" id="block-{{c.id}}" onclick="document.getElementById('block-{{c.id}}').classList.toggle('md:block');document.getElementById('prompt-{{c.id}}').classList.toggle('md:block');">
 						<i class="fas fa-eye-slash fa-sm fa-fw mr-4"></i>Block user
 					</button>
 				</li>
@@ -147,12 +147,12 @@
 					<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
 				</li>
 				<li id="unpin-{{c.id}}" class="hidden {% if c.is_pinned %}md:block{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" data-bs-dismiss="modal" data-bs-target="#actionsModal-{{c.id}}" onclick="post_toast3('/pin_comment/{{c.id}}','pin-{{c.id}}','unpin-{{c.id}}')">
+					<button class="dropdown-item dropdown-item-primary" data-bs-dismiss="modal" data-bs-target="#actionsModal-{{c.id}}" onclick="post_toast3('/pin_comment/{{c.id}}','pin-{{c.id}}','unpin-{{c.id}}')">
 						<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw mr-4"></i>Unpin
 					</button>
 				</li>
 				<li id="pin-{{c.id}}" class="hidden {% if not c.is_pinned %}md:block{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" data-bs-dismiss="modal" data-bs-target="#actionsModal-{{c.id}}" onclick="post_toast3('/pin_comment/{{c.id}}','pin-{{c.id}}','unpin-{{c.id}}')">
+					<button class="dropdown-item dropdown-item-primary" data-bs-dismiss="modal" data-bs-target="#actionsModal-{{c.id}}" onclick="post_toast3('/pin_comment/{{c.id}}','pin-{{c.id}}','unpin-{{c.id}}')">
 						<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw mr-4"></i>Pin
 					</button>
 				</li>
@@ -167,7 +167,7 @@
 				</li>
 				{% endif %}
 				<li id="approve-{{c.id}}" class="hidden {% if c.is_banned %}md:block{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast3('/unban_comment/{{c.id}}','remove-{{c.id}}','approve-{{c.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast3('/unban_comment/{{c.id}}','remove-{{c.id}}','approve-{{c.id}}')">
 						<i class="fas fa-check fa-sm fa-fw mr-4"></i>Approve
 					</button>
 				</li>
@@ -188,12 +188,12 @@
 
 				{% if v and v.admin_level==6 and v.id != c.author_id %}
 				<li id="unban-{{c.id}}" class="hidden {% if c.author.is_suspended %}md:block{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast3('/unban_user/{{c.author_id}}','ban-{{c.id}}','unban-{{c.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast3('/unban_user/{{c.author_id}}','ban-{{c.id}}','unban-{{c.id}}')">
 						<i class="fas fa-user-slash text-green-600 fa-sm fa-fw mr-4"></i>Unban user
 					</button>
 				</li>
 				<li id="ban-{{c.id}}" class="hidden {% if not c.author.is_suspended %}md:block{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" data-bs-toggle="modal" data-bs-target="#banModal" onclick="banModal('/comment/{{c.id}}', '{{ c.author.id }}', '{{c.author.username}}')">
+					<button class="dropdown-item dropdown-item-primary" data-bs-toggle="modal" data-bs-target="#banModal" onclick="banModal('/comment/{{c.id}}', '{{ c.author.id }}', '{{c.author.username}}')">
 						<i class="fas fa-user-slash text-red-600 fa-sm fa-fw mr-4"></i>Ban user
 					</button>
 				</li>
@@ -204,7 +204,7 @@
 					<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
 				</li>
 				<li class="hidden md:block">
-					<a href="{{c.oauth_app.permalink}}/comments" class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700">
+					<a href="{{c.oauth_app.permalink}}/comments" class="dropdown-item dropdown-item-primary">
 						<i class="fas fa-code fa-sm fa-fw mr-4"></i>API App
 					</a>
 				</li>
@@ -213,7 +213,7 @@
 					<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
 				</li>
 				<li class="text-red-600">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" data-bs-toggle="modal" data-bs-target="#reportCommentModal" onclick="report_commentModal('{{c.id}}','{{c.author.username}}',)">
+					<button class="dropdown-item dropdown-item-primary" data-bs-toggle="modal" data-bs-target="#reportCommentModal" onclick="report_commentModal('{{c.id}}','{{c.author.username}}',)">
 						<i class="fas fa-flag fa-sm fa-fw mr-4"></i>Report
 					</button>
 				</li>
diff --git a/files/templates/CHRISTMAS/comments/CommentEditForm.html b/files/templates/CHRISTMAS/comments/CommentEditForm.html
index 1be38ccac..50018df04 100644
--- a/files/templates/CHRISTMAS/comments/CommentEditForm.html
+++ b/files/templates/CHRISTMAS/comments/CommentEditForm.html
@@ -1,9 +1,9 @@
 <div id="comment-edit-{{c.id}}" class="hidden flex flex-wrap w-full">
 	<form id="comment-edit-form-{{c.id}}" action="/edit_comment/{{c.id}}" method="post" class="input-group" enctype="multipart/form-data"> 
 		<input type="hidden" name="formkey" value="{{v.formkey}}">
-		<div class="relative comment-box rounded-lg border border-gray-300 bg-gray-100 shadow-inner w-full"> 
-			<textarea {% if v.longpost %}minlength="280"{% endif %} maxlength="{% if v.bird %}140{% else %}10000{% endif %}" id="comment-edit-body-{{c.id}}" data-id="{{c.id}}" name="body" form="comment-edit-form-{{c.id}}" class="w-full rounded-t-md p-3 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none" aria-label="With textarea" placeholder="Add your comment..." rows="3">{{c.body}}</textarea> 
-			<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 mb-0">
+		<div class="relative comment-box rounded-lg border border-gray-300 dark:border-gray-900 bg-gray-100 dark:bg-white/[.05] shadow-inner w-full">
+			<textarea {% if v.longpost %}minlength="280"{% endif %} maxlength="{% if v.bird %}140{% else %}10000{% endif %}" id="comment-edit-body-{{c.id}}" data-id="{{c.id}}" name="body" form="comment-edit-form-{{c.id}}" class="w-full rounded-t-md p-3 bg-transparent focus:bg-white dark:focus:bg-transparent shadow-inner resize-y focus:outline-none placehoder:text-gray-400" aria-label="With textarea" placeholder="Add your comment..." rows="3">{{c.body}}</textarea> 
+			<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 dark:border-white/[.05] mb-0">
 				<li>
 					<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeBold('comment-edit-body-{{c.id}}')">
 						<i class="fas fa-bold fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Bold"></i>
diff --git a/files/templates/CHRISTMAS/comments/CommentForm.html b/files/templates/CHRISTMAS/comments/CommentForm.html
index 557cd69f0..a9fe69334 100644
--- a/files/templates/CHRISTMAS/comments/CommentForm.html
+++ b/files/templates/CHRISTMAS/comments/CommentForm.html
@@ -2,9 +2,9 @@
 	<input type="hidden" name="formkey" value="{{v.formkey}}">
 	<input type="hidden" name="parent_fullname" value="t2_{{p.id}}">
 	<input id="reply-form-submission-{{p.fullname}}" type="hidden" name="submission" value="{{p.id}}">
-	<div class="relative comment-box rounded-lg border border-gray-300 bg-gray-100 shadow-inner w-full">
-		<textarea maxlength="10000" id="reply-form-body-{{p.fullname}}" data-fullname="{{p.fullname}}" class="text-black w-full rounded-t-md p-3 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none placehoder:text-gray-400" id="comment-form" name="body" form="reply-to-{{p.fullname}}" aria-label="With textarea" placeholder="Add your comment..." rows="3" oninput="charLimit('reply-form-body-{{p.fullname}}','charcount-reply')"></textarea>
-		<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 mb-0">
+	<div class="relative comment-box rounded-lg border border-gray-300 dark:border-gray-900 bg-gray-100 dark:bg-white/[.05] shadow-inner w-full">
+		<textarea maxlength="10000" id="reply-form-body-{{p.fullname}}" data-fullname="{{p.fullname}}" class="w-full rounded-t-md p-3 bg-transparent focus:bg-white dark:focus:bg-transparent shadow-inner resize-y focus:outline-none placehoder:text-gray-400" id="comment-form" name="body" form="reply-to-{{p.fullname}}" aria-label="With textarea" placeholder="Add your comment..." rows="3" oninput="charLimit('reply-form-body-{{p.fullname}}','charcount-reply')"></textarea>
+		<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 dark:border-white/[.05] mb-0">
 			<li>
 				<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeBold('reply-form-body-{{p.fullname}}')">
 					<i class="fas fa-bold fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Bold"></i>
diff --git a/files/templates/CHRISTMAS/comments/CommentMessageReplyForm.html b/files/templates/CHRISTMAS/comments/CommentMessageReplyForm.html
index ca86e67d2..4678a06ae 100644
--- a/files/templates/CHRISTMAS/comments/CommentMessageReplyForm.html
+++ b/files/templates/CHRISTMAS/comments/CommentMessageReplyForm.html
@@ -2,9 +2,9 @@
 	<div id="comment-form-space-{{c.id}}" class="comment-write collapsed child">		
 		<form id="reply-to-message-{{c.id}}" action="/reply" method="post" class="input-group" enctype="multipart/form-data">
 			<input type="hidden" name="formkey" value="{{v.formkey}}"> 
-			<div class="relative comment-box rounded-lg border border-gray-300 bg-gray-100 shadow-inner w-full"> 
-				<textarea maxlength="10000" name="body" form="reply-to-t3_{{c.id}}" data-id="{{c.id}}" class="text-black w-full rounded-t-md p-3 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none placehoder:text-gray-400" placeholder="Write a reply..." id="reply-form-body-{{c.id}}" aria-label="With textarea" rows="3"></textarea>
-				<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 mb-0">
+			<div class="relative comment-box rounded-lg border border-gray-300 dark:border-gray-900 bg-gray-100 dark:bg-white/[.05] shadow-inner w-full"> 
+				<textarea maxlength="10000" name="body" form="reply-to-t3_{{c.id}}" data-id="{{c.id}}" class="w-full rounded-t-md p-3 bg-transparent focus:bg-white dark:focus:bg-transparent shadow-inner resize-y focus:outline-none placehoder:text-gray-400" placeholder="Write a reply..." id="reply-form-body-{{c.id}}" aria-label="With textarea" rows="3"></textarea>
+				<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 dark:border-white/[.05] mb-0">
 					<li>
 						<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeBold('reply-form-body-{{c.id}}')">
 							<i class="fas fa-bold fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Bold"></i>
@@ -34,7 +34,7 @@
 					<button type="button" class="px-4 py-2 text-sm font-bold text-gray-400 hover:text-gray-500" onclick="document.getElementById('reply-m-{{c.id}}').classList.add('hidden')">
 						Cancel
 					</button>
-					<button type="button" id="save-reply-to-{{c.id}}" class="ml-2 btn btn-green" onclick="post_reply('{{c.id}}');">
+					<button type="button" id="save-reply-to-{{c.id}}" class="ml-2 btn btn-primary" onclick="post_reply('{{c.id}}');">
 						Reply
 					</button>
 				</div>
diff --git a/files/templates/CHRISTMAS/comments/CommentReplyForm.html b/files/templates/CHRISTMAS/comments/CommentReplyForm.html
index 9b614d7e8..c92e9a036 100644
--- a/files/templates/CHRISTMAS/comments/CommentReplyForm.html
+++ b/files/templates/CHRISTMAS/comments/CommentReplyForm.html
@@ -3,9 +3,9 @@
 		<input type="hidden" name="formkey" value="{{v.formkey}}"> 
 		<input type="hidden" name="parent_fullname" value="{{c.fullname}}"> 
 		<input id="reply-form-submission-{{c.fullname}}" type="hidden" name="submission" value="{{c.post.id}}">
-		<div class="relative comment-box rounded-lg border border-gray-300 bg-gray-100 shadow-inner w-full"> 
-			<textarea {% if v.longpost %}minlength="280"{% endif %} maxlength="{% if v.bird %}140{% else %}10000{% endif %}" id="reply-form-body-{{c.fullname}}" data-fullname="{{c.fullname}}" name="body" form="reply-to-t3_{{c.id}}" class="text-black w-full rounded-t-md p-3 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none placehoder:text-gray-400" aria-label="With textarea" placeholder="Write your reply..." rows="3" oninput="charLimit('reply-form-body-{{c.fullname}}','charcount-{{c.id}}')"></textarea>
-			<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 mb-0">
+		<div class="relative comment-box rounded-lg border border-gray-300 dark:border-gray-900 bg-gray-100 dark:bg-white/[.05] shadow-inner w-full">
+			<textarea {% if v.longpost %}minlength="280"{% endif %} maxlength="{% if v.bird %}140{% else %}10000{% endif %}" id="reply-form-body-{{c.fullname}}" data-fullname="{{c.fullname}}" name="body" form="reply-to-t3_{{c.id}}" class="w-full rounded-t-md p-3 bg-transparent focus:bg-white dark:focus:bg-transparent shadow-inner resize-y focus:outline-none placehoder:text-gray-400" aria-label="With textarea" placeholder="Write your reply..." rows="3" oninput="charLimit('reply-form-body-{{c.fullname}}','charcount-{{c.id}}')"></textarea>
+			<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 dark:border-white/[.05] mb-0">
 				<li>
 					<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeBold('reply-form-body-{{c.fullname}}')">
 						<i class="fas fa-bold fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Bold"></i>
@@ -51,7 +51,7 @@
 				<button type="button" class="px-4 py-2 text-sm font-bold text-gray-400 hover:text-gray-500" onclick="document.getElementById('reply-to-{{c.id}}').classList.add('hidden')">
 					Cancel
 				</button>
-				<button type="button" id="save-reply-to-{{c.fullname}}" class="ml-2 btn btn-green" onclick="post_comment('{{c.fullname}}', '{{c.post.id}}');">
+				<button type="button" id="save-reply-to-{{c.fullname}}" class="ml-2 btn btn-primary" onclick="post_comment('{{c.fullname}}', '{{c.post.id}}');">
 					Comment
 				</button>
 			</div>
diff --git a/files/templates/CHRISTMAS/default.html b/files/templates/CHRISTMAS/default.html
index 3a58e034e..a1234f702 100644
--- a/files/templates/CHRISTMAS/default.html
+++ b/files/templates/CHRISTMAS/default.html
@@ -217,13 +217,13 @@
 
  </head>
 
- {% if v and (v.theme == 'theme-iron dark' or v.theme == 'theme-evergreen') %}
- 	{% set theme = v.theme %}
+ {% if v and v.theme2 %}
+ 	{% set theme = v.theme2 %}
  {% else %}
  	{% set theme = 'theme-iron dark' %}
  {% endif %}
 
- <body id="{% if request.path != '/comments' %}{% block pagetype %}frontpage{% endblock %}{% endif %}" class="{{ theme }} overflow-hidden overflow-y-auto sm:overflow-y-none antialiased bg-cover bg-center bg-gray-500 text-gray-900 dark:bg-gray-700 dark:text-gray-100">
+ <body id="{% if request.path != '/comments' %}{% block pagetype %}frontpage{% endblock %}{% endif %}" class="{{ theme }} overflow-hidden overflow-y-auto sm:overflow-y-none antialiased bg-cover bg-center bg-gray-500 text-black dark:bg-gray-700 dark:text-gray-100">
 
 {% block Banner %}
 {% endblock %}
@@ -257,7 +257,7 @@
 		{% endblock %}
 
 		<div class="w-full md:px-4">
-			<div class="w-full max-w-screen-2xl mx-auto mb-4 md:px-4 grid grid-cols-12 gap-6 bg-gray-300 md:bg-gray-200 dark:bg-gray-700 md:dark:bg-gray-800 rounded-b" id="main-content-row">
+			<div class="w-full max-w-screen-2xl mx-auto mb-4 md:px-4 grid grid-cols-12 gap-6 bg-gray-300 md:bg-gray-200 dark:bg-gray-800 rounded-b" id="main-content-row">
 
 				{% block searchText %}
 				{% endblock %}
@@ -348,7 +348,7 @@
 	<script>function formkey() {return '{{v.formkey}}';}</script>
 
 	<script>
-		var previousTheme = '{{ v.theme }}'.split(' ');
+		var previousTheme = '{{ v.theme2 }}'.split(' ');
 		function changeTheme(theme) {
 			const body = document.body;
 			// if previous selection has a value, remove them from body tag
diff --git a/files/templates/CHRISTMAS/dropdowns/NavbarExtraLinks.html b/files/templates/CHRISTMAS/dropdowns/NavbarExtraLinks.html
index 62d7675e5..809825252 100644
--- a/files/templates/CHRISTMAS/dropdowns/NavbarExtraLinks.html
+++ b/files/templates/CHRISTMAS/dropdowns/NavbarExtraLinks.html
@@ -5,12 +5,12 @@
 	</button>
 	<ul class="dropdown-menu w-56 bg-gray-900 rounded-md rounded-t-none shadow-lg" aria-labelledby="dropdownMenuButton" x-placement="bottom-start">
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/shop">
+			<a class="dropdown-item dropdown-item-primary" href="/shop">
 				<i class="fas fa-store fa-sm fa-fw mr-4"></i>Shop
 			</a>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/leaderboard">
+			<a class="dropdown-item dropdown-item-primary" href="/leaderboard">
 				<i class="fas fa-trophy fa-sm fa-fw mr-4"></i>Leaderboards
 			</a>
 		</li>
@@ -18,17 +18,17 @@
 			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/changelog">
+			<a class="dropdown-item dropdown-item-primary" href="/changelog">
 				<i class="fas fa-clipboard fa-sm fa-fw mr-4"></i>Changelog
 			</a>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="https://github.com/Aevann1/Drama">
+			<a class="dropdown-item dropdown-item-primary" href="https://github.com/Aevann1/Drama">
 				<i class="fab fa-github fa-sm fa-fw mr-4"></i>Source Code
 			</a>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/post/18459/">
+			<a class="dropdown-item dropdown-item-primary" href="/post/18459/">
 				<i class="fas fa-bug fa-sm fa-fw mr-4"></i>Report Bugs
 			</a>
 		</li>
@@ -36,17 +36,17 @@
 			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/discord">
+			<a class="dropdown-item dropdown-item-primary" href="/discord">
 				<i class="fab fa-discord fa-sm fa-fw mr-4"></i>Discord Server
 			</a>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/assets/CHRISTMAS/Drama.apk?v=202">
+			<a class="dropdown-item dropdown-item-primary" href="/assets/CHRISTMAS/Drama.apk?v=202">
 				<i class="fab fa-android fa-sm fa-fw mr-4"></i>Android App
 			</a>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/archives">
+			<a class="dropdown-item dropdown-item-primary" href="/archives">
 				<i class="fas fa-book fa-sm fa-fw mr-4"></i>Archives
 			</a>
 		</li>
@@ -54,7 +54,7 @@
 			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/rules">
+			<a class="dropdown-item dropdown-item-primary" href="/rules">
 				<i class="fas fa-balance-scale fa-sm fa-fw mr-4"></i>Community Rules
 			</a>
 		</li>
diff --git a/files/templates/CHRISTMAS/dropdowns/NavbarProfile.html b/files/templates/CHRISTMAS/dropdowns/NavbarProfile.html
index 1ac1f1c6d..6da0efc0c 100644
--- a/files/templates/CHRISTMAS/dropdowns/NavbarProfile.html
+++ b/files/templates/CHRISTMAS/dropdowns/NavbarProfile.html
@@ -33,12 +33,12 @@
 			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/@me">
+			<a class="dropdown-item dropdown-item-primary" href="/@me">
 				<i class="fas fa-user fa-sm fa-fw mr-4"></i>Profile
 			</a>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/notifications{% if v.notifications_count and v.notifications_count == v.post_notifications_count %}?posts=true{% endif %}">
+			<a class="dropdown-item dropdown-item-primary" href="/notifications{% if v.notifications_count and v.notifications_count == v.post_notifications_count %}?posts=true{% endif %}">
 				<i class="fas fa-envelope fa-sm fa-fw mr-4"></i>Inbox
 				{% if v.notifications_count %}<span class="text-red-500">{{ v.notifications_count }}</span>{% endif %}
 			</a>
@@ -47,12 +47,12 @@
 			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/@{{ v.username }}">
+			<a class="dropdown-item dropdown-item-primary" href="/@{{ v.username }}">
 				<i class="fas fa-pen fa-sm fa-fw mr-4"></i>Posts
 			</a>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/@{{ v.username }}/comments">
+			<a class="dropdown-item dropdown-item-primary" href="/@{{ v.username }}/comments">
 				<i class="fas fa-comments-alt fa-sm fa-fw mr-4"></i>Comments
 			</a>
 		</li>
@@ -61,11 +61,11 @@
 		</li>
 		<li>
 			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 hover:text-yellow-900 bg-gradient-to-t hover:from-yellow-600 hover:to-yellow-500 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-yellow-600 focus:to-yellow-500" href="https://marsey1.gumroad.com/l/tfcvri">
-				<i class="fas fa-arrow-alt-up fa-sm fa-fw mr-4"></i>rDrama Gumroad
+				<i class="fas fa-arrow-alt-up fa-sm fa-fw mr-4"></i>Donate
 			</a>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/settings">
+			<a class="dropdown-item dropdown-item-primary" href="/settings">
 				<i class="fas fa-cog fa-sm fa-fw mr-4"></i>Settings
 			</a>
 		</li>
@@ -73,7 +73,7 @@
 			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
 		</li>
 		<li>
-			<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" data-bs-toggle="modal" data-bs-target="#themePickerModal">
+			<button class="dropdown-item dropdown-item-primary" data-bs-toggle="modal" data-bs-target="#themePickerModal">
 				<i class="fas fa-paint-brush fa-sm fa-fw mr-4"></i>Pick theme
 			</button>
 		</li>
@@ -81,7 +81,7 @@
 			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
 		</li>
 		<li>
-			<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast('/logout', '1')">
+			<button class="dropdown-item dropdown-item-primary" onclick="post_toast('/logout', '1')">
 				<i class="fas fa-power-off fa-sm fa-fw mr-4"></i>Log out
 			</button>
 		</li>
diff --git a/files/templates/CHRISTMAS/dropdowns/ProfileDropdown.html b/files/templates/CHRISTMAS/dropdowns/ProfileDropdown.html
index 4032194f2..70741aba9 100644
--- a/files/templates/CHRISTMAS/dropdowns/ProfileDropdown.html
+++ b/files/templates/CHRISTMAS/dropdowns/ProfileDropdown.html
@@ -4,32 +4,32 @@
 	</button>
 	<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownProfile-Actions">
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/@{{ u.username }}/upvoters">
+			<a class="dropdown-item dropdown-item-primary" href="/@{{ u.username }}/upvoters">
 				<i class="fas fa-kiss-wink-heart fa-sm fa-fw mr-4"></i>
 				Simps
 			</a>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/@{{ u.username }}/downvoters">
+			<a class="dropdown-item dropdown-item-primary" href="/@{{ u.username }}/downvoters">
 				<i class="fas fa-tired fa-sm fa-fw mr-4"></i>
 				Haters
 			</a>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/@{{ u.username }}/upvoting">
+			<a class="dropdown-item dropdown-item-primary" href="/@{{ u.username }}/upvoting">
 				<i class="fas fa-grin-hearts fa-sm fa-fw mr-4"></i>
 				Simps for
 			</a>
 		</li>
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/@{{ u.username }}/downvoting">
+			<a class="dropdown-item dropdown-item-primary" href="/@{{ u.username }}/downvoting">
 				<i class="fas fa-angry fa-sm fa-fw mr-4"></i>
 				Hates
 			</a>
 		</li>
 		{% if v and v.id == u.id %}
 		<li>
-			<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="/views">
+			<a class="dropdown-item dropdown-item-primary" href="/views">
 				<i class="fas fa-binoculars fa-sm fa-fw mr-4"></i>
 				Profile views
 			</a>
@@ -40,13 +40,13 @@
 			<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
 		</li>
 		<li>
-			<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast('/@{{u.username}}/suicide')">
+			<button class="dropdown-item dropdown-item-primary" onclick="post_toast('/@{{u.username}}/suicide')">
 				<i class="fas fa-briefcase-medical fa-sm fa-fw mr-4"></i>
 				Get them help
 			</button>
 		</li>
 		<li>
-			<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" data-bs-toggle="modal" data-bs-target="#giftCoinsModal">
+			<button class="dropdown-item dropdown-item-primary" data-bs-toggle="modal" data-bs-target="#giftCoinsModal">
 				<i class="fas fa-gift fa-sm fa-fw mr-4"></i>
 				Gift {{'COINS_NAME' | app_config}}
 			</button>
diff --git a/files/templates/CHRISTMAS/dropdowns/SearchSorts.html b/files/templates/CHRISTMAS/dropdowns/SearchSorts.html
index 886018729..72ded9bfc 100644
--- a/files/templates/CHRISTMAS/dropdowns/SearchSorts.html
+++ b/files/templates/CHRISTMAS/dropdowns/SearchSorts.html
@@ -11,32 +11,32 @@
 		</button>
 		<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownSearchSortsButton" x-placement="bottom-start">
 			<li class="{% if t=='hour' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=hour">
+				<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=hour">
 					<i class="fas fa-clock fa-sm fa-fw mr-4"></i>Hour
 				</a>
 			</li>
 			<li class="{% if t=='day' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=day">
+				<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=day">
 					<i class="fas fa-calendar-day fa-sm fa-fw mr-4"></i>Day
 				</a>
 			</li>
 			<li class="{% if t=='week' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=week">
+				<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=week">
 					<i class="fas fa-calendar-week fa-sm fa-fw mr-4"></i>Week
 				</a>
 			</li>
 			<li class="{% if t=='month' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=month">
+				<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=month">
 					<i class="fas fa-calendar-alt fa-sm fa-fw mr-4"></i>Month
 				</a>
 			</li>
 			<li class="{% if t=='year' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=year">
+				<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=year">
 					<i class="fas fa-calendar fa-sm fa-fw mr-4"></i>Year
 				</a>
 			</li>
 			<li class="{% if t=='all' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=all">
+				<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=all">
 					<i class="fas fa-infinity fa-sm fa-fw mr-4"></i>All
 				</a>
 			</li>
@@ -55,37 +55,37 @@
 		</button>
 		<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownSearchSortsTypeButton" x-placement="bottom-start">
 			<li class="{% if sort == 'top' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=top&q={{query | urlencode}}&t={{t}}">
+				<a class="dropdown-item dropdown-item-primary" href="?sort=top&q={{query | urlencode}}&t={{t}}">
 					<i class="fas fa-arrow-alt-circle-up fa-sm fa-fw mr-4"></i>Top
 				</a>
 			</li>
 			<li class="{% if sort == 'bottom' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=bottom&q={{query | urlencode}}&t={{t}}}">
+				<a class="dropdown-item dropdown-item-primary" href="?sort=bottom&q={{query | urlencode}}&t={{t}}}">
 					<i class="fas fa-arrow-alt-circle-down fa-sm fa-fw mr-4"></i>Bottom
 				</a>
 			</li>
 			<li class="{% if sort == 'new' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=new&q={{query | urlencode}}&t={{t}}">
+				<a class="dropdown-item dropdown-item-primary" href="?sort=new&q={{query | urlencode}}&t={{t}}">
 					<i class="fas fa-sparkles fa-sm fa-fw mr-4"></i>New
 				</a>
 			</li>
 			<li class="{% if sort == 'old' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=old&q={{query | urlencode}}&t={{t}}">
+				<a class="dropdown-item dropdown-item-primary" href="?sort=old&q={{query | urlencode}}&t={{t}}">
 					<i class="fas fa-book fa-sm fa-fw mr-4"></i>Old
 				</a>
 			</li>
 			<li class="{% if sort == 'controversial' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=fiery&q={{query | urlencode}}&t={{t}}">
+				<a class="dropdown-item dropdown-item-primary" href="?sort=fiery&q={{query | urlencode}}&t={{t}}">
 					<i class="fas fa-bullhorn fa-sm fa-fw mr-4"></i>Controversial
 				</a>
 			</li>
 			<li class="{% if sort == 'comments' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=comments&q={{query | urlencode}}&t={{t}}">
+				<a class="dropdown-item dropdown-item-primary" href="?sort=comments&q={{query | urlencode}}&t={{t}}">
 					<i class="fas fa-comments fa-sm fa-fw mr-4"></i>Comments
 				</a>
 			</li>
 			<li class="{% if sort == 'random' %}hidden{% endif %}">
-				<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=random&q={{query | urlencode}}&t={{t}}">
+				<a class="dropdown-item dropdown-item-primary" href="?sort=random&q={{query | urlencode}}&t={{t}}">
 					<i class="fas fa-question fa-sm fa-fw mr-4"></i>Random
 				</a>
 			</li>
diff --git a/files/templates/CHRISTMAS/dropdowns/SubmissionSorts.html b/files/templates/CHRISTMAS/dropdowns/SubmissionSorts.html
index a107df4be..a08f164c9 100644
--- a/files/templates/CHRISTMAS/dropdowns/SubmissionSorts.html
+++ b/files/templates/CHRISTMAS/dropdowns/SubmissionSorts.html
@@ -11,32 +11,32 @@
 					</button>
 					<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownSubmissionSortButton" x-placement="bottom-start">
 						<li class="{% if t=='hour' %}hidden{% endif %}">
-							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=hour">
+							<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=hour">
 								<i class="fas fa-clock fa-sm fa-fw mr-4"></i>Hour
 							</a>
 						</li>
 						<li class="{% if t=='day' %}hidden{% endif %}">
-							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=day">
+							<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=day">
 								<i class="fas fa-calendar-day fa-sm fa-fw mr-4"></i>Day
 							</a>
 						</li>
 						<li class="{% if t=='week' %}hidden{% endif %}">
-							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=week">
+							<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=week">
 								<i class="fas fa-calendar-week fa-sm fa-fw mr-4"></i>Week
 							</a>
 						</li>
 						<li class="{% if t=='month' %}hidden{% endif %}">
-							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=month">
+							<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=month">
 								<i class="fas fa-calendar-alt fa-sm fa-fw mr-4"></i>Month
 							</a>
 						</li>
 						<li class="{% if t=='year' %}hidden{% endif %}">
-							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=year">
+							<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=year">
 								<i class="fas fa-calendar fa-sm fa-fw mr-4"></i>Year
 							</a>
 						</li>
 						<li class="{% if t=='all' %}hidden{% endif %}">
-							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort={{sort}}&t=all">
+							<a class="dropdown-item dropdown-item-primary" href="?sort={{sort}}&t=all">
 								<i class="fas fa-infinity fa-sm fa-fw mr-4"></i>All
 							</a>
 						</li>
@@ -55,37 +55,37 @@
 					</button>
 					<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownSubmissionSortTypeButton" x-placement="bottom-start">
 						<li class="{% if sort == 'hot' %}hidden{% endif %}">
-							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=hot&t={{t}}">
+							<a class="dropdown-item dropdown-item-primary" href="?sort=hot&t={{t}}">
 								<i class="fas fa-fire fa-sm fa-fw mr-4"></i>Hot
 							</a>
 						</li>
 						<li class="{% if sort == 'top' %}hidden{% endif %}">
-							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=top&t={{t}}">
+							<a class="dropdown-item dropdown-item-primary" href="?sort=top&t={{t}}">
 								<i class="fas fa-arrow-alt-circle-up fa-sm fa-fw mr-4"></i>Top
 							</a>
 						</li>
 						<li class="{% if sort == 'bottom' %}hidden{% endif %}">
-							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=bottom&t={{t}}">
+							<a class="dropdown-item dropdown-item-primary" href="?sort=bottom&t={{t}}">
 								<i class="fas fa-arrow-alt-circle-down fa-sm fa-fw mr-4"></i>Bottom
 							</a>
 						</li>
 						<li class="{% if sort == 'new' %}hidden{% endif %}">
-							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=new&t={{t}}">
+							<a class="dropdown-item dropdown-item-primary" href="?sort=new&t={{t}}">
 								<i class="fas fa-sparkles fa-sm fa-fw mr-4"></i>New
 							</a>
 						</li>
 						<li class="{% if sort == 'old' %}hidden{% endif %}">
-							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=old&t={{t}}">
+							<a class="dropdown-item dropdown-item-primary" href="?sort=old&t={{t}}">
 								<i class="fas fa-book fa-sm fa-fw mr-4"></i>Old
 							</a>
 						</li>
 						<li class="{% if sort == 'controversial' %}hidden{% endif %}">
-							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=controversial&t={{t}}">
+							<a class="dropdown-item dropdown-item-primary" href="?sort=controversial&t={{t}}">
 								<i class="fas fa-bullhorn fa-sm fa-fw mr-4"></i>Controversial
 							</a>
 						</li>
 						<li class="{% if sort == 'comments' %}hidden{% endif %}">
-							<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="?sort=comments&t={{t}}">
+							<a class="dropdown-item dropdown-item-primary" href="?sort=comments&t={{t}}">
 								<i class="fas fa-comments fa-sm fa-fw mr-4"></i>Comments
 							</a>
 						</li>
diff --git a/files/templates/CHRISTMAS/emoji_modal.html b/files/templates/CHRISTMAS/emoji_modal.html
index f2286492a..57f4a0d36 100644
--- a/files/templates/CHRISTMAS/emoji_modal.html
+++ b/files/templates/CHRISTMAS/emoji_modal.html
@@ -1,7 +1,7 @@
 <div id="form" class="d-none"></div>
 <div class="modal fade" id="emojiModal" tabindex="-1" role="dialog" aria-labelledby="emojiModalTitle" aria-hidden="true">
 	<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered p-2 py-5" role="document">
-		<div class="modal-content bg-gray-100 rounded-md shadow-lg" id="emojiTabs">
+		<div class="modal-content bg-gray-100 dark:bg-gray-700 rounded-md shadow-lg" id="emojiTabs">
 			<div class="modal-header">
 				<div>
 					<ul class="nav nav-pills py-2">
@@ -35,7 +35,7 @@
 					</ul>
 				</div>
 				<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-					<i class="fal fa-times text-muted"></i>
+					<i class="fal fa-times text-gray-700 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-400"></i>
 				</button>
 			</div>
 
diff --git a/files/templates/CHRISTMAS/gif_modal.html b/files/templates/CHRISTMAS/gif_modal.html
index 98a160890..5b3986c1e 100644
--- a/files/templates/CHRISTMAS/gif_modal.html
+++ b/files/templates/CHRISTMAS/gif_modal.html
@@ -1,7 +1,7 @@
 <div class="modal fade" id="gifModal" tabindex="-1" role="dialog" aria-labelledby="gifModalTitle" aria-hidden="true">
 	<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered p-5" role="document">
-		<div class="modal-content mx-auto max-w-3xl bg-gray-100 rounded-md shadow-lg">
-			<div class="flex justify-between border-b border-gray-300 p-3">
+		<div class="modal-content mx-auto max-w-3xl bg-gray-100 dark:bg-gray-700 rounded-md shadow-lg">
+			<div class="flex justify-between border-b border-gray-300 dark:border-gray-900 p-3">
 				<div class="form-group flex items-center w-full mb-0">
 					<div id="gifs-back-btn"></div>
 					<input type="text" class="form-input w-full" id="gifSearch" placeholder="Search and press enter" onchange="getGif(this.value);">
diff --git a/files/templates/CHRISTMAS/header-tw.html b/files/templates/CHRISTMAS/header-tw.html
index b21e8b713..cf4a80560 100644
--- a/files/templates/CHRISTMAS/header-tw.html
+++ b/files/templates/CHRISTMAS/header-tw.html
@@ -144,7 +144,7 @@
       </form>
       {% if v %}
       <!-- Submit post link -->
-      <a href="/submit" class="w-full btn btn-red mb-4">
+      <a href="/submit" class="w-full btn btn-primary mb-4">
         <i class="fas fa-pen fa-sm fa-fw mr-2"></i>
         Create post
       </a>
diff --git a/files/templates/CHRISTMAS/home.html b/files/templates/CHRISTMAS/home.html
index 0139b8b4d..270c55644 100644
--- a/files/templates/CHRISTMAS/home.html
+++ b/files/templates/CHRISTMAS/home.html
@@ -25,7 +25,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="col-span-full xl:col-span-9">
+<div class="col-span-full xl:col-span-9 dark:bg-gray-700 md:dark:bg-gray-800">
 
 	<ul class="flex flex-col sm:py-4 my-2.5 sm:my-0" id="posts">
 		{% include "CHRISTMAS/submission_listing.html" %}
diff --git a/files/templates/CHRISTMAS/home_comments.html b/files/templates/CHRISTMAS/home_comments.html
index 6fbdf61ac..c4c5a341c 100644
--- a/files/templates/CHRISTMAS/home_comments.html
+++ b/files/templates/CHRISTMAS/home_comments.html
@@ -23,7 +23,7 @@
 
 {% block content %}
 	<!-- Comments list -->
-	<div class="col-span-full px-2.5 md:px-0 dark:bg-gray-800" id="posts">
+	<div class="col-span-full px-2.5 md:px-0" id="posts">
 		{% include "CHRISTMAS/comments.html" %}
 	</div>
 	<!-- Pagination -->
diff --git a/files/templates/CHRISTMAS/leaderboard.html b/files/templates/CHRISTMAS/leaderboard.html
index 74d5aaf69..a5d2b423b 100644
--- a/files/templates/CHRISTMAS/leaderboard.html
+++ b/files/templates/CHRISTMAS/leaderboard.html
@@ -15,32 +15,32 @@
 				</small>
 				<ul class="hidden text-gray-500 text-sm flex items-center space-x-3 leading-normal mb-0">
 					<li>
-						<a class="{% if not '=true' in request.full_path %}font-bold text-red-600{% endif %}" href="/notifications">
+						<a class="{% if not '=true' in request.full_path %}font-bold text-primary{% endif %}" href="/notifications">
 							Wealthiest
 						</a>
 					</li>
 					<li>
-						<a class="{% if '/notifications?posts=true' in request.full_path %}font-bold text-red-600{% endif %}" href="/notifications?posts=true">
+						<a class="{% if '/notifications?posts=true' in request.full_path %}font-bold text-primary{% endif %}" href="/notifications?posts=true">
 							Spenders
 						</a>
 					</li>
 					<li>
-						<a class="{% if '/notifications?messages=true' in request.full_path %}font-bold text-red-600{% endif %}" href="/notifications?messages=true">
+						<a class="{% if '/notifications?messages=true' in request.full_path %}font-bold text-primary{% endif %}" href="/notifications?messages=true">
 							Followers
 						</a>
 					</li>
 					<li>
-						<a class="{% if '/notifications?messages=true' in request.full_path %}font-bold text-red-600{% endif %}" href="/notifications?messages=true">
+						<a class="{% if '/notifications?messages=true' in request.full_path %}font-bold text-primary{% endif %}" href="/notifications?messages=true">
 							Posts
 						</a>
 					</li>
 					<li>
-						<a class="{% if '/notifications?messages=true' in request.full_path %}font-bold text-red-600{% endif %}" href="/notifications?messages=true">
+						<a class="{% if '/notifications?messages=true' in request.full_path %}font-bold text-primary{% endif %}" href="/notifications?messages=true">
 							Comments
 						</a>
 					</li>
 					<li>
-						<a class="{% if '/notifications?messages=true' in request.full_path %}font-bold text-red-600{% endif %}" href="/notifications?messages=true">
+						<a class="{% if '/notifications?messages=true' in request.full_path %}font-bold text-primary{% endif %}" href="/notifications?messages=true">
 							Awards
 						</a>
 					</li>
diff --git a/files/templates/CHRISTMAS/login.html b/files/templates/CHRISTMAS/login.html
index 90d972957..464f53bd0 100644
--- a/files/templates/CHRISTMAS/login.html
+++ b/files/templates/CHRISTMAS/login.html
@@ -24,7 +24,7 @@
 
 </head>
 
-<body class="relative h-full bg-gradient-to-t from-gray-500 to-gray-400">
+<body class="theme-iron dark relative h-full bg-gradient-to-t from-gray-500 to-gray-400">
 
 	<div class="relative min-h-full flex flex-col items-center justify-center pt-28 pb-12 px-4 sm:px-6 lg:px-8">
 
diff --git a/files/templates/CHRISTMAS/mobile_navigation_bar.html b/files/templates/CHRISTMAS/mobile_navigation_bar.html
index 0d686376b..40236da70 100644
--- a/files/templates/CHRISTMAS/mobile_navigation_bar.html
+++ b/files/templates/CHRISTMAS/mobile_navigation_bar.html
@@ -1,6 +1,6 @@
 <div class="container inline-flex sm:hidden">
 
-	<div class="z-100 fixed shadow-sm bottom-0 w-full bg-gradient-to-t from-gray-200 to-gray-100 dark:from-gray-800 dark:to-gray-700 border-t border-gray-300 dark:border-gray-900 px-4 py-3" id="mobile-bottom-navigation-bar" style="transition: transform cubic-bezier(0, 0, 0.2, 1) 220ms;">
+	<div class="z-100 fixed shadow-sm bottom-0 w-full dark:bg-none bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-gray-700 border-t border-gray-300 dark:border-gray-900 px-4 py-3" id="mobile-bottom-navigation-bar" style="transition: transform cubic-bezier(0, 0, 0.2, 1) 220ms;">
 
 		<ul class="flex flex-nowrap justify-around text-shadow mb-0">
 			<li>
diff --git a/files/templates/CHRISTMAS/modals/ModalCommentActions.html b/files/templates/CHRISTMAS/modals/ModalCommentActions.html
index 0fdf2b052..cb23f2196 100644
--- a/files/templates/CHRISTMAS/modals/ModalCommentActions.html
+++ b/files/templates/CHRISTMAS/modals/ModalCommentActions.html
@@ -45,7 +45,7 @@
 					</li>
 					<li>
 						<button class="btn btn-gray w-full text-left" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#reportCommentModal" onclick="report_commentModal('{{c.id}}','{{c.author.username}}')">
-							<i class="fas fa-flag text-center text-muted mr-3"></i>Report
+							<i class="fas fa-flag fa-fw mr-4"></i>Report
 						</button>
 					</li>
 					{% if v and c.parent_submission and c.author_id==v.id %}
diff --git a/files/templates/CHRISTMAS/modals/ModalReportComment.html b/files/templates/CHRISTMAS/modals/ModalReportComment.html
index b4c4c86bb..499ccaf60 100644
--- a/files/templates/CHRISTMAS/modals/ModalReportComment.html
+++ b/files/templates/CHRISTMAS/modals/ModalReportComment.html
@@ -1,8 +1,8 @@
 <div class="modal fade" id="reportCommentModal" tabindex="-1" role="dialog" aria-labelledby="reportCommentModalTitle" aria-hidden="true">
 	<div class="modal-dialog modal-dialog-centered mx-auto max-w-xl" role="document">
-		<div class="modal-content mx-auto max-w-xl bg-gray-100 rounded-md shadow-lg">
+		<div class="modal-content mx-auto max-w-xl bg-gray-100 dark:bg-gray-700 rounded-md shadow-lg">
 			<div class="modal-header">
-				<h5 class="font-bold text-xl text-black font-heading leading-normal">Report <span id="comment-author"></span>'s comment</h5>
+				<h5 class="font-bold text-xl font-heading leading-normal">Report <span id="comment-author"></span>'s comment</h5>
 				<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
 					<span aria-hidden="true"><i class="far fa-times"></i></span>
 				</button>
@@ -13,7 +13,7 @@
 					<small class="text-gray-500">Please enter a reason for reporting below.</small>
 					<input maxlength="100" id="reason-comment" class="mt-3 form-input" placeholder="e.g. this comment violates community standards">
 				</div>
-				<div class="flex justify-end space-x-2 border-t border-gray-300 p-4">
+				<div class="flex justify-end space-x-2 border-t border-gray-300 dark:border-gray-800 p-4">
 					<button type="button" class="px-4 py-2 text-sm font-bold text-gray-500 hover:text-gray-700" data-bs-dismiss="modal">
 						Cancel
 					</button>
@@ -27,7 +27,7 @@
 					<div class="font-bold text-lg leading-normal">Thank you for reporting this comment!</div>
 					<small class="text-gray-500">By the power of the mop, our internet janitors will take it from here.</small>
 				</div>
-				<div class="flex justify-end space-x-2 border-t border-gray-400 p-4">
+				<div class="flex justify-end space-x-2 border-t border-gray-300 dark:border-gray-800 p-4">
 					<button type="button" class="px-4 py-2 text-sm font-bold text-gray-500 hover:text-gray-400" data-bs-dismiss="modal">
 						Close
 					</button>
diff --git a/files/templates/CHRISTMAS/modals/ModalThemePicker.html b/files/templates/CHRISTMAS/modals/ModalThemePicker.html
index 0c2eeae44..c9ec066a6 100644
--- a/files/templates/CHRISTMAS/modals/ModalThemePicker.html
+++ b/files/templates/CHRISTMAS/modals/ModalThemePicker.html
@@ -11,26 +11,26 @@
 				<!-- List of themes -->
 				<div class="flex flex-wrap -mx-2 overflow-hidden">
 					<!-- Evergreen -->
-					<div class="my-2 px-2 w-1/2 overflow-hidden lg:w-1/4 flex items-center justify-center">
-						<input hidden name="kind" value="theme-evergreen" type="radio" id="evergreen-theme" class="peer" onchange="changeTheme(['theme-evergreen']); post_toast2('/settings/profile?theme='+value, '1')" {% if v.theme == 'theme-evergreen'%}checked{% endif %}>
-						<label for="evergreen-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-primary rounded-lg overflow-hidden">
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-evergreen" type="radio" id="evergreen-theme" class="peer" onchange="changeTheme(['theme-evergreen']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-evergreen'%}checked{% endif %}>
+						<label for="evergreen-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
 							<div class="flex flex-col w-full h-full bg-[#37523e]">
 								<div class="h-3 w-full bg-[#37523e]"></div>
 								<div class="h-4 w-full bg-[#d1dbd5]"></div>
 								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#e5ebe7] p-2 mb-0">
 									<li class="flex">
 										<i class="fas fa-arrow-alt-up text-[8px] text-[#dc2626]"></i>
-										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/50"></div>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
 										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#dc2626]"></div>
 									</li>
 									<li class="flex">
-										<i class="fas fa-arrow-alt-up text-[8px] text-gray-400"></i>
-										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/50"></div>
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
 										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
 									</li>
 									<li class="flex">
-										<i class="fas fa-arrow-alt-up text-[8px] text-gray-400"></i>
-										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/50"></div>
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
 										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
 									</li>
 								</ul>
@@ -41,9 +41,9 @@
 						</label>
 					</div>
 					<!-- Iron -->
-					<div class="my-2 px-2 w-1/2 overflow-hidden lg:w-1/4 flex items-center justify-center">
-						<input hidden name="kind" value="theme-iron dark" type="radio" id="iron-theme" class="peer" onchange="changeTheme(['theme-iron','dark']); post_toast2('/settings/profile?theme='+value, '1')" {% if v.theme == 'theme-iron dark'%}checked{% endif %}>
-						<label for="iron-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-primary rounded-lg overflow-hidden">
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-iron dark" type="radio" id="iron-theme-dark" class="peer" onchange="changeTheme(['theme-iron','dark']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-iron dark'%}checked{% endif %}>
+						<label for="iron-theme-dark" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
 							<div class="flex flex-col w-full h-full bg-[#3f3f46]">
 								<div class="h-3 w-full bg-[#3f3f46]"></div>
 								<div class="h-4 w-full bg-[#27272a]"></div>
@@ -54,19 +54,559 @@
 										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#db2777]"></div>
 									</li>
 									<li class="flex">
-										<i class="fas fa-arrow-alt-up text-[8px] text-gray-400"></i>
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
 										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
 										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
 									</li>
 									<li class="flex">
-										<i class="fas fa-arrow-alt-up text-[8px] text-gray-400"></i>
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
 										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
 										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
 									</li>
 								</ul>
 							</div>
 							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
-								<span class="font-bold text-base">Iron (Dark)</span>
+								<span class="font-bold text-base">Iron</span>
+							</div>
+						</label>
+					</div>
+					<!-- Savile Row -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-savile-row" type="radio" id="savile-row-theme" class="peer" onchange="changeTheme(['theme-savile-row']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-savile-row' %}checked{% endif %}>
+						<label for="savile-row-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#524737]">
+								<div class="h-3 w-full bg-[#524737]"></div>
+								<div class="h-4 w-full bg-[#dbd8d1]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#ebe9e5] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#155e75]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#155e75]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Savile Row</span>
+							</div>
+						</label>
+					</div>
+					<!-- Osmium -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-dramblr" type="radio" id="dramblr-theme" class="peer" onchange="changeTheme(['theme-dramblr']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-dramblr'%}checked{% endif %}>
+						<label for="dramblr-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#334155]">
+								<div class="h-3 w-full bg-[#334155]"></div>
+								<div class="h-4 w-full bg-[#cbd5e1]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#e2e8f0] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#0284c7]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#0284c7]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Osmium</span>
+							</div>
+						</label>
+					</div>
+					<!-- Dramblr -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-dramblr dark" type="radio" id="dramblr-theme-dark" class="peer" onchange="changeTheme(['theme-dramblr','dark']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-dramblr dark'%}checked{% endif %}>
+						<label for="dramblr-theme-dark" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#334155]">
+								<div class="h-3 w-full bg-[#334155]"></div>
+								<div class="h-4 w-full bg-[#1e293b]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#1e293b] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#0284c7]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#0284c7]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Dramblr</span>
+							</div>
+						</label>
+					</div>
+					<!-- Canary -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-canary" type="radio" id="canary-theme" class="peer" onchange="changeTheme(['theme-canary']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-canary'%}checked{% endif %}>
+						<label for="canary-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#a16207]">
+								<div class="h-3 w-full bg-[#a16207]"></div>
+								<div class="h-4 w-full bg-[#fde047]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#fff8ac] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#0284c7]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#0284c7]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Canary</span>
+							</div>
+						</label>
+					</div>
+					<!-- Confection -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-bubblegum" type="radio" id="bubblegum-theme" class="peer" onchange="changeTheme(['theme-bubblegum']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-bubblegum'%}checked{% endif %}>
+						<label for="bubblegum-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#be185d]">
+								<div class="h-3 w-full bg-[#be185d]"></div>
+								<div class="h-4 w-full bg-[#f9a8d4]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#fcdff0] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#ec4899]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#ec4899]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Confection</span>
+							</div>
+						</label>
+					</div>
+					<!-- Mocha -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-mocha" type="radio" id="mocha-theme" class="peer" onchange="changeTheme(['theme-mocha']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-mocha'%}checked{% endif %}>
+						<label for="mocha-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#524c37]">
+								<div class="h-3 w-full bg-[#524c37]"></div>
+								<div class="h-4 w-full bg-[#dbdad1]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#ebe9e5] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#059669]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#059669]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Mocha</span>
+							</div>
+						</label>
+					</div>
+					<!-- Blood Orange -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-blood-orange" type="radio" id="blood-orange-theme" class="peer" onchange="changeTheme(['theme-blood-orange']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-blood-orange'%}checked{% endif %}>
+						<label for="blood-orange-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#4338ca]">
+								<div class="h-3 w-full bg-[#4338ca]"></div>
+								<div class="h-4 w-full bg-[#a5b4fc]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#c7d2fe] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#f97316]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#f97316]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Blood Orange</span>
+							</div>
+						</label>
+					</div>
+					<!-- Choco Mint -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-choco-mint dark" type="radio" id="choco-mint-theme" class="peer" onchange="changeTheme(['theme-choco-mint','dark']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-choco-mint dark' %}checked{% endif %}>
+						<label for="choco-mint-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#524c37]">
+								<div class="h-3 w-full bg-[#524c37]"></div>
+								<div class="h-4 w-full bg-[#37341f]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#37341f] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#34d399]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#34d399]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Choco Pistachio</span>
+							</div>
+						</label>
+					</div>
+					<!-- Limon -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-limon" type="radio" id="limon-theme" class="peer" onchange="changeTheme(['theme-limon']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-limon'%}checked{% endif %}>
+						<label for="limon-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#4d7c0f]">
+								<div class="h-3 w-full bg-[#4d7c0f]"></div>
+								<div class="h-4 w-full bg-[#bef264]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#d9f99d] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#ca8a04]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#ca8a04]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Limon</span>
+							</div>
+						</label>
+					</div>
+					<!-- Lake Tahoe -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-lake-tahoe dark" type="radio" id="lake-tahoe-theme" class="peer" onchange="changeTheme(['theme-lake-tahoe','dark']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-lake-tahoe dark' %}checked{% endif %}>
+						<label for="lake-tahoe-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#0e7490]">
+								<div class="h-3 w-full bg-[#0e7490]"></div>
+								<div class="h-4 w-full bg-[#155e75]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#155e75] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#0d9488]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#0d9488]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Lake Tahoe</span>
+							</div>
+						</label>
+					</div>
+					<!-- Abyss -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-abyss dark" type="radio" id="abyss-theme" class="peer" onchange="changeTheme(['theme-abyss','dark']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-abyss dark' %}checked{% endif %}>
+						<label for="abyss-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-black">
+								<div class="h-3 w-full bg-black"></div>
+								<div class="h-4 w-full bg-black"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-black p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#db2777]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#db2777]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Abyss</span>
+							</div>
+						</label>
+					</div>
+					<!-- Dusk -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-midnight dark" type="radio" id="midnight-theme" class="peer" onchange="changeTheme(['theme-midnight','dark']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-midnight dark' %}checked{% endif %}>
+						<label for="midnight-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#374151]">
+								<div class="h-3 w-full bg-[#374151]"></div>
+								<div class="h-4 w-full bg-[#1f2937]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#1f2937] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#db2777]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#db2777]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Dusk</span>
+							</div>
+						</label>
+					</div>
+					<!-- cambridge -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-cambridge" type="radio" id="cambridge-theme" class="peer" onchange="changeTheme(['theme-cambridge']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-cambridge' %}checked{% endif %}>
+						<label for="cambridge-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#44403c]">
+								<div class="h-3 w-full bg-[#44403c]"></div>
+								<div class="h-4 w-full bg-[#d6d3d1]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#ebe9e5] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#991b1b]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#991b1b]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Cambridge</span>
+							</div>
+						</label>
+					</div>
+					<!-- Yale -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-yale dark" type="radio" id="yale-theme" class="peer" onchange="changeTheme(['theme-yale','dark']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-yale dark' %}checked{% endif %}>
+						<label for="yale-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#d73987]">
+								<div class="h-3 w-full bg-[#d73987]"></div>
+								<div class="h-4 w-full bg-[#d73987]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#d73987] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#feed08]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#6d28d9]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Yale</span>
+							</div>
+						</label>
+					</div>
+					<!-- Haskell -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-haskell dark" type="radio" id="haskell-theme" class="peer" onchange="changeTheme(['theme-haskell','dark']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-haskell dark' %}checked{% endif %}>
+						<label for="haskell-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#00001f]">
+								<div class="h-3 w-full bg-[#00001f]"></div>
+								<div class="h-4 w-full bg-[#00001f]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#00001f] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#ec4899]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#ec4899]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Haskell</span>
+							</div>
+						</label>
+					</div>
+					<!-- Alpine -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-alpine" type="radio" id="alpine-theme" class="peer" onchange="changeTheme(['theme-alpine']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-alpine' %}checked{% endif %}>
+						<label for="alpine-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#44423b]">
+								<div class="h-3 w-full bg-[#44423b]"></div>
+								<div class="h-4 w-full bg-[#d6d4d1]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#e7e5e3] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#0891b2]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#0891b2]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Alpine</span>
+							</div>
+						</label>
+					</div>
+					<!-- War Games -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-war-games dark" type="radio" id="war-games-theme" class="peer" onchange="changeTheme(['theme-war-games','dark']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-war-games dark' %}checked{% endif %}>
+						<label for="war-games-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#001f1b]">
+								<div class="h-3 w-full bg-[#001f1b]"></div>
+								<div class="h-4 w-full bg-[#001f1b]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#001f1b] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#48ec87]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#48ec87]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-white/50"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-white/50"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">War Games</span>
+							</div>
+						</label>
+					</div>
+					<!-- Slate -->
+					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
+						<input hidden name="theme" value="theme-iron" type="radio" id="iron-theme" class="peer" onchange="changeTheme(['theme-iron']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-iron'%}checked{% endif %}>
+						<label for="iron-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 hover:border-gray-400 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-600/10 rounded-lg overflow-hidden">
+							<div class="flex flex-col w-full h-full bg-[#3f3f46]">
+								<div class="h-3 w-full bg-[#3f3f46]"></div>
+								<div class="h-4 w-full bg-[#d4d4d8]"></div>
+								<ul class="flex flex-col space-y-1 h-12 w-full bg-[#e4e4e7] p-2 mb-0">
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-[#db2777]"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-[#db2777]"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+									<li class="flex">
+										<i class="fas fa-arrow-alt-up text-[8px] text-black/40"></i>
+										<div class="ml-1 h-2 w-2/4 rounded-full bg-black/40"></div>
+										<div class="ml-auto h-2 w-1/4 rounded-full bg-transparent"></div>
+									</li>
+								</ul>
+							</div>
+							<div class="w-full border-t border-gray-200 dark:border-gray-600 p-2 text-center">
+								<span class="font-bold text-base">Slate</span>
 							</div>
 						</label>
 					</div>
diff --git a/files/templates/CHRISTMAS/notifications.html b/files/templates/CHRISTMAS/notifications.html
index c16650e58..7f7200d56 100644
--- a/files/templates/CHRISTMAS/notifications.html
+++ b/files/templates/CHRISTMAS/notifications.html
@@ -14,12 +14,12 @@
 				</h1>
 				<ul class="text-xs flex items-center space-x-3 leading-normal mb-0">
 					<li>
-						<a class="{{ 'font-bold text-red-600' if not '=true' in request.full_path else 'text-gray-500' }}" href="/notifications">
+						<a class="{{ 'font-bold text-primary' if not '=true' in request.full_path else 'text-gray-500' }}" href="/notifications">
 							All
 						</a>
 					</li>
 					<li>
-						<a class="{{ 'font-bold text-red-600' if '/notifications?posts=true' in request.full_path else 'text-gray-500' }}" href="/notifications?posts=true">
+						<a class="{{ 'font-bold text-primary' if '/notifications?posts=true' in request.full_path else 'text-gray-500' }}" href="/notifications?posts=true">
 							Posts
 							{% if v.post_notifications_count %}
 							<span class="text-gray-600">({{v.post_notifications_count}})</span>
@@ -27,13 +27,13 @@
 						</a>
 					</li>
 					<li>
-						<a class="{{ 'font-bold text-red-600' if '/notifications?messages=true' in request.full_path else 'text-gray-500' }}" href="/notifications?messages=true">
+						<a class="{{ 'font-bold text-primary' if '/notifications?messages=true' in request.full_path else 'text-gray-500' }}" href="/notifications?messages=true">
 							Messages
 						</a>
 					</li>
 					{% if v.admin_level > 1 %}
 					<li>
-						<a class="{{ 'font-bold text-red-600' if '/notifications?modmail=true' in request.full_path else 'text-gray-500' }}" href="/notifications?modmail=true">
+						<a class="{{ 'font-bold text-primary' if '/notifications?modmail=true' in request.full_path else 'text-gray-500' }}" href="/notifications?modmail=true">
 							Mod Mail
 						</a>
 					</li>
@@ -88,9 +88,9 @@
 				{% set path = request.full_path %}
 			{% endif %}
 			{% if request.full_path == "/notifications" %}
-				<small><a class="block px-2 py-1 text-sm font-bold text-red-600 bg-gray-900" href="{{path}}?page={{page-1}}">Previous</a></small>
+				<small><a class="block px-2 py-1 text-sm font-bold text-primary bg-gray-900" href="{{path}}?page={{page-1}}">Previous</a></small>
 			{% else %}
-				<small><a class="block px-2 py-1 text-sm font-bold text-red-600 bg-gray-900" href="{{path}}&page={{page-1}}">Previous</a></small>
+				<small><a class="block px-2 py-1 text-sm font-bold text-primary bg-gray-900" href="{{path}}&page={{page-1}}">Previous</a></small>
 			{% endif %}
 		</li>
 		{% else %}
@@ -107,9 +107,9 @@
 				{% set path = request.full_path %}
 			{% endif %}
 			{% if request.full_path == "/notifications" %}
-				<small><a class="block px-2 py-1 text-sm font-bold text-red-600 bg-gray-900" href="{{path}}?page={{page+1}}">Next</a></small>
+				<small><a class="block px-2 py-1 text-sm font-bold text-primary bg-gray-900" href="{{path}}?page={{page+1}}">Next</a></small>
 			{% else %}
-				<small><a class="block px-2 py-1 text-sm font-bold text-red-600 bg-gray-900" href="{{path}}&page={{page+1}}">Next</a></small>
+				<small><a class="block px-2 py-1 text-sm font-bold text-primary bg-gray-900" href="{{path}}&page={{page+1}}">Next</a></small>
 			{% endif %}
 		</li>
 		{% else %}
diff --git a/files/templates/CHRISTMAS/search.html b/files/templates/CHRISTMAS/search.html
index 6c780810e..db081d9fd 100644
--- a/files/templates/CHRISTMAS/search.html
+++ b/files/templates/CHRISTMAS/search.html
@@ -17,17 +17,17 @@
 			<div class="flex space-x-3 divide-x divide-gray-400 text-xs">
 				<ul class="flex items-center space-x-3 leading-normal mb-0">
 					<li>
-						<a class="{{ 'font-bold text-red-600' if '/posts/' in request.path else 'text-gray-500' }}" href="/search/posts/?sort={{sort}}&q={{query | urlencode}}&t={{t}}">
+						<a class="{{ 'font-bold text-primary' if '/posts/' in request.path else 'text-gray-500' }}" href="/search/posts/?sort={{sort}}&q={{query | urlencode}}&t={{t}}">
 							Posts
 						</a>
 					</li>
 					<li>
-						<a class="{{ 'font-bold text-red-600' if '/comments/' in request.path else 'text-gray-500' }}" href="/search/comments/?sort={{sort}}&q={{query | urlencode}}&t={{t}}">
+						<a class="{{ 'font-bold text-primary' if '/comments/' in request.path else 'text-gray-500' }}" href="/search/comments/?sort={{sort}}&q={{query | urlencode}}&t={{t}}">
 							Comments
 						</a>
 					</li>
 					<li>
-						<a class="{{ 'font-bold text-red-600' if '/users/' in request.path else 'text-gray-500' }}" href="/search/users/?sort={{sort}}&q={{query | urlencode}}&t={{t}}">
+						<a class="{{ 'font-bold text-primary' if '/users/' in request.path else 'text-gray-500' }}" href="/search/users/?sort={{sort}}&q={{query | urlencode}}&t={{t}}">
 							Users
 						</a>
 					</li>
diff --git a/files/templates/CHRISTMAS/settings.html b/files/templates/CHRISTMAS/settings.html
index b8e27a94d..a59c4a47b 100644
--- a/files/templates/CHRISTMAS/settings.html
+++ b/files/templates/CHRISTMAS/settings.html
@@ -57,22 +57,22 @@
 	</style>
 </head>
 
- {% if v and (v.theme == 'theme-iron dark' or v.theme == 'theme-evergreen') %}
- 	{% set theme = v.theme %}
+{% if v and v.theme2 %}
+ 	{% set theme = v.theme2 %}
  {% else %}
  	{% set theme = 'theme-iron dark' %}
  {% endif %}
 
-<body class="{{ theme }} overflow-hidden overflow-y-auto sm:overflow-y-none antialiased bg-cover bg-center bg-gray-500 text-gray-900" {% if v and v.background %}style="background:url(/assets/CHRISTMAS/images/backgrounds/{{v.background}})"{% endif %}>
+ <body class="{{ theme }} overflow-hidden overflow-y-auto sm:overflow-y-none antialiased bg-cover bg-center bg-gray-500 text-black dark:bg-gray-700 dark:text-gray-100">
 
 	{% include "CHRISTMAS/header-tw.html" %}
 
-	<div class="flex h-screen pt-16 bg-gray-500">
+	<div class="flex h-screen pt-16 bg-gray-500 dark:bg-gray-700 dark:text-gray-200">
 		<div class="w-full sm:overflow-y-auto">
 
 			<div class="md:px-4 bg-gray-700" id="sub-header-row">
 				<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
-					<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 rounded-t sub-header-shadow"></div>
+					<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700"></div>
 					<div class="relative col-span-full flex items-center">
 						<div>
 							<h1 class="font-bold text-xl font-heading leading-normal mb-0">
@@ -119,7 +119,7 @@
 			</div>
 
 			<div class="w-full md:px-4">
-				<div class="w-full max-w-screen-2xl mx-auto mb-4 md:px-4 grid grid-cols-12 gap-6 bg-gray-300 md:bg-gray-200 rounded-b" id="main-content-row">
+				<div class="w-full max-w-screen-2xl mx-auto mb-4 md:px-4 grid grid-cols-12 gap-6 bg-gray-300 md:bg-gray-200 dark:bg-gray-800 rounded-b" id="main-content-row">
 
 					<div class="col-span-full xl:col-span-9">
 						{% if error %}
@@ -223,7 +223,7 @@
 		<script>function formkey() {return '{{v.formkey}}';}</script>
 
 		<script>
-			var previousTheme = '{{ v.theme }}'.split(' ');
+			var previousTheme = '{{ v.theme2 }}'.split(' ');
 			function changeTheme(theme) {
 				const body = document.body;
 				// if previous selection has a value, remove them from body tag
diff --git a/files/templates/CHRISTMAS/sidebars/ProfileSidebar.html b/files/templates/CHRISTMAS/sidebars/ProfileSidebar.html
index 257efdbed..7010e585f 100644
--- a/files/templates/CHRISTMAS/sidebars/ProfileSidebar.html
+++ b/files/templates/CHRISTMAS/sidebars/ProfileSidebar.html
@@ -1,4 +1,4 @@
-<div class="hidden xl:block xl:col-start-10 xl:col-end-13 flex-shrink-0 my-4 px-4 py-3 rounded-md bg-gray-300/40 shadow-inner">
+<div class="hidden xl:block xl:col-start-10 xl:col-end-13 flex-shrink-0 my-4 px-4 py-3 rounded-md bg-gray-300/40 dark:bg-gray-700/40 shadow-inner">
 	<div>
 		<h2 class="ml-2 font-bold text-lg font-heading leading-normal mb-2">About</h2>
 		<div class="flex flex-col space-y-4">
diff --git a/files/templates/CHRISTMAS/sign_up.html b/files/templates/CHRISTMAS/sign_up.html
index 90ac9c49f..272e0850b 100644
--- a/files/templates/CHRISTMAS/sign_up.html
+++ b/files/templates/CHRISTMAS/sign_up.html
@@ -36,7 +36,7 @@
 	<noscript><link rel="stylesheet" href="/assets/CHRISTMAS/css/fa.css?v=200"></noscript>
 </head>
 
-<body class="relative h-full bg-gradient-to-t from-gray-500 to-gray-400">
+<body class="theme-iron dark relative h-full bg-gradient-to-t from-gray-500 to-gray-400">
 
 	<div class="relative min-h-full flex flex-col items-center justify-center pt-28 pb-12 px-4 sm:px-6 lg:px-8">
 
diff --git a/files/templates/CHRISTMAS/submission.html b/files/templates/CHRISTMAS/submission.html
index 48203abf1..63b679210 100644
--- a/files/templates/CHRISTMAS/submission.html
+++ b/files/templates/CHRISTMAS/submission.html
@@ -227,7 +227,7 @@
 			{% if not p.is_image and p.thumb_url and not p.embed_url %}
 			<div class="hidden md:block pl-3 flex-shrink-0">
 				<a rel="nofollow noopener noreferrer" href="{{p.realurl(v)}}" {% if not v or v.newtabexternal %}target="_blank"{% endif %}>
-					<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover object-cover bg-white border border-gray-300 flex-shrink-0" alt="post thumbnail">
+					<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0" alt="post thumbnail">
 				</a>
 			</div>
 			{% endif %}
@@ -252,7 +252,7 @@
 					<div class="no-scrollbar overflow-y-hidden overflow-x-auto flex items-center space-x-2 md:-ml-2 mb-1 text-sm text-gray-500 leading-normal">
 
 						<div class="relative md:hidden flex-shrink-0 {{ 'santa' if p.author.patron else 'cap' }}">
-							<img loading="lazy" src="{{ p.author.profile_url }}" class="w-9 h-9 p-[3px] bg-white border border-gray-300 object-cover" alt="{{ p.author.username }} avatar"/>
+							<img loading="lazy" src="{{ p.author.profile_url }}" class="w-9 h-9 p-[3px] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover" alt="{{ p.author.username }} avatar"/>
 						</div>
 
 						{% if v and v.admin_level==6 and p.author.shadowbanned %}
@@ -434,7 +434,7 @@
 				<div class="relative z-10 hidden md:flex flex-col flex-shrink-0 items-center mr-4">
 
 					<div class="relative avatar">
-						<img loading="lazy" src="{{p.author.profile_url}}" class="w-14 h-14 p-[3px] bg-white border border-gray-300 object-cover" alt="author avatar"/>
+						<img loading="lazy" src="{{p.author.profile_url}}" class="w-14 h-14 p-[3px] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover" alt="author avatar"/>
 					</div>
 
 					<div class="py-2 text-sm text-gray-400 text-center font-bold hidden md:block">
@@ -495,34 +495,34 @@
 					</span>
 					<!-- Entire thread link -->
 					{% if linked_comment and p.comment_count >= 2%}
-					<a href="{% if v %}{{ p.permalink }}{% else %}/logged_out/{{p.permalink}}{% endif %}" class="pl-2 text-red-600 hover:text-red-700">
+					<a href="{% if v %}{{ p.permalink }}{% else %}/logged_out/{{p.permalink}}{% endif %}" class="pl-2 text-primary hover:text-red-700">
 						View entire thread
 					</a>
 					{% endif %}
 				</div>
 				<ul class="flex space-x-3 text-sm text-gray-500 leading-normal mb-0">
 					<li>
-						<a href="?sort=top" class="{{ 'font-bold text-red-600' if sort == 'top' else 'text-gray-500 hover:text-gray-700'}}">
+						<a href="?sort=top" class="{{ 'font-bold text-primary' if sort == 'top' else 'text-gray-500 hover:text-gray-700'}}">
 							Top
 						</a>
 					</li>
 					<li>
-						<a href="?sort=new" class="{{ 'font-bold text-red-600' if sort == 'new' else 'text-gray-500 hover:text-gray-700'}}">
+						<a href="?sort=new" class="{{ 'font-bold text-primary' if sort == 'new' else 'text-gray-500 hover:text-gray-700'}}">
 							Latest
 						</a>
 					</li>
 					<li>
-						<a href="?sort=old" class="{{ 'font-bold text-red-600' if sort == 'old' else 'text-gray-500 hover:text-gray-700'}}">
+						<a href="?sort=old" class="{{ 'font-bold text-primary' if sort == 'old' else 'text-gray-500 hover:text-gray-700'}}">
 							Oldest
 						</a>
 					</li>
 					<li>
-						<a href="?sort=controversial" class="{{ 'font-bold text-red-600' if sort == 'controversial' else 'text-gray-500 hover:text-gray-700'}}">
+						<a href="?sort=controversial" class="{{ 'font-bold text-primary' if sort == 'controversial' else 'text-gray-500 hover:text-gray-700'}}">
 							Controversial
 						</a>
 					</li>
 					<li>
-						<a href="?sort=bottom" class="{{ 'font-bold text-red-600' if sort == 'bottom' else 'text-gray-500 hover:text-gray-700'}}">
+						<a href="?sort=bottom" class="{{ 'font-bold text-primary' if sort == 'bottom' else 'text-gray-500 hover:text-gray-700'}}">
 							Worst
 						</a>
 					</li>
@@ -532,7 +532,7 @@
 			{% if v %}
 			<div id="comment-form-space-{{p.fullname}}" class="comment-write flex px-2.5 md:px-0">
 				<div class="hidden md:block relative flex-shrink-0 mr-4 {{ 'santa' if p.author.patron else 'cap' }}">
-					<img loading="lazy" src="{{v.profile_url}}" class="w-14 h-14 p-[3px] bg-white border border-gray-300 object-cover" alt="my avatar"/>
+					<img loading="lazy" src="{{v.profile_url}}" class="w-14 h-14 p-[3px] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover" alt="my avatar"/>
 				</div>
 				{% include "CHRISTMAS/comments/CommentForm.html" %}
 			</div>
diff --git a/files/templates/CHRISTMAS/submission/SubmissionActions.html b/files/templates/CHRISTMAS/submission/SubmissionActions.html
index d932c8a3a..1d619f404 100644
--- a/files/templates/CHRISTMAS/submission/SubmissionActions.html
+++ b/files/templates/CHRISTMAS/submission/SubmissionActions.html
@@ -89,31 +89,31 @@
 			<ul class="dropdown-menu w-56 bg-gray-900 rounded-md shadow-lg" aria-labelledby="dropdownPostActions">
 				<!-- Does not require auth -->
 				<li class="hidden">
-					<button class="copy-link dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" role="button" data-clipboard-text="{% if 'rama' in request.host %}https://freeghettohoes.biz{{p.permalink}}{% else %}{{p.permalink | full_link}}{% endif %}">
+					<button class="copy-link dropdown-item dropdown-item-primary" role="button" data-clipboard-text="{% if 'rama' in request.host %}https://freeghettohoes.biz{{p.permalink}}{% else %}{{p.permalink | full_link}}{% endif %}">
 						<i class="fas fa-link fa-sm fa-fw mr-4"></i>Copy link
 					</button>
 				</li>
 				<!-- Requires author -->
 				{% if v and v.id==p.author_id %}
 				<li id="pin-profile-{{p.id}}" class="{% if p.is_stickied %}hidden{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast2('/pin/{{p.id}}','unpin-profile-{{p.id}}','pin-profile-{{p.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast2('/pin/{{p.id}}','unpin-profile-{{p.id}}','pin-profile-{{p.id}}')">
 						<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw mr-4"></i>Pin to profile
 					</button>
 				</li>
 				<li id="unpin-profile-{{p.id}}" class="{% if not p.is_stickied %}hidden{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast2('/pin/{{p.id}}','unpin-profile-{{p.id}}','pin-profile-{{p.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast2('/pin/{{p.id}}','unpin-profile-{{p.id}}','pin-profile-{{p.id}}')">
 						<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw mr-4"></i>Unpin from profile
 					</button>
 				</li>
 				{% if p.deleted_utc > 0 %}
 				<li>
-					<button class="dropdown-item dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast('/undelete_post/{{p.id}}')">
+					<button class="dropdown-item dropdown-item dropdown-item-primary" onclick="post_toast('/undelete_post/{{p.id}}')">
 						<i class="fas fa-trash-alt fa-sm fa-fw mr-4"></i>Undelete
 					</button>
 				</li>
 				{% else %}
 				<li>
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#deletePostModal" onclick="delete_postModal('{{p.id}}')">
+					<button class="dropdown-item dropdown-item-primary" data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#deletePostModal" onclick="delete_postModal('{{p.id}}')">
 						<i class="fas fa-trash-alt fa-sm fa-fw mr-4"></i>Delete
 					</button>
 				</li>
@@ -125,24 +125,24 @@
 				<!-- Requires auth and admin -->
 				{% if v and v.admin_level>=3 %}
 				<li id="pin-{{p.id}}" class="{% if p.stickied %}hidden{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast2('/sticky/{{p.id}}','pin-{{p.id}}','unpin-{{p.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast2('/sticky/{{p.id}}','pin-{{p.id}}','unpin-{{p.id}}')">
 						<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw mr-4"></i>Pin
 					</button>
 				</li>
 				<li id="unpin-{{p.id}}" class="{% if not p.stickied %}hidden{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast2('/sticky/{{p.id}}','/sticky/{{p.id}}','pin-{{p.id}}','unpin-{{p.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast2('/sticky/{{p.id}}','/sticky/{{p.id}}','pin-{{p.id}}','unpin-{{p.id}}')">
 						<i class="fas fa-thumbtack fa-rotate--45 fa-sm fa-fw mr-4"></i>Unpin
 					</button>
 				</li>
 				<!-- Requires author -->
 				{% if v==p.author %}
 				<li id="distinguish-{{p.id}}" class="{% if p.distinguish_level %}hidden{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast2('/distinguish/{{p.id}}','distinguish-{{p.id}}','undistinguish-{{p.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast2('/distinguish/{{p.id}}','distinguish-{{p.id}}','undistinguish-{{p.id}}')">
 						<i class="fas fa-crown fa-sm fa-fw mr-4"></i>Distinguish
 					</button>
 				</li>
 				<li id="undistinguish-{{p.id}}" class="{% if not p.distinguish_level %}hidden{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast2('/distinguish/{{p.id}}','distinguish-{{p.id}}','undistinguish-{{p.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast2('/distinguish/{{p.id}}','distinguish-{{p.id}}','undistinguish-{{p.id}}')">
 						<i class="fas fa-crown fa-sm fa-fw mr-4"></i>Undistinguish
 					</button>
 				</li>
@@ -155,12 +155,12 @@
 					<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
 				</li>
 				<li id="club-{{p.id}}" class="{% if p.club %}hidden{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast2('/toggle_club/{{p.id}}','club-{{p.id}}','unclub-{{p.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast2('/toggle_club/{{p.id}}','club-{{p.id}}','unclub-{{p.id}}')">
 						<i class="fas fa-eye-slash fa-sm fa-fw mr-4"></i>Mark club
 					</button>
 				</li>
 				<li id="unclub-{{p.id}}" class="{% if not p.club %}hidden{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast2('/toggle_club/{{p.id}}','club-{{p.id}}','unclub-{{p.id}}')"><i class="fas fa-eye fa-sm fa-fw mr-4"></i>Unmark club
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast2('/toggle_club/{{p.id}}','club-{{p.id}}','unclub-{{p.id}}')"><i class="fas fa-eye fa-sm fa-fw mr-4"></i>Unmark club
 					</button>
 				</li>
 				{% endif %}
@@ -175,7 +175,7 @@
 				</li>
 				{% endif %}
 				<li id="approve-{{p.id}}" class="{% if not p.is_banned %}hidden{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast2('/unban_post/{{p.id}}','remove-{{p.id}}','approve-{{p.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast2('/unban_post/{{p.id}}','remove-{{p.id}}','approve-{{p.id}}')">
 						<i class="fas fa-check fa-sm fa-fw mr-4"></i>Approve
 					</button>
 				</li>
@@ -188,7 +188,7 @@
 					</button>
 				</li>
 				<li id="unmark-{{p.id}}" class="{% if not p.over_18 %}hidden{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast2('/toggle_post_nsfw/{{p.id}}','mark-{{p.id}}','unmark-{{p.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast2('/toggle_post_nsfw/{{p.id}}','mark-{{p.id}}','unmark-{{p.id}}')">
 						<i class="fas fa-eye-evil fa-sm fa-fw mr-4"></i>Unmark +18
 					</button>
 				</li>
@@ -201,7 +201,7 @@
 					</button>
 				</li>
 				<li id="unsex-user-{{p.id}}" class="{% if not p.is_blocking %}hidden{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast2('/settings/unblock?username={{p.author.username}}','sex-user-{{p.id}}','unsex-user-{{p.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast2('/settings/unblock?username={{p.author.username}}','sex-user-{{p.id}}','unsex-user-{{p.id}}')">
 						<i class="fas fa-user-check fa-sm fa-fw mr-4"></i>Unban user
 					</button>
 				</li>
@@ -214,7 +214,7 @@
 					</button>
 				</li>
 				<li id="unban-{{p.id}}" class="{% if not p.author.is_suspended %}hidden{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" id="unexile2-user-{{p.id}}" onclick="post_toast2('/unban_user/{{p.author_id}}','ban-{{p.id}}','unban-{{p.id}}')">
+					<button class="dropdown-item dropdown-item-primary" id="unexile2-user-{{p.id}}" onclick="post_toast2('/unban_user/{{p.author_id}}','ban-{{p.id}}','unban-{{p.id}}')">
 						<i class="fas fa-user-check fa-sm fa-fw mr-4"></i>Unban user
 					</button>
 				</li>
@@ -223,7 +223,7 @@
 				<!-- Requires super admin and app -->
 				{% if v.admin_level >= 4 and p.oauth_app %}
 				<li>
-					<a class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" href="{{p.oauth_app.permalink}}">
+					<a class="dropdown-item dropdown-item-primary" href="{{p.oauth_app.permalink}}">
 						<i class="fas fa-code fa-sm fa-fw mr-4"></i>API App
 					</a>
 				</li>
@@ -239,12 +239,12 @@
 					</button>
 				</li>
 				<li id="prompt-{{p.id}}" class="blockuser hidden">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="post_toast2('/settings/block?username={{p.author.username}}','prompt-{{p.id}}','unblock-{{p.id}}')">
+					<button class="dropdown-item dropdown-item-primary" onclick="post_toast2('/settings/block?username={{p.author.username}}','prompt-{{p.id}}','unblock-{{p.id}}')">
 						<i class="fas fa-question-circle fa-sm fa-fw mr-4"></i>Are you sure?
 					</button>
 				</li>
 				<li id="block-{{p.id}}" class="text-red-600 blockuser{% if p.is_blocking %} hidden{% endif %}">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700" onclick="document.getElementById('block-{{p.id}}').classList.toggle('hidden');document.getElementById('prompt-{{p.id}}').classList.toggle('hidden');">
+					<button class="dropdown-item dropdown-item-primary" onclick="document.getElementById('block-{{p.id}}').classList.toggle('hidden');document.getElementById('prompt-{{p.id}}').classList.toggle('hidden');">
 						<i class="fas fa-user-slash fa-sm fa-fw mr-4"></i>Block user
 					</button>
 				</li>
@@ -254,7 +254,7 @@
 					<hr class="mt-2 mb-1.5 border-t border-black h-1 shadow-inset-t-white-05"/>
 				</li>
 				<li class="text-red-600">
-					<button class="dropdown-item block w-full text-left px-4 py-2 text-sm text-gray-200 bg-gradient-to-t hover:from-red-800 hover:to-red-700 hover:shadow-inner focus:shadow-inner focus:bg-gradient-to-t focus:from-red-800 focus:to-red-700"data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#reportPostModal" onclick="report_postModal('{{p.id}}')">
+					<button class="dropdown-item dropdown-item-primary"data-bs-toggle="modal" data-bs-dismiss="modal" data-bs-target="#reportPostModal" onclick="report_postModal('{{p.id}}')">
 						<i class="fas fa-flag fa-sm fa-fw mr-4"></i>Report
 					</button>
 				</li>
diff --git a/files/templates/CHRISTMAS/submission/SubmissionEditForm.html b/files/templates/CHRISTMAS/submission/SubmissionEditForm.html
index 8ca198c95..d0bc60e94 100644
--- a/files/templates/CHRISTMAS/submission/SubmissionEditForm.html
+++ b/files/templates/CHRISTMAS/submission/SubmissionEditForm.html
@@ -3,9 +3,9 @@
 		<input type="hidden" name="formkey" value="{{v.formkey}}">
 		<input type="hidden" name="current_page" value="{{request.path}}">
 		<input name="title" class="form-input border-dashed mb-2" required placeholder="title" value="{{p.title}}">
-		<div class="rounded border border-gray-300 border-dashed bg-white w-full">
-			<textarea name="body" maxlength="10000" id="post-edit-box-{{p.id}}" form="post-edit-form-{{p.id}}" class="p-2 shadow-inner w-full" aria-label="With textarea" placeholder="Add text to your post..." rows="10">{{p.body}}</textarea>
-			<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-300 mb-0">
+		<div class="rounded border border-gray-300 dark:border-gray-900 bg-white dark:bg-white/[.05] border-dashed w-full">
+			<textarea name="body" maxlength="10000" id="post-edit-box-{{p.id}}" form="post-edit-form-{{p.id}}" class="rounded-t bg-transparent p-2 shadow-inner w-full" aria-label="With textarea" placeholder="Add text to your post..." rows="10">{{p.body}}</textarea>
+			<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 dark:border-white/[.05] mb-0">
 				<li>
 					<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeBold('post-edit-box-{{p.id}}')">
 						<i class="fas fa-bold fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Bold"></i>
diff --git a/files/templates/CHRISTMAS/submission_listing.html b/files/templates/CHRISTMAS/submission_listing.html
index 7e6c1e94e..977bf01bd 100644
--- a/files/templates/CHRISTMAS/submission_listing.html
+++ b/files/templates/CHRISTMAS/submission_listing.html
@@ -238,12 +238,12 @@
 			</h5>
 
 			{% if p.realbody(v) and not p.over_18 %}
-				<div class="relative z-10 gradient-mask max-h-12 mb-2 overflow-hidden pointer-events-none text-gray-600 break-words" style="word-break: break-word;" id="post-text-{{p.id}}">
+				<div class="relative z-10 gradient-mask max-h-10 overflow-hidden pointer-events-none text-gray-600 break-words" style="word-break: break-word;" id="post-text-{{p.id}}">
 					{{p.realbody(v) | safe}}
 				</div>
 			{% endif %}
 
-			<div class="relative z-20 hidden md:block pt-3">
+			<div class="relative z-20 hidden md:block pt-2">
 				{% include "CHRISTMAS/submission/SubmissionActions.html" %}
 			</div>
 	</div>
@@ -251,7 +251,7 @@
 		<div class="relative z-10 flex flex-row flex-nowrap pl-3 md:pl-5 flex-shrink-0">
 			<div style="z-index: 3;">
 				{% if p.club and not (v and v.paid_dues) %}
-					<img loading="lazy" src="/assets/images/emojis/marseyglow.webp" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
+					<img loading="lazy" src="/assets/images/emojis/marseyglow.webp" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
 				{% elif not p.url %}
 					<a {% if v and v.newtab %}target="_blank"{% endif %} {% if v %}href="{{p.permalink}}"{% else %}href="/logged_out{{p.permalink}}"{% endif %}>
 						<img loading="lazy" src="{{p.thumb_url}}" class="post-thumbnail shadow-sm p-[3px] w-24 h-16 md:w-32 md:h-20 object-cover bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 flex-shrink-0">
@@ -383,7 +383,7 @@
 {% include "CHRISTMAS/expanded_image_modal.html" %}
 
 <script defer src="/assets/CHRISTMAS/js/new_comments_count.js?v=200"></script>
-<script defer src="/assets/CHRISTMAS/js/submission_listing.js?v=202"></script>
+<script defer src="/assets/CHRISTMAS/js/submission_listing.js?v=203"></script>
 
 <style>
 	.mod:before {
diff --git a/files/templates/CHRISTMAS/submit.html b/files/templates/CHRISTMAS/submit.html
index af0bb45f0..d7f312bd0 100644
--- a/files/templates/CHRISTMAS/submit.html
+++ b/files/templates/CHRISTMAS/submit.html
@@ -93,9 +93,9 @@
 				<span class="italic text-sm font-normal text-gray-500">(optional if you have a link)</span>
 			</label>
 			<!-- Input field -->
-			<div class="relative rounded border border-gray-300 bg-white w-full">
-				<textarea form="submitform" id="post-text" class="p-2 shadow-inner w-full" aria-label="With textarea" placeholder="Optional if you have a link or an image." rows="7" name="body" oninput="markdown('post-text','preview');charLimit('post-text','character-count-submit-text-form');checkForRequired()" maxlength="10000" required></textarea>
-				<ul class="flex space-x-4 px-3 py-2 border-t border-dashed border-gray-300 mb-0">
+			<div class="relative rounded border border-gray-300 dark:border-gray-900 bg-gray-100 dark:bg-white/[.05] w-full">
+				<textarea form="submitform" id="post-text" class="rounded-t bg-transparent p-2 shadow-inner w-full" aria-label="With textarea" placeholder="Optional if you have a link or an image." rows="7" name="body" oninput="markdown('post-text','preview');charLimit('post-text','character-count-submit-text-form');checkForRequired()" maxlength="10000" required></textarea>
+				<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-400 dark:border-white/[.05] mb-0">
 					<li>
 						<button type="button" class="text-gray-400 hover:text-gray-500" onclick="makeBold('post-text')">
 							<i class="fas fa-bold fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Bold"></i>
diff --git a/files/templates/CHRISTMAS/userpage.html b/files/templates/CHRISTMAS/userpage.html
index ef42a5129..934e56a80 100644
--- a/files/templates/CHRISTMAS/userpage.html
+++ b/files/templates/CHRISTMAS/userpage.html
@@ -93,10 +93,10 @@
 		</ul>
 	</div>
 	{% endif %}
-	<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 rounded-t sub-header-shadow"></div>
+	<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700"></div>
 	<div class="relative col-span-full flex items-center">
 		<div class="flex items-center">
-			<img class="h-14 w-14 bg-white p-[3px] border border-gray-400" src="{{ u.profile_url }}" alt="Your avatar"/>
+			<img class="h-14 w-14 p-[3px] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 object-cover" src="{{ u.profile_url }}" alt="Your avatar"/>
 			<div class="pl-2">
 				<!-- <h1 class="font-bold text-2xl leading-normal mb-0" style="color: #{{u.namecolor}}">
 					<span {% if u.patron %}class="patron" style="background-color:#{{u.namecolor}};"{% endif %}>{{u.username}}</span>
@@ -142,23 +142,25 @@
 		</div>
 		<div class="ml-auto flex items-center space-x-4">
 			{% if u.id == v.id or not u.is_private %}
-			<ul class="hidden xl:flex items-center space-x-4 mb-0">
+			<ul class="hidden xl:flex items-center space-x-4 mb-0 font-bold text-black dark:text-gray-200">
 				<li>
-					<a href="/@{{ u.username }}/followers" class="text-black text-lg font-bold mb-0">{{ u.stored_subscriber_count }}</a>
-					<small class="block font-bold text-gray-500">Followers</small>
+					<a href="/@{{ u.username }}/followers" class="text-black dark:text-gray-200 text-lg mb-0">
+						{{ u.stored_subscriber_count }}
+					</a>
+					<small class="block text-gray-500">Followers</small>
 				</li>
 				<li>
-					<div class="text-black text-lg font-bold mb-0">{{ u.coins_spent }}</div>
-					<small class="block font-bold text-gray-500">Dramacoin Spent</small>
+					<div class="text-lg mb-0">{{ u.coins_spent }}</div>
+					<small class="block text-gray-500">Dramacoin Spent</small>
 				</li>
 				<li>
-					<div class="text-black text-lg font-bold mb-0">{{ u.coins }}</div>
-					<small class="block font-bold text-gray-500">Dramacoin Earned</small>
+					<div class="text-lg mb-0">{{ u.coins }}</div>
+					<small class="block text-gray-500">Dramacoin Earned</small>
 				</li>
 				{% if u.procoins %}
 				<li>
-					<div class="text-black text-lg font-bold mb-0">{{ u.procoins }}</div>
-					<small class="block font-bold text-gray-500">MarseyBux</small>
+					<div class="text-lg mb-0">{{ u.procoins }}</div>
+					<small class="block text-gray-500">MarseyBux</small>
 				</li>
 				{% endif %}
 			</ul>
@@ -242,26 +244,26 @@
 {% block subHeader2 %}
 <div class="md:px-4 sticky top-0 z-20">
 	<div class="max-w-screen-2xl mx-auto">
-		<div class="px-4 py-2 flex space-x-3 divide-x divide-gray-400 text-xs bg-gray-100 md:border-b md:border-gray-300">
+		<div class="px-4 py-2 flex space-x-3 divide-x divide-gray-400 text-xs bg-gray-100 dark:bg-gray-800 md:border-b md:border-gray-300 dark:border-gray-700">
 			<ul class="flex items-center space-x-3 leading-normal mb-0">
 				<li>
-					<a class="{{ 'font-bold text-red-600' if not 'comments' in request.path else 'text-gray-700' }}" href="/@{{u.username}}">
+					<a class="{{ 'font-bold text-primary' if not 'comments' in request.path else 'text-gray-700 dark:text-gray-400' }}" href="/@{{u.username}}">
 						Posts <span class="text-gray-500 font-normal">{{0 if u.shadowbanned and not (v and (v.shadowbanned or v.admin_level)) else u.post_count}}</span>
 					</a>
 				</li>
 				<li>
-					<a class="{{ 'font-bold text-red-600' if 'comments' in request.path else 'text-gray-700' }}" href="/@{{u.username}}/comments">
+					<a class="{{ 'font-bold text-primary' if 'comments' in request.path else 'text-gray-700 dark:text-gray-400' }}" href="/@{{u.username}}/comments">
 						Comments <span class="text-gray-500 font-normal">{{0 if u.shadowbanned and not (v and (v.shadowbanned or v.admin_level)) else u.comment_count}}</span>
 					</a>
 				</li>
 				{% if u.id == v.id %}
 				<li>
-					<a class="{{ 'font-bold text-red-600' if 'saved/posts' in request.full_path else 'text-gray-700' }}" href="/@{{u.username}}/saved/posts">
+					<a class="{{ 'font-bold text-primary' if 'saved/posts' in request.full_path else 'text-gray-700 dark:text-gray-400' }}" href="/@{{u.username}}/saved/posts">
 						Saved Posts
 					</a>
 				</li>
 				<li>
-					<a class="{{ 'font-bold text-red-600' if 'saved/comments' in request.full_path else 'text-gray-700' }}" href="/@{{u.username}}/saved/comments">
+					<a class="{{ 'font-bold text-primary' if 'saved/comments' in request.full_path else 'text-gray-700 dark:text-gray-400' }}" href="/@{{u.username}}/saved/comments">
 						Saved Comments
 					</a>
 				</li>
@@ -323,7 +325,7 @@
 		<div class="flex justify-end md:justify-start mb-3 md:m-0 px-2.5 md:px-0">
 			{% include "CHRISTMAS/dropdowns/SubmissionSorts.html" %}
 		</div>
-		<hr class="hidden md:block my-4 shadow-inset-t-white-05 border-t border-gray-300"/>
+		<hr class="hidden md:block my-4 h-0.5 border-b border-gray-300 dark:border-gray-900 shadow-inset-t-white-05"/>
 		{% endif %}
 		<ul>
 			{% include "CHRISTMAS/submission_listing.html" %}
diff --git a/files/templates/CHRISTMAS/votes.html b/files/templates/CHRISTMAS/votes.html
index f041593ea..b77df4e86 100644
--- a/files/templates/CHRISTMAS/votes.html
+++ b/files/templates/CHRISTMAS/votes.html
@@ -44,7 +44,7 @@
 	</div>
 	<h5 class="font-heading mb-2">
 		<a href="{{thing.permalink}}" class="text-black hover:text-red-600">
-			{{ thing.title }}
+			{{ thing.realtitle(v) | safe}}
 		</a>
 	</h5>
 </div>