Themes
Inspired by my friend the rats, i have created a theming system for my site!
Currently i just have the default, "starscape" theme, and a y2k theme, but i may add more in the future!
(you can click the dashed box in the nav menu to change the theme!)
I have done this using the magic of CSS and JavaScript. While i'd love to do it without js completely thats just not possible :'c
I wrote up some code to demonstrate how this might be done, it is as follows:
html:
<body theme="">
<div>
<label for=theme>theme:</label>
<select id=theme onchange="document.body.setAttribute('theme',this.value);localStorage.setItem('theme', this.value)">
<option value=red> red </option>
<option value=green> green </option>
<option value=blue> blue </option>
</select>
</div>
</body>
css:
body[theme=red]{
background: pink;
}
body[theme=green]{
background: aquamarine;
}
body[theme=blue]{
background: skyblue;
}
html, body{
height: 100%;
padding: 0;
margin: 0;
transition-duration: 0.2s;
}
body{
display: flex;
justify-content:center;align-items:center;
}
div {
background-color: white;
padding: 3ch;
border-radius: 1ch;
}
and javascript:
window.addEventListener("DOMContentLoaded", () => {
let theme = localStorage.getItem("theme")
document.body.setAttribute('theme', theme ?? "red")
document.querySelector("#theme").value = theme ?? "red";
})
This results in the following:
if you have any more ideas for themes, let me know! this was really fun to do, and thanks again to my friends the rats c: