2019-09-18 22:23:12 +02:00
|
|
|
{{define "appearance"}}<!DOCTYPE html>
|
2020-01-17 20:32:21 +01:00
|
|
|
<html lang="en">
|
2019-09-18 22:23:12 +02:00
|
|
|
<head>
|
|
|
|
|
{{template "meta_tags" "Appearance settings"}}
|
2022-06-07 14:43:01 +02:00
|
|
|
<link id="stylesheet_theme_2" rel="stylesheet" type="text/css" href="/theme.css"/>
|
2019-09-18 22:23:12 +02:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
{{template "page_top" .}}
|
2022-01-11 13:28:22 +01:00
|
|
|
<header>
|
2022-01-03 14:02:50 +01:00
|
|
|
<h1>Change website appearance</h1>
|
2022-01-11 13:28:22 +01:00
|
|
|
</header>
|
2022-10-11 14:21:06 +02:00
|
|
|
<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>
|
2022-10-11 15:57:23 +02:00
|
|
|
<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>
|
2022-06-14 17:29:23 +02:00
|
|
|
|
2022-10-11 14:21:06 +02:00
|
|
|
<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_default" name="hue"><label for="hue_default">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>
|
2019-09-18 22:23:12 +02:00
|
|
|
|
|
|
|
|
<script>
|
2022-06-14 17:29:23 +02:00
|
|
|
function get_cookie(cname) {
|
|
|
|
|
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")
|
2022-06-07 14:43:01 +02:00
|
|
|
|
2019-09-18 22:23:12 +02:00
|
|
|
// Style selector
|
|
|
|
|
document.getElementsByName("style").forEach(function(elem) {
|
2022-06-07 14:43:01 +02:00
|
|
|
elem.addEventListener("change", e => {
|
|
|
|
|
style = e.target.id.substring(6)
|
|
|
|
|
|
2022-06-14 17:29:23 +02:00
|
|
|
var date = new Date();
|
|
|
|
|
date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
|
|
|
|
|
document.cookie = "style="+style+"; expires=" + date.toUTCString() + "; path=/"
|
2022-06-07 14:43:01 +02:00
|
|
|
|
2022-06-14 17:29:23 +02:00
|
|
|
reload_sheet()
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
document.getElementsByName("hue").forEach(function(elem) {
|
|
|
|
|
elem.addEventListener("change", e => {
|
|
|
|
|
hue = e.target.id.substring(4)
|
|
|
|
|
if (hue === "default") {
|
|
|
|
|
hue = -1
|
|
|
|
|
document.cookie = "hue=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"
|
|
|
|
|
}
|
2022-06-07 14:43:01 +02:00
|
|
|
|
2022-06-14 17:29:23 +02:00
|
|
|
var date = new Date();
|
|
|
|
|
date.setTime(date.getTime() + (10 * 365 * 24 * 60 * 60 * 1000));
|
2022-06-07 14:43:01 +02:00
|
|
|
document.cookie = "hue="+hue+"; expires=" + date.toUTCString() + "; path=/"
|
|
|
|
|
|
2022-06-14 17:29:23 +02:00
|
|
|
reload_sheet()
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function reload_sheet() {
|
2022-06-07 14:43:01 +02:00
|
|
|
let stylesheet1 = document.getElementById("stylesheet_theme")
|
|
|
|
|
let stylesheet2 = document.getElementById("stylesheet_theme_2")
|
|
|
|
|
|
|
|
|
|
// First load the sheet in the secondary tag, wait for it to load,
|
|
|
|
|
// and replace the original sheet when it has finished loading
|
|
|
|
|
stylesheet2.href= "/theme.css?style="+style+"&hue="+hue
|
|
|
|
|
stylesheet2.onload = e => {
|
|
|
|
|
stylesheet1.href= "/theme.css?style="+style+"&hue="+hue
|
|
|
|
|
}
|
|
|
|
|
}
|
2019-09-18 22:23:12 +02:00
|
|
|
</script>
|
2020-01-31 19:16:20 +01:00
|
|
|
{{template "page_bottom" .}}
|
2019-09-18 22:23:12 +02:00
|
|
|
{{template "analytics"}}
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
{{end}}
|
