diff --git a/journals.ftl b/journals.ftl
index 8e306bb..53cd03b 100644
--- a/journals.ftl
+++ b/journals.ftl
@@ -12,13 +12,6 @@
                         <div class="content">
                             ${journal.content!}
                         </div>
-                        <#--  <div class="option">
-
-                        <i class="ri-thumb-up-line"></i>
-                        <i class="ri-chat-3-line"></i>
-                        <i class="ri-share-forward-line"></i>
-
-                        </div>  -->
                         <div class="info">
                         <#--  ${user.nickname!}  -->
                         <#assign timeago = (.now?long - journal.createTime?long)>
diff --git a/module/macro.ftl b/module/macro.ftl
index 8a8558d..2a85194 100644
--- a/module/macro.ftl
+++ b/module/macro.ftl
@@ -1,6 +1,6 @@
 <#macro layout title>
 <!DOCTYPE html>
-<html lang="zh">
+<html lang="zh-CN" data-font="sans" data-mode="dark">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
@@ -9,14 +9,13 @@
         <meta name="description" content="${meta_description!}" />
         <@global.head />
         
+        
 
         <#--  公共样式表  -->
         <link rel="stylesheet" href="${theme_base!}/source/plugins/normalize.css"/>
         <link rel="stylesheet" href="${theme_base!}/source/plugins/animate.css"/>
         <link rel="stylesheet" href="${theme_base!}/source/plugins/remixicon/remixicon.css"/>
-        <#--  <link rel="stylesheet" href="${theme_base!}/source/plugins/typo.css"/>  -->
-        <#--  <link rel="stylesheet" href="${theme_base!}/source/plugins/han.css"/>  -->
-        <link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">
+        <link rel="stylesheet" href="${theme_base!}/source/css/font.css"/>
         <link rel="stylesheet" href="${theme_base!}/source/css/color.css"/>
         <link rel="stylesheet" href="${theme_base!}/source/css/markdown.css"/>
         <link rel="stylesheet" href="${theme_base!}/source/css/redemption.css"/>
@@ -26,7 +25,7 @@
 
     </head>
     <body>
-        <div class="container animate__animated animate__fadeInDown">
+        <div class="container  animate__animated animate__fadeInDown">
 
             <#--  主体  -->
             <#nested >
@@ -47,7 +46,7 @@
         <script src="${theme_base!}/source/js/redemption.js"></script>
 
         <#--  公共JS代码  -->
-        <script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
+        <script src="${theme_base!}/source/plugins/heti/heti-addon.js"></script>
         <script>
         const heti = new Heti('.heti');
         heti.autoSpacing();
diff --git a/source/css/Redemption.css b/source/css/Redemption.css
index 3bc6574..afc5461 100644
--- a/source/css/Redemption.css
+++ b/source/css/Redemption.css
@@ -1,11 +1,3 @@
-html {
-  font-family: -apple-system, BlinksMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 16px;
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-  -webkit-font-smoothing: antialiased;
-}
-
 html::-webkit-scrollbar {
   width: 10px;
   height: 10px;
@@ -305,4 +297,7 @@ footer .copyright a {
     transform: translateY(0);
   }
 }
-/*animation ends*/
\ No newline at end of file
+/*animation ends*/
+.heti > img {
+  width: 97% !important;
+}
\ No newline at end of file
diff --git a/source/css/Redemption.scss b/source/css/Redemption.scss
index 08dd90e..e155712 100644
--- a/source/css/Redemption.scss
+++ b/source/css/Redemption.scss
@@ -1,16 +1,5 @@
 @charset "UTF-8";
 
