refactor: 调整明暗切换方式适配评论插件

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

Hide file tree

Showing 5 changed files with 13 additions and 6 deletions.
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -10,6 +10,11 @@ html {
   box-sizing: inherit;
 }
 
+@font-face {
+  font-family: Ark-Pixel-12-proportional-zh_cn;
+  src: url("../fonts/fusion-pixel-12px-proportional-zh_hans.woff2");
+}
+
 body {
   margin: 0;
   padding: 0;

diff --git a/src/styles/post.scss b/src/styles/post.scss
@@ -135,6 +135,9 @@
 }
 
 .post-list {
+
+  padding: .25rem 0;
+
   .post-date {
     color: var(--foreground);
     text-decoration: none;

diff --git a/src/styles/theme.scss b/src/styles/theme.scss
@@ -1,4 +1,4 @@
-html[data-theme='light'] {
+html[data-color-scheme='light'] {
     --black: #3e3e3e;
     --red: #970b16;
     --green: #07962a;
@@ -21,7 +21,7 @@ html[data-theme='light'] {
     --selectionBackground: #a9c1e2;
 }
 
-html[data-theme='dark'] {
+html[data-color-scheme='dark'] {
     --black: #000000;
     --red: #f78166;
     --green: #56d364;
@@ -44,7 +44,7 @@ html[data-theme='dark'] {
     --selectionBackground: #3b5070;
 }
 
-[data-theme='light'] .d-block-light,
-[data-theme='dark'] .d-block-dark {
+[data-color-scheme='light'] .d-block-light,
+[data-color-scheme='dark'] .d-block-dark {
     display: block !important;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -14,7 +14,7 @@ module.exports = {
       },
     })),
   ],
-  darkMode: ['class', '[data-theme="dark"]'],
+  darkMode: ['class', '[data-color-scheme="dark"]'],
   safelist: [
     "prose-sm",
     "prose-base",

diff --git a/templates/post.html b/templates/post.html
@@ -29,7 +29,6 @@ <h2>评论</h2>
         group="content.halo.run"
         kind="Post"
         th:attr="name=${post.metadata.name}"
-        colorScheme="localStorage.getItem('theme')"
       />
     </div>
     <div class="pagination">