// Check user prefers color, toggle light/dark, save state
// Based loosely on https://github.com/vinorodrigues/bootstrap-dark

function apply_color_scheme(theme) {
  const disable_theme = theme == 'dark' ? 'light' : 'dark'
  document.documentElement.classList.add(theme)
  document.documentElement.classList.remove(disable_theme)
  document.documentElement.setAttribute('data-theme', theme)
  // $("#css-toggle-btn").prop( "checked", (theme == 'dark') );
}

function auto_update_theme() {
  const upc = window.localStorage.getItem('user-prefers-color')
  let theme = 'dark' // Default to dark theme
  if (!upc) {
    // User hasn't saved a preference specifically for this site; check
    // the browser-level preferences.
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
      theme = 'light'
    }
  } else {
    // Follow user's saved setting.
    theme = upc == 'light' ? 'light' : 'dark'
  }
  apply_color_scheme(theme)
}

function user_toggle_theme() {
  const new_theme = document.documentElement.classList.contains('dark') ? 'light' : 'dark'
  window.localStorage.setItem('user-prefers-color', new_theme)
  // Animate this style switch, but not the ones that happen on page load:
  document.body.style.transition = 'background-color .2s ease'
  apply_color_scheme(new_theme)
}

auto_update_theme()
// update automatically if the user's theme preference changes
if (window.matchMedia) {
  window.matchMedia('(prefers-color-scheme: dark)').addListener(auto_update_theme)
}
// Note: .addListener is considered deprecated, and is supposed to be updated to
// addEventListener("change", callback) instead; however, as recently as macOS
// High Sierra (~2017-2018) Safari does not support addEventListener here.

window.addEventListener('DOMContentLoaded', (event) => {
  document.getElementById('css-toggle-btn').onclick = user_toggle_theme
})