diff --git a/res/include/img/icons/close.svg b/res/include/img/icons/close.svg
deleted file mode 100644
index da72c60..0000000
--- a/res/include/img/icons/close.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="width: 16px; height: 16px;">
-	<path fill="#{{.Style.InputText.RGB}}" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
-</svg>
diff --git a/res/include/img/icons/copy.svg b/res/include/img/icons/copy.svg
deleted file mode 100644
index b3f00af..0000000
--- a/res/include/img/icons/copy.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputText.RGB}}" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/>
-</svg>
diff --git a/res/include/img/icons/edit.svg b/res/include/img/icons/edit.svg
deleted file mode 100644
index 5be56dc..0000000
--- a/res/include/img/icons/edit.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-	<path fill="#{{.Style.InputText.RGB}}" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
-</svg>
diff --git a/res/include/img/icons/email.svg b/res/include/img/icons/email.svg
deleted file mode 100644
index 9f5226e..0000000
--- a/res/include/img/icons/email.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputText.RGB}}" d="M22 4H2v16h20V4zm-2 4l-8 5-8-5V6l8 5 8-5v2z"/>
-</svg>
diff --git a/res/include/img/icons/facebook.svg b/res/include/img/icons/facebook.svg
deleted file mode 100644
index 2f91446..0000000
--- a/res/include/img/icons/facebook.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputText.RGB}}" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z" />
-</svg>
diff --git a/res/include/img/icons/github.svg b/res/include/img/icons/github.svg
index 4607139..b138b72 100644
--- a/res/include/img/icons/github.svg
+++ b/res/include/img/icons/github.svg
@@ -1,4 +1,4 @@
 <svg role="img" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
 	<title>GitHub</title>
-	<path fill="#{{.Style.InputText.RGB}}" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+	<path fill="#ffffff" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
 </svg>
diff --git a/res/include/img/icons/help.svg b/res/include/img/icons/help.svg
deleted file mode 100644
index 9bfc1f9..0000000
--- a/res/include/img/icons/help.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputText.RGB}}" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
-</svg>
diff --git a/res/include/img/icons/mastodon.svg b/res/include/img/icons/mastodon.svg
index 1817eac..c15d28b 100644
--- a/res/include/img/icons/mastodon.svg
+++ b/res/include/img/icons/mastodon.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 216.4144 232.00976">
-  <path fill="#{{.Style.InputText.RGB}}" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"/>
+  <path fill="#ffffff" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"/>
   <path fill="#000000" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"/>
 </svg>
diff --git a/res/include/img/icons/medium.svg b/res/include/img/icons/medium.svg
deleted file mode 100644
index ef3c8c3..0000000
--- a/res/include/img/icons/medium.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 126.66667" height="24" width="24" xml:space="preserve" version="1.1" id="svg2">
-	<g transform="matrix(1.3333333,0,0,-1.3333333,0,126.66667)" id="g10">
-		<g transform="scale(0.1)" id="g12">
-			<path id="path14" fill="#{{.Style.InputText.RGB}}" style="fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 1200,810 -47.46,0 C 1134.92,810 1110,784.582 1110,768.309 l 0,-589.809 c 0,-16.293 24.92,-38.5 42.54,-38.5 l 47.46,0 0,-140 -430,0 0,140 90,0 0,620 -4.41,0 L 645.422,0 482.707,0 275.25,760 270,760 270,140 360,140 360,0 0,0 0,140 46.0977,140 C 65.082,140 90,162.207 90,178.5 l 0,589.809 C 90,784.582 65.082,810 46.0977,810 L 0,810 l 0,140 450.164,0 147.797,-550 4.066,0 149.164,550 448.809,0 0,-140"/>
-		</g>
-	</g>
-</svg>
diff --git a/res/include/img/icons/open_in_new.svg b/res/include/img/icons/open_in_new.svg
deleted file mode 100644
index cbbe1fa..0000000
--- a/res/include/img/icons/open_in_new.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputText.RGB}}" d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
-</svg>
diff --git a/res/include/img/icons/patreon.svg b/res/include/img/icons/patreon.svg
index a3805ef..0f4077b 100644
--- a/res/include/img/icons/patreon.svg
+++ b/res/include/img/icons/patreon.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 100 100">
-  <g fill="#{{.Style.InputText.RGB}}" fill-rule="evenodd">
+  <g fill="#ffffff" fill-rule="evenodd">
     <path d="M64.1102,0.1004 C44.259,0.1004 28.1086,16.2486 28.1086,36.0986 C28.1086,55.8884 44.259,71.989 64.1102,71.989 C83.9,71.989 100,55.8884 100,36.0986 C100,16.2486 83.9,0.1004 64.1102,0.1004"/>
     <polygon points=".012 95.988 17.59 95.988 17.59 .1 .012 .1"/>
   </g>
