From 66d254038b536dda8bb784c0ae5214fada3b2fc7 Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Thu, 24 Jul 2025 17:09:26 +0800
Subject: refactor: replace some utility classes with UnoCSS

Former-commit-id: c476bb450e62fd7cb8bdf22d45c4422f92c1cc8f
---
 assets/css/utils/_utility.scss                       | 20 --------------------
 assets/css/utils/_variables.scss                     |  3 ---
 content/posts/weekly/22.md                           |  2 +-
 ...5\256\266\347\232\204\347\233\264\350\247\211.md" |  2 +-
 ...6\211\251\345\274\240\346\203\257\346\200\247.md" |  6 +++---
 ...0\256\272\347\232\204\350\214\203\345\233\264.md" |  2 +-
 ...7\273\237\350\256\241\345\233\276\350\241\250.md" |  6 +++---
 layouts/_partials/components/logo.html               |  2 +-
 layouts/_partials/components/tags.html               |  2 +-
 layouts/_partials/footer.html                        |  2 +-
 layouts/_partials/header.html                        |  2 +-
 layouts/_partials/home/home-nav.html                 |  4 ++--
 layouts/_partials/items/post-small.html              |  4 ++--
 layouts/_partials/items/post.html                    |  2 +-
 layouts/_partials/posts/action-menu.html             |  8 ++++----
 layouts/_partials/posts/comment.html                 |  6 +++---
 layouts/_partials/posts/endnotes.html                |  2 +-
 layouts/_partials/posts/now-read-this.html           |  4 ++--
 layouts/_partials/stats/external-link-rank.html      |  2 +-
 layouts/_partials/stats/publish-time-chart.html      |  4 ++--
 layouts/_partials/stats/word-count-chart.html        |  2 +-
 layouts/cards/page.html                              |  2 +-
 layouts/fictions/page.html                           |  2 +-
 layouts/library/page.html                            |  2 +-
 layouts/posts/page.html                              |  4 ++--
 layouts/section.html                                 |  4 ++--
 uno.config.js                                        | 11 ++++++++---
 27 files changed, 47 insertions(+), 65 deletions(-)

diff --git a/assets/css/utils/_utility.scss b/assets/css/utils/_utility.scss
index 157e0945..6daa9f0d 100644
--- a/assets/css/utils/_utility.scss
+++ b/assets/css/utils/_utility.scss
@@ -1,15 +1,3 @@
-.dark {
-    .invert-if-dark {
-        filter: invert(1)
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    .invert-if-dark {
-        filter: invert(1)
-    }
-}
-
 .outbox {
   display: flex;
   justify-content: center;
@@ -40,14 +28,6 @@
   }
 }
 
