$(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);
  };
});