minimal-mistakes 다크모드 토글버튼 적용하기

TL;DR

theme2 를 만들어서 적용한다

참고 링크

Vladsiv 님의 코드를 참고하여 적용했습니다.

Allow user to toggle between themes [light/dark] · Discussion #2033 · mmistakes/minimal-mistakes

_config.yml

저는 기본을 다크모드로 설정하고 싶어서 skin을 dark로 하고 skin2를 default로 했습니다.

minimal_mistakes_skin: "dark" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"
minimal_mistakes_skin2   : "default"

_includes/head.html

<!-- ... -->

<!-- For all browsers -->
<!-- <link rel="stylesheet" href="/assets/css/main.css"> -->
<link rel="stylesheet" href="/assets/css/main.css" id="theme_source">

<link rel="stylesheet alternate" href="/assets/css/theme2.css" id="theme_source_2">

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


<link rel="preload" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css" as="style"
  onload="this.onload=null;this.rel='stylesheet'">
<noscript>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css">
</noscript>
<!-- ... -->

_includes/masthead.html 에 아이콘 추가

(...중략)

<ul class="visible-links"><li class="masthead__menu-item">
      <a href="/categories/">Categories</a>
    </li><li class="masthead__menu-item">
      <a href="/posts/">Posts</a>
    </li><li class="masthead__menu-item">
      <a href="/random/">Random</a>
    </li><li class="masthead__menu-item">
      <a href="/search/">Search</a>
    </li></ul>

 <!-- 다크 모드 토글 버튼 -->

  <i class="fas fa-fw fa-adjust" aria-hidden="true" onclick="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');sessionStorage.setItem('theme', 'dark');}else{node2.setAttribute('rel', 'stylesheet alternate'); node1.setAttribute('rel', 'stylesheet');sessionStorage.setItem('theme', 'light');} return false;"></i>




(...중략)

assets/css/theme2.scss 추가

---
# Only the main Sass file needs front matter (the dashes are enough)
---

@charset "utf-8";

@import "minimal-mistakes/skins/default"; // skin
@import "minimal-mistakes"; // main partials