dagshub-docs/theme/partials/header.html

<script>
    // Constants
    const THEME_LOCAL_STORAGE_NAME = 'dagshub-docs-theme-mode',
          THEME_ATTRIBUTE = 'data-md-color-scheme',
          DARK_THEME = 'slate',
          LIGHT_THEME = 'default';

    const SIGN_IN_STATUS_COOKIE = 'dags_login_status',
          SIGN_IN_STATUS_ATTRIBUTE = 'data-md-signed-in',
          SIGNED_IN_STATUS = 'true',
          SIGNED_OUT_STATUS = 'false';

    const getCookie = (name) => {
      let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
      if (match) return match[2];
    };

    current_theme = localStorage.getItem(THEME_LOCAL_STORAGE_NAME);
    if (current_theme) {
        const attr = THEME_ATTRIBUTE;
        document
            .body
            .setAttribute(attr, current_theme);
    }

    $(document).ready(() => {
        // Handling Signed in status
        if (getCookie(SIGN_IN_STATUS_COOKIE) === SIGNED_IN_STATUS) {
            document.body.setAttribute(
              SIGN_IN_STATUS_ATTRIBUTE,
              SIGNED_IN_STATUS
            );
        } else {
            document.body.setAttribute(
                SIGN_IN_STATUS_ATTRIBUTE,
                SIGNED_OUT_STATUS
            );
        }
        const attr = THEME_ATTRIBUTE;
        let darkmode_toggle = document.getElementById("dark-mode-toggle")
        darkmode_toggle.addEventListener("click", function (e) {
            e.preventDefault();
            e.stopImmediatePropagation();
            let current_mode = document.body.getAttribute(attr);
            let next_mode = current_mode === DARK_THEME ? LIGHT_THEME : DARK_THEME;
            document.body.setAttribute(attr, next_mode);

            localStorage.setItem(THEME_LOCAL_STORAGE_NAME, next_mode);
        })
        // Dropdown handling functions
        $(".dropdown.md-tabs__item").hover(function(e) {
            $(this).children(".menu").slideToggle(100);
        })
    })

</script>
<!-- Application header -->
<header class="md-header" data-md-component="header">
    <!-- Top-level navigation -->
    <nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
        <!-- Button to toggle drawer -->
        <label class="md-icon md-icon--menu md-header-nav__button" for="__drawer">
            {% include ".icons/material/menu" ~ ".svg" %}
        </label>
        <a href="/"
           title="{{ config.site_name }}"
           class="md-header-nav__button md-logo"
           aria-label="{{ config.site_name }}">
            <img src="{{ config.theme.logo | url }}" height="50"/>
        </a>

        <!-- Header title -->
        <div class="md-header-nav__title" data-md-component="title">
            <!-- Links -->
            <nav class="extra-links">
                <div class="md-grid">
                    <div>
                        <a class="md-tabs__item" href="/explore/repos/" title="Explore">Explore</a>
                        <a class="md-tabs__item show-when-signed-in" href="/issues/" title="Issues">Issues</a>
                        <a class="md-tabs__item show-when-signed-in" href="/pulls/" title="Pull Requests">Pull Requests</a>
                        <div class="md-tabs__item dropdown">
                            Resources &nbsp;&nbsp;<i class="fas fa-angle-down"></i>
                            <div class="menu">
                                {% if page.title == "FAQ" %}
                                <a class="item" href="/docs/" title="Docs">Docs</a>
                                <a class="item active" href="/docs/faq" title="FAQ">FAQ</a>
                                {% else %}
                                <a class="item active" href="/docs/" title="Docs">Docs</a>
                                <a class="item" href="/docs/faq" title="FAQ">FAQ</a>
                                {% endif %}
                                <a class="item" href="/blog" title="Blog">Blog</a>
                            </div>
                        </div>
                        <div class="md-tabs__item dropdown show-when-signed-out">
                            Company &nbsp;&nbsp;<i class="fas fa-angle-down"></i>
                            <div class="menu">
                                <a class="item" href="/about/" title="Our Story">Our Story</a>
                                <a class="item" href="/careers/" title="Careers">Careers</a>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
            {% block site_name %}
                {% if config.site_name == page.title %}
                    {{ config.site_name }}
                {% else %}
                    <span class="md-header-nav__topic">
                        {{ config.site_name }}
                    </span>
                    <span class="md-header-nav__topic">
                        {{ page.title }}
                    </span>
                {% endif %}
            {% endblock %}
            </div>


                <div class="discord">
                    <a href="https://discord.com/invite/9gU36Y6" class="md-header-nav__button md-icon">
                        <i class="fab fa-discord fa-3x"></i>
                    </a>
                </div>
                <!-- Button to open search dialogue -->
                {% if "search" in config["plugins"] %}
                    <label class="md-header-nav__button md-icon" for="__search">
                        {% include ".icons/material/magnify.svg" %}
                    </label>
                    {% include "partials/search.html" %}
                {% endif %}
                <div class="md-tabs__item cta button signup show-when-signed-out">
                    <a href="/user/sign_up">
                        <i class="fas fa-user-plus"></i>
                        &nbsp;&nbsp;Sign Up
                    </a>
                </div>
                <div class="md-tabs__item cta create-repo button show-when-signed-in">
                    <a href="/repo/create" title="Create a New Repository">
                        <i class="fas fa-plus"></i>
                        &nbsp;&nbsp;Create
                    </a>
                </div>
                <div class="md-theme-toggle">
                    <div class="toggle-dark-mode-btn">
                        <div class="toggleWrapper" title="Toggle Dark Mode">
                            <input type="checkbox" class="dn" id="dark-mode-toggle" title="Toggle Dark Mode" checked="checked">
                            <label for="dark-mode-toggle" class="toggle">
                                <span class="toggle__handler">
                                    <span class="crater crater--1"></span>
                                    <span class="crater crater--2"></span>
                                    <span class="crater crater--3"></span>
                                </span>
                                <span class="star star--1"></span>
                                <span class="star star--2"></span>
                                <span class="star star--3"></span>
                                <span class="star star--4"></span>
                                <span class="star star--5"></span>
                                <span class="star star--6"></span>
                            </label>
                        </div>
                    </div>
                </div>
            </nav>
        </header>