$(function () {
  // theme switcher without reloading

  let themeStyle = $('#theme-style')
  const lightURL = themeStyle.data('light-url')
  const darkURL = themeStyle.data('dark-url')
  const navbar = $('.page-navbar')
  const logo = $('#navbar-logo')

  window.toggleDarkMode = function () {
    let newStyle = document.createElement('link')
    newStyle.rel = 'stylesheet'
    if (themeStyle.attr('href') === lightURL) {
      newStyle.href = darkURL
      navbar.removeClass('navbar-light')
      navbar.addClass('navbar-dark')
      logo.attr('src', logo.data('src-dark'))

      document.cookie = 'dark_mode=1'
    } else {
      newStyle.href = lightURL
      navbar.removeClass('navbar-dark')
      navbar.addClass('navbar-light')
      logo.attr('src', logo.data('src-light'))

      document.cookie = 'dark_mode=0;expires=' + new Date().toUTCString()
    }

    // remove old css after new css has loaded to prevent FOUC
    let oldThemeStyle = themeStyle
    themeStyle = $(newStyle)
    themeStyle.on('load', () => oldThemeStyle.remove())
    $(document.head).append(themeStyle)
  }
})