Reimplements party-time as a CSS filter, with no JS needed.

src/css/main.css

@@ -319,6 +319,27 @@ body:has(.furigana-position option[value="off"]:checked) :is(rt, rp) {
   display: none;
 }
 
+@keyframes party-animation {
+  0% {
+    filter: hue-rotate(0deg);
+  }
+  100% {
+    filter: hue-rotate(360deg);
+  }
+}
+
+html:has(input#party-time:checked) {
+  animation: party-animation 3s infinite;
+}
+
+input#party-time {
+  display: none;
+}
+
+input#party-time + label:after {
+  content: "🥳🦜";
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --background-color-main: #000;

src/index.js

@@ -1,53 +1,3 @@
 if (navigator.serviceWorker && !navigator.serviceWorker.controller) {
   navigator.serviceWorker.register('/sw.js');
 }
-
-if (document.readyState !== 'complete') {
-  window.addEventListener('load', setupParty, false);
-} else {
-  setupParty();
-}
-
-function setupParty() {
-  'use strict';
-
-  let partyOn = false;
-  let previous = null;
-  let hue = parseInt(
-    window
-      .getComputedStyle(document.body)
-      .getPropertyValue('--base-background-hue'),
-    10
-  );
-
-  window.toggleParty = () => {
-    if (partyOn) {
-      partyOn = false;
-      previous = null;
-      return;
-    }
-
-    partyOn = true;
-
-    function updateParty(now) {
-      if (!partyOn) {
-        return;
-      }
-
-      const dt = previous === null ? 0 : now - previous;
-
-      previous = now;
-      hue = (hue + dt / 10) % 256;
-      document.documentElement.style.setProperty('--base-background-hue', hue);
-      window.requestAnimationFrame(updateParty);
-    }
-
-    window.requestAnimationFrame(updateParty);
-  };
-
-  const $partyButton = document.querySelector('.party');
-
-  if ($partyButton) {
-    $partyButton.onclick = window.toggleParty;
-  }
-}

src/templates/partials/copyright.html.handlebars

@@ -1,2 +1,2 @@
 <p>Copyright Mark Everitt 2015-{{year}}.
-<a href="https://ko-fi.com/qubyte" rel="payment">Donate</a> to support this blog and my OS work. <button class="party">Party on! 🥳🦜</button></p>
+<a href="https://ko-fi.com/qubyte" rel="payment">Donate</a> to support this blog and my OS work. <input id="party-time" type="checkbox"/><label for="party-time">Party on! </label></p>