<style type=“text/css”>
li { text-transform: uppercase; } #theme-toggle-mobile { vertical-align: text-bottom; font-size: 13px; }
</style> <header>
<div class="header__inner u-clearfix"> <nav class="header__navi pc"> <ul class="u-clearfix"> <!-- <li> <a href="{{ site.baseurl }}/">Home</a> </li> --> {% for link in site.navigation %} {% assign current = nil %} {% if page.url == link.url or page.layout == link.layout %} {% assign current = 'is-current is-active' %} {% endif %} <li class=" {{ current }} "> <a href="{{ link.url }}">{{ link.text }}</a> </li> {% endfor %} {% if site.dropdown != false %} <li class="navi__lang js-lang"> <a class="navi__langLink" href="javascript:void(0);">{{site.dropdown_header}}</a> <div class="navi__langList"> {% for item in site.dropdown %} <span><a href="{{item.url}}">{{item.text}}</a></span> {% endfor %} </div> </li> {% endif %} <li> <i class="fa fa-adjust" aria-hidden="true" style="display:inline"></i> <a id="theme-toggle" href="javascript:void(0)" style="list-style-type:none!important;display:inline" onclick="modeSwitcher()">theme-toggle</a> </li> </ul> </nav><!-- .header__navi --> <nav class="header__sns pc"> <ul class="u-clearfix"> <li><a href="{{site.github_url}}" target="_blank"><i class="fa fa-github-alt"></i>GITHUB</a></li> </ul> </nav><!-- .header__sns --> <div class="header__logo sp"> <a href="../"> <p class="header__logoTxt black-white-image"><img src="{{ site.url }}/assets/img/logo_Nest.png" alt="Riino BLOG"></p> </a> </div><!-- .header__logo --> <div class="header__logo sp" style="margin-left: 20px;" onclick="modeSwitcher()"> <a href="javascript:void(0);"> <p class="header__logoTxt black-white-image"><img src="{{ site.url }}/assets/img/switcher.png" alt="Riino BLOG"></p> </a> </div><!-- .swithcer__logo --> <div class="menuBtn sp"> <div class="menuBtn__inner"> <a href="javascript:void(0);"> <span></span> <span></span> <span></span> </a> </div><!-- .menuBtn__inner --> </div><!-- .menuBtn --> </div>
</header>
<!–<section style=“height: 200px;”></section>–> <script>
const sessionStorage = window.sessionStorage; let systemInitiatedDark = window.matchMedia("(prefers-color-scheme: dark)"); let theme = sessionStorage.getItem('theme'); function setAsLightTheme() { document.documentElement.setAttribute('data-theme', 'light'); sessionStorage.setItem('theme', 'light'); $("#theme-toggle").html("Dark Mode"); $("#theme-toggle-mobile").html("Dark Mode"); $('.black-white-image').css("filter", 'brightness(0)'); $('.warning-image').css("filter", 'invert(51%)sepia(93%)saturate(4588%)hue-rotate(309deg)brightness(94%)contrast(93%)'); // $('.warning-image').css("filter",'invert(51%) sepia(93%) saturate(4588%) hue-rotate(309deg) brightness(94%) contrast(93%);'); }; function setAsDarkTheme() { document.documentElement.setAttribute('data-theme', 'dark'); sessionStorage.setItem('theme', 'dark'); $("#theme-toggle").html("Light Mode"); $("#theme-toggle-mobile").html("Light Mode"); $('.black-white-image').css("filter", 'brightness(100)'); $('.warning-image').css("filter", 'invert(38%)sepia(73%)saturate(3208%)hue-rotate(310deg)brightness(96%)contrast(90%)'); // $('.warning-image').css("filter",'invert(38%) sepia(73%) saturate(3208%) hue-rotate(310deg) brightness(96%) contrast(90%)'); } //handle theme change function prefersColorTest(systemInitiatedDark) { if (systemInitiatedDark.matches) { setAsDarkTheme(); } else { setAsLightTheme(); } } systemInitiatedDark.addListener(prefersColorTest); //handle click function modeSwitcher() { let theme = sessionStorage.getItem('theme'); if (theme === "dark") { setAsLightTheme(); } else if (theme === "light") { setAsDarkTheme() } else if (systemInitiatedDark.matches) { setAsLightTheme(); } else { setAsDarkTheme(); } }; function initTheme() { if (theme) { if (theme == "dark") { setAsDarkTheme(); } else if (theme == "light") { setAsLightTheme(); } } else { prefersColorTest(systemInitiatedDark); } } initTheme();//avoid passing a white page if the intention is dark theme $(document).ready(function () { initTheme(); }) console.log('[↓]BEGIN'); console.log("🐼This site is using jekyll-theme-panda ", "{{site.theme_version}}");
</script>