hexo-theme-lnote 1.2.4 → 1.2.5

package/source/css/main.styl

@@ -1,19 +1,19 @@
-// --------------------------------------
-// LNote
-// https://github.com/fluid-dev/hexo-theme-fluid
-// --------------------------------------
-
-@import "_variables/base"
-for $inject_variable in hexo-config("injects.variable")
-  @import $inject_variable;
-
-@import "_functions/base"
-
-@import "_mixins/base"
-for $inject_mixin in hexo-config("injects.mixin")
-  @import $inject_mixin;
-
-@import "_pages/pages"
-
-for $inject_style in hexo-config("injects.style")
-  @import $inject_style;
+// --------------------------------------
+// LNote
+// https://github.com/fluid-dev/hexo-theme-fluid
+// --------------------------------------
+
+@import "_variables/base"
+for $inject_variable in hexo-config("injects.variable")
+  @import $inject_variable;
+
+@import "_functions/base"
+
+@import "_mixins/base"
+for $inject_mixin in hexo-config("injects.mixin")
+  @import $inject_mixin;
+
+@import "_pages/pages"
+
+for $inject_style in hexo-config("injects.style")
+  @import $inject_style;

package/source/js/color-schema.js

@@ -1,279 +1,279 @@
-/* global LNote */
-
-/**
- * Modified from https://blog.skk.moe/post/hello-darkmode-my-old-friend/
- */
-(function(window, document) {
-  var rootElement = document.documentElement;
-  var colorSchemaStorageKey = 'Lnote_Color_Scheme';
-  var colorSchemaMediaQueryKey = '--color-mode';
-  var userColorSchemaAttributeName = 'data-bs-theme';
-  var defaultColorSchemaAttributeName = 'data-default-color-scheme';
-  var colorToggleButtonSelector = '#color-toggle-btn';
-  var colorToggleIconSelector = '#color-toggle-icon';
-
-  function setLS(k, v) {
-    try {
-      localStorage.setItem(k, v);
-    } catch (e) {}
-  }
-
-  function removeLS(k) {
-    try {
-      localStorage.removeItem(k);
-    } catch (e) {}
-  }
-
-  function getLS(k) {
-    try {
-      return localStorage.getItem(k);
-    } catch (e) {
-      return null;
-    }
-  }
-
-  function getSchemaFromHTML() {
-    var res = rootElement.getAttribute(defaultColorSchemaAttributeName);
-    if (typeof res === 'string') {
-      return res.replace(/["'\s]/g, '');
-    }
-    return null;
-  }
-
-  function getSchemaFromCSSMediaQuery() {
-    var res = getComputedStyle(rootElement).getPropertyValue(
-      colorSchemaMediaQueryKey
-    );
-    if (typeof res === 'string') {
-      return res.replace(/["'\s]/g, '');
-    }
-    return null;
-  }
-
-  function resetSchemaAttributeAndLS() {
-    rootElement.setAttribute(userColorSchemaAttributeName, getDefaultColorSchema());
-    removeLS(colorSchemaStorageKey);
-  }
-
-  var validColorSchemaKeys = {
-    dark : true,
-    light: true
-  };
-
-  function getDefaultColorSchema() {
-    // 取默认字段的值
-    var schema = getSchemaFromHTML();
-    // 如果明确指定了 schema 则返回
-    if (validColorSchemaKeys[schema]) {
-      return schema;
-    }
-    // 默认优先按 prefers-color-scheme
-    schema = getSchemaFromCSSMediaQuery();
-    if (validColorSchemaKeys[schema]) {
-      return schema;
-    }
-    // 否则按本地时间是否大于 18 点或凌晨 0 ~ 6 点
-    var hours = new Date().getHours();
-    if (hours >= 18 || (hours >= 0 && hours <= 6)) {
-      return 'dark';
-    }
-    return 'light';
-  }
-
-  function applyCustomColorSchemaSettings(schema) {
-    // 接受从「开关」处传来的模式，或者从 localStorage 读取，否则按默认设置值
-    var current = schema || getLS(colorSchemaStorageKey) || getDefaultColorSchema();
-
-    if (current === getDefaultColorSchema()) {
-      // 当用户切换的显示模式和默认模式相同时，则恢复为自动模式
-      resetSchemaAttributeAndLS();
-    } else if (validColorSchemaKeys[current]) {
-      rootElement.setAttribute(
-        userColorSchemaAttributeName,
-        current
-      );
-    } else {
-      // 特殊情况重置
-      resetSchemaAttributeAndLS();
-      return;
-    }
-
-    // 根据当前模式设置图标
-    setButtonIcon(current);
-
-    // 设置代码高亮
-    setHighlightCSS(current);
-
-    // 设置其他应用
-    setApplications(current);
-  }
-
-  var invertColorSchemaObj = {
-    dark : 'light',
-    light: 'dark'
-  };
-
-  function getIconClass(scheme) {
-    return 'icon-' + scheme;
-  }
-
-  function toggleCustomColorSchema() {
-    var currentSetting = getLS(colorSchemaStorageKey);
-
-    if (validColorSchemaKeys[currentSetting]) {
-      // 从 localStorage 中读取模式，并取相反的模式
-      currentSetting = invertColorSchemaObj[currentSetting];
-    } else if (currentSetting === null) {
-      // 当 localStorage 中没有相关值，或者 localStorage 抛了 Error
-      // 先按照按钮的状态进行切换
-      var iconElement = document.querySelector(colorToggleIconSelector);
-      if (iconElement) {
-        currentSetting = iconElement.getAttribute('data');
-      }
-      if (!iconElement || !validColorSchemaKeys[currentSetting]) {
-        // 当 localStorage 中没有相关值，或者 localStorage 抛了 Error，则读取默认值并切换到相反的模式
-        currentSetting = invertColorSchemaObj[getSchemaFromCSSMediaQuery()];
-      }
-    } else {
-      return;
-    }
-    // 将相反的模式写入 localStorage
-    setLS(colorSchemaStorageKey, currentSetting);
-
-    return currentSetting;
-  }
-
-  function setButtonIcon(schema) {
-    if (validColorSchemaKeys[schema]) {
-      // 切换图标
-      var icon = getIconClass('dark');
-      if (schema) {
-        icon = getIconClass(schema);
-      }
-      var iconElement = document.querySelector(colorToggleIconSelector);
-      if (iconElement) {
-        iconElement.setAttribute(
-          'class',
-          'iconfont ' + icon
-        );
-        iconElement.setAttribute(
-          'data',
-          invertColorSchemaObj[schema]
-        );
-      } else {
-        // 如果图标不存在则说明图标还没加载出来，等到页面全部加载再尝试切换
-        LNote.utils.waitElementLoaded(colorToggleIconSelector, function() {
-          var iconElement = document.querySelector(colorToggleIconSelector);
-          if (iconElement) {
-            iconElement.setAttribute(
-              'class',
-              'iconfont ' + icon
-            );
-            iconElement.setAttribute(
-              'data',
-              invertColorSchemaObj[schema]
-            );
-          }
-        });
-      }
-      if (document.documentElement.getAttribute('data-bs-theme')) {
-        var color = getComputedStyle(document.documentElement).getPropertyValue('--navbar-bg-color').trim()
-        document.querySelector('meta[name="theme-color"]').setAttribute('content', color)
-      }
-    }
-  }
-
-  function setHighlightCSS(schema) {
-    // 启用对应的代码高亮的样式
-    var lightCss = document.getElementById('highlight-css');
-    var darkCss = document.getElementById('highlight-css-dark');
-    if (schema === 'dark') {
-      if (darkCss) {
-        darkCss.removeAttribute('disabled');
-      }
-      if (lightCss) {
-        lightCss.setAttribute('disabled', '');
-      }
-    } else {
-      if (lightCss) {
-        lightCss.removeAttribute('disabled');
-      }
-      if (darkCss) {
-        darkCss.setAttribute('disabled', '');
-      }
-    }
-
-    setTimeout(function() {
-      // 设置代码块组件样式
-      document.querySelectorAll('.markdown-body pre').forEach((pre) => {
-        var cls = LNote.utils.getBackgroundLightness(pre) >= 0 ? 'code-widget-light' : 'code-widget-dark';
-        var widget = pre.querySelector('.code-widget-light, .code-widget-dark');
-        if (widget) {
-          widget.classList.remove('code-widget-light', 'code-widget-dark');
-          widget.classList.add(cls);
-        }
-      });
-    }, 200);
-  }
-
-  function setApplications(schema) {
-    // 设置 remark42 评论主题
-    if (window.REMARK42) {
-      window.REMARK42.changeTheme(schema);
-    }
-
-    // 设置 cusdis 评论主题
-    if (window.CUSDIS) {
-      window.CUSDIS.setTheme(schema);
-    }
-
-    // 设置 utterances 评论主题
-    var utterances = document.querySelector('.utterances-frame');
-    if (utterances) {
-      var utterancesTheme = schema === 'dark' ? window.UtterancesThemeDark : window.UtterancesThemeLight;
-      const message = {
-        type : 'set-theme',
-        theme: utterancesTheme
-      };
-      utterances.contentWindow.postMessage(message, 'https://utteranc.es');
-    }
-
-    // 设置 giscus 评论主题
-    var giscus = document.querySelector('iframe.giscus-frame');
-    if (giscus) {
-      var giscusTheme = schema === 'dark' ? window.GiscusThemeDark : window.GiscusThemeLight;
-      const message = {
-        setConfig: {
-          theme: giscusTheme,
-        }
-      };
-      giscus.contentWindow.postMessage({ 'giscus': message }, 'https://giscus.app');
-    }
-  }
-
-  // 当页面加载时，将显示模式设置为 localStorage 中自定义的值（如果有的话）
-  applyCustomColorSchemaSettings();
-
-  LNote.utils.waitElementLoaded(colorToggleIconSelector, function() {
-    applyCustomColorSchemaSettings();
-    var button = document.querySelector(colorToggleButtonSelector);
-    if (button) {
-      // 当用户点击切换按钮时，获得新的显示模式、写入 localStorage、并在页面上生效
-      button.addEventListener('click', function() {
-        applyCustomColorSchemaSettings(toggleCustomColorSchema());
-      });
-      var icon = document.querySelector(colorToggleIconSelector);
-      if (icon) {
-        // 光标悬停在按钮上时，切换图标
-        button.addEventListener('mouseenter', function() {
-          var current = icon.getAttribute('data');
-          icon.classList.replace(getIconClass(invertColorSchemaObj[current]), getIconClass(current));
-        });
-        button.addEventListener('mouseleave', function() {
-          var current = icon.getAttribute('data');
-          icon.classList.replace(getIconClass(current), getIconClass(invertColorSchemaObj[current]));
-        });
-      }
-    }
-  });
-})(window, document);
+/* global LNote */
+
+/**
+ * Modified from https://blog.skk.moe/post/hello-darkmode-my-old-friend/
+ */
+(function(window, document) {
+  var rootElement = document.documentElement;
+  var colorSchemaStorageKey = 'Lnote_Color_Scheme';
+  var colorSchemaMediaQueryKey = '--color-mode';
+  var userColorSchemaAttributeName = 'data-bs-theme';
+  var defaultColorSchemaAttributeName = 'data-default-color-scheme';
+  var colorToggleButtonSelector = '#color-toggle-btn';
+  var colorToggleIconSelector = '#color-toggle-icon';
+
+  function setLS(k, v) {
+    try {
+      localStorage.setItem(k, v);
+    } catch (e) {}
+  }
+
+  function removeLS(k) {
+    try {
+      localStorage.removeItem(k);
+    } catch (e) {}
+  }
+
+  function getLS(k) {
+    try {
+      return localStorage.getItem(k);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  function getSchemaFromHTML() {
+    var res = rootElement.getAttribute(defaultColorSchemaAttributeName);
+    if (typeof res === 'string') {
+      return res.replace(/["'\s]/g, '');
+    }
+    return null;
+  }
+
+  function getSchemaFromCSSMediaQuery() {
+    var res = getComputedStyle(rootElement).getPropertyValue(
+      colorSchemaMediaQueryKey
+    );
+    if (typeof res === 'string') {
+      return res.replace(/["'\s]/g, '');
+    }
+    return null;
+  }
+
+  function resetSchemaAttributeAndLS() {
+    rootElement.setAttribute(userColorSchemaAttributeName, getDefaultColorSchema());
+    removeLS(colorSchemaStorageKey);
+  }
+
+  var validColorSchemaKeys = {
+    dark : true,
+    light: true
+  };
+
+  function getDefaultColorSchema() {
+    // 取默认字段的值
+    var schema = getSchemaFromHTML();
+    // 如果明确指定了 schema 则返回
+    if (validColorSchemaKeys[schema]) {
+      return schema;
+    }
+    // 默认优先按 prefers-color-scheme
+    schema = getSchemaFromCSSMediaQuery();
+    if (validColorSchemaKeys[schema]) {
+      return schema;
+    }
+    // 否则按本地时间是否大于 18 点或凌晨 0 ~ 6 点
+    var hours = new Date().getHours();
+    if (hours >= 18 || (hours >= 0 && hours <= 6)) {
+      return 'dark';
+    }
+    return 'light';
+  }
+
+  function applyCustomColorSchemaSettings(schema) {
+    // 接受从「开关」处传来的模式，或者从 localStorage 读取，否则按默认设置值
+    var current = schema || getLS(colorSchemaStorageKey) || getDefaultColorSchema();
+
+    if (current === getDefaultColorSchema()) {
+      // 当用户切换的显示模式和默认模式相同时，则恢复为自动模式
+      resetSchemaAttributeAndLS();
+    } else if (validColorSchemaKeys[current]) {
+      rootElement.setAttribute(
+        userColorSchemaAttributeName,
+        current
+      );
+    } else {
+      // 特殊情况重置
+      resetSchemaAttributeAndLS();
+      return;
+    }
+
+    // 根据当前模式设置图标
+    setButtonIcon(current);
+
+    // 设置代码高亮
+    setHighlightCSS(current);
+
+    // 设置其他应用
+    setApplications(current);
+  }
+
+  var invertColorSchemaObj = {
+    dark : 'light',
+    light: 'dark'
+  };
+
+  function getIconClass(scheme) {
+    return 'icon-' + scheme;
+  }
+
+  function toggleCustomColorSchema() {
+    var currentSetting = getLS(colorSchemaStorageKey);
+
+    if (validColorSchemaKeys[currentSetting]) {
+      // 从 localStorage 中读取模式，并取相反的模式
+      currentSetting = invertColorSchemaObj[currentSetting];
+    } else if (currentSetting === null) {
+      // 当 localStorage 中没有相关值，或者 localStorage 抛了 Error
+      // 先按照按钮的状态进行切换
+      var iconElement = document.querySelector(colorToggleIconSelector);
+      if (iconElement) {
+        currentSetting = iconElement.getAttribute('data');
+      }
+      if (!iconElement || !validColorSchemaKeys[currentSetting]) {
+        // 当 localStorage 中没有相关值，或者 localStorage 抛了 Error，则读取默认值并切换到相反的模式
+        currentSetting = invertColorSchemaObj[getSchemaFromCSSMediaQuery()];
+      }
+    } else {
+      return;
+    }
+    // 将相反的模式写入 localStorage
+    setLS(colorSchemaStorageKey, currentSetting);
+
+    return currentSetting;
+  }
+
+  function setButtonIcon(schema) {
+    if (validColorSchemaKeys[schema]) {
+      // 切换图标
+      var icon = getIconClass('dark');
+      if (schema) {
+        icon = getIconClass(schema);
+      }
+      var iconElement = document.querySelector(colorToggleIconSelector);
+      if (iconElement) {
+        iconElement.setAttribute(
+          'class',
+          'iconfont ' + icon
+        );
+        iconElement.setAttribute(
+          'data',
+          invertColorSchemaObj[schema]
+        );
+      } else {
+        // 如果图标不存在则说明图标还没加载出来，等到页面全部加载再尝试切换
+        LNote.utils.waitElementLoaded(colorToggleIconSelector, function() {
+          var iconElement = document.querySelector(colorToggleIconSelector);
+          if (iconElement) {
+            iconElement.setAttribute(
+              'class',
+              'iconfont ' + icon
+            );
+            iconElement.setAttribute(
+              'data',
+              invertColorSchemaObj[schema]
+            );
+          }
+        });
+      }
+      if (document.documentElement.getAttribute('data-bs-theme')) {
+        var color = getComputedStyle(document.documentElement).getPropertyValue('--navbar-bg-color').trim()
+        document.querySelector('meta[name="theme-color"]').setAttribute('content', color)
+      }
+    }
+  }
+
+  function setHighlightCSS(schema) {
+    // 启用对应的代码高亮的样式
+    var lightCss = document.getElementById('highlight-css');
+    var darkCss = document.getElementById('highlight-css-dark');
+    if (schema === 'dark') {
+      if (darkCss) {
+        darkCss.removeAttribute('disabled');
+      }
+      if (lightCss) {
+        lightCss.setAttribute('disabled', '');
+      }
+    } else {
+      if (lightCss) {
+        lightCss.removeAttribute('disabled');
+      }
+      if (darkCss) {
+        darkCss.setAttribute('disabled', '');
+      }
+    }
+
+    setTimeout(function() {
+      // 设置代码块组件样式
+      document.querySelectorAll('.markdown-body pre').forEach((pre) => {
+        var cls = LNote.utils.getBackgroundLightness(pre) >= 0 ? 'code-widget-light' : 'code-widget-dark';
+        var widget = pre.querySelector('.code-widget-light, .code-widget-dark');
+        if (widget) {
+          widget.classList.remove('code-widget-light', 'code-widget-dark');
+          widget.classList.add(cls);
+        }
+      });
+    }, 200);
+  }
+
+  function setApplications(schema) {
+    // 设置 remark42 评论主题
+    if (window.REMARK42) {
+      window.REMARK42.changeTheme(schema);
+    }
+
+    // 设置 cusdis 评论主题
+    if (window.CUSDIS) {
+      window.CUSDIS.setTheme(schema);
+    }
+
+    // 设置 utterances 评论主题
+    var utterances = document.querySelector('.utterances-frame');
+    if (utterances) {
+      var utterancesTheme = schema === 'dark' ? window.UtterancesThemeDark : window.UtterancesThemeLight;
+      const message = {
+        type : 'set-theme',
+        theme: utterancesTheme
+      };
+      utterances.contentWindow.postMessage(message, 'https://utteranc.es');
+    }
+
+    // 设置 giscus 评论主题
+    var giscus = document.querySelector('iframe.giscus-frame');
+    if (giscus) {
+      var giscusTheme = schema === 'dark' ? window.GiscusThemeDark : window.GiscusThemeLight;
+      const message = {
+        setConfig: {
+          theme: giscusTheme,
+        }
+      };
+      giscus.contentWindow.postMessage({ 'giscus': message }, 'https://giscus.app');
+    }
+  }
+
+  // 当页面加载时，将显示模式设置为 localStorage 中自定义的值（如果有的话）
+  applyCustomColorSchemaSettings();
+
+  LNote.utils.waitElementLoaded(colorToggleIconSelector, function() {
+    applyCustomColorSchemaSettings();
+    var button = document.querySelector(colorToggleButtonSelector);
+    if (button) {
+      // 当用户点击切换按钮时，获得新的显示模式、写入 localStorage、并在页面上生效
+      button.addEventListener('click', function() {
+        applyCustomColorSchemaSettings(toggleCustomColorSchema());
+      });
+      var icon = document.querySelector(colorToggleIconSelector);
+      if (icon) {
+        // 光标悬停在按钮上时，切换图标
+        button.addEventListener('mouseenter', function() {
+          var current = icon.getAttribute('data');
+          icon.classList.replace(getIconClass(invertColorSchemaObj[current]), getIconClass(current));
+        });
+        button.addEventListener('mouseleave', function() {
+          var current = icon.getAttribute('data');
+          icon.classList.replace(getIconClass(current), getIconClass(invertColorSchemaObj[current]));
+        });
+      }
+    }
+  });
+})(window, document);