diff --git a/res/include/style/layout.css b/res/include/style/layout.css
index 8c99933..c9de269 100644
--- a/res/include/style/layout.css
+++ b/res/include/style/layout.css
@@ -63,7 +63,7 @@ header, footer, .checkers {
 	background-image: url("{{.BackgroundPattern}}");
 	background-color: var(--layer_1_color);
 	background-repeat: repeat;
-	/* background-blend-mode: luminosity; */
+	background-blend-mode: luminosity;
 }
 header, footer {
 	box-shadow: inset 1px 1px 8px 0 var(--shadow_color);
@@ -404,7 +404,7 @@ select {
 	margin: 3px;
 	background: linear-gradient(var(--input_color), var(--input_color_dark));
 	padding: 5px 5px 5px 5px;
-	box-shadow: 1px 1px 5px -3px var(--shadow_color);
+	box-shadow: 1px 1px 5px -2px var(--shadow_color);
 	overflow: hidden;
 	color: var(--input_text_color);
 	vertical-align: middle;
@@ -443,17 +443,28 @@ button:active,
 input[type="submit"]:active,
 input[type="button"]:active,
 input[type="color"]:active,
-select:active{
+select:active {
 	background: linear-gradient(var(--input_color_dark), var(--input_color));
 	box-shadow: inset 4px 4px 8px var(--shadow_color);
 	/* Exactly 4px offset compared to the inactive padding to give a depth effect */
 	padding: 9px 1px 1px 9px;
 }
-.button_full_width      {width: calc(100% - 6px);}
-.button_highlight       {background: linear-gradient(var(--highlight_color),      var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;}
-.button_highlight:active{background: linear-gradient(var(--highlight_color_dark), var(--highlight_color)) !important;      color: var(--highlight_text_color) !important;}
-.button_red             {background: linear-gradient(var(--danger_color),         var(--danger_color_dark)) !important;    color: var(--highlight_text_color) !important;}
-.button_red:active      {background: linear-gradient(var(--danger_color_dark),    var(--danger_color)) !important;         color: var(--highlight_text_color) !important;}
+.button_highlight {
+	background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)) !important;
+	color: var(--highlight_text_color) !important;
+}
+.button_highlight:active {
+	background: linear-gradient(var(--highlight_color_dark), var(--highlight_color)) !important;
+	color: var(--highlight_text_color) !important;
+}
+.button_red {
+	background: linear-gradient(var(--danger_color), var(--danger_color_dark)) !important;
+	color: var(--highlight_text_color) !important;
+}
+.button_red:active {
+	background: linear-gradient(var(--danger_color_dark), var(--danger_color)) !important;
+	color: var(--highlight_text_color) !important;
+}
 
 button:disabled, button.disabled,
 .button:disabled, .button.disabled,
diff --git a/res/static/misc/MaterialIcons-Regular.ttf b/res/static/misc/MaterialIcons-Regular.ttf
index 22db32c..40a8f45 100644
Binary files a/res/static/misc/MaterialIcons-Regular.ttf and b/res/static/misc/MaterialIcons-Regular.ttf differ
diff --git a/res/template/appearance.html b/res/template/appearance.html
index 96b0a7d..f5c6100 100644
--- a/res/template/appearance.html
+++ b/res/template/appearance.html
@@ -31,6 +31,7 @@
 				<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/>
 				<!--<input type="radio" id="style_sunny"          name="style"><label for="style_sunny">Sunny Style</label>-->
+				<input type="radio" id="style_sweet"          name="style"><label for="style_sweet">Sweet</label>
 			</div>
 		</section>
 
diff --git a/res/template/widgets.html b/res/template/widgets.html
index 85b6acc..e64459b 100644
--- a/res/template/widgets.html
+++ b/res/template/widgets.html
@@ -8,7 +8,7 @@
 	<body>
 		{{template "page_top" .}}
 
-		<header">
+		<header>
 			<h1>Widget showcase</h1>
 		</header>
 		<section>
diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte
index 4f26572..7493879 100644
--- a/svelte/src/file_viewer/FileViewer.svelte
+++ b/svelte/src/file_viewer/FileViewer.svelte
@@ -426,7 +426,7 @@ const keyboard_event = evt => {
 			{#if is_list}
 				<button
 					on:click={toggle_gallery}
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					class:button_highlight={view === "gallery"}
 					title="Opens a gallery view of the album">
 					<i class="icon">photo_library</i>
@@ -437,7 +437,7 @@ const keyboard_event = evt => {
 			{#if file.abuse_type === "" && view === "file"}
 				<button
 					on:click={downloader.download_file}
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					title="Save this file to your computer">
 					<i class="icon">download</i>
 					<span>Download</span>
@@ -447,7 +447,7 @@ const keyboard_event = evt => {
 			{#if file.abuse_type === "" && is_list}
 				<button
 					on:click={downloader.download_list}
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					title="Download all files in this album as a zip archive">
 					<i class="icon">download</i>
 					<span>DL all files</span>
@@ -456,7 +456,7 @@ const keyboard_event = evt => {
 
 			<button
 				on:click={copy_url}
-				class="toolbar_button button_full_width"
+				class="toolbar_button"
 				class:button_highlight={copy_url_status === "copied"}
 				class:button_red={copy_url_status === "error"}
 				title="Copy a link to this page to your clipboard">
@@ -474,7 +474,7 @@ const keyboard_event = evt => {
 
 			<button
 				on:click={toggle_sharebar}
-				class="toolbar_button button_full_width"
+				class="toolbar_button"
 				class:button_highlight={sharebar_visible}
 				title="Share this file on social media">
 				<i class="icon">share</i>
@@ -482,7 +482,7 @@ const keyboard_event = evt => {
 			</button>
 
 			<button
-				class="toolbar_button button_full_width"
+				class="toolbar_button"
 				on:click={qr_window.toggle}
 				class:button_highlight={qr_visible}
 				title="Show a QR code with a link to this page. Useful for sharing files in-person">
@@ -492,7 +492,7 @@ const keyboard_event = evt => {
 
 			{#if is_list}
 				<button
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					title="Go to a random file when pressing → or clicking the next file button"
 					class:button_highlight={list_shuffle}
 					on:click={toggle_shuffle}>
@@ -507,7 +507,7 @@ const keyboard_event = evt => {
 
 			{#if view === "file"}
 				<button
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					on:click={details_window.toggle}
 					class:button_highlight={details_visible}
 					title="Information and statistics about this file">
@@ -520,7 +520,7 @@ const keyboard_event = evt => {
 
 			{#if file.can_edit || list.can_edit}
 				<button
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					on:click={edit_window.toggle}
 					class:button_highlight={edit_visible}
 					title="Edit or delete this file or album">
@@ -532,7 +532,7 @@ const keyboard_event = evt => {
 			{#if view === "file" && window.user_authenticated && !file.can_edit}
 				<button
 					on:click={grab_file}
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					title="Copy this file to your own pixeldrain account">
 					<i class="icon">save_alt</i>
 					<span><u>G</u>rab file</span>
@@ -540,7 +540,7 @@ const keyboard_event = evt => {
 			{/if}
 
 			<button
-				class="toolbar_button button_full_width"
+				class="toolbar_button"
 				title="Include this file in your own webpages"
 				on:click={embed_window.toggle}
 				class:button_highlight={embed_visible}>
@@ -550,7 +550,7 @@ const keyboard_event = evt => {
 
 			{#if view === "file"}
 				<button
-					class="toolbar_button button_full_width"
+					class="toolbar_button"
 					title="Report this file as abusive"
 					on:click={report_window.toggle}
 					class:button_highlight={report_visible}>
@@ -754,9 +754,9 @@ const keyboard_event = evt => {
 	height: auto;
 	text-align: center;
 }
-
 .toolbar_button{
 	text-align: left;
+	width: calc(100% - 6px);
 }
 .toolbar_button > span {
 	vertical-align: middle;
diff --git a/svelte/src/file_viewer/Sharebar.svelte b/svelte/src/file_viewer/Sharebar.svelte
index 0e4a916..97c8a85 100644
--- a/svelte/src/file_viewer/Sharebar.svelte
+++ b/svelte/src/file_viewer/Sharebar.svelte
@@ -78,6 +78,9 @@ const share_tumblr = () => {
 	transition: left 0.5s;
 }
 .visible { left: 8em; }
+.button_full_width {
+	width: calc(100% - 6px);
+}
 .button_full_width > svg {
 	height: 3em;
 	width: 3em;
diff --git a/svelte/src/file_viewer/UkrainePopup.svelte b/svelte/src/file_viewer/UkrainePopup.svelte
index 3b19c74..5373661 100644
--- a/svelte/src/file_viewer/UkrainePopup.svelte
+++ b/svelte/src/file_viewer/UkrainePopup.svelte
@@ -18,7 +18,7 @@ onMount(() => {
 {#if visible}
 	<div in:fade out:fade class="notice highlight_yellow">
 		<div class="text">
-			🇺🇦 Russia has invaded Ukraine and is murdering its citizens! 🇺🇦<br/>
+			🇺🇦 Russia has invaded Ukraine and is attacking civilians! 🇺🇦<br/>
 			There are a number of ways you can help:
 			<a href="https://helpukrainewin.org/" rel="noreferrer" target="_blank">Click here for more information</a>.
 		</div>
diff --git a/svelte/src/file_viewer/viewers/File.svelte b/svelte/src/file_viewer/viewers/File.svelte
index ea36815..7784346 100644
--- a/svelte/src/file_viewer/viewers/File.svelte
+++ b/svelte/src/file_viewer/viewers/File.svelte
@@ -33,6 +33,7 @@ let file = {
 <style>
 h1 {
 	text-shadow: 1px 1px 3px var(--shadow_color);
+	line-break: anywhere;
 }
 .icon {
 	display: inline-block;
diff --git a/svelte/src/file_viewer/viewers/Torrent.svelte b/svelte/src/file_viewer/viewers/Torrent.svelte
index 6a969fb..2803d70 100644
--- a/svelte/src/file_viewer/viewers/Torrent.svelte
+++ b/svelte/src/file_viewer/viewers/Torrent.svelte
@@ -132,6 +132,10 @@ const copy_magnet = () => {
 {/if}
 
 <style>
+h1 {
+	text-shadow: 1px 1px 3px var(--shadow_color);
+	line-break: anywhere;
+}
 .icon {
 	display: inline-block;
 	vertical-align: middle;
diff --git a/svelte/src/file_viewer/viewers/Video.svelte b/svelte/src/file_viewer/viewers/Video.svelte
index 10c890b..eeadc09 100644
--- a/svelte/src/file_viewer/viewers/Video.svelte
+++ b/svelte/src/file_viewer/viewers/Video.svelte
@@ -170,6 +170,10 @@ const fullscreen = () => {
 {/if}
 
 <style>
+h1 {
+	text-shadow: 1px 1px 3px var(--shadow_color);
+	line-break: anywhere;
+}
 .container {
 	display: flex;
 	flex-direction: column;
diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte
index 927eba2..ffc089e 100644
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -325,23 +325,23 @@ const share = () => {
 			</div>
 
 			{#if state.base.type === "file"}
-			<button on:click={download} class="toolbar_button button_full_width">
+			<button on:click={download} class="toolbar_button">
 				<i class="icon">save</i> Download
 			</button>
 			{/if}
-			<button id="btn_download_list" class="toolbar_button button_full_width" style="display: none;">
+			<button id="btn_download_list" class="toolbar_button" style="display: none;">
 				<i class="icon">save</i> DL all files
 			</button>
-			<button id="btn_copy" class="toolbar_button button_full_width">
+			<button id="btn_copy" class="toolbar_button">
 				<i class="icon">content_copy</i> <u>C</u>opy Link
 			</button>
-			<button on:click={() => sharebar_visible = !sharebar_visible} class="toolbar_button button_full_width" class:button_highlight={sharebar_visible}>
+			<button on:click={() => sharebar_visible = !sharebar_visible} class="toolbar_button" class:button_highlight={sharebar_visible}>
 				<i class="icon">share</i> Share
 			</button>
-			<button on:click={details.toggle} class="toolbar_button button_full_width" class:button_highlight={details_visible}>
+			<button on:click={details.toggle} class="toolbar_button" class:button_highlight={details_visible}>
 				<i class="icon">help</i> Deta<u>i</u>ls
 			</button>
-			<button id="btn_edit" class="toolbar_button button_full_width" style="display: none;">
+			<button id="btn_edit" class="toolbar_button" style="display: none;">
 				<i class="icon">edit</i> <u>E</u>dit
 			</button>
 		</div></div></div>
@@ -549,8 +549,9 @@ const share = () => {
 	height: auto;
 	text-align: center;
 }
-.toolbar_button{
+.toolbar_button {
 	text-align: left;
+	width: calc(100% - 6px);
 }
 .toolbar_label {
 	text-align: left;
diff --git a/svelte/src/filesystem/Sharebar.svelte b/svelte/src/filesystem/Sharebar.svelte
index 65fed9c..5d15030 100644
--- a/svelte/src/filesystem/Sharebar.svelte
+++ b/svelte/src/filesystem/Sharebar.svelte
@@ -82,6 +82,9 @@ const share_tumblr = () => {
 	border-bottom-left-radius: 16px;
 }
 .visible { left: 8em; }
+.button_full_width {
+	width: calc(100% - 6px);
+}
 .button_full_width > svg {
 	height: 3em;
 	width: 3em;
diff --git a/svelte/src/home_page/HomePage.svelte b/svelte/src/home_page/HomePage.svelte
index b54fe5e..9aa1cf4 100644
--- a/svelte/src/home_page/HomePage.svelte
+++ b/svelte/src/home_page/HomePage.svelte
@@ -4,11 +4,8 @@ import OtherPlans from "./OtherPlans.svelte";
 import UploadWidget from "./UploadWidget.svelte";
 
 </script>
-<header style="padding-bottom: 80px; padding-top: 80px;">
-<picture>
-	<source media="(max-width: 700px)" srcset="/res/img/header_orbitron.webp">
-	<img class="header_image" src="/res/img/header_orbitron_wide.webp" alt="Header">
-</picture>
+<header>
+	<div class="header_image_container"></div>
 </header>
 
 <UploadWidget></UploadWidget>
@@ -83,7 +80,7 @@ import UploadWidget from "./UploadWidget.svelte";
 		option if your files are accessed often.
 	</p>
 	<div style="text-align: center;">
-		<img src="/res/img/coins.webp" alt="supported coins" style="width: 250px;"/>
+		<img src="/res/img/coins.webp" alt="supported coins" style="width: 250px; height: 96px;"/>
 	</div>
 	<p>
 		To use prepaid you need to register a pixeldrain account. After
@@ -93,9 +90,20 @@ import UploadWidget from "./UploadWidget.svelte";
 </section>
 
 <style>
-.header_image{
-	width: 100%;
-	max-width: 800px;
+.header_image_container {
 	margin: auto;
+	height: 300px;
+	width: 750px;
+	max-width: 100%;
+	background-image: url("/res/img/header_orbitron_wide.webp");
+	background-repeat: no-repeat;
+	background-size: contain;
+	background-position: center;
+}
+@media (max-width: 700px) {
+	.header_image_container {
+		height: 250px;
+		background-image: url("/res/img/header_orbitron.webp");
+	}
 }
 </style>
diff --git a/svelte/src/home_page/UploadWidget.svelte b/svelte/src/home_page/UploadWidget.svelte
index 2b3e4ff..1012b3a 100644
--- a/svelte/src/home_page/UploadWidget.svelte
+++ b/svelte/src/home_page/UploadWidget.svelte
@@ -577,7 +577,7 @@ const keydown = (e) => {
 	line-height: 1em;
 	text-align: center;
 	display: inline-block;
-	background-color: var(--highlight_color);
+	background: var(--highlight_color);
 	color: var(--highlight_text_color);
 	border-radius: 30px;
 	padding: 0.15em;
diff --git a/svelte/src/util/ThemePicker.svelte b/svelte/src/util/ThemePicker.svelte
index 4ad162b..06357d7 100644
--- a/svelte/src/util/ThemePicker.svelte
+++ b/svelte/src/util/ThemePicker.svelte
@@ -44,6 +44,9 @@ let set = s => {
 	<button class:button_highlight={theme==="skeuos"} on:click={() => {set("skeuos")}}>
 		Skeuos
 	</button>
+	<button class:button_highlight={theme==="sweet"} on:click={() => {set("sweet")}}>
+		Sweet
+	</button>
 </div>
 
 <style>
diff --git a/webcontroller/subscription_activate.go b/webcontroller/subscription_activate.go
index 70180aa..2379eaf 100644
--- a/webcontroller/subscription_activate.go
+++ b/webcontroller/subscription_activate.go
@@ -11,7 +11,7 @@ import (
 func (wc *WebController) patreonLinkForm(td *TemplateData, r *http.Request) (f Form) {
 	f.Name = "link_patreon_subscription"
 	f.Title = "Link Patreon pledge to pixeldrain account"
-	f.SubmitLabel = "Submit"
+	f.SubmitLabel = "Activate subscription"
 
 	if r.FormValue("key") == "" {
 		f.Submitted = true
@@ -68,7 +68,7 @@ func (wc *WebController) patreonLinkForm(td *TemplateData, r *http.Request) (f F
 		Type:         FieldTypeDescription,
 	}, {
 		Name: "8",
-		Description: "When clicking submit your patreon pledge will be linked " +
+		Description: "When clicking 'Activate' your patreon pledge will be linked " +
 			"to your pixeldrain account and you will be able to use " +
 			"pixeldrain's premium features. If you would like to update or " +
 			"cancel your subscription later on you can do so through " +
diff --git a/webcontroller/user_style.go b/webcontroller/user_style.go
index 4255238..84e9f10 100644
--- a/webcontroller/user_style.go
+++ b/webcontroller/user_style.go
@@ -45,6 +45,8 @@ func userStyle(style string) (s pixeldrainStyleSheet) {
 		s = nordPixeldrainStyle
 	case "snowstorm":
 		s = snowstormPixeldrainStyle
+	case "sweet":
+		s = sweetPixeldrainStyle
 	case "default":
 		fallthrough // use default case
 	default:
@@ -70,6 +72,10 @@ func userStyle(style string) (s pixeldrainStyleSheet) {
 	return s
 }
 
+type Colour interface {
+	CSS() string
+}
+
 type pixeldrainStyleSheet struct {
 	Text                hsl
 	Link                hsl // Based on Highlight if undefined
@@ -100,64 +106,64 @@ type pixeldrainStyleSheet struct {
 func (s pixeldrainStyleSheet) String() string {
 	return fmt.Sprintf(
 		`:root {
-	--text_color:                 #%s;
-	--link_color:                 #%s;
-	--input_color:                #%s;
-	--input_color_dark:           #%s;
-	--input_text_color:           #%s;
-	--input_disabled_color:       #%s;
-	--highlight_color:            #%s;
-	--highlight_color_dark:       #%s;
-	--highlight_text_color:       #%s;
-	--danger_color:               #%s;
-	--danger_color_dark:          #%s;
-	--scrollbar_foreground_color: #%s;
-	--scrollbar_hover_color:      #%s;
-	--scrollbar_background_color: #%s;
+	--text_color:                 %s;
+	--link_color:                 %s;
+	--input_color:                %s;
+	--input_color_dark:           %s;
+	--input_text_color:           %s;
+	--input_disabled_color:       %s;
+	--highlight_color:            %s;
+	--highlight_color_dark:       %s;
+	--highlight_text_color:       %s;
+	--danger_color:               %s;
+	--danger_color_dark:          %s;
+	--scrollbar_foreground_color: %s;
+	--scrollbar_hover_color:      %s;
+	--scrollbar_background_color: %s;
 
-	--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;
-	--layer_3_color_border: #%s;
-	--layer_4_color:        #%s;
-	--layer_4_color_border: #%s;
+	--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;
+	--layer_3_color_border: %s;
+	--layer_4_color:        %s;
+	--layer_4_color_border: %s;
 
-	--chart_1_color: #%s;
-	--chart_2_color: #%s;
-	--chart_3_color: #%s;
+	--chart_1_color: %s;
+	--chart_2_color: %s;
+	--chart_3_color: %s;
 
-	--shadow_color:     #%s;
+	--shadow_color: %s;
 }`,
-		s.Text.RGB(),
-		s.Link.RGB(),
-		s.Input.RGB(),
-		s.Input.Add(0, 0, -.02).RGB(),
-		s.InputText.RGB(),
-		s.InputDisabled.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.Chart1.RGB(),
-		s.Chart2.RGB(),
-		s.Chart3.RGB(),
-		s.Shadow.RGB(),
+		s.Text.CSS(),
+		s.Link.CSS(),
+		s.Input.CSS(),
+		s.Input.Add(0, 0, -.02).CSS(),
+		s.InputText.CSS(),
+		s.InputDisabled.CSS(),
+		s.Highlight.CSS(),
+		s.Highlight.Add(0, 0, -.02).CSS(),
+		s.HighlightText.CSS(),
+		s.Danger.CSS(),
+		s.Danger.Add(0, 0, -.02).CSS(),
+		s.ScrollbarForeground.CSS(),
+		s.ScrollbarHover.CSS(),
+		s.Layer2.CSS(), // Scrollbar background
+		s.Layer1.CSS(),
+		s.Layer1.Add(0, 0, .05).CSS(),
+		s.Layer1Text.CSS(),
+		s.Layer2.CSS(),
+		s.Layer2.Add(0, 0, .05).CSS(),
+		s.Layer3.CSS(),
+		s.Layer3.Add(0, 0, .05).CSS(),
+		s.Layer4.CSS(),
+		s.Layer4.Add(0, 0, .05).CSS(),
+		s.Chart1.CSS(),
+		s.Chart2.CSS(),
+		s.Chart3.CSS(),
+		s.Shadow.CSS(),
 	)
 }
 
@@ -180,8 +186,8 @@ func (s pixeldrainStyleSheet) Background(tpl *template.Template) template.URL {
 	} else if month == time.December && (day == 25 || day == 26 || day == 27) {
 		file = "checker_christmas"
 	} else {
-		file = "checker_ukraine"
-		// file = fmt.Sprintf("checker%d", now.UnixNano()%18)
+		// file = "checker_ukraine"
+		file = fmt.Sprintf("checker%d", now.UnixNano()%18)
 	}
 
 	if s.Light {
@@ -240,6 +246,9 @@ func (orig hsl) RGB() string {
 
 	return fmt.Sprintf("%02x%02x%02x", int(r*255), int(g*255), int(b*255))
 }
+func (orig hsl) CSS() string {
+	return "#" + orig.RGB()
+}
 
 // Add returns a NEW HSL struct, it doesn't modify the current one
 func (h hsl) Add(hue int, saturation float64, lightness float64) hsl {
@@ -472,3 +481,19 @@ var snowstormPixeldrainStyle = pixeldrainStyleSheet{
 	Shadow: hsl{0, .0, .50},
 	Light:  true,
 }
+
+var sweetPixeldrainStyle = pixeldrainStyleSheet{
+	Text:          hsl{223, .13, .79}, // hsl(223, 13%, 79%)
+	Input:         hsl{214, .26, .20}, // hsl(214, 26%, 12%)
+	InputText:     hsl{223, .13, .79},
+	Highlight:     hsl{296, .88, .44},
+	HighlightText: hsl{0, 0, 0},
+	Danger:        hsl{356, 1, .64}, // hsl(356, 100%, 64%)
+
+	Layer1: hsl{225, .25, .06}, // hsl(225, 25%, 6%)
+	Layer2: hsl{228, .25, .12}, // hsl(228, 25%, 12%)
+	Layer3: hsl{229, .25, .14}, // hsl(229, 25%, 14%)
+	Layer4: hsl{229, .25, .18},
+
+	Shadow: hsl{0, 0, 0},
+}
