(function() {
  const htmlElem = document.querySelector('html')
  window['setMode'] = (mode) => {
    localStorage.setItem('theme', mode)
    if (mode === 'dark') {
      htmlElem.setAttribute('data-bs-theme', mode)
    }
    else if (mode === 'light') {
      htmlElem.setAttribute('data-bs-theme', mode)
    }
    else if (mode === 'auto') {

      const preferred = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
      htmlElem.setAttribute('data-bs-theme', preferred)
    }
    window['currentTheme'] = mode
  };

  window['currentTheme'] = localStorage.getItem("theme") || "auto"

  window['setMode'](window['currentTheme'])

  window['setCheckbox'] = (mode, element) => {
    if (element === null) { return }
    if (mode === 'light') {
      element.innerHTML = `<span>&#x1F31E;</span>`
    }
    if (mode === 'dark') {
      element.innerHTML = `<span>&#x1F319;</span>`
    }
    if (mode === 'auto') {
      element.innerHTML = `<span>&#x1F5A5;&#xFE0F;</span>`
    }
    const preferred = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
    const stylesheet = window['currentTheme'] === 'dark' || (window['currentTheme'] === 'auto' && preferred === 'dark') ? "prism_dark.css" : "prism.css"

    const link = document.getElementById("prism-theme")
    if (link) {
      link.href = link.href.split("/").slice(0, -1).concat(stylesheet).join("/")
    }
  }
  window['toggleDarkMode'] = (button) => {
    const clickedOption = button.dataset.themePref
    window['setMode'](clickedOption)
    window['setCheckbox'](clickedOption, document.getElementById('dark-mode-switch'))
  }
}())