v2.1 lol

public/s/js/theme.js

@@ -1,97 +1,22 @@
-/* Thanks to StephenLynx, I modified his Theme Changer from the Penumbra Lynx Frontend for the Lynxchan Software https://gitgud.io/LynxChan/LynxChan and reused it to make f0ck a nicer place. */
-var themes = [ {
-  file : 'f0ck95.css',
-  label : 'f0ck95',
-  id : 'f0ck95'
-}];
-
-let interval = null;
-const clocklol = () => {
-  const l = document.querySelector("body");
-  if(localStorage.selectedTheme && localStorage.selectedTheme === "f0ck95")
-    interval = setInterval((d = new Date()) => l.setAttribute("data-clock", d.toLocaleTimeString()), 1e3);
-  else {
-    clearInterval(interval);
-    l.removeAttribute("data-clock");
+(() => {
+  const themes = [ 'f0ck', 'p1nk', 'orange', 'amoled' ];
+  const acttheme = localStorage.getItem('theme') ?? "f0ck";
+  document.documentElement.setAttribute("theme", acttheme);
+  if(themecontainer = document.querySelector("#themes")) {
+    const sb = document.createElement("select");
+    sb.id = "themeselector";
+    themes.forEach(o => {
+      const option = document.createElement("option");
+      option.text = o;
+      if(acttheme === o)
+        option.selected = true;
+      sb.add(option);
+    });
+    themecontainer.insertAdjacentElement("afterend", sb);
+    sb.addEventListener("change", e => {
+      const s = e.target.options[e.target.selectedIndex].innerText;
+      document.documentElement.setAttribute("theme", s);
+      localStorage.setItem("theme", s);
+    });
   }
-};
-
-const speaker = () => {
-  const k = document.querySelector("body");
-  if(localStorage.selectedTheme && localStorage.selectedTheme === "f0ck95")
-    k.document.createElement("div");
-  else
-    return;
-};
-
-var customCss;
-var addedTheme;
-function updateCss() {
-  if (addedTheme) {
-    addedTheme.parentNode.removeChild(addedTheme);
-    addedTheme = null;
-  }
-  for (var i = 0; i < themes.length; i++) {
-    var theme = themes[i];
-    if (theme.id === localStorage.selectedTheme) {
-      addedTheme = theme.element;
-      document.head.insertBefore(theme.element, customCss);
-    }
-  }
-}
-for (var i = 0; i < document.head.children.length; i++) {
-  var element = document.head.children[i];
-  if (element.rel === 'stylesheet' && element.href.indexOf('/css/custom.css') > -1) {
-    customCss = element;
-    break;
-  }
-}
-for (var i = 0; i < themes.length; i++) {
-  themes[i].element = document.createElement('link');
-  themes[i].element.type = 'text/css';
-  themes[i].element.rel = 'stylesheet';
-  themes[i].element.href = './s/css/' + themes[i].file;
-}
-
-clocklol();
-updateCss();
-var postingLink = document.getElementById('themes');
-if (postingLink) {
-  var divider = document.createElement('span');
-  divider.style = ('display: none;');
-  divider.innerHTML = '';
-  var referenceNode = postingLink.nextSibling;
-  postingLink.parentNode.insertBefore(divider, referenceNode);
-  var themeSelector = document.createElement('select');
-  themeSelector.id = 'themeSelector';
-  var vanillaOption = document.createElement('option');
-  vanillaOption.innerHTML = 'Default';
-  themeSelector.appendChild(vanillaOption);
-  for (i = 0; i < themes.length; i++) {
-    var theme = themes[i];
-    var themeOption = document.createElement('option');
-    themeOption.innerHTML = theme.label;
-    if (theme.id === localStorage.selectedTheme) {
-      themeOption.selected = true;
-    }
-    themeSelector.appendChild(themeOption);
-  }
-  themeSelector.onchange = function() {
-    if (!themeSelector.selectedIndex) {
-      if (localStorage.selectedTheme) {
-        delete localStorage.selectedTheme;
-        clocklol();
-        updateCss();
-      }
-      return;
-    }
-    var selectedTheme = themes[themeSelector.selectedIndex - 1];
-    if (selectedTheme.id === localStorage.selectedTheme) {
-      return;
-    }
-    localStorage.selectedTheme = selectedTheme.id;
-    clocklol();
-    updateCss();
-  };
-  postingLink.parentNode.insertBefore(themeSelector, referenceNode);
-}
+})();