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:

Jul 08, 2023

Themes