Add support for light themes

res/include/img/background_patterns/create_dark.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+for i in {0..17}; do convert checker${i}.png -brightness-contrast 80x0 checker${i}_light.png; done
+convert checker_wednesday.png -brightness-contrast 80x0 checker_wednesday_light.png
+convert checker_wednesday.png -brightness-contrast 80x0 checker_wednesday_light.png
+convert checker_dwarf.png -brightness-contrast 80x0 checker_dwarf_light.png
+convert checker_developers.png -brightness-contrast 80x0 checker_developers_light.png
+convert checker_halloween.png -brightness-contrast 80x0 checker_halloween_light.png
+convert checker_christmas.png -brightness-contrast 80x0 checker_christmas_light.png
+
+optipng *.png

res/include/img/icons/close.svg

@@ -1,3 +1,3 @@
 <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.InputTextColor.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"/>
+	<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>

res/include/img/icons/copy.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputTextColor.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"/>
+	<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>

res/include/img/icons/edit.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-	<path fill="#{{.Style.InputTextColor.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"/>
+	<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>

res/include/img/icons/email.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputTextColor.RGB}}" d="M22 4H2v16h20V4zm-2 4l-8 5-8-5V6l8 5 8-5v2z"/>
+	<path fill="#{{.Style.InputText.RGB}}" d="M22 4H2v16h20V4zm-2 4l-8 5-8-5V6l8 5 8-5v2z"/>
 </svg>

res/include/img/icons/facebook.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.InputTextColor.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" />
+	<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>

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.InputTextColor.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="#{{.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"/>
 </svg>

res/include/img/icons/help.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputTextColor.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"/>
+	<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>

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.InputTextColor.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="#{{.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="#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>

res/include/img/icons/medium.svg

@@ -1,7 +1,7 @@
 <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.InputTextColor.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"/>
+			<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>

res/include/img/icons/open_in_new.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputTextColor.RGB}}" d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
+	<path fill="#{{.Style.InputText.RGB}}" d="M19 19H5V5h7V3H3v18h18v-9h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
 </svg>

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.InputTextColor.RGB}}" fill-rule="evenodd">
+  <g fill="#{{.Style.InputText.RGB}}" 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>

res/include/img/icons/pixeldrain.svg

@@ -1,3 +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="#{{.Style.InputTextColor.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"/>
+<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>

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.InputTextColor.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="#{{.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" />
 </svg>

res/include/img/icons/save.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputTextColor.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"/>
+	<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>

res/include/img/icons/share.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputTextColor.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"/>
+	<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>

res/include/img/icons/shuffle.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-	<path fill="#{{.Style.InputTextColor.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"/>
+	<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>

res/include/img/icons/tumblr.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.InputTextColor.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" />
+	<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>

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.InputTextColor.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="#{{.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" />
 </svg>

res/include/img/icons/upload.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<path fill="#{{.Style.InputTextColor.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"/>
+<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>

res/include/style/layout.css

@@ -60,7 +60,7 @@ body {
 	padding: 0;
 }
 header, footer, .checkers {
-	background-image: url("{{bgPattern}}");
+	background-image: url("{{.BackgroundPattern}}");
 	background-color: #111111; /* Fallback */
 	background-color: var(--layer_1_color);
 	background-repeat: repeat;
@@ -157,8 +157,7 @@ section {
 .page_navigation a {
 	float: none;
 	display: block;
-	color: #b2b2b2; /* Fallback */
-	color: var(--text_color);
+	color: var(--layer_1_text_color);
 	text-align: center;
 	padding: 4px;
 	margin: 0.3em 15px 0.3em 15px;
@@ -172,9 +171,7 @@ section {
 	text-decoration: none;
 }
 .page_navigation a:hover {
-	background-color: #3f3f3f;
 	background-color: var(--input_color);
-	color: #ffffff;
 	color: var(--input_text_color);
 	text-decoration: none;
 }
@@ -201,6 +198,7 @@ section {
 }
 .highlight_dark, .highlight_1 {
 	background-color: var(--layer_1_color);
+	color: var(--layer_1_text_color);
 }
 .highlight_middle, .highlight_2 {
 	background-color: var(--layer_2_color);
@@ -282,11 +280,7 @@ hr {
 }
 
 a {
-	color: #74ad38;
-	color: var(--highlight_color_dark);
-}
-a:hover {
-	color: var(--highlight_color);
+	color: var(--link_color);
 }
 
 .form{
@@ -364,7 +358,7 @@ pre {
 	display: block;
 }
 .file_button > .file_button_title{
-	color: var(--highlight_color);
+	color: var(--link_color);
 }
 
 /* API documentation markup */

res/include/style/modal.css

@@ -4,7 +4,7 @@
 	right: 0;
 	bottom: 0;
 	left: 0;
-	background-color: rgba(0, 0, 0, 0.6);
+	background-color: rgba(0, 0, 0, 0.7);
 	opacity: 0;
 	transition: opacity .4s;
 }
@@ -22,7 +22,7 @@
 	transform: translate(-50%, -20%);
 	padding: 0;
 	text-align: left;
-	box-shadow: var(--shadow_color) 0px 0px 50px;
+	/* box-shadow: var(--shadow_color) 0px 0px 50px; */
 	border-radius: 20px 20px 8px 8px;
 	overflow: hidden;
 }
@@ -33,6 +33,7 @@
 	display: flex;
 	flex-direction: row;
 	background: var(--layer_1_color);
+	color: var(--layer_1_text_color);
 	padding: 1px;
 }
 

res/template/appearance.html

@@ -23,7 +23,10 @@
 				<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><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_deepsea"        name="style"><label for="style_deepsea">Deep Sea Style</label><br/>
 				<input type="radio" id="style_skeuos"         name="style"><label for="style_skeuos">Skeuos Style</label>
 				(Inspired by <a href="https://www.gnome-look.org/p/1441725/" target="_blank">Skeuos GTK</a>)<br/>

res/template/fragments/user_style.html

@@ -8,15 +8,15 @@
 {{ define "user_style_js" }}
 <script>
 	window.style = {
-		textColor: "{{.Style.TextColor.RGB}}",
-		inputColor: "{{.Style.InputColor.RGB}}",
-		inputTextColor: "{{.Style.InputTextColor.RGB}}",
-		highlightColor: "{{.Style.HighlightColor.RGB}}",
-		dangerColor: "{{.Style.DangerColor.RGB}}",
-		layer1Color: "{{.Style.Layer1Color.RGB}}",
-		layer2Color: "{{.Style.Layer2Color.RGB}}",
-		layer3Color: "{{.Style.Layer3Color.RGB}}",
-		layer4Color: "{{.Style.Layer4Color.RGB}}",
+		textColor: "{{.Style.Text.RGB}}",
+		inputColor: "{{.Style.Input.RGB}}",
+		inputTextColor: "{{.Style.InputText.RGB}}",
+		highlightColor: "{{.Style.Highlight.RGB}}",
+		dangerColor: "{{.Style.Danger.RGB}}",
+		layer1Color: "{{.Style.Layer1.RGB}}",
+		layer2Color: "{{.Style.Layer2.RGB}}",
+		layer3Color: "{{.Style.Layer3.RGB}}",
+		layer4Color: "{{.Style.Layer4.RGB}}",
 	}
 </script>
 {{ end }}

res/template/history.html

@@ -16,10 +16,9 @@
 			Here are all files you have previously uploaded to pixeldrain using this computer.
 			This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
 			</p>
-			<br/>
-
-			<div id="uploaded_files" class="highlight_dark"></div>
 		</section>
+
+		<div id="uploaded_files"></div>
 		{{template "page_bottom" .}}
 
 		<script>

res/template/home.html

@@ -34,6 +34,7 @@
 			border-top-left-radius: 0.5em;
 			border-bottom-left-radius: 0.5em;
 			background-color: var(--layer_1_color);
+			color: var(--layer_1_text_color);
 		}
 		.feat_table > div > .feat_normal {
 			background-color: var(--layer_3_color);
@@ -46,10 +47,10 @@
 			text-shadow: 1px 1px 4px var(--shadow_color);
 		}
 		.feat_table > div > .feat_highlight {
-			border: 1px solid var(--highlight_color)
+			border: 1px solid var(--link_color)
 		}
 		.text_highlight {
-			color: var(--highlight_color);
+			color: var(--link_color);
 			text-shadow: 0 0 4px var(--shadow_color);
 			font-size: 1.1em;
 			font-weight: bold;

svelte/src/file_viewer/EmbedWindow.svelte

@@ -161,8 +161,11 @@ const example = () => {
 				<button class:button_highlight={style==="canta"} on:click={() => {set_style("canta")}}>
 					Canta
 				</button>
-				<button class:button_highlight={style==="arc"} on:click={() => {set_style("arc")}}>
-					Arc
+				<button class:button_highlight={style==="nord"} on:click={() => {set_style("nord")}}>
+					Nord
+				</button>
+				<button class:button_highlight={style==="snowstorm"} on:click={() => {set_style("snowstorm")}}>
+					Snowstorm
 				</button>
 				<button class:button_highlight={style==="deepsea"} on:click={() => {set_style("deepsea")}}>
 					Deep sea

svelte/src/file_viewer/GalleryView.svelte

@@ -201,7 +201,7 @@ const drop = (e, index) => {
 	text-align: left;
 }
 .icon_container.editing {
-	box-shadow: inset 0 60px 40px -40px #000000;
+	box-shadow: inset 0 60px 40px -40px var(--shadow_color);
 }
 .icon_container > i:hover {
 	color: var(--highlight_color);

svelte/src/user_file_manager/DirectoryElement.svelte

@@ -385,6 +385,7 @@ const node_click = (index) => {
 	flex-shrink: 0;
 	text-align: left;
 	background-color: var(--layer_1_color);
+	color: var(--layer_1_text_color);
 	padding: 4px;
 }
 

svelte/src/util/Modal.svelte

@@ -71,7 +71,7 @@ const keydown = e => {
 	right: 0;
 	bottom: 0;
 	left: 0;
-	background-color: rgba(0, 0, 0, 0.5);
+	background-color: rgba(0, 0, 0, 0.7);
 }
 .window {
 	position: absolute;
@@ -89,7 +89,7 @@ const keydown = e => {
 	border-radius: 20px 20px 16px 16px;
 	overflow: hidden;
 	text-align: left;
-	box-shadow: var(--shadow_color) 0px 0px 50px;
+	/* box-shadow: var(--shadow_color) 0px 0px 50px; Does not work with light theme */
 }
 .header {
 	flex-grow: 0;
@@ -98,6 +98,7 @@ const keydown = e => {
 	flex-direction: row;
 	padding: 1px;
 	background-color: var(--layer_1_color);
+	color: var(--layer_1_text_color);
 }
 .title {
 	flex-grow: 1;

webcontroller/templates.go

@@ -1,12 +1,10 @@
 package webcontroller
 
 import (
-	"bytes"
 	"encoding/base64"
 	"fmt"
 	"html/template"
 	"io/ioutil"
-	"math/rand"
 	"net/http"
 	"net/url"
 	"os"
@@ -23,14 +21,15 @@ import (
 // TemplateData is a struct that every template expects when being rendered. In
 // the field Other you can pass your own template-specific variables.
 type TemplateData struct {
-	Authenticated bool
-	User          pixelapi.UserInfo
-	UserAgent     string
-	Style         pixeldrainStyleSheet
-	UserStyle     template.CSS
-	APIEndpoint   template.URL
-	PixelAPI      pixelapi.PixelAPI
-	Hostname      template.HTML
+	Authenticated     bool
+	User              pixelapi.UserInfo
+	UserAgent         string
+	Style             pixeldrainStyleSheet
+	UserStyle         template.CSS
+	BackgroundPattern template.URL
+	APIEndpoint       template.URL
+	PixelAPI          pixelapi.PixelAPI
+	Hostname          template.HTML
 
 	// Only used on file viewer page
 	Title  string
@@ -47,12 +46,14 @@ type TemplateData struct {
 }
 
 func (wc *WebController) newTemplateData(w http.ResponseWriter, r *http.Request) (t *TemplateData) {
+	var style = userStyle(r)
 	t = &TemplateData{
-		Authenticated: false,
-		UserAgent:     r.UserAgent(),
-		Style:         userStyle(r),
-		UserStyle:     template.CSS(userStyle(r).String()),
-		APIEndpoint:   template.URL(wc.apiURLExternal),
+		Authenticated:     false,
+		UserAgent:         r.UserAgent(),
+		Style:             style,
+		UserStyle:         template.CSS(style.String()),
+		BackgroundPattern: style.Background(wc.templates.tpl),
+		APIEndpoint:       template.URL(wc.apiURLExternal),
 
 		// Use the user's IP address for making requests
 		PixelAPI: wc.api.RealIP(util.RemoteAddress(r)).RealAgent(r.UserAgent()),
@@ -133,7 +134,6 @@ func (tm *TemplateManager) ParseTemplates(silent bool) {
 
 	// Import template functions
 	tpl.Funcs(template.FuncMap{
-		"bgPattern":  tm.bgPattern,
 		"isBrave":    tm.isBrave,
 		"debugMode":  tm.debugMode,
 		"apiUrl":     tm.apiURL,
@@ -217,34 +217,6 @@ func (tm *TemplateManager) Get() *template.Template {
 // Template functions. These can be called from within the template to execute
 // more specialized actions
 
-func (tm *TemplateManager) bgPattern() template.URL {
-	var (
-		now   = time.Now()
-		month = now.Month()
-		day   = now.Day()
-		file  string
-	)
-
-	if now.Weekday() == time.Wednesday && rand.Intn(20) == 0 {
-		file = "checker_wednesday.png"
-	} else if month == time.August && day == 8 {
-		file = "checker_dwarf.png"
-	} else if month == time.August && day == 24 {
-		file = "checker_developers.png"
-	} else if month == time.October && day == 31 {
-		file = "checker_halloween.png"
-	} else if month == time.December && (day == 25 || day == 26 || day == 27) {
-		file = "checker_christmas.png"
-	} else {
-		file = fmt.Sprintf("checker%d.png", now.UnixNano()%18)
-	}
-
-	var buf = bytes.Buffer{}
-	if err := tm.tpl.ExecuteTemplate(&buf, file, nil); err != nil {
-		panic(err)
-	}
-	return template.URL(buf.String())
-}
 func (tm *TemplateManager) isBrave(useragent string) bool {
 	return strings.Contains(useragent, "Brave")
 }

webcontroller/user_style.go

@@ -1,8 +1,12 @@
 package webcontroller
 
 import (
+	"bytes"
 	"fmt"
+	"html/template"
+	"math/rand"
 	"net/http"
+	"time"
 )
 
 func userStyle(r *http.Request) pixeldrainStyleSheet {
@@ -35,6 +39,8 @@ func userStyle(r *http.Request) pixeldrainStyleSheet {
 		return skeuosPixeldrainStyle
 	case "nord":
 		return nordPixeldrainStyle
+	case "snowstorm":
+		return snowstormPixeldrainStyle
 	case "default":
 		fallthrough // use default case
 	default:
@@ -43,27 +49,46 @@ func userStyle(r *http.Request) pixeldrainStyleSheet {
 }
 
 type pixeldrainStyleSheet struct {
-	TextColor                hsl
-	InputColor               hsl // Buttons, text fields
-	InputTextColor           hsl
-	HighlightColor           hsl // Links, highlighted buttons, list navigation
-	HighlightTextColor       hsl // Text on buttons
-	DangerColor              hsl
-	ScrollbarForegroundColor hsl
-	ScrollbarHoverColor      hsl
+	Text                hsl
+	Link                hsl // Based on Highlight if undefined
+	Input               hsl // Buttons, text fields
+	InputText           hsl
+	Highlight           hsl // Links, highlighted buttons, list navigation
+	HighlightText       hsl // Text on buttons
+	Danger              hsl
+	ScrollbarForeground hsl // Based on Highlight if undefined
+	ScrollbarHover      hsl // Based on ScrollbarForeground if undefined
 
-	Layer1Color hsl // Deepest and darkest layer
-	Layer2Color hsl
-	Layer3Color hsl
-	Layer4Color hsl // Highest and brightest layer
+	Layer1     hsl // Deepest and darkest layer
+	Layer1Text hsl // Based on Text if undefined
+	Layer2     hsl
+	Layer3     hsl
+	Layer4     hsl // Highest and brightest layer
 
-	ShadowColor hsl
+	Shadow hsl
+	Light  bool // If this is a light theme
 }
 
 func (s pixeldrainStyleSheet) String() string {
+	var noColor = hsl{0, 0, 0}
+
+	if s.Link == noColor {
+		s.Link = s.Highlight.Add(0, 0, -.05)
+	}
+	if s.ScrollbarForeground == noColor {
+		s.ScrollbarForeground = s.Input
+	}
+	if s.ScrollbarHover == noColor {
+		s.ScrollbarHover = s.ScrollbarForeground.Add(0, 0, .1)
+	}
+	if s.Layer1Text == noColor {
+		s.Layer1Text = s.Text
+	}
+
 	return fmt.Sprintf(
 		`:root {
 	--text_color:                 #%s;
+	--link_color:                 #%s;
 	--input_color:                #%s;
 	--input_color_dark:           #%s;
 	--input_text_color:           #%s;
@@ -78,6 +103,7 @@ func (s pixeldrainStyleSheet) String() string {
 
 	--layer_1_color:        #%s;
 	--layer_1_color_border: #%s;
+	--layer_1_text_color:   #%s;
 	--layer_2_color:        #%s;
 	--layer_2_color_border: #%s;
 	--layer_3_color:        #%s;
@@ -87,30 +113,65 @@ func (s pixeldrainStyleSheet) String() string {
 
 	--shadow_color:     #%s;
 }`,
-		s.TextColor.RGB(),
-		s.InputColor.RGB(),
-		s.InputColor.Add(0, 0, -.02).RGB(),
-		s.InputTextColor.RGB(),
-		s.HighlightColor.RGB(),
-		s.HighlightColor.Add(0, 0, -.02).RGB(),
-		s.HighlightTextColor.RGB(),
-		s.DangerColor.RGB(),
-		s.DangerColor.Add(0, 0, -.02).RGB(),
-		s.ScrollbarForegroundColor.RGB(),
-		s.ScrollbarHoverColor.RGB(),
-		s.Layer2Color.RGB(), // Scrollbar background
-		s.Layer1Color.RGB(),
-		s.Layer1Color.Add(0, 0, .05).RGB(),
-		s.Layer2Color.RGB(),
-		s.Layer2Color.Add(0, 0, .05).RGB(),
-		s.Layer3Color.RGB(),
-		s.Layer3Color.Add(0, 0, .05).RGB(),
-		s.Layer4Color.RGB(),
-		s.Layer4Color.Add(0, 0, .05).RGB(),
-		s.ShadowColor.RGB(),
+		s.Text.RGB(),
+		s.Link.RGB(),
+		s.Input.RGB(),
+		s.Input.Add(0, 0, -.02).RGB(),
+		s.InputText.RGB(),
+		s.Highlight.RGB(),
+		s.Highlight.Add(0, 0, -.02).RGB(),
+		s.HighlightText.RGB(),
+		s.Danger.RGB(),
+		s.Danger.Add(0, 0, -.02).RGB(),
+		s.ScrollbarForeground.RGB(),
+		s.ScrollbarHover.RGB(),
+		s.Layer2.RGB(), // Scrollbar background
+		s.Layer1.RGB(),
+		s.Layer1.Add(0, 0, .05).RGB(),
+		s.Layer1Text.RGB(),
+		s.Layer2.RGB(),
+		s.Layer2.Add(0, 0, .05).RGB(),
+		s.Layer3.RGB(),
+		s.Layer3.Add(0, 0, .05).RGB(),
+		s.Layer4.RGB(),
+		s.Layer4.Add(0, 0, .05).RGB(),
+		s.Shadow.RGB(),
 	)
 }
 
+func (s pixeldrainStyleSheet) Background(tpl *template.Template) template.URL {
+	var (
+		now   = time.Now()
+		month = now.Month()
+		day   = now.Day()
+		file  string
+	)
+
+	if now.Weekday() == time.Wednesday && rand.Intn(20) == 0 {
+		file = "checker_wednesday"
+	} else if month == time.August && day == 8 {
+		file = "checker_dwarf"
+	} else if month == time.August && day == 24 {
+		file = "checker_developers"
+	} else if month == time.October && day == 31 {
+		file = "checker_halloween"
+	} else if month == time.December && (day == 25 || day == 26 || day == 27) {
+		file = "checker_christmas"
+	} else {
+		file = fmt.Sprintf("checker%d", now.UnixNano()%18)
+	}
+
+	if s.Light {
+		file += "_light"
+	}
+
+	var buf = bytes.Buffer{}
+	if err := tpl.ExecuteTemplate(&buf, file+".png", nil); err != nil {
+		panic(err)
+	}
+	return template.URL(buf.String())
+}
+
 type hsl struct {
 	Hue        int
 	Saturation float64
@@ -189,181 +250,202 @@ func (h hsl) Add(hue int, saturation float64, lightness float64) hsl {
 // Following are all the available styles
 
 var defaultPixeldrainStyle = pixeldrainStyleSheet{
-	TextColor:                hsl{0, 0, .8},
-	InputColor:               hsl{266, .85, .38},
-	InputTextColor:           hsl{0, 0, 1},
-	HighlightColor:           hsl{117, .63, .46},
-	HighlightTextColor:       hsl{0, 0, 0},
-	DangerColor:              hsl{357, .63, .46},
-	ScrollbarForegroundColor: hsl{266, .85, .40},
-	ScrollbarHoverColor:      hsl{266, .85, .50},
+	Text:                hsl{0, 0, .8},
+	Input:               hsl{266, .85, .38},
+	InputText:           hsl{0, 0, 1},
+	Highlight:           hsl{117, .63, .46},
+	HighlightText:       hsl{0, 0, 0},
+	Danger:              hsl{357, .63, .46},
+	ScrollbarForeground: hsl{266, .85, .40},
+	ScrollbarHover:      hsl{266, .85, .50},
 
-	Layer1Color: hsl{275, .8, .07},
-	Layer2Color: hsl{275, .75, .12},
-	Layer3Color: hsl{275, .7, .18},
-	Layer4Color: hsl{275, .65, .24},
+	Layer1: hsl{275, .8, .07},
+	Layer2: hsl{275, .75, .12},
+	Layer3: hsl{275, .7, .18},
+	Layer4: hsl{275, .65, .24},
 
-	ShadowColor: hsl{0, 0, 0},
+	Shadow: hsl{0, 0, 0},
 }
 
 var pixeldrainClassicStyle = pixeldrainStyleSheet{
-	TextColor:                hsl{0, 0, .8},
-	InputColor:               hsl{0, 0, .25},
-	InputTextColor:           hsl{0, 0, 1},
-	HighlightColor:           hsl{89, .60, .45},
-	HighlightTextColor:       hsl{0, 0, 0},
-	DangerColor:              hsl{339, .65, .31},
-	ScrollbarForegroundColor: hsl{0, 0, .40},
-	ScrollbarHoverColor:      hsl{0, 0, .50},
+	Text:                hsl{0, 0, .8},
+	Input:               hsl{0, 0, .25},
+	InputText:           hsl{0, 0, 1},
+	Highlight:           hsl{89, .60, .45},
+	HighlightText:       hsl{0, 0, 0},
+	Danger:              hsl{339, .65, .31},
+	ScrollbarForeground: hsl{0, 0, .40},
+	ScrollbarHover:      hsl{0, 0, .50},
 
-	Layer1Color: hsl{0, 0, .08},
-	Layer2Color: hsl{0, 0, .11},
-	Layer3Color: hsl{0, 0, .15},
-	Layer4Color: hsl{0, 0, .18},
+	Layer1: hsl{0, 0, .08},
+	Layer2: hsl{0, 0, .11},
+	Layer3: hsl{0, 0, .15},
+	Layer4: hsl{0, 0, .18},
 
-	ShadowColor: hsl{0, 0, 0},
+	Shadow: hsl{0, 0, 0},
 }
 
 var sunnyPixeldrainStyle = pixeldrainStyleSheet{
-	TextColor:                hsl{0, 0, .1},
-	InputColor:               hsl{0, 0, .96}, // hsl(0, 0%, 96%)
-	InputTextColor:           hsl{0, 0, .1},
-	HighlightColor:           hsl{89, .74, .5}, // hsl(89, 73%, 50%)
-	HighlightTextColor:       hsl{0, 0, 0},
-	DangerColor:              hsl{345, .99, .33}, // hsl(345, 99%, 33%)
-	ScrollbarForegroundColor: hsl{0, 0, .30},
-	ScrollbarHoverColor:      hsl{0, 0, .40},
+	Text:                hsl{0, 0, .1},
+	Input:               hsl{0, 0, .96}, // hsl(0, 0%, 96%)
+	InputText:           hsl{0, 0, .1},
+	Highlight:           hsl{89, .74, .5}, // hsl(89, 73%, 50%)
+	HighlightText:       hsl{0, 0, 0},
+	Danger:              hsl{345, .99, .33}, // hsl(345, 99%, 33%)
+	ScrollbarForeground: hsl{0, 0, .30},
+	ScrollbarHover:      hsl{0, 0, .40},
 
-	Layer1Color: hsl{0, 0, .98}, // hsl(0, 0%, 13%)
-	Layer2Color: hsl{0, 1, 1},
-	Layer3Color: hsl{0, 1, 1},
-	Layer4Color: hsl{0, 1, 1},
+	Layer1: hsl{0, 0, .98}, // hsl(0, 0%, 13%)
+	Layer2: hsl{0, 1, 1},
+	Layer3: hsl{0, 1, 1},
+	Layer4: hsl{0, 1, 1},
 
-	ShadowColor: hsl{0, 0, 0},
+	Shadow: hsl{0, 0, 0},
 }
 
 var solarizedDarkStyle = pixeldrainStyleSheet{
-	TextColor:                hsl{0, 0, .75},
-	InputColor:               hsl{192, .95, .25},
-	InputTextColor:           hsl{0, 0, 1},
-	HighlightColor:           hsl{145, .63, .42},
-	HighlightTextColor:       hsl{0, 0, 0},
-	DangerColor:              hsl{343, .63, .42},
-	ScrollbarForegroundColor: hsl{192, .95, .30},
-	ScrollbarHoverColor:      hsl{192, .95, .40},
+	Text:                hsl{0, 0, .75},
+	Input:               hsl{192, .95, .25},
+	InputText:           hsl{0, 0, 1},
+	Highlight:           hsl{145, .63, .42},
+	HighlightText:       hsl{0, 0, 0},
+	Danger:              hsl{343, .63, .42},
+	ScrollbarForeground: hsl{192, .95, .30},
+	ScrollbarHover:      hsl{192, .95, .40},
 
-	Layer1Color: hsl{192, .87, .09},
-	Layer2Color: hsl{192, .81, .14},
-	Layer3Color: hsl{192, .95, .17},
-	Layer4Color: hsl{192, .99, .19},
+	Layer1: hsl{192, .87, .09},
+	Layer2: hsl{192, .81, .14},
+	Layer3: hsl{192, .95, .17},
+	Layer4: hsl{192, .99, .19},
 
-	ShadowColor: hsl{0, 0, 0},
+	Shadow: hsl{0, 0, 0},
 }
 
 var maroonStyle = pixeldrainStyleSheet{
-	TextColor:                hsl{0, 0, .8},
-	InputColor:               hsl{0, .87, .40}, // hsl(0, 87%, 40%)
-	InputTextColor:           hsl{0, 0, 1},
-	HighlightColor:           hsl{137, 1, .37}, //hsl(137, 100%, 37%)
-	HighlightTextColor:       hsl{0, 0, 0},
-	DangerColor:              hsl{9, .96, .42}, //hsl(9, 96%, 42%)
-	ScrollbarForegroundColor: hsl{0, .75, .3},
-	ScrollbarHoverColor:      hsl{0, .75, .4},
+	Text:                hsl{0, 0, .8},
+	Input:               hsl{0, .87, .40}, // hsl(0, 87%, 40%)
+	InputText:           hsl{0, 0, 1},
+	Highlight:           hsl{137, 1, .37}, //hsl(137, 100%, 37%)
+	HighlightText:       hsl{0, 0, 0},
+	Danger:              hsl{9, .96, .42}, //hsl(9, 96%, 42%)
+	ScrollbarForeground: hsl{0, .75, .3},
+	ScrollbarHover:      hsl{0, .75, .4},
 
-	Layer1Color: hsl{0, .7, .05},
-	Layer2Color: hsl{0, .8, .08}, // hsl{0, .8, .15},
-	Layer3Color: hsl{0, .9, .14},
-	Layer4Color: hsl{0, .9, .20},
+	Layer1: hsl{0, .7, .05},
+	Layer2: hsl{0, .8, .08}, // hsl{0, .8, .15},
+	Layer3: hsl{0, .9, .14},
+	Layer4: hsl{0, .9, .20},
 
-	ShadowColor: hsl{0, 0, 0},
+	Shadow: hsl{0, 0, 0},
 }
 
 var hackerStyle = pixeldrainStyleSheet{
-	TextColor:                hsl{0, 0, .8},
-	InputColor:               hsl{120, .5, .1}, // hsl(120, 50%, 10%)
-	InputTextColor:           hsl{0, 0, 1},
-	HighlightColor:           hsl{120, 1, .5},
-	HighlightTextColor:       hsl{0, 0, 0},
-	DangerColor:              hsl{0, 1, .4},
-	ScrollbarForegroundColor: hsl{120, .5, .25},
-	ScrollbarHoverColor:      hsl{120, .5, .35},
+	Text:                hsl{0, 0, .8},
+	Input:               hsl{120, .5, .1}, // hsl(120, 50%, 10%)
+	InputText:           hsl{0, 0, 1},
+	Highlight:           hsl{120, 1, .5},
+	HighlightText:       hsl{0, 0, 0},
+	Danger:              hsl{0, 1, .4},
+	ScrollbarForeground: hsl{120, .5, .25},
+	ScrollbarHover:      hsl{120, .5, .35},
 
-	Layer1Color: hsl{0, 0, 0},
-	Layer2Color: hsl{0, 0, .03},
-	Layer3Color: hsl{120, .3, .08},
-	Layer4Color: hsl{120, .5, .12},
+	Layer1: hsl{0, 0, 0},
+	Layer2: hsl{0, 0, .03},
+	Layer3: hsl{120, .3, .08},
+	Layer4: hsl{120, .5, .12},
 
-	ShadowColor: hsl{0, 0, 0},
+	Shadow: hsl{0, 0, 0},
 }
 
 var cantaPixeldrainStyle = pixeldrainStyleSheet{
-	TextColor:                hsl{0, 0, .8},
-	InputColor:               hsl{167, .06, .30}, // hsl(167, 6%, 30%)
-	InputTextColor:           hsl{0, 0, 1},
-	HighlightColor:           hsl{165, 1, .40}, // hsl(165, 100%, 40%)
-	HighlightTextColor:       hsl{0, 0, 0},
-	DangerColor:              hsl{40, 1, .5},     // hsl(40, 100%, 50%)
-	ScrollbarForegroundColor: hsl{204, .05, .78}, // hsl(204, 5%, 78%)
-	ScrollbarHoverColor:      hsl{204, .05, .88},
+	Text:                hsl{0, 0, .8},
+	Input:               hsl{167, .06, .30}, // hsl(167, 6%, 30%)
+	InputText:           hsl{0, 0, 1},
+	Highlight:           hsl{165, 1, .40}, // hsl(165, 100%, 40%)
+	HighlightText:       hsl{0, 0, 0},
+	Danger:              hsl{40, 1, .5},     // hsl(40, 100%, 50%)
+	ScrollbarForeground: hsl{204, .05, .78}, // hsl(204, 5%, 78%)
+	ScrollbarHover:      hsl{204, .05, .88},
 
-	Layer1Color: hsl{180, .04, .16},
-	Layer2Color: hsl{168, .05, .21},
-	Layer3Color: hsl{170, .05, .26},
-	Layer4Color: hsl{163, .04, .31},
+	Layer1: hsl{180, .04, .16},
+	Layer2: hsl{168, .05, .21},
+	Layer3: hsl{170, .05, .26},
+	Layer4: hsl{163, .04, .31},
 
-	ShadowColor: hsl{0, 0, 0},
+	Shadow: hsl{0, 0, 0},
 }
 
 var deepseaPixeldrainStyle = pixeldrainStyleSheet{
-	TextColor:                hsl{0, 0, .7},
-	InputColor:               hsl{41, .58, .47},
-	InputTextColor:           hsl{0, 0, 0},
-	HighlightColor:           hsl{5, .77, .55},
-	HighlightTextColor:       hsl{0, 0, 0},
-	DangerColor:              hsl{5, .77, .55},
-	ScrollbarForegroundColor: hsl{162, .28, .23}, // hsl(162, 28%, 23%)
-	ScrollbarHoverColor:      hsl{12, .38, .26},  // hsl(12, 38%, 26%)
+	Text:                hsl{0, 0, .7},
+	Input:               hsl{41, .58, .47},
+	InputText:           hsl{0, 0, 0},
+	Highlight:           hsl{5, .77, .55},
+	HighlightText:       hsl{0, 0, 0},
+	Danger:              hsl{5, .77, .55},
+	ScrollbarForeground: hsl{162, .28, .23}, // hsl(162, 28%, 23%)
+	ScrollbarHover:      hsl{12, .38, .26},  // hsl(12, 38%, 26%)
 
-	Layer1Color: hsl{160, .27, .05},
-	Layer2Color: hsl{163, .26, .09}, // hsl(163, 26%, 11%)
-	Layer3Color: hsl{161, .28, .12}, // hsl(161, 28%, 14%)
-	Layer4Color: hsl{161, .32, .15},
+	Layer1: hsl{160, .27, .05},
+	Layer2: hsl{163, .26, .09}, // hsl(163, 26%, 11%)
+	Layer3: hsl{161, .28, .12}, // hsl(161, 28%, 14%)
+	Layer4: hsl{161, .32, .15},
 
-	ShadowColor: hsl{0, 0, 0},
+	Shadow: hsl{0, 0, 0},
 }
 
 var skeuosPixeldrainStyle = pixeldrainStyleSheet{
-	TextColor:                hsl{60, .06, .93},  // hsl(60, 6%, 93%)
-	InputColor:               hsl{226, .15, .23}, //hsl(226, 15%, 23%)
-	InputTextColor:           hsl{60, .06, .93},
-	HighlightColor:           hsl{282, .65, .54}, // hsl(282, 65%, 54%)
-	HighlightTextColor:       hsl{0, 0, 1},
-	DangerColor:              hsl{0, .79, .43},   // hsl(0, 79%, 43%)
-	ScrollbarForegroundColor: hsl{220, .02, .62}, // hsl(220, 2%, 62%)
-	ScrollbarHoverColor:      hsl{220, .02, .80},
+	Text:                hsl{60, .06, .93},  // hsl(60, 6%, 93%)
+	Input:               hsl{226, .15, .23}, //hsl(226, 15%, 23%)
+	InputText:           hsl{60, .06, .93},
+	Highlight:           hsl{282, .65, .54}, // hsl(282, 65%, 54%)
+	HighlightText:       hsl{0, 0, 1},
+	Danger:              hsl{0, .79, .43},   // hsl(0, 79%, 43%)
+	ScrollbarForeground: hsl{220, .02, .62}, // hsl(220, 2%, 62%)
+	ScrollbarHover:      hsl{220, .02, .80},
 
-	Layer1Color: hsl{232, .14, .11}, //hsl(232, 14%, 11%)
-	Layer2Color: hsl{229, .14, .16}, // hsl(229, 14%, 16%)
-	Layer3Color: hsl{225, .14, .17}, // hsl(225, 14%, 17%)
-	Layer4Color: hsl{226, .14, .18}, // hsl(226, 14%, 18%)
+	Layer1: hsl{232, .14, .11}, //hsl(232, 14%, 11%)
+	Layer2: hsl{229, .14, .16}, // hsl(229, 14%, 16%)
+	Layer3: hsl{225, .14, .17}, // hsl(225, 14%, 17%)
+	Layer4: hsl{226, .14, .18}, // hsl(226, 14%, 18%)
 
-	ShadowColor: hsl{0, 0, 0},
+	Shadow: hsl{0, 0, 0},
 }
 
 var nordPixeldrainStyle = pixeldrainStyleSheet{
-	TextColor:                hsl{210, .34, .63},
-	InputColor:               hsl{193, .43, .67},
-	InputTextColor:           hsl{180, .19, .23},
-	HighlightColor:           hsl{145, .63, .42},
-	HighlightTextColor:       hsl{0, 0, 0},
-	DangerColor:              hsl{354, .42, .56},
-	ScrollbarForegroundColor: hsl{193, .43, .67},
-	ScrollbarHoverColor:      hsl{193, .43, .76},
+	Text:                hsl{210, .34, .63},
+	Input:               hsl{193, .43, .67},
+	InputText:           hsl{180, .19, .23},
+	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},
 
-	Layer1Color: hsl{220, .16, .22},
-	Layer2Color: hsl{222, .16, .28},
-	Layer3Color: hsl{220, .17, .32},
-	Layer4Color: hsl{220, .16, .36},
+	Layer1: hsl{220, .16, .22},
+	Layer2: hsl{222, .16, .28},
+	Layer3: hsl{220, .17, .32},
+	Layer4: hsl{220, .16, .36},
 
-	ShadowColor: hsl{0, 0, 0},
+	Shadow: hsl{0, 0, 0},
+}
+
+var snowstormPixeldrainStyle = pixeldrainStyleSheet{
+	Text:                hsl{220, .16, .36}, // hsl(220, 16%, 36%)
+	Link:                hsl{92, .28, .40},
+	Input:               hsl{193, .43, .67}, // hsl(193, 43%, 67%)
+	InputText:           hsl{180, .19, .23},
+	Highlight:           hsl{92, .28, .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},
+
+	Layer1:     hsl{220, .16, .36}, // hsl(220, 16%, 36%)
+	Layer1Text: hsl{219, .28, .88},
+	Layer2:     hsl{219, .28, .88}, // hsl(219, 28%, 88%)
+	Layer3:     hsl{218, .27, .92}, // hsl(218, 27%, 92%)
+	Layer4:     hsl{218, .27, .94}, // hsl(218, 27%, 94%)
+
+	Shadow: hsl{0, .0, .70},
+	Light:  true,
 }