luau/docs/_includes/masthead.html

{% capture logo_path %}{{ site.logo }}{% endcapture %}

<div class="masthead">
    <div class="masthead__inner-wrap">
        <div class="masthead__menu">
            <nav id="site-nav" class="greedy-nav">
                {% unless logo_path == empty %}
                <a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}"
                        alt="{{ site.masthead_title | default: site.title }}"></a>
                {% endunless %}
                <a class="site-title" href="{{ '/' | relative_url }}">
                    {{ site.masthead_title | default: site.title }}
                    {% if site.subtitle %}<span class="site-subtitle">{{ site.subtitle }}</span>{% endif %}
                </a>
                <ul class="visible-links">
                    {%- for link in site.data.navigation.main -%}
                    <li class="masthead__menu-item">
                        <a href="{{ link.url | relative_url }}" {% if link.description %} title="{{ link.description }}"
                            {% endif %}>{{ link.title }}</a>
                    </li>
                    {%- endfor -%}
                </ul>
                <i class="fas fa-fw fa-adjust" aria-hidden="true" onclick="toggleTheme()"></i>
                {% if site.search == true %}
                <button class="search__toggle" type="button">
                    <span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle
                        search" }}</span>
                    <i class="fas fa-search"></i>
                </button>
                {% endif %}
                <button class="greedy-nav__toggle hidden" type="button">
                    <span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu"
                        }}</span>
                    <div class="navicon"></div>
                </button>
                <ul class="hidden-links hidden"></ul>
            </nav>
        </div>
    </div>
</div>

<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}" id="theme_source">
<link rel="stylesheet alternate" href="{{ '/assets/css/theme2.css' | relative_url }}" id="theme_source_2">

<script>
    let theme = localStorage.getItem('theme');
    if (theme === "dark") {
        localStorage.setItem('theme', 'dark');
        node1 = document.getElementById('theme_source');
        node2 = document.getElementById('theme_source_2');
        node1.setAttribute('rel', 'stylesheet alternate');
        node2.setAttribute('rel', 'stylesheet');
    } else {
        localStorage.setItem('theme', 'light');
    }

    function toggleTheme() {
        node1 = document.getElementById("theme_source");
        node2 = document.getElementById("theme_source_2");
        if (node1.getAttribute("rel") == "stylesheet") {
            node1.setAttribute("rel", "stylesheet alternate");
            node2.setAttribute("rel", "stylesheet");
            try { editor.setOption("theme", "dark") } catch { };
            localStorage.setItem("theme", "dark");
        } else {
            node2.setAttribute("rel", "stylesheet alternate");
            node1.setAttribute("rel", "stylesheet");
            try { editor.setOption("theme", "light") } catch { };
            localStorage.setItem("theme", "light");
        }
        return false;
    }
</script>