feat: 增加像素化风格设置

wan92hen · Jul 19, 2024 · a01a747 · a01a747
1 parent 7872350
commit a01a747
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 22 deletions.
diff --git a/settings.yaml b/settings.yaml
@@ -15,6 +15,10 @@ spec:
           name: index_notice_content
           label: 首页公告内容
           value: '一款 Terminal 风格的 Halo 主题。'
+        - $formkit: checkbox
+          name: pixel_style
+          label: 像素化风格
+          help: 开启后，将使用像素风格字体及图标。
     - group: beian
       label: 备案设置
       formSchema:

diff --git a/src/fonts/fusion-pixel-12px-proportional-zh_hans.woff2 b/src/fonts/fusion-pixel-12px-proportional-zh_hans.woff2
diff --git a/templates/modules/header.html b/templates/modules/header.html
@@ -12,27 +12,37 @@
         th:if="${pluginFinder.available('PluginSearchWidget')}"
         onclick="SearchWidget.open()"
       >
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-          <path
-            fill="currentColor"
-            d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5q0-2.725 1.888-4.612T9.5 3q2.725 0 4.612 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3l-1.4 1.4ZM9.5 14q1.875 0 3.188-1.313T14 9.5q0-1.875-1.313-3.188T9.5 5Q7.625 5 6.312 6.313T5 9.5q0 1.875 1.313 3.188T9.5 14Z"
-          />
-        </svg>
+        <th:block th:unless="${theme.config.basic.pixel_style}">
+          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24">
+            <path
+              fill="currentColor"
+              d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5q0-2.725 1.888-4.612T9.5 3q2.725 0 4.612 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3l-1.4 1.4ZM9.5 14q1.875 0 3.188-1.313T14 9.5q0-1.875-1.313-3.188T9.5 5Q7.625 5 6.312 6.313T5 9.5q0 1.875 1.313 3.188T9.5 14Z"
+            />
+          </svg>
+        </th:block>
+        <th:block th:if="${theme.config.basic.pixel_style}">
+          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path fill="currentColor" d="M6 2h8v2H6zM4 6V4h2v2zm0 8H2V6h2zm2 2H4v-2h2zm8 0v2H6v-2zm2-2h-2v2h2v2h2v2h2v2h2v-2h-2v-2h-2v-2h-2zm0-8h2v8h-2zm0 0V4h-2v2z"/></svg>
+        </th:block>
       </button>
       <button id="theme-toggle" type="button">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          style="vertical-align: -0.125em"
-          width="1.5rem"
-          height="1.5rem"
-          preserveAspectRatio="xMidYMid meet"
-          viewBox="0 0 24 24"
-        >
-          <path
-            fill="currentColor"
-            d="M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5l1.43 1.43L4.93 20.5L3.5 19.07L19.07 3.5m-6.18 2.43L11.41 5L9.97 6l.42-1.7L9 3.24l1.75-.12l.58-1.65L12 3.1l1.73.03l-1.35 1.13l.51 1.67m-3.3 3.61l-1.16-.73l-1.12.78l.34-1.32l-1.09-.83l1.36-.09l.45-1.29l.51 1.27l1.36.03l-1.05.87l.4 1.31M19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58l2.77-1.15l-.24 3.35l-2.53-2.2m4.33-2.7l1.15-2.77l2.2 2.54l-3.35.23m1.15-4.96l-1.14-2.78l3.34.24l-2.2 2.54M9.63 18.93l2.77 1.15l-2.53 2.19l-.24-3.34Z"
-          />
-        </svg>
+        <th:block th:unless="${theme.config.basic.pixel_style}">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            style="vertical-align: -0.125em"
+            width="1.5rem"
+            height="1.5rem"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M7.5 2c-1.79 1.15-3 3.18-3 5.5s1.21 4.35 3.03 5.5C4.46 13 2 10.54 2 7.5A5.5 5.5 0 0 1 7.5 2m11.57 1.5l1.43 1.43L4.93 20.5L3.5 19.07L19.07 3.5m-6.18 2.43L11.41 5L9.97 6l.42-1.7L9 3.24l1.75-.12l.58-1.65L12 3.1l1.73.03l-1.35 1.13l.51 1.67m-3.3 3.61l-1.16-.73l-1.12.78l.34-1.32l-1.09-.83l1.36-.09l.45-1.29l.51 1.27l1.36.03l-1.05.87l.4 1.31M19 13.5a5.5 5.5 0 0 1-5.5 5.5c-1.22 0-2.35-.4-3.26-1.07l7.69-7.69c.67.91 1.07 2.04 1.07 3.26m-4.4 6.58l2.77-1.15l-.24 3.35l-2.53-2.2m4.33-2.7l1.15-2.77l2.2 2.54l-3.35.23m1.15-4.96l-1.14-2.78l3.34.24l-2.2 2.54M9.63 18.93l2.77 1.15l-2.53 2.19l-.24-3.34Z"
+            />
+          </svg>
+        </th:block>
+        <th:block th:if="${theme.config.basic.pixel_style}">
+          <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path fill="currentColor" d="M11 0h2v4h-2zm1 12H8v2H4v2H2v4h2v2h10v-2h2v-4h-2v-2h-2zm0 2v2h2v4H4v-4h4v2h2v-2H8v-2zM8 6h6v2H8zm0 2v2H6V8zm8 2h-2V8h2zm0 0h2v2h-2zm4-8h2v2h-2zm0 2v2h-2V4zM2 2h2v2H2zm2 2h2v2H4zm20 7h-4v2h4z"/></svg>
+        </th:block>
       </button>
     </div>
     <nav class="menu">
@@ -61,17 +71,17 @@
 
       var storedTheme =
         localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
-      if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
+      if (storedTheme) document.documentElement.setAttribute("data-color-scheme", storedTheme);
 
       toggle.onclick = function () {
-        var currentTheme = document.documentElement.getAttribute("data-theme");
+        var currentTheme = document.documentElement.getAttribute("data-color-scheme");
         var targetTheme = "light";
 
         if (currentTheme === "light") {
           targetTheme = "dark";
         }
 
-        document.documentElement.setAttribute("data-theme", targetTheme);
+        document.documentElement.setAttribute("data-color-scheme", targetTheme);
         localStorage.setItem("theme", targetTheme);
       };
     </script>

diff --git a/templates/modules/layout.html b/templates/modules/layout.html
@@ -7,6 +7,11 @@
     <title th:text="${site.title}"></title>
     <link rel="stylesheet" th:href="@{/assets/dist/style.css}" href="./assets/dist/style.css" />
     <script th:src="@{/assets/dist/main.iife.js}"></script>
+    <style th:if="${theme.config.basic.pixel_style}">
+      body {
+        font-family: Ark-Pixel-12-proportional-zh_cn, serif;
+      }
+    </style>
   </head>
 
   <body class="main">