-.font-mono {
-    font-family: var(--mono-font-family);
-}
-
-.font-secondary {
-    color: var(--secondary-text-color)!important;
-}
-
 .xerox {
     filter: url(#x);
 }
diff --git a/assets/css/utils/_variables.scss b/assets/css/utils/_variables.scss
index c557ed87..72b37563 100644
--- a/assets/css/utils/_variables.scss
+++ b/assets/css/utils/_variables.scss
@@ -10,9 +10,6 @@
     --bright-background-color: #fafafa;
 
     /* fonts */
-    --mono-font-family:
-        "Courier New", Courier, "Menlo", "Monaco", Consolas, "Liberation Mono",
-        "Lucida Console", monospace;
     --serif-font-family: "Noto Serif", "Noto Serif SC", serif;
     --content-font-size: 16px;
     @media screen and (min-width: 768px) {
diff --git a/content/posts/weekly/22.md b/content/posts/weekly/22.md
index bfe7349c..fad88552 100644
--- a/content/posts/weekly/22.md
+++ b/content/posts/weekly/22.md
@@ -89,7 +89,7 @@ Git 是一个版本管理软件，常用于软件开发。Commit 是 Git 的一
 
 而 Michael Lynch 在《[No Longer My Favorite Git Commit](https://mtlynch.io/no-longer-my-favorite-git-commit/)》中指出事无巨细地描述修改过程并不是好的软件工程，并展示了一个「倒金字塔」模型。
 
-<img src="https://image.guhub.cn//uPic/inverted-pyramid.png" class="invert-if-dark">
+<img src="https://image.guhub.cn//uPic/inverted-pyramid.png" class="dark:invert">
 
 倒金字塔顶端是「所有人都在乎的东西」，其次是「一些人会在乎的东西」，最次是「很少人在乎的东西」。倒金字塔既表示了顺序，也表示了占比。也就是说，所有人都在乎的东西应该放在最前面，且应该是最多的；很少有人在乎的东西应该放在最后，而且应该尽可能言简意赅。
 
diff --git "a/content/posts/\344\270\223\345\256\266\347\232\204\347\233\264\350\247\211.md" "b/content/posts/\344\270\223\345\256\266\347\232\204\347\233\264\350\247\211.md"
index d9a3a6f7..2e023f2e 100644
--- "a/content/posts/\344\270\223\345\256\266\347\232\204\347\233\264\350\247\211.md"
+++ "b/content/posts/\344\270\223\345\256\266\347\232\204\347\233\264\350\247\211.md"
@@ -42,7 +42,7 @@ draft: false
 久而久之，你就可以抛弃你原来的系统，按照相似的思想和决策方式行事。即使没有直接屏蔽干扰，也没有明确的路径，你仍然能够通过直觉找到方向。
 
 ![](https://image.guhub.cn/uPic/2025/01/IMG_0285.PNG "图片依次展示了「混沌」、「建立秩序」和「再入混沌」三个阶段")
-{.invert-if-dark}
+{.dark:invert}
 
 可以把先前践行的规则和使用的工具当作「引路人」的角色，当这条路走多了，即使引路人离开了你，你依然能在迷宫中找到正确的路径。
 
diff --git "a/content/posts/\346\211\251\345\274\240\346\203\257\346\200\247.md" "b/content/posts/\346\211\251\345\274\240\346\203\257\346\200\247.md"
index a73020f5..06a6b402 100644
--- "a/content/posts/\346\211\251\345\274\240\346\203\257\346\200\247.md"
+++ "b/content/posts/\346\211\251\345\274\240\346\203\257\346\200\247.md"
@@ -8,7 +8,7 @@ tags:
   - 手写文章
 ---
 
-<div class="invert-if-dark">
+<div class="dark:invert">
 
 ![IMG_0269](https://image.guhub.cn/uPic/2025/01/IMG_0269-removebg-preview-2.png)
 
@@ -16,7 +16,7 @@ tags:
 
 <!--more-->
 
-<div class="invert-if-dark">
+<div class="dark:invert">
 
 ![IMG_0271](https://image.guhub.cn/uPic/2025/01/Unknown.png)
 
@@ -68,4 +68,4 @@ tags:
 
 ---
 
-inspired by [SkyWrite](https://write.skywt.cn)
\ No newline at end of file
+inspired by [SkyWrite](https://write.skywt.cn)
diff --git "a/content/posts/\346\230\216\347\241\256\350\256\250\350\256\272\347\232\204\350\214\203\345\233\264.md" "b/content/posts/\346\230\216\347\241\256\350\256\250\350\256\272\347\232\204\350\214\203\345\233\264.md"
index c1c3ac93..5ffb24d8 100644
--- "a/content/posts/\346\230\216\347\241\256\350\256\250\350\256\272\347\232\204\350\214\203\345\233\264.md"
+++ "b/content/posts/\346\230\216\347\241\256\350\256\250\350\256\272\347\232\204\350\214\203\345\233\264.md"
@@ -76,7 +76,7 @@ featured: true
 允许了第二条「对目的本身的质疑和想法」存在，就允许讨论目的随着讨论的深入而发生改变。比如，人们已开始只是在讨论「怎么给自行车修棚」，当有人提出「为什么不给摩托车修棚？」并针对目的进行讨论之后，讨论的目的就可能变成「怎么给自行车和摩托车修棚」。这时候再严格地在范围内进行讨论，就不容易出错。
 
 ![](https://image.guhub.cn/uPic/2025/03/scope-of-discussion.png)
-{.invert-if-dark}
+{.dark:invert}
 
 ## 讨论中词句的目的
 
diff --git "a/content/posts/\351\233\266JavaScript\347\232\204\345\215\232\345\256\242\347\273\237\350\256\241\345\233\276\350\241\250.md" "b/content/posts/\351\233\266JavaScript\347\232\204\345\215\232\345\256\242\347\273\237\350\256\241\345\233\276\350\241\250.md"
index c6903101..7d36bbe8 100644
--- "a/content/posts/\351\233\266JavaScript\347\232\204\345\215\232\345\256\242\347\273\237\350\256\241\345\233\276\350\241\250.md"
+++ "b/content/posts/\351\233\266JavaScript\347\232\204\345\215\232\345\256\242\347\273\237\350\256\241\345\233\276\350\241\250.md"
@@ -28,7 +28,7 @@ slug: zero-js-chart
 <div class="time-chart-container">
 	<div class="time-chart-wrapper">
 		<div class="time-icon">☀️</div>
-		<div class="time-chart-bar invert-if-dark">
+		<div class="time-chart-bar dark:invert">
 			<!-- for each time segement -->
 			<div class="time-segment"
 				 style="width: {{$percentage}}">
@@ -38,10 +38,10 @@ slug: zero-js-chart
 		</div>
 		<div class="time-icon">🌙</div>
 	</div>
-	
+
 	<div class="time-counts">
 		<!-- for each time segement -->
-		<div class="count-item" 
+		<div class="count-item"
 		 style="width: {{$percentage}}">
 			<span class="count-number">{{$count}}</span>
 		</div>
diff --git a/layouts/_partials/components/logo.html b/layouts/_partials/components/logo.html
index 1bb967a0..63f500c5 100644
--- a/layouts/_partials/components/logo.html
+++ b/layouts/_partials/components/logo.html
@@ -7,6 +7,6 @@
 <a href="{{ .Site.LanguagePrefix }}/{{ $link }}"
     class="title-image-container {{ $class }}">
     <img src="{{ $src }}" alt="Logo"
-        class="invert-if-dark title-image {{ $imageClass }}"
+        class="dark:invert title-image {{ $imageClass }}"
         style="view-transition-name: title-image" />
 </a>
diff --git a/layouts/_partials/components/tags.html b/layouts/_partials/components/tags.html
index b08230d9..78d87f5b 100644
--- a/layouts/_partials/components/tags.html
+++ b/layouts/_partials/components/tags.html
@@ -1,3 +1,3 @@
 {{ range .Params.tags }}
-<a class="tag font-secondary no-underline!" href="{{ site.LanguagePrefix }}/tags/{{ lower . | urlize }}/">#{{ . }}</a>
+<a class="tag text-secondary no-underline!" href="{{ site.LanguagePrefix }}/tags/{{ lower . | urlize }}/">#{{ . }}</a>
 {{ end }}
diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html
index baf79c06..38bedc12 100644
--- a/layouts/_partials/footer.html
+++ b/layouts/_partials/footer.html
@@ -11,7 +11,7 @@
         <ul class="list-none flex gap-1 ps-0 my-2 mx-0 md:justify-end">
             {{ range .Site.Params.footerInternalLinks }}
             <li><a href="{{ .link }}" title="{{ .name }}">{{ .name }}</a></li>
-            <li class="font-secondary last:hidden ml-1">/</li>
+            <li class="text-secondary last:hidden ml-1">/</li>
             {{ end }}
             <li class="inline-flex items-center">
                 {{ if eq .Site.Language.Lang "en" }}
diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
index 554b1f58..754bbf2d 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -28,7 +28,7 @@
       {{- $entry := index $switch $lang -}}
       <a href="{{ $entry.url }}" data-umami-event="🌍 Switch Language"
           class="no-swup" title="{{ $entry.label }}">
-        <img src="/img/globe.svg" class="invert-if-dark block w-[1.2em] h-[1.2em]">
+        <img src="/img/globe.svg" class="dark:invert block w-[1.2em] h-[1.2em]">
       </a>
   </div>
 </header>
diff --git a/layouts/_partials/home/home-nav.html b/layouts/_partials/home/home-nav.html
index 4dea2222..2d8e539d 100644
--- a/layouts/_partials/home/home-nav.html
+++ b/layouts/_partials/home/home-nav.html
@@ -19,10 +19,10 @@
                     (strings.HasPrefix $.Page.RelPermalink "/tags/"))
             ) }}
         {{ end }}
-        <li id="search-instruction" class="text-size-sm font-secondary ml-2">
+        <li id="search-instruction" class="text-size-sm text-secondary ml-2">
             <span>{{ T "searchInstruction" }}</span>
         </li>
-        <li class="absolute right-0 invert-if-dark">
+        <li class="absolute right-0 dark:invert">
             <a href="{{ .Site.LanguagePrefix }}/stats"
                 class="opacity-50 transition-opacity duration-300 hover:opacity-100
                 {{ if eq "/stats/" $.Page.RelPermalink }} opacity-100 font-bolder{{ end }}"
diff --git a/layouts/_partials/items/post-small.html b/layouts/_partials/items/post-small.html
index 30cbf60f..644cb106 100644
--- a/layouts/_partials/items/post-small.html
+++ b/layouts/_partials/items/post-small.html
@@ -1,9 +1,9 @@
 <li class="flex justify-between text-size-lg">
     <a href="{{ .RelPermalink }}" data-umami-event="🗃️ Click Post Link from Category Page">
-        {{ .Title }}{{ with .Params.subtitle }}：<span class="font-secondary">{{. }}</span>
+        {{ .Title }}{{ with .Params.subtitle }}：<span class="text-secondary">{{. }}</span>
         {{ end }}
     </a>
-    <time class="text-size-sm font-mono font-secondary flex-shrink-0">
+    <time class="text-size-sm font-mono text-secondary flex-shrink-0">
         {{ .Date.Format "2006-1-2" }}
     </time>
 </li>
diff --git a/layouts/_partials/items/post.html b/layouts/_partials/items/post.html
index 8bbd68a8..3e426c56 100644
--- a/layouts/_partials/items/post.html
+++ b/layouts/_partials/items/post.html
@@ -4,7 +4,7 @@
     style="view-transition-name: post-{{ .ctx.File.UniqueID }}">
     <header class="w-full md:flex md:justify-between">
         <div>
-            <p class="font-mono font-secondary">
+            <p class="font-mono text-secondary">
                 <time>{{ .ctx.Date.Format "January 2" }},</time>
                 <span>in <a href="/{{ .Section }}/">{{ .ctx.Section }}</a></span>
             </p>
diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index c1d4cd55..1bd639e9 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -2,7 +2,7 @@
   <!-- 操作按钮组 -->
   <div class="flex justify-between items-center mb-6">
     <div class="flex gap-2">
-      <button class="invert-if-dark flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group" id="comments-toggle" title="评论">
+      <button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group" id="comments-toggle" title="评论">
         <img src="/img/comments.svg" width="20" height="20" alt="评论" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
         <span class="text-xs font-bold text-gray-600 min-w-4 text-center bg-white/90 rounded-xl px-1.5 py-0.5 shadow-sm dark:text-gray-400 dark:bg-black/70" id="comment-count">...</span>
         <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">评论</div>
@@ -10,7 +10,7 @@
 
       <!-- 点赞按钮 -->
       <div class="relative" id="like-container-{{ .File.UniqueID | urlize }}">
-        <button class="invert-if-dark flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group"
+        <button class="dark:invert flex items-center justify-center gap-1.5 min-w-12 h-12 px-2 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:bg-black/5 hover:rounded-lg group"
                 onclick="sendLike('{{ .File.UniqueID | urlize }}')"
                 id="like-btn-{{ .File.UniqueID | urlize }}"
                 title="为这篇文章献上心脏"
@@ -23,11 +23,11 @@
     </div>
 
     <div class="flex gap-1">
-      <a href="https://t.me/teaparty418" target="_blank" class="invert-if-dark flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="Telegram 群组" data-umami-event="✈️ Click Telegram link from post tabs">
+      <a href="https://t.me/teaparty418" target="_blank" class="dark:invert flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="Telegram 群组" data-umami-event="✈️ Click Telegram link from post tabs">
         <img src="/img/paper-plane.svg" width="16" height="16" alt="Telegram" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
         <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">Telegram 群组</div>
       </a>
-      <a href="/sponsor" class="invert-if-dark flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="赞助作者" data-umami-event="💗 Click sponsor button from post tabs">
+      <a href="/sponsor" class="dark:invert flex items-center justify-center gap-1.5 min-w-8 h-8 px-1 border-none bg-transparent text-gray-600 cursor-pointer relative transition-all duration-200 hover:opacity-70 group" title="赞助作者" data-umami-event="💗 Click sponsor button from post tabs">
         <img src="/img/coffee.svg" width="16" height="16" alt="赞助" class="brightness-40 flex-shrink-0 dark:brightness-70 dark:contrast-120" />
         <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 translate-y-1 bg-black/80 text-white px-2.5 py-1.5 rounded text-xs whitespace-nowrap opacity-0 invisible transition-all duration-300 pointer-events-none mb-2 z-1000 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 dark:bg-white/90 dark:text-black">赞助作者</div>
       </a>
diff --git a/layouts/_partials/posts/comment.html b/layouts/_partials/posts/comment.html
index 2a0f1027..49638618 100644
--- a/layouts/_partials/posts/comment.html
+++ b/layouts/_partials/posts/comment.html
@@ -2,17 +2,17 @@
     {{ with .Params.comments }}
     <!-- Static Comments -->
     <div class="my-8">
-        <p class="font-secondary">{{ T "postPage.staticCommentsSectionHeader" }}</p>
+        <p class="text-secondary">{{ T "postPage.staticCommentsSectionHeader" }}</p>
         {{ range . }}
             <div class="text-xl border-b border-solid border-[#ccc] py-4 px-1">
                 <div class="mb-4 flex justify-between">
                     <span class="font-bold">{{ .name }}</span>
-                    <span class="font-secondary">{{ .date }}</span>
+                    <span class="text-secondary">{{ .date }}</span>
                 </div>
                 <div>
                     {{ .content | safeHTML }}
                 </div>
-                <div class="text-4 text-right font-secondary">
+                <div class="text-4 text-right text-secondary">
                     {{ with .source }}
                     <p class="font-mono">{{ T "postPage.originallyPostedOn" . }}</p>
                     {{ end }}
diff --git a/layouts/_partials/posts/endnotes.html b/layouts/_partials/posts/endnotes.html
index 83004f0f..364becab 100644
--- a/layouts/_partials/posts/endnotes.html
+++ b/layouts/_partials/posts/endnotes.html
@@ -1,6 +1,6 @@
 {{ if .Params.endnotes }}
 <hr>
-<div id="post-endnotes" class="font-secondary text-4">
+<div id="post-endnotes" class="text-secondary text-4">
     <ul class="list-none">
       {{ range .Params.endnotes }}
       <li class="flex gap-4 pl-4"><span>→</span> {{ . | markdownify }}</li>
diff --git a/layouts/_partials/posts/now-read-this.html b/layouts/_partials/posts/now-read-this.html
index 8a9be489..dae3aca0 100644
--- a/layouts/_partials/posts/now-read-this.html
+++ b/layouts/_partials/posts/now-read-this.html
@@ -6,10 +6,10 @@
       <a class="font-800" href="{{ .RelPermalink }}" data-umami-event="🤔 Click Related Post">
           {{ .LinkTitle }}
           {{ with .Params.subtitle }}
-              <span class="font-secondary font-normal">：{{ . }}</span>
+              <span class="text-secondary font-normal">：{{ . }}</span>
           {{ end }}
       </a>
-      <span class="font-secondary">⏱️ {{ .ReadingTime }}min </span>
+      <span class="text-secondary">⏱️ {{ .ReadingTime }}min </span>
   </div>
   <div class="font-light">
       <p>{{ .Summary | plainify }}</p>
diff --git a/layouts/_partials/stats/external-link-rank.html b/layouts/_partials/stats/external-link-rank.html
index 0bf32c5a..70286b30 100644
--- a/layouts/_partials/stats/external-link-rank.html
+++ b/layouts/_partials/stats/external-link-rank.html
@@ -20,7 +20,7 @@
                         class="w-4 h-4"/>
                     {{ $label }}
                 </a>
-                <span class="font-secondary font-mono">{{ $count }}</span>
+                <span class="text-secondary font-mono">{{ $count }}</span>
             </div>
             <div class="bg-gray-200 absolute top-0 left-0 right-0 bottom-0 -z-1" style="width:{{ $percent }}%"></div>
         </li>
diff --git a/layouts/_partials/stats/publish-time-chart.html b/layouts/_partials/stats/publish-time-chart.html
index 795ecf25..3fa35078 100644
--- a/layouts/_partials/stats/publish-time-chart.html
+++ b/layouts/_partials/stats/publish-time-chart.html
@@ -41,7 +41,7 @@
 <div class="w-full max-w-[700px] my-4">
     <div class="flex items-center gap-4 mb-4">
         <div class="text-size-2xl flex-shrink-0">☀️</div>
-        <div class="flex gap-2 w-full h-6 invert-if-dark">
+        <div class="flex gap-2 w-full h-6 dark:invert">
             {{ range $fuzzyTimes }}
                 {{ $count := index $timeCounts .label }}
                 {{ if gt $total 0 }}
@@ -68,7 +68,7 @@
             {{ if gt $count 0 }}
                 {{ $percentage := div (mul $count 100.0) $total }}
                 <div class="flex flex-col items-center text-size-xs
-                    font-secondary font-mono"
+                    text-secondary font-mono"
                     style="width: {{ printf "%.1f" $percentage }}%;">
                     <span class="font-600 text-[var(--primary-text-color)]">{{ $count }}</span>
                 </div>
diff --git a/layouts/_partials/stats/word-count-chart.html b/layouts/_partials/stats/word-count-chart.html
index ad7347db..835ecbda 100644
--- a/layouts/_partials/stats/word-count-chart.html
+++ b/layouts/_partials/stats/word-count-chart.html
@@ -35,7 +35,7 @@
             w-4 gap-1 h-[200px] relative">
           <div class="text-size-[0.65rem]"
               style="writing-mode: vertical-rl;">{{ $val }}</div>
-          <div class="w-full bg-gray-900 flex-shrink-0 transition invert-if-dark"
+          <div class="w-full bg-gray-900 flex-shrink-0 transition dark:invert"
                style="height: {{ printf "%.1f" $height }}%;
                       background-color: rgba(20,20,20,{{ printf "%.2f" $opacity }});"></div>
         </div>
diff --git a/layouts/cards/page.html b/layouts/cards/page.html
index 551b69de..232c9593 100644
--- a/layouts/cards/page.html
+++ b/layouts/cards/page.html
@@ -20,7 +20,7 @@
         {{- /* 如果有文章引用这个卡片，就显示它们 */ -}}
         {{ if gt (len $referencedBy) 0 }}
         <section class="related-posts post-content my-5">
-            <h2 class="text-5 font-secondary m-0">引用了本卡片的文章</h2>
+            <h2 class="text-5 text-secondary m-0">引用了本卡片的文章</h2>
             <ul class="my-4">
                 {{- range $referencedBy }}
                     <li>
diff --git a/layouts/fictions/page.html b/layouts/fictions/page.html
index d7724f89..dda4e884 100644
--- a/layouts/fictions/page.html
+++ b/layouts/fictions/page.html
@@ -12,7 +12,7 @@
             class="xerox text-4xl font-900"
             data-pagefind-meta="title"
         ><span style="view-transition-name: post-{{ .File.UniqueID }}">{{ .Title }}</span></h1>
-        <div class="font-secondary">{{ partial "components/date" . }}</div>
+        <div class="text-secondary">{{ partial "components/date" . }}</div>
       </header>
 
       <!-- Post Content -->
diff --git a/layouts/library/page.html b/layouts/library/page.html
index 7c125eb6..57007f04 100644
--- a/layouts/library/page.html
+++ b/layouts/library/page.html
@@ -32,7 +32,7 @@
             </div>
             <!-- Endnotes -->
             {{ partial "posts/endnotes" . }}
-            <div class="text-size-base font-secondary">
+            <div class="text-size-base text-secondary">
                 <p>于 {{ partial "components/date" . }} 读完</p>
             </div>
         </div>
diff --git a/layouts/posts/page.html b/layouts/posts/page.html
index f965f0bb..470a00c1 100644
--- a/layouts/posts/page.html
+++ b/layouts/posts/page.html
@@ -22,12 +22,12 @@
         <h1 class="text-size-3xl font-900 xerox">
           <span data-pagefind-meta="title">{{ .Title }}</span>
           {{ with .Params.subtitle }}
-            <small class="block font-secondary font-italic text-size-xl">{{ . }}</small>
+            <small class="block text-secondary font-italic text-size-xl">{{ . }}</small>
           {{ end }}
         </h1>
         <!-- Post Meta -->
         <div class="flex flex-wrap items-center gap-2">
-            <span class="font-secondary">{{ partial "components/date" . }}</span>
+            <span class="text-secondary">{{ partial "components/date" . }}</span>
             {{ if or .Params.categories .Params.tags }}<span>·</span>{{ end }}
             {{ partial "components/category-pill" . }}
             {{ partial "components/tags" . }}
diff --git a/layouts/section.html b/layouts/section.html
index 47ece146..7cb4681a 100644
--- a/layouts/section.html
+++ b/layouts/section.html
@@ -10,7 +10,7 @@
                 py-2 text-6 sticky top-0 bg-[var(--background-color)] z-1
                 flex justify-between items-center">
                 {{ .Key }}
-                <small class="font-mono font-secondary text-3">{{ T "archivePage.postCountAnnual" (len .Pages) }}</small>
+                <small class="font-mono text-secondary text-3">{{ T "archivePage.postCountAnnual" (len .Pages) }}</small>
             </h1>
 
             {{ range .Pages.GroupByDate "January" }}
@@ -19,7 +19,7 @@
                     <h2 class="text-size-lg inline-block w-full m-0
                         flex justify-between items-center">
                         {{ .Key }}
-                        <small class="font-mono font-secondary text-3">{{ T "archivePage.postCountMonthly" (len .Pages) }}</small>
+                        <small class="font-mono text-secondary text-3">{{ T "archivePage.postCountMonthly" (len .Pages) }}</small>
                     </h2>
                 </summary>
                 <ul class="ps-0 flex flex-col gap-2 list-none leading-relaxed">
diff --git a/uno.config.js b/uno.config.js
index 53f2ec13..c7a6c1d8 100644
--- a/uno.config.js
+++ b/uno.config.js
@@ -1,4 +1,4 @@
-import { defineConfig, presetWind3, presetAttributify } from 'unocss'
+import { defineConfig, presetWind3, presetAttributify, presetWebFonts } from 'unocss'
 
 const range = (n, fn) => Array.from({ length: n }, (_, i) => fn(i));
 
@@ -16,13 +16,18 @@ export default defineConfig({
     presetAttributify(),
     presetWind3({
       dark: 'media'
-    }),
+    })
   ],
   theme: {
     colors: {
       blockBg: 'var(--block-background-color)',
       bg: 'var(--background-color)',
-      textColor: 'var(--text-color)'
+      textColor: 'var(--text-color)',
+      secondary: 'var(--secondary-text-color)'
+    },
+    fontFamily: {
+      mono: ["Courier New", "Courier", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Lucida Console"],
+      serif: ["Noto Serif", "Noto Serif SC", "serif"],
     }
   },
   shortcuts: {
-- 
cgit v1.2.3