minimal-mistakes 다크모드 토글버튼 적용하기
TL;DR
theme2 를 만들어서 적용한다
참고 링크
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
댓글남기기