颜色主题切换多语言支持

Author: neveler

_config.yml

@@ -318,9 +318,9 @@ compress_html:
   ignore:
     envs: development
 
-head_scripts:
-  - /assets/js/theme.js
+# head_scripts: []
 after_footer_scripts:
+  - /assets/js/theme.js
   - /assets/js/plugins/jquery.auto-redirect.js
 
 # jekyll-feed

_data/navigation/main.en.yml

@@ -1,2 +1,8 @@
 - title: FAQ
   url: /en/faq.html
+- title: Light
+  class: theme-color-switcher theme-color-light
+- title: Dark
+  class: theme-color-switcher theme-color-dark
+- title: Auto
+  class: theme-color-switcher theme-color-auto

_data/navigation/main.yml

@@ -1,2 +1,8 @@
 - title: 常见问题
   url: /faq.html
+- title: 亮色
+  class: theme-color-switcher theme-color-light
+- title: 暗色
+  class: theme-color-switcher theme-color-dark
+- title: 自动
+  class: theme-color-switcher theme-color-auto

_data/navigation/main.zh-Hant.yml

@@ -1,2 +1,8 @@
 - title: 常見問題
   url: /zh-Hant/faq.html
+- title: 亮色
+  class: theme-color-switcher theme-color-light
+- title: 暗色
+  class: theme-color-switcher theme-color-dark
+- title: 自動
+  class: theme-color-switcher theme-color-auto

_includes/head/custom.html

@@ -1 +1,3 @@
 <link rel="shortcut icon" href="{{ '/favicon.ico' | relative_url }}">
+<link id="theme-color-alternate" rel="stylesheet alternate" href="{{ '/assets/css/dark.css' | relative_url }}">
+<style id="theme-color-style">.theme-color-switcher.theme-color-light{display:block!important}</style>

_includes/masthead.html

@@ -17,7 +17,8 @@
           {%- for link in navigation.data -%}
             <li class="masthead__menu-item" lang="{{ navigation.locale }}">
               <a
-                href="{{ link.url | relative_url }}"
+                {% if link.class %} class="{{ link.class }}"{% endif %}
+                {% if link.url %} href="{{ link.url | relative_url }}"{% endif %}
                 {% if link.description %} title="{{ link.description }}"{% endif %}
                 {% if link.target %} target="{{ link.target }}"{% endif %}
               >{{ link.title }}</a>

_sass/minimal-mistakes-plus.scss

@@ -1,5 +1,14 @@
 @import "minimal-mistakes";
 
+.masthead__menu-item a {
+  cursor: pointer;
+  user-select: none;
+}
+
+.theme-color-switcher {
+  display: none !important;
+}
+
 blockquote {
   margin-inline: 0;
   font-style: normal;

assets/js/theme.js

@@ -1,45 +1,20 @@
----
-layout: null
----
-var darkTheme = document.createElement("link");
-darkTheme.rel = "stylesheet alternate";
-darkTheme.href = "{{ '/assets/css/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);
-    });
-});
+$(function () {
+  var $alt = $("#theme-color-alternate"), $style = $("#theme-color-style");
+  var current = 0, modes = ["light", "dark", "auto"], mq = window.matchMedia("(prefers-color-scheme: dark)");
+  function applyTheme(idx) {
+    idx = (Number(idx) || 0) % modes.length;
+    if (idx === current) return;
+    if (modes[current] === "auto") mq.removeEventListener("change", handler);
+    current = idx;
+    var mode = modes[current];
+    $style.html(".theme-color-switcher.theme-color-" + mode + "{display:block!important}");
+    localStorage.setItem("theme", current);
+    if (mode === "light") $alt.attr("rel", "stylesheet alternate");
+    else if (mode === "dark") $alt.attr("rel", "stylesheet");
+    else { mq.addEventListener("change", handler); handler(); }
+  }
+  function handler() { $alt.attr("rel", mq.matches ? "stylesheet" : "stylesheet alternate"); }
+  $(".theme-color-switcher").on("click", function () { applyTheme(current + 1); });
+  applyTheme(localStorage.getItem("theme"));
+  $(window).on("storage", e => e.originalEvent.key === "theme" && applyTheme(e.originalEvent.newValue));
+});