fnx_web/svelte/src/pages/Appearance.svelte

<script lang="ts">
import { onMount } from "svelte";

const get_cookie = (cname: string) => {
	let name = cname + "=";
	let decodedCookie = decodeURIComponent(document.cookie);
	let ca = decodedCookie.split(';');
	for(let i = 0; i <ca.length; i++) {
		let c = ca[i];
		while (c.charAt(0) == ' ') {
		c = c.substring(1);
		}
		if (c.indexOf(name) == 0) {
		return c.substring(name.length, c.length);
		}
	}
	return "";
}

let style = get_cookie("style")
let hue = +get_cookie("hue")

// Style selector
onMount(() => {
	document.getElementsByName("style").forEach(function(elem) {
		elem.addEventListener("change", e => {
			style = (e.target as HTMLInputElement).id.substring(6)

			var date = new Date();
			date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
			document.cookie = "style="+style+"; expires=" + date.toUTCString() + "; path=/"

			reload_sheet()
		})
	});
	document.getElementsByName("hue").forEach(function(elem) {
		elem.addEventListener("change", e => {
			hue = +(e.target as HTMLInputElement).id.substring(4)
			if (hue === -1) {
				document.cookie = "hue=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"
			}

			var date = new Date();
			date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
			document.cookie = "hue="+hue+"; expires=" + date.toUTCString() + "; path=/"

			reload_sheet()
		})
	});
})

let stylesheet_2: HTMLLinkElement
const reload_sheet = () => {
	let stylesheet1 = document.getElementById("stylesheet_theme") as HTMLLinkElement

	// First load the sheet in the secondary tag, wait for it to load,
	// and replace the original sheet when it has finished loading
	stylesheet_2.href= "/theme.css?style="+style+"&hue="+hue
	stylesheet_2.onload = e => {
		stylesheet1.href= "/theme.css?style="+style+"&hue="+hue
	}
}
</script>

<svelte:head>
	<link bind:this={stylesheet_2} id="stylesheet_theme_2" rel="stylesheet" type="text/css" href="/theme.css"/>
</svelte:head>

<div id="page_content" class="page_content">
	<section>
		<p>
			You can change how pixeldrain looks! Your theme choice will
			be saved in a cookie.
		</p>
		<h2>Theme</h2>
		<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_solarized" name="style"><label for="style_solarized">Solarized</label>
		(Inspired by <a href="https://ethanschoonover.com/solarized/" target="_blank">Solarized</a>)
		<br/>
		Dynamic theme, changes based on operating system settings. Here you can choose a specific variant:
		<br/>
		<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized dark</label>
		<br/>
		<input type="radio" id="style_solarized_light" name="style"><label for="style_solarized_light">Solarized light</label>
		<br/>
		<!-- <br/> -->
		<!-- <input type="radio" id="style_adwaita" name="style"><label for="style_adwaita">Adwaita</label><br/> -->
		<br/>
		<input type="radio" id="style_purple_drain" name="style"><label for="style_purple_drain">Purple drain</label>
		<br/>
		Classic 2022 style, with purple gradients
		<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 gray
		<br/>
		<br/>
		Other (experimental) themes
		<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_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_sweet" name="style"><label for="style_sweet">Sweet</label>
		<br/>
		<br/>
		<input type="radio" id="style_adwaita" name="style"><label for="style_adwaita">Adwaita (dynamic)</label>
		<br/>
		<input type="radio" id="style_adwaita_dark" name="style"><label for="style_adwaita_dark">Adwaita dark</label>
		<br/>
		<input type="radio" id="style_adwaita_light" name="style"><label for="style_adwaita_light">Adwaita light</label>
		<br/><br/>
		<input type="radio" id="style_pixeldrain98" name="style"><label for="style_pixeldrain98">Pixeldrain 98</label>
		<br/>
		<input type="radio" id="style_pixeldrain98_dark" name="style"><label for="style_pixeldrain98_dark">Pixeldrain 98 (dark)</label>

		<h2>Hue</h2>
		<p>
			Many themes support custom hues. The hue does not change the
			contrast of the theme, only the color itself.
		</p>
		<input type="radio" id="hue_-1" name="hue"><label for="hue_-1">Default</label><br/>
		<input type="radio" id="hue_354" name="hue"><label for="hue_354">Red</label><br/>
		<input type="radio" id="hue_14" name="hue"><label for="hue_14">Orange</label><br/>
		<input type="radio" id="hue_40" name="hue"><label for="hue_40">Yellow</label><br/>
		<input type="radio" id="hue_92" name="hue"><label for="hue_92">Green</label><br/>
		<input type="radio" id="hue_311" name="hue"><label for="hue_311">Purple</label><br/>
	</section>
</div>