diff --git a/res/include/img/icons/pixeldrain.svg b/res/include/img/icons/pixeldrain.svg
deleted file mode 100644
index cd103b6..0000000
--- a/res/include/img/icons/pixeldrain.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg enable-background="new 0 0 283.46 283.46" version="1.1" viewBox="0 0 288 288" xmlns="http://www.w3.org/2000/svg">
-<path fill="#{{.Style.InputText.RGB}}" d="m142 2.23c-77 0-139 62.5-139 140 0 77 62.5 139 139 139 77 0 139-62.5 139-139 1e-3 -77-62.5-140-139-140zm0 258c-65.7 0-119-53.2-119-119s53.2-119 119-119c65.7 0 119 53.2 119 119 0 65.7-53.2 119-119 119zm0-219c-55.1 0-99.8 44.7-99.8 99.8 0 55.1 44.7 99.8 99.8 99.8s99.8-44.7 99.8-99.8c0-55.1-44.7-99.8-99.8-99.8zm49.3 36c8.69 0 15.7 7.04 15.7 15.7 0 8.69-7.04 15.7-15.7 15.7s-15.7-7.04-15.7-15.7c0-8.69 7.04-15.7 15.7-15.7zm-49.3-20c8.69 0 15.7 7.04 15.7 15.7 0 8.69-7.04 15.7-15.7 15.7s-15.7-7.04-15.7-15.7c0-8.69 7.04-15.7 15.7-15.7zm-48.7 20c8.69 0 15.7 7.04 15.7 15.7 0 8.69-7.04 15.7-15.7 15.7s-15.7-7.04-15.7-15.7c-1e-3 -8.69 7.04-15.7 15.7-15.7zm-35 63.8c0-8.69 7.04-15.7 15.7-15.7s15.7 7.04 15.7 15.7c0 8.69-7.04 15.7-15.7 15.7-8.69 0-15.7-7.04-15.7-15.7zm35 65.6c-8.69 0-15.7-7.04-15.7-15.7s7.04-15.7 15.7-15.7 15.7 7.04 15.7 15.7-7.04 15.7-15.7 15.7zm48.7 20.7c-8.69 0-15.7-7.04-15.7-15.7 0-8.69 7.04-15.7 15.7-15.7 8.69 0 15.7 7.04 15.7 15.7 1e-3 8.68-7.04 15.7-15.7 15.7zm2e-3 -47c-21.2 0-38.5-17.2-38.5-38.5 0-21.2 17.2-38.5 38.5-38.5 21.2 0 38.5 17.2 38.5 38.5 0 21.2-17.2 38.5-38.5 38.5zm49.3 26.3c-8.69 0-15.7-7.04-15.7-15.7s7.04-15.7 15.7-15.7 15.7 7.04 15.7 15.7-7.04 15.7-15.7 15.7zm18.6-49.9c-8.69 0-15.7-7.04-15.7-15.7 0-8.69 7.04-15.7 15.7-15.7s15.7 7.04 15.7 15.7c0 8.69-7.04 15.7-15.7 15.7z"/>
-</svg>
diff --git a/res/include/img/icons/reddit.svg b/res/include/img/icons/reddit.svg
index b84ba4a..fbae660 100644
--- a/res/include/img/icons/reddit.svg
+++ b/res/include/img/icons/reddit.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputText.RGB}}" d="M22,12.14C22,10.92 21,9.96 19.81,9.96C19.22,9.96 18.68,10.19 18.29,10.57C16.79,9.5 14.72,8.79 12.43,8.7L13.43,4L16.7,4.71C16.73,5.53 17.41,6.19 18.25,6.19C19.11,6.19 19.81,5.5 19.81,4.63C19.81,3.77 19.11,3.08 18.25,3.08C17.65,3.08 17.11,3.43 16.86,3.95L13.22,3.18C13.11,3.16 13,3.18 12.93,3.24C12.84,3.29 12.79,3.38 12.77,3.5L11.66,8.72C9.33,8.79 7.23,9.5 5.71,10.58C5.32,10.21 4.78,10 4.19,10C2.97,10 2,10.96 2,12.16C2,13.06 2.54,13.81 3.29,14.15C3.25,14.37 3.24,14.58 3.24,14.81C3.24,18.18 7.16,20.93 12,20.93C16.84,20.93 20.76,18.2 20.76,14.81C20.76,14.6 20.75,14.37 20.71,14.15C21.46,13.81 22,13.04 22,12.14M7,13.7C7,12.84 7.68,12.14 8.54,12.14C9.4,12.14 10.1,12.84 10.1,13.7A1.56,1.56 0 0,1 8.54,15.26C7.68,15.28 7,14.56 7,13.7M15.71,17.84C14.63,18.92 12.59,19 12,19C11.39,19 9.35,18.9 8.29,17.84C8.13,17.68 8.13,17.43 8.29,17.27C8.45,17.11 8.7,17.11 8.86,17.27C9.54,17.95 11,18.18 12,18.18C13,18.18 14.47,17.95 15.14,17.27C15.3,17.11 15.55,17.11 15.71,17.27C15.85,17.43 15.85,17.68 15.71,17.84M15.42,15.28C14.56,15.28 13.86,14.58 13.86,13.72A1.56,1.56 0 0,1 15.42,12.16C16.28,12.16 17,12.86 17,13.72C17,14.56 16.28,15.28 15.42,15.28Z" />
+	<path fill="#ffffff" d="M22,12.14C22,10.92 21,9.96 19.81,9.96C19.22,9.96 18.68,10.19 18.29,10.57C16.79,9.5 14.72,8.79 12.43,8.7L13.43,4L16.7,4.71C16.73,5.53 17.41,6.19 18.25,6.19C19.11,6.19 19.81,5.5 19.81,4.63C19.81,3.77 19.11,3.08 18.25,3.08C17.65,3.08 17.11,3.43 16.86,3.95L13.22,3.18C13.11,3.16 13,3.18 12.93,3.24C12.84,3.29 12.79,3.38 12.77,3.5L11.66,8.72C9.33,8.79 7.23,9.5 5.71,10.58C5.32,10.21 4.78,10 4.19,10C2.97,10 2,10.96 2,12.16C2,13.06 2.54,13.81 3.29,14.15C3.25,14.37 3.24,14.58 3.24,14.81C3.24,18.18 7.16,20.93 12,20.93C16.84,20.93 20.76,18.2 20.76,14.81C20.76,14.6 20.75,14.37 20.71,14.15C21.46,13.81 22,13.04 22,12.14M7,13.7C7,12.84 7.68,12.14 8.54,12.14C9.4,12.14 10.1,12.84 10.1,13.7A1.56,1.56 0 0,1 8.54,15.26C7.68,15.28 7,14.56 7,13.7M15.71,17.84C14.63,18.92 12.59,19 12,19C11.39,19 9.35,18.9 8.29,17.84C8.13,17.68 8.13,17.43 8.29,17.27C8.45,17.11 8.7,17.11 8.86,17.27C9.54,17.95 11,18.18 12,18.18C13,18.18 14.47,17.95 15.14,17.27C15.3,17.11 15.55,17.11 15.71,17.27C15.85,17.43 15.85,17.68 15.71,17.84M15.42,15.28C14.56,15.28 13.86,14.58 13.86,13.72A1.56,1.56 0 0,1 15.42,12.16C16.28,12.16 17,12.86 17,13.72C17,14.56 16.28,15.28 15.42,15.28Z" />
 </svg>
diff --git a/res/include/img/icons/save.svg b/res/include/img/icons/save.svg
deleted file mode 100644
index 20513fc..0000000
--- a/res/include/img/icons/save.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputText.RGB}}" d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/>
-</svg>
diff --git a/res/include/img/icons/share.svg b/res/include/img/icons/share.svg
deleted file mode 100644
index dfcd61d..0000000
--- a/res/include/img/icons/share.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputText.RGB}}" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
-</svg>
diff --git a/res/include/img/icons/shuffle.svg b/res/include/img/icons/shuffle.svg
deleted file mode 100644
index 00a6c02..0000000
--- a/res/include/img/icons/shuffle.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputText.RGB}}" d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/>
-</svg>
diff --git a/res/include/img/icons/tumblr.svg b/res/include/img/icons/tumblr.svg
deleted file mode 100644
index 7bdc595..0000000
--- a/res/include/img/icons/tumblr.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputText.RGB}}" d="M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17" />
-</svg>
diff --git a/res/include/img/icons/twitter.svg b/res/include/img/icons/twitter.svg
index 08ce902..fd15c73 100644
--- a/res/include/img/icons/twitter.svg
+++ b/res/include/img/icons/twitter.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputText.RGB}}" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
+	<path fill="#ffffff" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
 </svg>
