diff --git a/files/templates/CHRISTMAS/modals/ModalThemePicker.html b/files/templates/CHRISTMAS/modals/ModalThemePicker.html
index 087227502..fdd621508 100644
--- a/files/templates/CHRISTMAS/modals/ModalThemePicker.html
+++ b/files/templates/CHRISTMAS/modals/ModalThemePicker.html
@@ -13,7 +13,7 @@
 					<!-- Evergreen -->
 					<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 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-50 rounded-lg overflow-hidden">
+						<label for="evergreen-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-500/20 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>
@@ -43,7 +43,7 @@
 					<!-- Iron -->
 					<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 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-50 rounded-lg overflow-hidden">
+						<label for="iron-theme-dark" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-500/20 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>
@@ -73,7 +73,7 @@
 					<!-- 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 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-50 rounded-lg overflow-hidden">
+						<label for="iron-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-500/20 peer-checked: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>
@@ -103,7 +103,7 @@
 					<!-- 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 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-50 rounded-lg overflow-hidden">
+						<label for="dramblr-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-500/20 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>
@@ -133,7 +133,7 @@
 					<!-- 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 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-50 rounded-lg overflow-hidden">
+						<label for="dramblr-theme-dark" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-500/20 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>
@@ -163,7 +163,7 @@
 					<!-- 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 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-50 rounded-lg overflow-hidden">
+						<label for="canary-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-500/20 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>
@@ -193,7 +193,7 @@
 					<!-- Bubblegum -->
 					<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 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-50 rounded-lg overflow-hidden">
+						<label for="bubblegum-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-500/20 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>
@@ -223,7 +223,7 @@
 					<!-- 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 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-50 rounded-lg overflow-hidden">
+						<label for="mocha-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-500/20 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>
@@ -253,7 +253,7 @@
 					<!-- 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 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-50 rounded-lg overflow-hidden">
+						<label for="blood-orange-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-500/20 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>
@@ -283,7 +283,7 @@
 					<!-- 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 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-50 rounded-lg overflow-hidden">
+						<label for="choco-mint-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-500/20 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>
@@ -313,7 +313,7 @@
 					<!-- 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 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-50 rounded-lg overflow-hidden">
+						<label for="limon-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-500/20 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>
@@ -343,7 +343,7 @@
 					<!-- Seaside -->
 					<div class="my-2 px-2 w-1/2 lg:w-1/4 flex items-center justify-center">
 						<input hidden name="theme" value="theme-seaside dark" type="radio" id="seaside-theme" class="peer" onchange="changeTheme(['theme-seaside','dark']); post_toast2('/settings/profile?theme2='+value, '1')" {% if v.theme2 == 'theme-seaside dark' %}checked{% endif %}>
-						<label for="seaside-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-50 rounded-lg overflow-hidden">
+						<label for="seaside-theme" class="flex flex-col items-center justify-center w-full h-full text-center border border-gray-300 shadow-sm dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 peer-checked:border-blue-500 peer-checked:bg-blue-500/20 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>