huynguyen93/simple-theme-toggle-server-side-render.html

## simple-theme-toggle-server-side-render.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>khoahuy.com</title>

  {% set isDarkTheme = app.request.cookies.get('defaultTheme') == 'dark' %}
  {% set cssLightUrl = 'assets/cssLight.css' %}
  {% set cssDarkUrl = 'assets/cssDark.css' %}
  <link
      class="app-style"
      rel="stylesheet"
      href="{{ isDarkTheme ? cssDarkUrl : cssLightUrl }}"
      data-css-light-url="{{ cssLightUrl }}"
      data-css-dark-url="{{ cssDarkUrl }}"
  >
</head>
<body>
  <button class="btn" id="theme-toggler">Swich theme</button>
  <script>
    const themeToggler = document.getElementById('theme-toggler');

    if (themeToggler) {
      function setCookie(name,value,days) {
        var expires = "";
        if (days) {
          var date = new Date();
          date.setTime(date.getTime() + (days*24*60*60*1000));
          expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
      }

      themeToggler.addEventListener('click', () => {
        themeToggler.setAttribute('disabled', 'disabled');
        const initialStyle = document.head.querySelector('.app-style');
        const currentStyleUrl = initialStyle.getAttribute('href');
        const lightStyleUrl = initialStyle.getAttribute('data-css-light-url');
        const darkStyleUrl = initialStyle.getAttribute('data-css-dark-url');
        const shouldChangeToLightTheme = currentStyleUrl === darkStyleUrl;
        const newStyleLink = document.createElement('link');

        newStyleLink.addEventListener('load', () => {
          initialStyle.remove();
          themeToggler.removeAttribute('disabled');

          setCookie('defaultTheme', shouldChangeToLightTheme ? 'light' : 'dark', 365);
        });

        newStyleLink.setAttribute('class', 'app-style');
        newStyleLink.setAttribute('rel', 'stylesheet');
        newStyleLink.setAttribute('data-css-light-url', lightStyleUrl);
        newStyleLink.setAttribute('data-css-dark-url', darkStyleUrl);
        newStyleLink.setAttribute('href', shouldChangeToLightTheme ? lightStyleUrl : darkStyleUrl);

        document.head.insertAdjacentElement('beforeend', newStyleLink);
      });
    }
  </script>
</body>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8"/>
	<title>khoahuy.com</title>

	{% set isDarkTheme = app.request.cookies.get('defaultTheme') == 'dark' %}
	{% set cssLightUrl = 'assets/cssLight.css' %}
	{% set cssDarkUrl = 'assets/cssDark.css' %}
	<link
	class="app-style"
	rel="stylesheet"
	href="{{ isDarkTheme ? cssDarkUrl : cssLightUrl }}"
	data-css-light-url="{{ cssLightUrl }}"
	data-css-dark-url="{{ cssDarkUrl }}"
	>
	</head>
	<body>
	<button class="btn" id="theme-toggler">Swich theme</button>
	<script>
	const themeToggler = document.getElementById('theme-toggler');

	if (themeToggler) {
	function setCookie(name,value,days) {
	var expires = "";
	if (days) {
	var date = new Date();
	date.setTime(date.getTime() + (days2460601000));
	expires = "; expires=" + date.toUTCString();
	}
	document.cookie = name + "=" + (value \|\| "") + expires + "; path=/";
	}

	themeToggler.addEventListener('click', () => {
	themeToggler.setAttribute('disabled', 'disabled');
	const initialStyle = document.head.querySelector('.app-style');
	const currentStyleUrl = initialStyle.getAttribute('href');
	const lightStyleUrl = initialStyle.getAttribute('data-css-light-url');
	const darkStyleUrl = initialStyle.getAttribute('data-css-dark-url');
	const shouldChangeToLightTheme = currentStyleUrl === darkStyleUrl;
	const newStyleLink = document.createElement('link');

	newStyleLink.addEventListener('load', () => {
	initialStyle.remove();
	themeToggler.removeAttribute('disabled');

	setCookie('defaultTheme', shouldChangeToLightTheme ? 'light' : 'dark', 365);
	});

	newStyleLink.setAttribute('class', 'app-style');
	newStyleLink.setAttribute('rel', 'stylesheet');
	newStyleLink.setAttribute('data-css-light-url', lightStyleUrl);
	newStyleLink.setAttribute('data-css-dark-url', darkStyleUrl);
	newStyleLink.setAttribute('href', shouldChangeToLightTheme ? lightStyleUrl : darkStyleUrl);

	document.head.insertAdjacentElement('beforeend', newStyleLink);
	});
	}
	</script>
	</body>