f0ckv1/s/theme.js

/* 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 : 'cyber.css',
  label : 'Cyber',
  id : 'cyber'
}, {
  file : 'pink.css',
  label : 'pinkf0ck',
  id : 'pink'
}, {
  file : 'term.css',
  label : 'TERM',
  id : 'TERM'
}];

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('/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/' + themes[i].file;
  }

  updateCss();

  var postingLink = document.getElementById('themes');

  if (postingLink) {

    var divider = document.createElement('span');
    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;

          updateCss();
        }

        return;
      }

      var selectedTheme = themes[themeSelector.selectedIndex - 1];

      if (selectedTheme.id === localStorage.selectedTheme) {
        return;
      }

      localStorage.selectedTheme = selectedTheme.id;

      updateCss();

    };

    postingLink.parentNode.insertBefore(themeSelector, referenceNode);

  }