-// 全局 HTML 配置
-html {
-    font-family: -apple-system, BlinksMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
-        'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-        'Noto Color Emoji';
-    font-size: 16px;
-    font-weight: 500;
-    font-variant-numeric: tabular-nums;
-    -webkit-font-smoothing: antialiased;
-}
-
 // 滚动条
 html::-webkit-scrollbar {
     width: 10px;
@@ -22,7 +11,7 @@ html::-webkit-scrollbar-thumb {
     border-radius: 16px;
 }
 
-// Body 主体
+// container 主体
 .container {
     display: flex;
     flex-wrap: nowrap;
@@ -326,12 +315,6 @@ footer {
     }
 }
 
-// .menu{
-//     position: fixed;
-//     right: 0.5rem;
-//     bottom: 10rem;
-// }
-
 // 评论组件
 .comment
 {
@@ -403,4 +386,15 @@ footer {
 }
 
 
-/*animation ends*/
\ No newline at end of file
+/*animation ends*/
+
+// .menu{
+//     position: fixed;
+//     right: 0.5rem;
+//     bottom: 10rem;
+// }
+
+// heti
+.heti > img{
+    width: 97%!important;
+}
diff --git a/source/css/color.css b/source/css/color.css
index f11e352..4514620 100644
--- a/source/css/color.css
+++ b/source/css/color.css
@@ -1,119 +1,293 @@
-html {
-  background-color: #f5f5f5;
-  color: #1f1f1f;
-}
-
 html::-webkit-scrollbar-thumb {
-  background-color: #0000000d;
+  background-color: rgba(0, 0, 0, 0.051);
 }
 
 html::-webkit-scrollbar-thumb:hover {
-  background-color: #00000026;
+  background-color: rgba(0, 0, 0, 0.249);
 }
 
-::selection {
-  background: #0095ff1a;
+[data-mode=light] body {
+  background-color: #f0f0f0;
+  color: #262626;
 }
-
-.header > .title > a > span {
-  color: black;
+[data-mode=light] .header > .title > a > span {
+  color: #141414;
 }
-.header > .title > a > span:hover {
-  color: rgba(0, 0, 0, 0.65);
+[data-mode=light] .header > .title > a > span:hover {
+  color: #595959;
 }
-.header > .description {
-  color: rgba(0, 0, 0, 0.65);
+[data-mode=light] .header > .description {
+  color: #595959;
 }
-.header > .description > .socials > a {
-  color: rgba(0, 0, 0, 0.65);
+[data-mode=light] .header > .description > .socials > a {
+  color: #595959;
 }
-.header > .description > .socials > a:hover {
-  color: rgba(0, 0, 0, 0.85);
+[data-mode=light] .header > .description > .socials > a:hover {
+  color: #141414;
 }
-
-main {
-  background: #ffffff;
-  box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
+[data-mode=light] main {
+  background: #fafafa;
+  box-shadow: 0 0.375rem 1rem -0.5rem #bfbfbf;
 }
-main .index > h1 > a {
-  color: black;
+[data-mode=light] main .index > h1 > a {
+  color: #1f1f1f;
 }
-main .index > p {
-  color: rgba(0, 0, 0, 0.85);
+[data-mode=light] main .index > h1 > a:hover {
+  color: #595959;
 }
-main .index > .info {
+[data-mode=light] main .index > p {
+  color: #262626;
+}
+[data-mode=light] main .index > .info {
   border-bottom: 1px solid #f3f3f3;
 }
-main .index > .info .date span,
-main .index > .info .tag span {
-  color: rgba(0, 0, 0, 0.65);
+[data-mode=light] main .index > .info .date span,
+[data-mode=light] main .index > .info .tag span {
+  color: #8c8c8c;
 }
-main .index > .info .date a,
-main .index > .info .tag a {
-  color: rgba(0, 0, 0, 0.65);
+[data-mode=light] main .index > .info .date a,
+[data-mode=light] main .index > .info .tag a {
+  color: #8c8c8c;
 }
-main .index > .info .date i,
-main .index > .info .tag i {
-  color: rgba(0, 0, 0, 0.85);
+[data-mode=light] main .index > .info .date i,
+[data-mode=light] main .index > .info .tag i {
+  color: #8c8c8c;
 }
-main .archives > ul > .year, main .archives > ul .name, main .archives > ul .friend, main .categories > ul > .year, main .categories > ul .name, main .categories > ul .friend, main .category > ul > .year, main .category > ul .name, main .category > ul .friend, main .tag > ul > .year, main .tag > ul .name, main .tag > ul .friend, main .tags > ul > .year, main .tags > ul .name, main .tags > ul .friend, main .links > ul > .year, main .links > ul .name, main .links > ul .friend {
-  color: #000001;
+[data-mode=light] main .archives > ul > .year,
+[data-mode=light] main .archives > ul .name,
+[data-mode=light] main .archives > ul .friend,
+[data-mode=light] main .categories > ul > .year,
+[data-mode=light] main .categories > ul .name,
+[data-mode=light] main .categories > ul .friend,
+[data-mode=light] main .category > ul > .year,
+[data-mode=light] main .category > ul .name,
+[data-mode=light] main .category > ul .friend,
+[data-mode=light] main .tag > ul > .year,
+[data-mode=light] main .tag > ul .name,
+[data-mode=light] main .tag > ul .friend,
+[data-mode=light] main .tags > ul > .year,
+[data-mode=light] main .tags > ul .name,
+[data-mode=light] main .tags > ul .friend,
+[data-mode=light] main .links > ul > .year,
+[data-mode=light] main .links > ul .name,
+[data-mode=light] main .links > ul .friend {
+  color: #1f1f1f;
 }
-main .archives > ul > li > a, main .categories > ul > li > a, main .category > ul > li > a, main .tag > ul > li > a, main .tags > ul > li > a, main .links > ul > li > a {
-  color: #000001;
+[data-mode=light] main .archives > ul > li > a,
+[data-mode=light] main .categories > ul > li > a,
+[data-mode=light] main .category > ul > li > a,
+[data-mode=light] main .tag > ul > li > a,
+[data-mode=light] main .tags > ul > li > a,
+[data-mode=light] main .links > ul > li > a {
+  color: #262626;
 }
-main .archives > ul > li > a:hover, main .categories > ul > li > a:hover, main .category > ul > li > a:hover, main .tag > ul > li > a:hover, main .tags > ul > li > a:hover, main .links > ul > li > a:hover {
-  color: rgba(0, 0, 0, 0.65);
+[data-mode=light] main .archives > ul > li > a:hover,
+[data-mode=light] main .categories > ul > li > a:hover,
+[data-mode=light] main .category > ul > li > a:hover,
+[data-mode=light] main .tag > ul > li > a:hover,
+[data-mode=light] main .tags > ul > li > a:hover,
+[data-mode=light] main .links > ul > li > a:hover {
+  color: #595959;
 }
-main .archives > ul > li > a > span, main .categories > ul > li > a > span, main .category > ul > li > a > span, main .tag > ul > li > a > span, main .tags > ul > li > a > span, main .links > ul > li > a > span {
-  color: #c5c5c5;
+[data-mode=light] main .archives > ul > li > a > span,
+[data-mode=light] main .categories > ul > li > a > span,
+[data-mode=light] main .category > ul > li > a > span,
+[data-mode=light] main .tag > ul > li > a > span,
+[data-mode=light] main .tags > ul > li > a > span,
+[data-mode=light] main .links > ul > li > a > span {
+  color: #8c8c8c;
 }
-main .archives > ul > li > span, main .categories > ul > li > span, main .category > ul > li > span, main .tag > ul > li > span, main .tags > ul > li > span, main .links > ul > li > span {
-  color: #c5c5c5;
+[data-mode=light] main .archives > ul > li > span,
+[data-mode=light] main .categories > ul > li > span,
+[data-mode=light] main .category > ul > li > span,
+[data-mode=light] main .tag > ul > li > span,
+[data-mode=light] main .tags > ul > li > span,
+[data-mode=light] main .links > ul > li > span {
+  color: #8c8c8c;
 }
-main .pagenav a {
-  color: black;
+[data-mode=light] main .pagenav a {
+  color: #262626;
 }
-main .pagenav a:hover {
-  color: rgba(0, 0, 0, 0.65);
+[data-mode=light] main .pagenav a:hover {
+  color: #595959;
 }
-main .post > .title > h1 {
-  color: black;
+[data-mode=light] main .post > .title > h1 {
+  color: #1f1f1f;
 }
-main .post > .title > h1 > a {
-  color: black;
+[data-mode=light] main .post > .title > h1 > a {
+  color: #1f1f1f;
 }
-main .post > .title > .info {
-  border-bottom: 1px solid #f3f3f3;
+[data-mode=light] main .post > .title > .info {
+  border-bottom: 1px solid #f5f5f5;
 }
-main .post > .title > .info > span {
-  color: rgba(0, 0, 0, 0.65);
+[data-mode=light] main .post > .title > .info > span {
+  color: #8c8c8c;
 }
-main .post > .title > .info > span i {
-  color: rgba(0, 0, 0, 0.85);
+[data-mode=light] main .post > .title > .info > span i {
+  color: #8c8c8c;
 }
-main .journals > ul > li > .option {
-  color: rgba(0, 0, 0, 0.65);
+[data-mode=light] main .journals > ul > li > .info {
+  color: #8c8c8c;
 }
-main .journals > ul > li > .info {
-  color: #c5c5c5;
+[data-mode=light] footer .copyright a {
+  color: #bfbfbf;
+}
+[data-mode=light] footer .copyright a:hover {
+  color: #262626;
+}
+[data-mode=light] .comment {
+  background: #fafafa;
+  box-shadow: 0 0.375rem 1rem -0.5rem #bfbfbf;
+}
+[data-mode=light] .post-bottom-menu {
+  border-top: 1px solid #f5f5f5;
+}
+[data-mode=light] .post-bottom-menu > a {
+  color: #262626;
+}
+[data-mode=light] .post-bottom-menu > a:hover {
+  color: #595959;
 }
 
-footer .copyright a {
-  color: rgba(0, 0, 0, 0.25);
+[data-mode=dark] body {
+  background-color: #383838;
+  color: #b6b6b6;
 }
-footer .copyright a:hover {
-  color: rgba(0, 0, 0, 0.85);
+[data-mode=dark] .header > .title > a > span {
+  color: #bfbfbf;
 }
-
-.comment {
-  background: #ffffff;
-  box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
+[data-mode=dark] .header > .title > a > span:hover {
+  color: #434343;
 }
-
-.post-bottom-menu {
-  border-top: 1px solid #f3f3f3;
+[data-mode=dark] .header > .description {
+  color: #8c8c8c;
 }
-.post-bottom-menu > a {
-  color: black;
+[data-mode=dark] .header > .description > .socials > a {
+  color: #8c8c8c;
+}
+[data-mode=dark] .header > .description > .socials > a:hover {
+  color: #434343;
+}
+[data-mode=dark] main {
+  background: #292929;
+  box-shadow: 0 0.375rem 1rem -0.5rem #262626;
+}
+[data-mode=dark] main .index > h1 > a {
+  color: #b8b8b8;
+}
+[data-mode=dark] main .index > h1 > a:hover {
+  color: #434343;
+}
+[data-mode=dark] main .index > p {
+  color: #b6b6b6;
+}
+[data-mode=dark] main .index > .info {
+  border-bottom: 1px solid #434343;
+}
+[data-mode=dark] main .index > .info .date span,
+[data-mode=dark] main .index > .info .tag span {
+  color: #8c8c8c;
+}
+[data-mode=dark] main .index > .info .date a,
+[data-mode=dark] main .index > .info .tag a {
+  color: #8c8c8c;
+}
+[data-mode=dark] main .index > .info .date i,
+[data-mode=dark] main .index > .info .tag i {
+  color: #8c8c8c;
+}
+[data-mode=dark] main .archives > ul > .year,
+[data-mode=dark] main .archives > ul .name,
+[data-mode=dark] main .archives > ul .friend,
+[data-mode=dark] main .categories > ul > .year,
+[data-mode=dark] main .categories > ul .name,
+[data-mode=dark] main .categories > ul .friend,
+[data-mode=dark] main .category > ul > .year,
+[data-mode=dark] main .category > ul .name,
+[data-mode=dark] main .category > ul .friend,
+[data-mode=dark] main .tag > ul > .year,
+[data-mode=dark] main .tag > ul .name,
+[data-mode=dark] main .tag > ul .friend,
+[data-mode=dark] main .tags > ul > .year,
+[data-mode=dark] main .tags > ul .name,
+[data-mode=dark] main .tags > ul .friend,
+[data-mode=dark] main .links > ul > .year,
+[data-mode=dark] main .links > ul .name,
+[data-mode=dark] main .links > ul .friend {
+  color: #b8b8b8;
+}
+[data-mode=dark] main .archives > ul > li > a,
+[data-mode=dark] main .categories > ul > li > a,
+[data-mode=dark] main .category > ul > li > a,
+[data-mode=dark] main .tag > ul > li > a,
+[data-mode=dark] main .tags > ul > li > a,
+[data-mode=dark] main .links > ul > li > a {
+  color: #b6b6b6;
+}
+[data-mode=dark] main .archives > ul > li > a:hover,
+[data-mode=dark] main .categories > ul > li > a:hover,
+[data-mode=dark] main .category > ul > li > a:hover,
+[data-mode=dark] main .tag > ul > li > a:hover,
+[data-mode=dark] main .tags > ul > li > a:hover,
+[data-mode=dark] main .links > ul > li > a:hover {
+  color: #434343;
+}
+[data-mode=dark] main .archives > ul > li > a > span,
+[data-mode=dark] main .categories > ul > li > a > span,
+[data-mode=dark] main .category > ul > li > a > span,
+[data-mode=dark] main .tag > ul > li > a > span,
+[data-mode=dark] main .tags > ul > li > a > span,
+[data-mode=dark] main .links > ul > li > a > span {
+  color: #8c8c8c;
+}
+[data-mode=dark] main .archives > ul > li > span,
+[data-mode=dark] main .categories > ul > li > span,
+[data-mode=dark] main .category > ul > li > span,
+[data-mode=dark] main .tag > ul > li > span,
+[data-mode=dark] main .tags > ul > li > span,
+[data-mode=dark] main .links > ul > li > span {
+  color: #8c8c8c;
+}
+[data-mode=dark] main .pagenav a {
+  color: #b6b6b6;
+}
+[data-mode=dark] main .pagenav a:hover {
+  color: #434343;
+}
+[data-mode=dark] main .post > .title > h1 {
+  color: #b8b8b8;
+}
+[data-mode=dark] main .post > .title > h1 > a {
+  color: #b8b8b8;
+}
+[data-mode=dark] main .post > .title > .info {
+  border-bottom: 1px solid #434343;
+}
+[data-mode=dark] main .post > .title > .info > span {
+  color: #8c8c8c;
+}
+[data-mode=dark] main .post > .title > .info > span i {
+  color: #8c8c8c;
+}
+[data-mode=dark] main .journals > ul > li > .info {
+  color: #8c8c8c;
+}
+[data-mode=dark] footer .copyright a {
+  color: #262626;
+}
+[data-mode=dark] footer .copyright a:hover {
+  color: #bfbfbf;
+}
+[data-mode=dark] .comment {
+  background: #292929;
+  box-shadow: 0 0.375rem 1rem -0.5rem #262626;
+}
+[data-mode=dark] .post-bottom-menu {
+  border-top: 1px solid #434343;
+}
+[data-mode=dark] .post-bottom-menu > a {
+  color: #b6b6b6;
+}
+[data-mode=dark] .post-bottom-menu > a:hover {
+  color: #434343;
 }
\ No newline at end of file
diff --git a/source/css/color.scss b/source/css/color.scss
index b35b3f7..4941829 100644
--- a/source/css/color.scss
+++ b/source/css/color.scss
@@ -1,182 +1,522 @@
-// HTML
-html {
-    background-color: #f5f5f5;
-    color: #1f1f1f;
-}
+@charset "UTF-8";
 
-// 滚动条
 html::-webkit-scrollbar-thumb {
-    background-color: #0000000d;
+    background-color: rgba(0, 0, 0, 0.051);
 }
-
 html::-webkit-scrollbar-thumb:hover {
-    background-color: #00000026;
+    background-color: rgba(0, 0, 0, 0.249);
 }
 
-::selection {
-    background: #0095ff1a;
-}
 
-// Header 头部
-.header {
-    // 站点标题
-    > .title {
-        > a {
-            > span {
-                color: rgb(0, 0, 0);
-                &:hover {
-                    color: rgba(0, 0, 0, 0.65);
-                }
-            }
-        }
-    }
+// 主体
+$light-background: #f0f0f0;
+$light-color:#262626;
 
-    // 二级标题
-    > .description {
-        color: rgba(0, 0, 0, 0.65);
-        > .socials {
-            > a {
-                color: rgba(0, 0, 0, 0.65);
-                &:hover {
-                    color: rgba(0, 0, 0, 0.85);
-                }
-            }
-        }
-    }
+// 头部
+$light-header-title:#141414;
+$light-header-title-hover:#595959;
+$light-header-description:#595959;
+$light-header-description-hover:#141414;
 
-}
+// 主体
+$light-main-background:#fafafa;
+$light-main-box-shadow:#bfbfbf;
 
-// main 主体
-main {
-    background: #ffffff;
-    box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
-    // 首页
-    .index {
-        > h1 {
-            > a {
-                color: rgba(0, 0, 0, 1);
+// 首页
+$light-main-index-h1:#1f1f1f;
+$light-main-index-h1-hover:#595959;
+$light-main-index-p:#262626;
+$light-main-index-info:#8c8c8c;
+$light-main-index-info-border:#f3f3f3;
 
-            }
-        }
+// 归档 分类目录 分类 标签目录 标签 友链
+$light-main-pages-title:#1f1f1f;
+$light-main-pages-li-title:#262626;
+$light-main-pages-li-title-hover:#595959;
+$light-main-pages-li-span:#8c8c8c;
 
-        > p {
-            color: rgba(0, 0, 0, 0.85);
-        }
+// 文章分页
+$light-pagenav-a:#262626;
+$light-pagenav-a-hover:#595959;
 
-        > .info {
-            border-bottom: 1px solid #f3f3f3;
-            .date,
-            .tag {
-                span {
-                    color: rgb(0, 0, 0, 0.65);
-                }
-    
-                a {
-                    color: rgb(0, 0, 0, 0.65);
-                }
-                i {
-                    color: rgb(0, 0, 0, 0.85);
-                }
+// 文章
+$light-main-post-title:#1f1f1f;
+$light-main-post-title-info-border:#f5f5f5;
+$light-main-post-title-info-span:#8c8c8c;
+$light-main-post-title-info-i:#8c8c8c;
 
-            }
-        }
-    }
-
-    // 归档 分类目录 分类 标签目录 标签 友链
-    .archives,.categories,.category,.tag,.tags,.links{
-        > ul {
-            > .year,.name,.friend{
-                color: rgb(0, 0, 0.85);
-            }
-            > li{
-                > a{
-                    color: rgb(0, 0, 0.85);
-                    &:hover {
-                        color: rgb(0, 0, 0, 0.65);
-                    }
-                    > span{
-                        color: #c5c5c5;
-                    }
-                }
-                > span{
-                    color: #c5c5c5;
-                }
-            }
-        }
-    }
-
-    // 文章分页
-    .pagenav {
-        a {
-            color: rgb(0, 0, 0);
-
-            &:hover {
-                color: rgb(0, 0, 0, 0.65);
-            }
-        }
-    }
-
-    // 文章
-    .post{
-        > .title{
-            > h1 {
-                color: rgba(0, 0, 0, 1);
-                > a {
-                    color: rgba(0, 0, 0, 1);
-                }
-            }
-
-            > .info {
-                border-bottom: 1px solid #f3f3f3;
-                > span{
-                    color: rgb(0, 0, 0, 0.65);
-                    i {
-
-                        color: rgb(0, 0, 0, 0.85);
-                    }
-                }
-            }
-        }
-    }
-
-    // 日志
-    .journals{
-        > ul{
-            > li{
-                > .option{
-                    color: rgb(0, 0, 0, 0.65);
-                }
-                > .info{
-                    color: #c5c5c5;
-                }
-            }
-        }
-        
-    }
-}
+// 日志
+$light-main-journals-info:#8c8c8c;
 
 // 脚注
-footer {
-    .copyright {
-        a {
-            color: rgb(0, 0, 0, 0.25);
-            &:hover {
-                color: rgb(0, 0, 0, 0.85);
+$light-footer-copyright:#bfbfbf;
+$light-footer-copyright-hover:#262626;
+
+// 评论
+$light-comment-background:#fafafa;
+$light-comment-background-box-shadow:#bfbfbf;
+$light-comment-post-bottom-menu-border:#f5f5f5;
+$light-comment-post-bottom-menu-a:#262626;
+$light-comment-post-bottom-menu-a-hover:#595959;
+
+// 日间模式
+
+[data-mode="light"] {
+    // 滚动条
+
+
+
+
+
+
+    // 主体
+    body {
+        background-color: $light-background;
+        color: $light-color;
+    }
+
+    // Header 头部
+    .header {
+
+        // 站点标题
+        >.title {
+            >a {
+                >span {
+                    color: $light-header-title;
+
+                    &:hover {
+                        color: $light-header-title-hover;
+                    }
+                }
+            }
+        }
+
+        // 二级标题
+        >.description {
+            color: $light-header-description;
+
+            >.socials {
+                >a {
+                    color: $light-header-description;
+
+                    &:hover {
+                        color: $light-header-description-hover;
+                    }
+                }
+            }
+        }
+
+    }
+
+    // main 主体
+    main {
+        background: $light-main-background;
+        box-shadow: 0 0.375rem 1rem -0.5rem $light-main-box-shadow;
+
+        // 首页
+        .index {
+            >h1 {
+                >a {
+                    color: $light-main-index-h1;
+                    &:hover{
+                        color: $light-main-index-h1-hover;
+                    }
+                }
+            }
+
+            >p {
+                color: $light-main-index-p;
+            }
+
+            >.info {
+                border-bottom: 1px solid $light-main-index-info-border;
+
+                .date,
+                .tag {
+                    span {
+                        color: $light-main-index-info;
+                    }
+
+                    a {
+                        color: $light-main-index-info;
+                    }
+
+                    i {
+                        color: $light-main-index-info;
+                    }
+
+                }
+            }
+        }
+
+        // 归档 分类目录 分类 标签目录 标签 友链
+        .archives,
+        .categories,
+        .category,
+        .tag,
+        .tags,
+        .links {
+            >ul {
+
+                >.year,
+                .name,
+                .friend {
+                    color: $light-main-pages-title;
+                }
+
+                >li {
+                    >a {
+                        color: $light-main-pages-li-title;
+
+                        &:hover {
+                            color: $light-main-pages-li-title-hover;
+                        }
+
+                        >span {
+                            color: $light-main-pages-li-span;
+                        }
+                    }
+
+                    >span {
+                        color: $light-main-pages-li-span;
+                    }
+                }
+            }
+        }
+
+        // 文章分页
+        .pagenav {
+            a {
+                color: $light-pagenav-a;
+
+                &:hover {
+                    color: $light-pagenav-a-hover;
+                }
+            }
+        }
+
+        // 文章
+        .post {
+            >.title {
+                >h1 {
+                    color: $light-main-post-title;
+
+                    >a {
+                        color: $light-main-post-title;
+                    }
+                }
+
+                >.info {
+                    border-bottom: 1px solid $light-main-post-title-info-border;
+
+                    >span {
+                        color: $light-main-post-title-info-span;
+
+                        i {
+
+                            color: $light-main-post-title-info-i;
+                        }
+                    }
+                }
+            }
+        }
+
+        // 日志
+        .journals {
+            >ul {
+                >li {
+                    >.info {
+                        color: $light-main-journals-info;
+                    }
+                }
             }
 
         }
     }
-}
 
-.comment
-{
-    background: #ffffff;
-    box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.08);
-}
+    // 脚注
+    footer {
+        .copyright {
+            a {
+                color: $light-footer-copyright;
 
-.post-bottom-menu{
-    border-top: 1px solid #f3f3f3;
-    >a{
-        color: rgba(0, 0, 0, 1);
+                &:hover {
+                    color: $light-footer-copyright-hover;
+                }
+
+            }
+        }
     }
-}
\ No newline at end of file
+
+    .comment {
+        background: $light-comment-background;
+        box-shadow: 0 0.375rem 1rem -0.5rem $light-comment-background-box-shadow;
+    }
+
+    .post-bottom-menu {
+        border-top: 1px solid $light-comment-post-bottom-menu-border;
+
+        >a {
+            color: $light-comment-post-bottom-menu-a;
+            &:hover{
+                color: $light-comment-post-bottom-menu-a-hover;
+            }
+        }
+    }
+}
+
+
+//  =======================================================================
+
+
+// 主体
+$dark-background: #383838;
+$dark-color:#b6b6b6;
+
+// 主体
+$dark-main-background:#292929;
+$dark-main-box-shadow:#262626;
+
+// 头部
+$dark-header-title:#bfbfbf;
+$dark-header-title-hover:#434343;
+$dark-header-description:#8c8c8c;
+$dark-header-description-hover:#434343;
+
+// 首页
+$dark-main-index-h1:#b8b8b8;
+$dark-main-index-h1-hover:#434343;
+$dark-main-index-p:#b6b6b6;
+$dark-main-index-info:#8c8c8c;
+$dark-main-index-info-border:#434343;
+
+// 归档 分类目录 分类 标签目录 标签 友链
+$dark-main-pages-title:#b8b8b8;
+$dark-main-pages-li-title:#b6b6b6;
+$dark-main-pages-li-title-hover:#434343;
+$dark-main-pages-li-span:#8c8c8c;
+
+// 文章分页
+$dark-pagenav-a:#b6b6b6;
+$dark-pagenav-a-hover:#434343;
+
+// 文章
+$dark-main-post-title:#b8b8b8;
+$dark-main-post-title-info-border:#434343;
+$dark-main-post-title-info-span:#8c8c8c;
+$dark-main-post-title-info-i:#8c8c8c;
+
+// 日志
+$dark-main-journals-info:#8c8c8c;
+
+// 脚注
+$dark-footer-copyright:#262626;
+$dark-footer-copyright-hover:#bfbfbf;
+
+// 评论
+$dark-comment-background:#292929;
+$dark-comment-background-box-shadow:#262626;
+$dark-comment-post-bottom-menu-border:#434343;
+$dark-comment-post-bottom-menu-a:#b6b6b6;
+$dark-comment-post-bottom-menu-a-hover:#434343;
+
+// 日间模式
+[data-mode="dark"] {
+
+    // 主体
+    body {
+        background-color: $dark-background;
+        color: $dark-color;
+    }
+
+    // Header 头部
+    .header {
+
+        // 站点标题
+        >.title {
+            >a {
+                >span {
+                    color: $dark-header-title;
+
+                    &:hover {
+                        color: $dark-header-title-hover;
+                    }
+                }
+            }
+        }
+
+        // 二级标题
+        >.description {
+            color: $dark-header-description;
+
+            >.socials {
+                >a {
+                    color: $dark-header-description;
+
+                    &:hover {
+                        color: $dark-header-description-hover;
+                    }
+                }
+            }
+        }
+
+    }
+
+    // main 主体
+    main {
+        background: $dark-main-background;
+        box-shadow: 0 0.375rem 1rem -0.5rem $dark-main-box-shadow;
+
+        // 首页
+        .index {
+            >h1 {
+                >a {
+                    color: $dark-main-index-h1;
+                    &:hover{
+                        color: $dark-main-index-h1-hover;
+                    }
+                }
+            }
+
+            >p {
+                color: $dark-main-index-p;
+            }
+
+            >.info {
+                border-bottom: 1px solid $dark-main-index-info-border;
+
+                .date,
+                .tag {
+                    span {
+                        color: $dark-main-index-info;
+                    }
+
+                    a {
+                        color: $dark-main-index-info;
+                    }
+
+                    i {
+                        color: $dark-main-index-info;
+                    }
+
+                }
+            }
+        }
+
+        // 归档 分类目录 分类 标签目录 标签 友链
+        .archives,
+        .categories,
+        .category,
+        .tag,
+        .tags,
+        .links {
+            >ul {
+
+                >.year,
+                .name,
+                .friend {
+                    color: $dark-main-pages-title;
+                }
+
+                >li {
+                    >a {
+                        color: $dark-main-pages-li-title;
+
+                        &:hover {
+                            color: $dark-main-pages-li-title-hover;
+                        }
+
+                        >span {
+                            color: $dark-main-pages-li-span;
+                        }
+                    }
+
+                    >span {
+                        color: $dark-main-pages-li-span;
+                    }
+                }
+            }
+        }
+
+        // 文章分页
+        .pagenav {
+            a {
+                color: $dark-pagenav-a;
+
+                &:hover {
+                    color: $dark-pagenav-a-hover;
+                }
+            }
+        }
+
+        // 文章
+        .post {
+            >.title {
+                >h1 {
+                    color: $dark-main-post-title;
+
+                    >a {
+                        color: $dark-main-post-title;
+                    }
+                }
+
+                >.info {
+                    border-bottom: 1px solid $dark-main-post-title-info-border;
+
+                    >span {
+                        color: $dark-main-post-title-info-span;
+
+                        i {
+
+                            color: $dark-main-post-title-info-i;
+                        }
+                    }
+                }
+            }
+        }
+
+        // 日志
+        .journals {
+            >ul {
+                >li {
+                    >.info {
+                        color: $dark-main-journals-info;
+                    }
+                }
+            }
+
+        }
+    }
+
+    // 脚注
+    footer {
+        .copyright {
+            a {
+                color: $dark-footer-copyright;
+
+                &:hover {
+                    color: $dark-footer-copyright-hover;
+                }
+
+            }
+        }
+    }
+
+    .comment {
+        background: $dark-comment-background;
+        box-shadow: 0 0.375rem 1rem -0.5rem $dark-comment-background-box-shadow;
+    }
+
+    .post-bottom-menu {
+        border-top: 1px solid $dark-comment-post-bottom-menu-border;
+
+        >a {
+            color: $dark-comment-post-bottom-menu-a;
+            &:hover{
+                color: $dark-comment-post-bottom-menu-a-hover;
+            }
+        }
+    }
+}
+
+