diff --git a/res/include/img/icons/upload.svg b/res/include/img/icons/upload.svg
deleted file mode 100644
index f005557..0000000
--- a/res/include/img/icons/upload.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<path fill="#{{.Style.InputText.RGB}}" d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/>
-</svg>
diff --git a/res/include/img/spinner.svg b/res/include/img/spinner.svg
deleted file mode 100644
index 8876a1a..0000000
--- a/res/include/img/spinner.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-<svg version="1.1"
-	class="svg-loader"
-	xmlns="http://www.w3.org/2000/svg"
-	xmlns:xlink="http://www.w3.org/1999/xlink"
-	x="0px"
-	y="0px"
-	viewBox="0 0 80 80"
-	xml:space="preserve">
-	<path
-		fill="#{{.Style.HighlightColor.RGB}}"
-		d="M10,40c0,0,0-0.4,0-1.1c0-0.3,0-0.8,0-1.3c0-0.3,0-0.5,0-0.8c0-0.3,0.1-0.6,0.1-0.9c0.1-0.6,0.1-1.4,0.2-2.1
-		c0.2-0.8,0.3-1.6,0.5-2.5c0.2-0.9,0.6-1.8,0.8-2.8c0.3-1,0.8-1.9,1.2-3c0.5-1,1.1-2,1.7-3.1c0.7-1,1.4-2.1,2.2-3.1
-		c1.6-2.1,3.7-3.9,6-5.6c2.3-1.7,5-3,7.9-4.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.3,1.5-0.3,2.3-0.5c0.8-0.2,1.5-0.3,2.3-0.4l1.2-0.1
-		l0.6-0.1l0.3,0l0.1,0l0.1,0l0,0c0.1,0-0.1,0,0.1,0c1.5,0,2.9-0.1,4.5,0.2c0.8,0.1,1.6,0.1,2.4,0.3c0.8,0.2,1.5,0.3,2.3,0.5
-		c3,0.8,5.9,2,8.5,3.6c2.6,1.6,4.9,3.4,6.8,5.4c1,1,1.8,2.1,2.7,3.1c0.8,1.1,1.5,2.1,2.1,3.2c0.6,1.1,1.2,2.1,1.6,3.1
-		c0.4,1,0.9,2,1.2,3c0.3,1,0.6,1.9,0.8,2.7c0.2,0.9,0.3,1.6,0.5,2.4c0.1,0.4,0.1,0.7,0.2,1c0,0.3,0.1,0.6,0.1,0.9
-		c0.1,0.6,0.1,1,0.1,1.4C74,39.6,74,40,74,40c0.2,2.2-1.5,4.1-3.7,4.3s-4.1-1.5-4.3-3.7c0-0.1,0-0.2,0-0.3l0-0.4c0,0,0-0.3,0-0.9
-		c0-0.3,0-0.7,0-1.1c0-0.2,0-0.5,0-0.7c0-0.2-0.1-0.5-0.1-0.8c-0.1-0.6-0.1-1.2-0.2-1.9c-0.1-0.7-0.3-1.4-0.4-2.2
-		c-0.2-0.8-0.5-1.6-0.7-2.4c-0.3-0.8-0.7-1.7-1.1-2.6c-0.5-0.9-0.9-1.8-1.5-2.7c-0.6-0.9-1.2-1.8-1.9-2.7c-1.4-1.8-3.2-3.4-5.2-4.9
-		c-2-1.5-4.4-2.7-6.9-3.6c-0.6-0.2-1.3-0.4-1.9-0.6c-0.7-0.2-1.3-0.3-1.9-0.4c-1.2-0.3-2.8-0.4-4.2-0.5l-2,0c-0.7,0-1.4,0.1-2.1,0.1
-		c-0.7,0.1-1.4,0.1-2,0.3c-0.7,0.1-1.3,0.3-2,0.4c-2.6,0.7-5.2,1.7-7.5,3.1c-2.2,1.4-4.3,2.9-6,4.7c-0.9,0.8-1.6,1.8-2.4,2.7
-		c-0.7,0.9-1.3,1.9-1.9,2.8c-0.5,1-1,1.9-1.4,2.8c-0.4,0.9-0.8,1.8-1,2.6c-0.3,0.9-0.5,1.6-0.7,2.4c-0.2,0.7-0.3,1.4-0.4,2.1
-		c-0.1,0.3-0.1,0.6-0.2,0.9c0,0.3-0.1,0.6-0.1,0.8c0,0.5-0.1,0.9-0.1,1.3C10,39.6,10,40,10,40z">
-		<animateTransform
-			attributeType="xml"
-			attributeName="transform"
-			type="rotate"
-			from="0 40 40"
-			to="360 40 40"
-			dur="0.6s"
-			repeatCount="indefinite"/>
-	</path>
-</svg>
diff --git a/res/include/style/layout.css b/res/include/style/layout.css
index 0c9baa9..8332b6f 100644
--- a/res/include/style/layout.css
+++ b/res/include/style/layout.css
@@ -480,8 +480,7 @@ button > svg,
 	overflow-y: hidden;
 	white-space: nowrap;
 	text-align: center;
