ndpm13.github.io/layouts/partials/header.html

<header
  class="nav flex flex-row row py-2 mb-6 w-full border-b border-gray-300 dark:border-gray-700 justify-between"
>
  <div>
    <a class="no-underline p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800" href="{{ .Site.BaseURL }}">Home</a>    
    <a class="no-underline p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800" href="{{ `blog` | relURL }}">Blog</a>
    <a class="no-underline p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800" href="{{ `support` | relURL }}">Support</a>
  </div>
  <div>
  <a class="mr-4" href="{{ `search` | relURL }}"><i class="fas fa-search"></i></i></a>
  <i
    class="fas fa-sun theme-toggle text-blue-500 hover:text-blue-700 dark:text-yellow-300 dark:hover:text-yellow-500 cursor-pointer text-lg mr-9 sm:mr-0"
    onclick="lightDark(this)"
  ></i>
</div>
</header>

<script>
  const lightDark = (el) => {
    let html = document.querySelector("html");
    if (html.classList.contains("dark")) {
      html.classList.remove("dark");
      el.classList.add("fa-moon");
      el.classList.remove("fa-sun");
      window.localStorage.setItem("theme", "light");
    } else {
      html.classList.add("dark");
      el.classList.add("fa-sun");
      el.classList.remove("fa-moon");
      window.localStorage.setItem("theme", "dark");
    }
  };
</script>