支持切换颜色模式 (#256)

_config.yml

@@ -18,8 +18,9 @@
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
 
-remote_theme             : "mmistakes/minimal-mistakes@4.26.2"
-minimal_mistakes_skin    : "default" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"
+remote_theme: "mmistakes/minimal-mistakes@4.26.2"
+minimal_mistakes_skin: "default" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"
+minimal_mistakes_skin_dark: "dark" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"
 locale: "zh-CN"
 
 title: Hello Minecraft! Launcher 帮助文档
@@ -126,6 +127,9 @@ compress_html:
   ignore:
     envs: development
 
+head_scripts:
+  - /assets/js/theme.js
+
 footer:
   links:
     - label: "粤ICP备18071565号"

assets/css/main.dark.scss

@@ -1,10 +1,9 @@
 ---
-# Only the main Sass file needs front matter (the dashes are enough)
 search: false
 ---
 
 @charset "utf-8";
 
 $sans-serif: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
+@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin_dark | default: 'dark' }}"; // skin
 @import "minimal-mistakes"; // main partials

assets/js/theme.js

@@ -0,0 +1,45 @@
+---
+layout: null
+---
+var darkTheme = document.createElement("link");
+darkTheme.rel = "stylesheet alternate";
+darkTheme.href = "{{ '/assets/css/main.dark.css' | relative_url }}";
+document.head.appendChild(darkTheme);
+window.addEventListener("DOMContentLoaded", function () {
+    var list = document.querySelector(".masthead .visible-links");
+    if (!list) return;
+    var mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    function handler() {
+        darkTheme.rel = mediaQuery.matches ? "stylesheet" : "stylesheet alternate";
+    }
+    var current = 0;
+    var modes = ["light", "dark", "auto"];
+    var modeNames = ["亮色", "暗色", "自动"];
+    var switcher = document.createElement("a");
+    switcher.className = "masthead__menu-item";
+    switcher.innerText = modeNames[current];
+    switcher.href = "javascript:;";
+    switcher.onclick = function () {
+        themeApply(current + 1);
+    }
+    list.appendChild(switcher);
+    function themeApply(index) {
+        index = (Number(index) || 0) % modes.length;
+        if (index === current) return;
+        if (modes[current] === "auto") mediaQuery.removeEventListener("change", handler);
+        current = index;
+        var mode = modes[current];
+        switcher.innerText = modeNames[current];
+        localStorage.setItem("theme", current);
+        if (mode === "light") darkTheme.rel = "stylesheet alternate";
+        else if (mode === "dark") darkTheme.rel = "stylesheet";
+        else {
+            mediaQuery.addEventListener("change", handler);
+            handler();
+        }
+    }
+    themeApply(localStorage.getItem("theme"));
+    window.addEventListener("storage", function (event) {
+        event.key === "theme" && themeApply(event.newValue);
+    });
+});