-	background-color: var(--shaded_background);
-	box-shadow: inset 0 -10px 6px -12px var(--shadow_color);
+	box-shadow: inset 0 -10px 8px -12px var(--shadow_color);
 }
 .tab_bar > button,
 .tab_bar > .button {
@@ -561,12 +560,12 @@ input[type=file]{
 	height: 18px; /* for horizontal scrollbars */
 }
 ::-webkit-scrollbar-track {
-	background: var(--scrollbar_background_color);
+	background: var(--body_color);
 }
 ::-webkit-scrollbar-thumb {
 	background-color: var(--scrollbar_foreground_color);
 	border-radius: 10px;
-	border: 5px solid var(--scrollbar_background_color);
+	border: 5px solid var(--body_color);
 	height: 40px;
 	width: 40px;
 }
@@ -574,10 +573,10 @@ input[type=file]{
 	background-color: var(--scrollbar_hover_color);
 }
 ::-webkit-scrollbar-corner{
-	background-color: var(--scrollbar_background_color);
+	background-color: var(--body_color);
 }
 ::-webkit-scrollbar-button:single-button {
-	background-color: var(--scrollbar_background_color);
+	background-color: var(--body_color);
 	display: block;
 	border-style: solid;
 	height: 10px;
@@ -619,5 +618,5 @@ input[type=file]{
 /* Firefox Scrollbar */
 
 * {
-	scrollbar-color: var(--scrollbar_foreground_color) var(--scrollbar_background_color);
+	scrollbar-color: var(--scrollbar_foreground_color) var(--body_color);
 }
diff --git a/res/static/img/misc/branding.webp b/res/static/img/misc/branding.webp
index 6b831ad..76c7b2d 100644
Binary files a/res/static/img/misc/branding.webp and b/res/static/img/misc/branding.webp differ
diff --git a/res/static/img/pixeldrain.svg b/res/static/img/pixeldrain.svg
new file mode 100644
index 0000000..6522089
--- /dev/null
+++ b/res/static/img/pixeldrain.svg
@@ -0,0 +1,3 @@
+<svg enable-background="new 0 0 283.46 283.46" version="1.1" viewBox="0 0 288 288" xmlns="http://www.w3.org/2000/svg">
+<path fill="#FFFFFF" d="m142 2.23c-77 0-139 62.5-139 140 0 77 62.5 139 139 139 77 0 139-62.5 139-139 1e-3 -77-62.5-140-139-140zm0 258c-65.7 0-119-53.2-119-119s53.2-119 119-119c65.7 0 119 53.2 119 119 0 65.7-53.2 119-119 119zm0-219c-55.1 0-99.8 44.7-99.8 99.8 0 55.1 44.7 99.8 99.8 99.8s99.8-44.7 99.8-99.8c0-55.1-44.7-99.8-99.8-99.8zm49.3 36c8.69 0 15.7 7.04 15.7 15.7 0 8.69-7.04 15.7-15.7 15.7s-15.7-7.04-15.7-15.7c0-8.69 7.04-15.7 15.7-15.7zm-49.3-20c8.69 0 15.7 7.04 15.7 15.7 0 8.69-7.04 15.7-15.7 15.7s-15.7-7.04-15.7-15.7c0-8.69 7.04-15.7 15.7-15.7zm-48.7 20c8.69 0 15.7 7.04 15.7 15.7 0 8.69-7.04 15.7-15.7 15.7s-15.7-7.04-15.7-15.7c-1e-3 -8.69 7.04-15.7 15.7-15.7zm-35 63.8c0-8.69 7.04-15.7 15.7-15.7s15.7 7.04 15.7 15.7c0 8.69-7.04 15.7-15.7 15.7-8.69 0-15.7-7.04-15.7-15.7zm35 65.6c-8.69 0-15.7-7.04-15.7-15.7s7.04-15.7 15.7-15.7 15.7 7.04 15.7 15.7-7.04 15.7-15.7 15.7zm48.7 20.7c-8.69 0-15.7-7.04-15.7-15.7 0-8.69 7.04-15.7 15.7-15.7 8.69 0 15.7 7.04 15.7 15.7 1e-3 8.68-7.04 15.7-15.7 15.7zm2e-3 -47c-21.2 0-38.5-17.2-38.5-38.5 0-21.2 17.2-38.5 38.5-38.5 21.2 0 38.5 17.2 38.5 38.5 0 21.2-17.2 38.5-38.5 38.5zm49.3 26.3c-8.69 0-15.7-7.04-15.7-15.7s7.04-15.7 15.7-15.7 15.7 7.04 15.7 15.7-7.04 15.7-15.7 15.7zm18.6-49.9c-8.69 0-15.7-7.04-15.7-15.7 0-8.69 7.04-15.7 15.7-15.7s15.7 7.04 15.7 15.7c0 8.69-7.04 15.7-15.7 15.7z"/>
+</svg>
diff --git a/res/static/robots.txt b/res/static/robots.txt
index ea0d5e6..e5bd545 100644
--- a/res/static/robots.txt
+++ b/res/static/robots.txt
@@ -1,4 +1,3 @@
 User-Agent: *
-Disallow: /res/
 Disallow: /u/
 Disallow: /l/
diff --git a/res/template/admin.html b/res/template/admin.html
index cf8b7b4..92353d6 100644
--- a/res/template/admin.html
+++ b/res/template/admin.html
@@ -5,7 +5,6 @@
 		<head>
 			{{template "meta_tags" "Administrator panel"}}
 			{{template "user_style" .}}
-			{{template "user_style_js" . }}
 
 			<script>
 			window.api_endpoint = '{{.APIEndpoint}}';
diff --git a/res/template/appearance.html b/res/template/appearance.html
index 716489e..1fdb50f 100644
--- a/res/template/appearance.html
+++ b/res/template/appearance.html
@@ -16,15 +16,25 @@
 				be saved in a cookie.
 			</p>
 			<div class="indent">
-				<input type="radio" id="style_default"        name="style"><label for="style_default">Pixeldrain Style</label><br/>
-				<input type="radio" id="style_classic"        name="style"><label for="style_classic">Pixeldrain classic (gray)</label><br/>
+				<input type="radio" id="style_default" name="style"><label for="style_default">Pixeldrain Style</label><br/>
+				Default pixeldrain style, with purple gradients
+				<br/>
+				<br/>
+				<input type="radio" id="style_nord" name="style"><label for="style_nord">Nord</label>
+				(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)<br/>
+				Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:<br/>
+				<input type="radio" id="style_nord_dark" name="style"><label for="style_nord_dark">Nord dark</label><br/>
+				<input type="radio" id="style_nord_light" name="style"><label for="style_nord_light">Nord light</label><br/>
+				<br/>
+				<input type="radio" id="style_classic" name="style"><label for="style_classic">Pixeldrain classic (gray)</label><br/>
+				Classic pre-2020 pixeldrain style, dark grey<br/>
+				<br/>
+				Other (experimental) themes<br/>
 				<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized Dark Style</label><br/>
 				<input type="radio" id="style_maroon"         name="style"><label for="style_maroon">Maroon Style</label><br/>
 				<input type="radio" id="style_hacker"         name="style"><label for="style_hacker">Hacker Style</label><br/>
 				<input type="radio" id="style_canta"          name="style"><label for="style_canta">Canta Style</label>
 				(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)<br/>
-				<input type="radio" id="style_nord"           name="style"><label for="style_nord">Nord Style</label>
-				(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)<br/>
 				<input type="radio" id="style_snowstorm"      name="style"><label for="style_snowstorm">Snowstorm Style</label>
 				(Inspired by <a href="https://www.nordtheme.com/" target="_blank">Nord</a>)<br/>
 				<input type="radio" id="style_skeuos"         name="style"><label for="style_skeuos">Skeuos Style</label>
diff --git a/res/template/directory_upload.html b/res/template/directory_upload.html
index 4ebbdf6..228eec7 100644
--- a/res/template/directory_upload.html
+++ b/res/template/directory_upload.html
@@ -3,7 +3,6 @@
 	<head>
 		{{template "meta_tags" "Directory upload"}}
 		{{template "user_style" . }}
-		{{template "user_style_js" . }}
 
 		<script>
 		window.api_endpoint = '{{.APIEndpoint}}';
diff --git a/res/template/file_viewer_svelte.html b/res/template/file_viewer_svelte.html
index e8282e0..60c232f 100644
--- a/res/template/file_viewer_svelte.html
+++ b/res/template/file_viewer_svelte.html
@@ -8,7 +8,6 @@
 		{{ template "opengraph" .OGData }}
 
 		{{ template "user_style" . }}
-		{{ template "user_style_js" . }}
 
 		<link rel="icon" sizes="32x32" href="/res/img/pixeldrain_32.png" />
 		<link rel="icon" sizes="128x128" href="/res/img/pixeldrain_128.png" />
diff --git a/res/template/fragments/user_style.html b/res/template/fragments/user_style.html
index 3ec24b6..689cd21 100644
--- a/res/template/fragments/user_style.html
+++ b/res/template/fragments/user_style.html
@@ -4,18 +4,3 @@
 {{template "layout.css" .}}
 </style>
 {{end}}
-
-{{ define "user_style_js" }}
-<script>
-	window.style = {
-		bodyTextColor: "{{.Style.BodyText.RGB}}",
-		highlightColor: "{{.Style.Highlight.RGB}}",
-		dangerColor: "{{.Style.Danger.RGB}}",
-		bodyColor: "{{.Style.BodyColor.RGB}}",
-		separatorColor: "{{.Style.Separator.RGB}}",
-		chart1Color: "{{.Style.Chart1.RGB}}",
-		chart2Color: "{{.Style.Chart2.RGB}}",
-		chart3Color: "{{.Style.Chart3.RGB}}",
-	}
-</script>
-{{ end }}
diff --git a/res/template/user_home.html b/res/template/user_home.html
index e232bde..1127f18 100644
--- a/res/template/user_home.html
+++ b/res/template/user_home.html
@@ -3,7 +3,6 @@
 	<head>
 		{{template "meta_tags" .User.Username }}
 		{{template "user_style" . }}
-		{{template "user_style_js" . }}
 
 		<script>
 		window.api_endpoint = '{{.APIEndpoint}}';
diff --git a/svelte/src/admin_panel/Home.svelte b/svelte/src/admin_panel/Home.svelte
index b23135e..a254d67 100644
--- a/svelte/src/admin_panel/Home.svelte
+++ b/svelte/src/admin_panel/Home.svelte
@@ -2,6 +2,7 @@
 import { onDestroy, onMount } from "svelte";
 import { formatDataVolume, formatThousands, formatDate, formatNumber, formatDuration } from "../util/Formatting.svelte";
 import Chart from "../util/Chart.svelte";
+import { color_by_name } from "../util/Util.svelte";
 
 let graphViews
 let graphBandwidth
@@ -115,15 +116,15 @@ onMount(() => {
 			label: "Bandwidth (free)",
 			borderWidth: 2,
 			pointRadius: 0,
-			borderColor: "#"+window.style.highlightColor,
-			backgroundColor: "#"+window.style.highlightColor,
+			borderColor: color_by_name("highlight_color"),
+			backgroundColor: color_by_name("highlight_color"),
 		},
 		{
 			label: "Bandwidth (premium)",
 			borderWidth: 2,
 			pointRadius: 0,
-			borderColor: "#"+window.style.dangerColor,
-			backgroundColor: "#"+window.style.dangerColor,
+			borderColor: color_by_name("danger_color"),
+			backgroundColor: color_by_name("danger_color"),
 		},
 	];
 	graphViews.data().datasets = [
@@ -131,15 +132,15 @@ onMount(() => {
 			label: "Views",
 			borderWidth: 2,
 			pointRadius: 0,
-			borderColor: "#"+window.style.highlightColor,
-			backgroundColor: "#"+window.style.highlightColor,
+			borderColor: color_by_name("highlight_color"),
+			backgroundColor: color_by_name("highlight_color"),
 		},
 		{
 			label: "Downloads",
 			borderWidth: 2,
 			pointRadius: 0,
-			borderColor: "#"+window.style.dangerColor,
-			backgroundColor: "#"+window.style.dangerColor,
+			borderColor: color_by_name("danger_color"),
+			backgroundColor: color_by_name("danger_color"),
 		},
 	];
 
diff --git a/svelte/src/file_viewer/AdLeaderboard.svelte b/svelte/src/file_viewer/AdLeaderboard.svelte
index 214cbf8..1008a57 100644
--- a/svelte/src/file_viewer/AdLeaderboard.svelte
+++ b/svelte/src/file_viewer/AdLeaderboard.svelte
@@ -1,5 +1,6 @@
 <script>
 import { onMount } from "svelte"
+import { color_by_name_no_prefix } from "../util/Util.svelte";
 import * as head from "./AdHead.svelte"
 
 let container
@@ -114,7 +115,7 @@ head.valueimpression_loaded.subscribe(v => {
 	{:else if ad_type === "aads"}
 		<iframe bind:this={banner} class="banner"
 			data-aa="73974"
-			src="//ad.a-ads.com/73974?size=728x90&background_color={window.style.bodyColor}&text_color={window.style.bodyTextColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
+			src="//ad.a-ads.com/73974?size=728x90&background_color={color_by_name_no_prefix('body_color')}&text_color={color_by_name_no_prefix('body_text_color')}&title_color={color_by_name_no_prefix('highlight_color')}&title_hover_color={color_by_name_no_prefix('highlight_color')}&link_color={color_by_name_no_prefix('highlight_color')}&link_hover_color={color_by_name_no_prefix('highlight_color')}"
 			style="width:728px; height:90px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
 			title="A-ads advertisement">
 		</iframe>
diff --git a/svelte/src/file_viewer/AdSkyscraper.svelte b/svelte/src/file_viewer/AdSkyscraper.svelte
index 0e20feb..5ed3720 100644
--- a/svelte/src/file_viewer/AdSkyscraper.svelte
+++ b/svelte/src/file_viewer/AdSkyscraper.svelte
@@ -1,5 +1,6 @@
 <script>
 import { createEventDispatcher, onMount, tick } from "svelte"
+import { color_by_name_no_prefix } from "../util/Util.svelte";
 import * as head from "./AdHead.svelte"
 
 let dispatch = createEventDispatcher()
@@ -91,7 +92,7 @@ head.valueimpression_loaded.subscribe(v => {
 			{#if ad_type === "aads"}
 				<iframe
 					data-aa="1811738"
-					src="//ad.a-ads.com/1811738?size=160x600&background_color={window.style.bodyColor}&text_color={window.style.bodyTextColor}&title_color={window.style.highlightColor}&title_hover_color={window.style.highlightColor}&link_color={window.style.highlightColor}&link_hover_color={window.style.highlightColor}"
+					src="//ad.a-ads.com/1811738?size=160x600&background_color={color_by_name_no_prefix('body_color')}&text_color={color_by_name_no_prefix('body_text_color')}&title_color={color_by_name_no_prefix('highlight_color')}&title_hover_color={color_by_name_no_prefix('highlight_color')}&link_color={color_by_name_no_prefix('highlight_color')}&link_hover_color={color_by_name_no_prefix('highlight_color')}"
 					style="width:160px; height:600px; border:0px; padding:0; overflow:hidden; background-color: transparent;"
 					title="A-ads advertisement">
 				</iframe>
diff --git a/svelte/src/file_viewer/DetailsWindow.svelte b/svelte/src/file_viewer/DetailsWindow.svelte
index cfc0c59..e26c524 100644
--- a/svelte/src/file_viewer/DetailsWindow.svelte
+++ b/svelte/src/file_viewer/DetailsWindow.svelte
@@ -1,7 +1,7 @@
 <script>
 import { onMount } from "svelte";
 import { formatDataVolume, formatDate, formatThousands } from "../util/Formatting.svelte"
-import { domain_url } from "../util/Util.svelte";
+import { color_by_name, domain_url } from "../util/Util.svelte";
 import Chart from "../util/Chart.svelte";
 
 export let file = {
@@ -75,15 +75,15 @@ onMount(() => {
 			label: "Views",
 			borderWidth: 2,
 			pointRadius: 0,
-			borderColor: "#"+window.style.highlightColor,
-			backgroundColor: "#"+window.style.highlightColor,
+			borderColor: color_by_name("highlight_color"),
+			backgroundColor: color_by_name("highlight_color"),
 		},
 		{
 			label: "Downloads",
 			borderWidth: 2,
 			pointRadius: 0,
-			borderColor: "#"+window.style.dangerColor,
-			backgroundColor: "#"+window.style.dangerColor,
+			borderColor: color_by_name("danger_color"),
+			backgroundColor: color_by_name("danger_color"),
 		},
 	];
 })
diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte
index 78ea57b..b7ebde9 100644
--- a/svelte/src/file_viewer/FileViewer.svelte
+++ b/svelte/src/file_viewer/FileViewer.svelte
@@ -410,7 +410,9 @@ const keyboard_event = evt => {
 			bind:this={list_navigator}
 			files={list.files}
 			shuffle={list_shuffle}
-			on:set_file={e => { open_file_index(e.detail) }}>
+			on:set_file={e => open_file_index(e.detail)}
+			on:toggle_gallery={toggle_gallery}
+		>
 		</ListNavigator>
 	{/if}
 
@@ -423,17 +425,6 @@ const keyboard_event = evt => {
 				<hr/>
 			{/if}
 
-			{#if is_list}
-				<button
-					on:click={toggle_gallery}
-					class="toolbar_button"
-					class:button_highlight={view === "gallery"}
-					title="Opens a gallery view of the album">
-					<i class="icon">photo_library</i>
-					Gallery
-				</button>
-			{/if}
-
 			{#if file.abuse_type === "" && view === "file"}
 				<button
 					on:click={downloader.download_file}
diff --git a/svelte/src/file_viewer/GalleryView.svelte b/svelte/src/file_viewer/GalleryView.svelte
index 3ea769b..59e81b7 100644
--- a/svelte/src/file_viewer/GalleryView.svelte
+++ b/svelte/src/file_viewer/GalleryView.svelte
@@ -178,7 +178,7 @@ const drop = (e, index) => {
 	overflow: hidden;
 	border-radius: 8px;
 	box-shadow: 1px 1px 4px -1px var(--shadow_color);
-	background-color: var(--input_background);
+	background: var(--input_background);
 	word-break: break-all;
 	text-align: center;
 	line-height: 1.2em;
@@ -187,8 +187,12 @@ const drop = (e, index) => {
 	text-decoration: none;
 	vertical-align: top;
 	color: var(--body_text_color);
+	transition: background 0.2s;
 }
-.file:hover, .highlight {
+.file:hover {
+	background: var(--input_hover_background);
+}
+.highlight {
 	box-shadow: 0 0 2px 2px var(--highlight_color);
 	text-decoration: none;
 }
diff --git a/svelte/src/file_viewer/IntroPopup.svelte b/svelte/src/file_viewer/IntroPopup.svelte
index 55e4265..9d4b565 100644
--- a/svelte/src/file_viewer/IntroPopup.svelte
+++ b/svelte/src/file_viewer/IntroPopup.svelte
@@ -57,7 +57,7 @@ onMount(() => {
 	height: auto;
 	padding: 8px;
 	background-color: var(--popout_color);
-	box-shadow: 2px 2px 16px var(--shadow_color);
+	box-shadow: 1px 1px 10px -2px var(--shadow_color);
 	border-radius: 20px;
 	z-index: 50;
 	transition: opacity .4s, left .5s, top .5s;
diff --git a/svelte/src/file_viewer/ListNavigator.svelte b/svelte/src/file_viewer/ListNavigator.svelte
index 35f0d5c..2c0a14b 100644
--- a/svelte/src/file_viewer/ListNavigator.svelte
+++ b/svelte/src/file_viewer/ListNavigator.svelte
@@ -18,6 +18,9 @@ export const next = () => {
 export const prev = () => {
 	dispatch("set_file", selected_file_index-1)
 }
+export const toggle_gallery = () => {
+	dispatch("toggle_gallery")
+}
 
 let history = []
 export const rand_item = () => {
@@ -69,8 +72,9 @@ export const set_item = idx => {
 </script>
 
 <div class="nav_container">
-	<button class="nav_button" style="margin-right: 0;" on:click={prev} title="Open the previous file">
-		<i class="icon">chevron_left</i>
+	<button class="nav_button" on:click={toggle_gallery} title="Opens a gallery view of the album">
+		<i class="icon">photo_library</i><br/>
+		Gallery
 	</button>
 	<div bind:this={file_list_div} class="list_navigator">
 		{#each files as file, index (file)}
@@ -84,9 +88,6 @@ export const set_item = idx => {
 			</a>
 		{/each}
 	</div>
-	<button class="nav_button" style="margin-left: 0;" on:click={next} title="Open the next file">
-		<i class="icon">chevron_right</i>
-	</button>
 </div>
 
 <style>
@@ -104,7 +105,6 @@ export const set_item = idx => {
 .nav_button{
 	flex-grow: 0;
 	flex-shrink: 0;
-	height: 2.6em;
 	margin-top: 8px;
 }
 
diff --git a/svelte/src/home_page/ForCreators.svelte b/svelte/src/home_page/ForCreators.svelte
index d9de990..db2082e 100644
--- a/svelte/src/home_page/ForCreators.svelte
+++ b/svelte/src/home_page/ForCreators.svelte
@@ -76,7 +76,6 @@ header {
 }
 .keyword {
 	font-size: 1.1em;
-	text-shadow: 1px 1px 3px var(--shadow_color);
 }
 h2 {
 	border-bottom: none;
diff --git a/svelte/src/user_home/Home.svelte b/svelte/src/user_home/Home.svelte
index 9005a3c..36f15a0 100644
--- a/svelte/src/user_home/Home.svelte
+++ b/svelte/src/user_home/Home.svelte
@@ -5,6 +5,7 @@ import Chart from "../util/Chart.svelte";
 import StorageProgressBar from "./StorageProgressBar.svelte";
 import HotlinkProgressBar from "./HotlinkProgressBar.svelte";
 import Euro from "../util/Euro.svelte"
+import { color_by_name } from "../util/Util.svelte";
 
 let graph_views_downloads = null
 let graph_bandwidth = null
@@ -140,15 +141,15 @@ onMount(() => {
 			label: "Views",
 			borderWidth: 2,
 			pointRadius: 0,
-			borderColor: "#"+window.style.highlightColor,
-			backgroundColor: "#"+window.style.highlightColor,
+			borderColor: color_by_name("highlight_color"),
+			backgroundColor: color_by_name("highlight_color"),
 		},
 		{
 			label: "Downloads",
 			borderWidth: 2,
 			pointRadius: 0,
-			borderColor: "#"+window.style.dangerColor,
-			backgroundColor: "#"+window.style.dangerColor,
+			borderColor: color_by_name("danger_color"),
+			backgroundColor: color_by_name("danger_color"),
 		},
 	];
 	graph_bandwidth.data().datasets = [
@@ -156,22 +157,22 @@ onMount(() => {
 			label: "Total bandwidth",
 			borderWidth: 2,
 			pointRadius: 0,
-			borderColor: "#"+window.style.chart1Color,
-			backgroundColor: "#"+window.style.chart1Color,
+			borderColor: color_by_name("chart_1_color"),
+			backgroundColor: color_by_name("chart_1_color"),
 		},
 		{
 			label: "Premium bandwidth",
 			borderWidth: 2,
 			pointRadius: 0,
-			borderColor: "#"+window.style.chart2Color,
-			backgroundColor: "#"+window.style.chart2Color,
+			borderColor: color_by_name("chart_2_color"),
+			backgroundColor: color_by_name("chart_2_color"),
 		},
 		{
 			label: "Kickback bandwidth",
 			borderWidth: 2,
 			pointRadius: 0,
-			borderColor: "#"+window.style.chart3Color,
-			backgroundColor: "#"+window.style.chart3Color,
+			borderColor: color_by_name("chart_3_color"),
+			backgroundColor: color_by_name("chart_3_color"),
 		},
 	];
 
diff --git a/svelte/src/util/Chart.svelte b/svelte/src/util/Chart.svelte
index a3272fc..c16ed2f 100644
--- a/svelte/src/util/Chart.svelte
+++ b/svelte/src/util/Chart.svelte
@@ -1,6 +1,7 @@
 <script>
 import { onMount } from "svelte";
 import { formatDataVolume, formatNumber } from "./Formatting.svelte";
+import { color_by_name } from "./Util.svelte";
 import {
 	Chart,
 	PointElement,
@@ -38,7 +39,7 @@ export const update = () => {
 	return chart_object.update()
 }
 
-Chart.defaults.color = "#"+window.style.bodyTextColor;
+Chart.defaults.color = color_by_name("body_text_color");
 Chart.defaults.font.size = 15;
 Chart.defaults.font.family = "system-ui, sans-serif";
 Chart.defaults.maintainAspectRatio = false;
@@ -91,7 +92,7 @@ onMount(() => {
 						grid: {
 							display: true,
 							drawBorder: false,
-							color: "#"+window.style.separatorColor,
+							color: color_by_name("separator"),
 						},
 					},
 					x: {
diff --git a/svelte/src/util/ThemePicker.svelte b/svelte/src/util/ThemePicker.svelte
index b8c6c2e..9e50d81 100644
--- a/svelte/src/util/ThemePicker.svelte
+++ b/svelte/src/util/ThemePicker.svelte
@@ -33,10 +33,13 @@ let set = s => {
 		Canta
 	</button>
 	<button class:button_highlight={theme==="nord"} on:click={() => {set("nord")}}>
-		Nord
+		Nord (dynamic)
 	</button>
-	<button class:button_highlight={theme==="snowstorm"} on:click={() => {set("snowstorm")}}>
-		Snowstorm
+	<button class:button_highlight={theme==="nord_dark"} on:click={() => {set("nord_dark")}}>
+		Nord (dark)
+	</button>
+	<button class:button_highlight={theme==="nord_light"} on:click={() => {set("nord_light")}}>
+		Nord (light)
 	</button>
 	<button class:button_highlight={theme==="skeuos"} on:click={() => {set("skeuos")}}>
 		Skeuos
diff --git a/svelte/src/util/Util.svelte b/svelte/src/util/Util.svelte
index 66fb7e5..fe060e7 100644
--- a/svelte/src/util/Util.svelte
+++ b/svelte/src/util/Util.svelte
@@ -59,4 +59,11 @@ export const add_upload_history = id => {
 	// Save the new ID
 	localStorage.setItem("uploaded_files", id + "," + uploads);
 }
+
+export const color_by_name = name => {
+	return getComputedStyle(document.documentElement).getPropertyValue("--"+name);
+}
+export const color_by_name_no_prefix = name => {
+	return color_by_name(name).replace(/^#/, "");
+}
 </script>
diff --git a/webcontroller/style.go b/webcontroller/style.go
index 8318f75..8951301 100644
--- a/webcontroller/style.go
+++ b/webcontroller/style.go
@@ -9,7 +9,7 @@ import (
 	"time"
 )
 
-func userStyleFromRequest(r *http.Request) (s pixeldrainStyleSheet) {
+func userStyleFromRequest(r *http.Request) (s template.CSS) {
 	// Get the chosen style from the URL
 	var style = r.URL.Query().Get("style")
 
@@ -23,65 +23,36 @@ func userStyleFromRequest(r *http.Request) (s pixeldrainStyleSheet) {
 	return userStyle(style)
 }
 
-func userStyle(style string) (s pixeldrainStyleSheet) {
+func userStyle(style string) template.CSS {
 	switch style {
 	case "classic":
-		s = pixeldrainClassicStyle
+		return template.CSS(pixeldrainClassicStyle.String())
 	case "solarized_dark":
-		s = solarizedDarkStyle
+		return template.CSS(solarizedDarkStyle.String())
 	case "maroon":
-		s = maroonStyle
+		return template.CSS(maroonStyle.String())
 	case "hacker":
-		s = hackerStyle
+		return template.CSS(hackerStyle.String())
 	case "canta":
-		s = cantaPixeldrainStyle
+		return template.CSS(cantaPixeldrainStyle.String())
 	case "skeuos":
-		s = skeuosPixeldrainStyle
+		return template.CSS(skeuosPixeldrainStyle.String())
 	case "nord":
-		s = nordPixeldrainStyle
-	case "snowstorm":
-		s = snowstormPixeldrainStyle
+		return template.CSS(nordPixeldrainStyle.withLight(snowstormPixeldrainStyle))
+	case "nord_dark":
+		return template.CSS(nordPixeldrainStyle.String())
+	case "nord_light", "snowstorm":
+		return template.CSS(snowstormPixeldrainStyle.String())
 	case "sweet":
-		s = sweetPixeldrainStyle
+		return template.CSS(sweetPixeldrainStyle.String())
 	case "default":
 		fallthrough // use default case
 	default:
-		s = defaultPixeldrainStyle
+		return template.CSS(defaultPixeldrainStyle.String())
 	}
-
-	// Set default colors
-	var noColor = hsl{0, 0, 0}
-	var setDefaultHSL = func(color *hsl, def hsl) {
-		if *color == noColor {
-			*color = def
-		}
-	}
-	var setDefaultColor = func(color *Color, def Color) {
-		if *color == nil {
-			*color = def
-		}
-	}
-	setDefaultHSL(&s.Link, s.Highlight.Add(0, 0, -.05))
-	setDefaultColor(&s.ScrollbarBackground, s.BodyColor)
-	setDefaultColor(&s.ScrollbarForeground, s.Input)
-	setDefaultColor(&s.ScrollbarHover, s.Highlight)
-	setDefaultHSL(&s.Chart1, s.Highlight)
-	setDefaultHSL(&s.Chart2, s.Chart1.Add(120, 0, 0))
-	setDefaultHSL(&s.Chart3, s.Chart2.Add(120, 0, 0))
-	setDefaultColor(&s.HighlightBackground, Gradient{180, []Color{s.Highlight, s.Highlight.Add(0, 0, -0.03)}})
-	setDefaultColor(&s.Background, s.BackgroundColor)
-	setDefaultColor(&s.BackgroundPattern, s.BackgroundColor)
-	setDefaultColor(&s.ParallaxSlider, s.BackgroundColor)
-	setDefaultColor(&s.Navigation, NoColor)
-	setDefaultColor(&s.BodyBackground, s.BodyColor)
-	setDefaultHSL(&s.BackgroundText, s.BodyText)
-	setDefaultColor(&s.Separator, s.BodyColor.Add(0, 0, .05))
-	setDefaultColor(&s.Shaded, RGBA{0, 0, 0, 0.2})
-
-	return s
 }
 
-type pixeldrainStyleSheet struct {
+type styleSheet struct {
 	Link                hsl // Based on Highlight if undefined
 	Input               Color
 	InputHover          Color
@@ -91,7 +62,6 @@ type pixeldrainStyleSheet struct {
 	Highlight           hsl // Links, highlighted buttons, list navigation
 	HighlightText       hsl // Text on buttons
 	Danger              hsl
-	ScrollbarBackground Color
 	ScrollbarForeground Color // Based on Highlight if undefined
 	ScrollbarHover      Color // Based on ScrollbarForeground if undefined
 
@@ -117,7 +87,41 @@ type pixeldrainStyleSheet struct {
 	Light  bool // If this is a light theme
 }
 
-func (s pixeldrainStyleSheet) String() string {
+func (s styleSheet) withDefaults() styleSheet {
+	// Set default colors
+	var noColor = hsl{0, 0, 0}
+	var defaultHSL = func(color *hsl, def hsl) {
+		if *color == noColor {
+			*color = def
+		}
+	}
+	var defaultColor = func(color *Color, def Color) {
+		if *color == nil {
+			*color = def
+		}
+	}
+	defaultHSL(&s.Link, s.Highlight.Add(0, 0, -.05))
+	defaultColor(&s.ScrollbarForeground, s.Input)
+	defaultColor(&s.ScrollbarHover, s.Highlight)
+	defaultHSL(&s.Chart1, s.Highlight)
+	defaultHSL(&s.Chart2, s.Chart1.Add(120, 0, 0))
+	defaultHSL(&s.Chart3, s.Chart2.Add(120, 0, 0))
+	defaultColor(&s.HighlightBackground, s.Highlight)
+	defaultColor(&s.Background, s.BackgroundColor)
+	defaultColor(&s.BackgroundPattern, s.BackgroundColor)
+	defaultColor(&s.ParallaxSlider, s.BackgroundColor)
+	defaultColor(&s.Navigation, NoColor)
+	defaultColor(&s.BodyBackground, s.BodyColor)
+	defaultHSL(&s.BackgroundText, s.BodyText)
+	defaultColor(&s.Separator, s.BodyColor.Add(0, 0, .05))
+	defaultColor(&s.Shaded, RGBA{0, 0, 0, 0.2})
+
+	return s
+}
+
+func (s styleSheet) String() string {
+	s = s.withDefaults()
+
 	return fmt.Sprintf(
 		`:root {
 	--link_color:                 %s;
@@ -130,7 +134,6 @@ func (s pixeldrainStyleSheet) String() string {
 	--highlight_text_color:       %s;
 	--danger_color:               %s;
 	--danger_color_dark:          %s;
-	--scrollbar_background_color: %s;
 	--scrollbar_foreground_color: %s;
 	--scrollbar_hover_color:      %s;
 
@@ -163,7 +166,6 @@ func (s pixeldrainStyleSheet) String() string {
 		s.HighlightText.CSS(),
 		s.Danger.CSS(),
 		s.Danger.Add(0, 0, -.02).CSS(),
-		s.ScrollbarBackground.CSS(),
 		s.ScrollbarForeground.CSS(),
 		s.ScrollbarHover.CSS(),
 		s.BackgroundColor.CSS(),
@@ -185,7 +187,19 @@ func (s pixeldrainStyleSheet) String() string {
 	)
 }
 
-func (s pixeldrainStyleSheet) BackgroundTiles(tpl *template.Template) template.URL {
+func (dark styleSheet) withLight(light styleSheet) string {
+	return fmt.Sprintf(
+		`%s
+
+@media (prefers-color-scheme: light) {
+	%s
+}`,
+		dark.String(),
+		light.String(),
+	)
+}
+
+func BackgroundTiles(tpl *template.Template) template.URL {
 	var (
 		now   = time.Now()
 		month = now.Month()
@@ -217,7 +231,7 @@ func (s pixeldrainStyleSheet) BackgroundTiles(tpl *template.Template) template.U
 
 // Following are all the available styles
 
-var defaultPixeldrainStyle = pixeldrainStyleSheet{
+var defaultPixeldrainStyle = styleSheet{
 	Input:               hsl{266, .85, .24},
 	InputHover:          hsl{266, .85, .28},
 	InputText:           hsl{0, 0, .9},
@@ -226,7 +240,6 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
 	Highlight:           hsl{117, .63, .46},
 	HighlightText:       hsl{0, 0, 0},
 	Danger:              hsl{357, .63, .46},
-	ScrollbarBackground: hsl{274, .9, .14},
 	ScrollbarForeground: hsl{266, .85, .40},
 	ScrollbarHover:      hsl{266, .85, .50},
 
@@ -243,7 +256,7 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{
 	Shadow: hsl{0, 0, 0},
 }
 
-var pixeldrainClassicStyle = pixeldrainStyleSheet{
+var pixeldrainClassicStyle = styleSheet{
 	Input:               hsl{0, 0, .16},
 	InputHover:          hsl{0, 0, .20},
 	InputText:           hsl{0, 0, .9},
@@ -262,7 +275,7 @@ var pixeldrainClassicStyle = pixeldrainStyleSheet{
 	Shadow: hsl{0, 0, 0},
 }
 
-var solarizedDarkStyle = pixeldrainStyleSheet{
+var solarizedDarkStyle = styleSheet{
 	Input:               hsl{192, .95, .25},
 	InputHover:          hsl{192, .95, .29},
 	InputText:           hsl{0, 0, 1},
@@ -281,7 +294,7 @@ var solarizedDarkStyle = pixeldrainStyleSheet{
 	Shadow: hsl{0, 0, 0},
 }
 
-var maroonStyle = pixeldrainStyleSheet{
+var maroonStyle = styleSheet{
 	Input:               hsl{0, .8, .20}, // hsl(0, 87%, 40%)
 	InputHover:          hsl{0, .8, .24},
 	InputText:           hsl{0, 0, 1},
@@ -300,7 +313,7 @@ var maroonStyle = pixeldrainStyleSheet{
 	Shadow: hsl{0, 0, 0},
 }
 
-var hackerStyle = pixeldrainStyleSheet{
+var hackerStyle = styleSheet{
 	Input:               hsl{0, 0, .1},
 	InputHover:          hsl{0, 0, .14},
 	InputText:           hsl{0, 0, 1},
@@ -319,7 +332,7 @@ var hackerStyle = pixeldrainStyleSheet{
 	Shadow: hsl{0, 0, 0},
 }
 
-var cantaPixeldrainStyle = pixeldrainStyleSheet{
+var cantaPixeldrainStyle = styleSheet{
 	Input:               hsl{167, .06, .30}, // hsl(167, 6%, 30%)
 	InputHover:          hsl{167, .06, .34}, // hsl(167, 6%, 30%)
 	InputText:           hsl{0, 0, 1},
@@ -338,7 +351,7 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{
 	Shadow: hsl{0, 0, 0},
 }
 
-var skeuosPixeldrainStyle = pixeldrainStyleSheet{
+var skeuosPixeldrainStyle = styleSheet{
 	Input:               hsl{226, .15, .23}, //hsl(226, 15%, 23%)
 	InputHover:          hsl{226, .15, .27},
 	InputText:           hsl{60, .06, .93},
@@ -357,51 +370,51 @@ var skeuosPixeldrainStyle = pixeldrainStyleSheet{
 	Shadow: hsl{0, 0, 0},
 }
 
-var nordPixeldrainStyle = pixeldrainStyleSheet{
-	Input:               hsl{193, .43, .67},
-	InputHover:          hsl{193, .43, .71},
-	InputText:           hsl{180, .19, .23},
-	InputDisabledText:   hsl{0, 0, .5},
-	Highlight:           hsl{145, .63, .42},
-	HighlightText:       hsl{0, 0, 0},
-	Danger:              hsl{354, .42, .56},
-	ScrollbarForeground: hsl{193, .43, .67},
-	ScrollbarHover:      hsl{193, .43, .76},
+var nordPixeldrainStyle = styleSheet{
+	Input:               hsl{220, .16, .36}, // nord3
+	InputHover:          hsl{220, .16, .40},
+	InputText:           hsl{218, .27, .92}, // nord5 hsl(218, 27%, 92%)
+	InputDisabledText:   hsl{220, .16, .22}, // nord0 hsl(220, 16%, 22%)
+	Highlight:           hsl{92, .28, .65},  // nord14 hsl(92, 28%, 65%)
+	HighlightText:       hsl{220, .16, .22}, // nord0
+	Danger:              hsl{354, .42, .56}, // nord11 hsl(354, 42%, 56%)
+	ScrollbarForeground: hsl{179, .25, .65}, // nord7 hsl(179, 25%, 65%)
+	ScrollbarHover:      hsl{193, .43, .67}, // nord8 hsl(193, 43%, 67%)
 
-	BackgroundColor: hsl{220, .16, .22},
-	BodyColor:       hsl{222, .16, .28},
-	BodyText:        hsl{210, .34, .63},
-	PopoutColor:     hsl{220, .17, .32},
+	BackgroundColor: hsl{220, .16, .22}, // nord0
+	BodyColor:       hsl{222, .16, .28}, // nord1
+	BodyText:        hsl{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
+	PopoutColor:     hsl{220, .17, .32}, // nord2
 
 	Shadow: hsl{0, 0, 0},
 }
 
-var snowstormPixeldrainStyle = pixeldrainStyleSheet{
+var snowstormPixeldrainStyle = styleSheet{
 	Link:                hsl{92, .40, .40},
-	Input:               hsl{219, .28, .88}, // hsl(219, 28%, 88%)
-	InputHover:          hsl{219, .28, .84}, // hsl(219, 28%, 88%)
-	InputText:           hsl{180, .19, .23},
-	InputDisabledText:   hsl{180, .05, .63},
-	Highlight:           hsl{179, .25, .65}, // hsl(92, 28%, 65%)
-	HighlightText:       hsl{0, 0, 0},
-	Danger:              hsl{354, .42, .56},
-	ScrollbarForeground: hsl{193, .43, .67},
-	ScrollbarHover:      hsl{193, .43, .76},
+	Input:               hsl{218, .27, .94}, // nord6 hsl(218, 27%, 94%)
+	InputHover:          hsl{218, .27, .98},
+	InputText:           hsl{222, .16, .28}, // nord1 hsl(222, 16%, 28%)
+	InputDisabledText:   hsl{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
+	Highlight:           hsl{92, .28, .65},  // nord14 hsl(92, 28%, 65%)
+	HighlightText:       hsl{220, .16, .22}, // nord0
+	Danger:              hsl{354, .42, .56}, // nord11 hsl(354, 42%, 56%)
+	ScrollbarForeground: hsl{179, .25, .65}, // nord7 hsl(179, 25%, 65%)
+	ScrollbarHover:      hsl{193, .43, .67}, // nord8 hsl(193, 43%, 67%)
 
-	BackgroundColor:   hsl{220, .16, .36}, // hsl(220, 16%, 36%)
-	BackgroundText:    hsl{219, .28, .88},
-	ParallaxSlider:    hsl{220, .17, .20}, // Layer 1 but darker
-	BodyColor:         hsl{218, .27, .94},
-	BodyText:          hsl{220, .16, .36}, // hsl(220, 16%, 36%)
+	BackgroundColor:   hsl{220, .16, .36}, // nord3 hsl(220, 16%, 36%)
+	BackgroundText:    hsl{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
+	ParallaxSlider:    hsl{220, .16, .22}, // nord0 hsl(220, 16%, 22%)
+	BodyColor:         hsl{219, .28, .88}, // nord4 hsl(219, 28%, 88%)
+	BodyText:          hsl{220, .17, .32}, // nord2 hsl(220, 17%, 32%)
 	Shaded:            RGBA{255, 255, 255, 0.4},
 	BackgroundPattern: hsl{219, .28, .88}, // hsl(219, 28%, 88%)
-	PopoutColor:       hsl{218, .27, .92}, // hsl(218, 27%, 92%)
+	PopoutColor:       hsl{218, .27, .92}, // nord5 hsl(218, 27%, 92%)
 
 	Shadow: hsl{220, .16, .36},
 	Light:  true,
 }
 
-var sweetPixeldrainStyle = pixeldrainStyleSheet{
+var sweetPixeldrainStyle = styleSheet{
 	Input:             hsl{229, .25, .18}, // hsl(229, 25%, 14%)
 	InputHover:        hsl{229, .25, .22}, // hsl(229, 25%, 14%)
 	InputText:         hsl{223, .13, .79},
diff --git a/webcontroller/templates.go b/webcontroller/templates.go
index 42e7e9e..b0296fd 100644
--- a/webcontroller/templates.go
+++ b/webcontroller/templates.go
@@ -25,7 +25,6 @@ type TemplateData struct {
 	Authenticated     bool
 	User              pixelapi.UserInfo
 	UserAgent         string
-	Style             pixeldrainStyleSheet
 	UserStyle         template.CSS
 	BackgroundPattern template.URL
 	APIEndpoint       template.URL
@@ -46,10 +45,9 @@ type TemplateData struct {
 	Form Form
 }
 
-func (td *TemplateData) setStyle(style pixeldrainStyleSheet) {
-	td.Style = style
-	td.UserStyle = template.CSS(style.String())
-	td.BackgroundPattern = style.BackgroundTiles(td.tpm.tpl)
+func (td *TemplateData) setStyle(style template.CSS) {
+	td.UserStyle = style
+	td.BackgroundPattern = BackgroundTiles(td.tpm.tpl)
 }
 
 func (wc *WebController) newTemplateData(w http.ResponseWriter, r *http.Request) (t *TemplateData) {