完善主题功能，新增昱行、雅余配色

rebron1900 · Apr 15, 2024 · 1532676 · 1532676
1 parent e6f294c
commit 1532676
Show file tree

Hide file tree

Showing 13 changed files with 729 additions and 377 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -39,6 +39,7 @@ const {
     customPage,
     taxonomy,
     footer,
+    themes
 } = require("./config.js");
 
 // Init Ghost API
@@ -97,6 +98,7 @@ module.exports = function (config) {
     config.addGlobalData("taxonomys", taxonomy);
     config.addGlobalData("footer", footer);
     config.addGlobalData("memos", memos);
+    config.addGlobalData("themes", themes);
     config.addGlobalData("site_url",mode[process.env.NODE_ENV.trim()]);
 
     // Get all pages, called 'docs' to prevent

diff --git a/config.js b/config.js
@@ -64,4 +64,26 @@ module.exports = {
             html: "Power by <a href='https://www.11ty.dev/' target='_blank'>11ty</a> & <a href='https://www.ghost.org/' target='_blank'>ghost</a>",
         },
     ],
+    themes:[
+        {
+            name: "light",
+            desc: "月牙白"
+        },
+        {
+            name: "dark",
+            desc: "极夜黑"
+        },
+        {
+            name: "yayu",
+            desc: "雅余黄"
+        },
+        {
+            name: "yuhang",
+            desc: "昱行粉"
+        },
+        {
+            name: "auto",
+            desc: "自适应"
+        }
+    ]
 };
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
         "@rollup/plugin-terser": "^0.4.4",
         "@speed-highlight/core": "^1.2.6",
         "artalk": "^2.8.3",
+        "cal-heatmap": "^4.2.4",
         "cheerio": "^1.0.0-rc.12",
         "eleventy-plugin-html-validate": "^0.0.5",
         "fuse.js": "^7.0.0",

diff --git a/src/assets/sass/_defaults.scss b/src/assets/sass/_defaults.scss
@@ -23,50 +23,103 @@ $toc-width: 16rem !default;
 $mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;
 
 $hint-colors: (
-  info: #6bf,
-  warning: #fd6,
-  danger: #f66,
-  kg-callout-card-blue: #6bf,
-  kg-callout-card-yellow: #fd6,
-  kg-callout-card-red: #f66,
+    info: #6bf,
+    warning: #fd6,
+    danger: #f66,
+    kg-callout-card-blue: #6bf,
+    kg-callout-card-yellow: #fd6,
+    kg-callout-card-red: #f66,
 ) !default;
 
+.artalk,
+.atk-layer-wrap {
+    --at-color-font: var(--body-font-color);
+    --at-color-border: var(--body-font-color);
+    --at-color-bg: var(--body-background);
+    --at-color-main: var(--body-font-color);
+}
+
+.atk-main-editor>.atk-bottom .atk-send-btn{
+    color: var(--body-background)
+}
+
 // Themes
 @mixin theme-light {
-  --gray-100: #f8f9fa;
-  --gray-200: #e9ecef;
-  --gray-500: #adb5bd;
-  --gray-700: #6c757d;
+    --gray-100: #f8f9fa;
+    --gray-200: #e9ecef;
+    --gray-500: #adb5bd;
+    --gray-700: #6c757d;
 
-  --color-link: #0055bb;
-  --color-visited-link: #0055bb;
+    --color-link: #0055bb;
+    --color-visited-link: #0055bb;
 
-  --body-background: white;
-  --body-font-color: black;
+    --body-background: white;
+    --body-font-color: black;
 
-  --icon-filter: none;
+    --btn-color: red;
+    --btn-bg: blue;
 
-  --hint-color-info: #6bf;
-  --hint-color-warning: #fd6;
-  --hint-color-danger: #f66;
+    --hint-color-info: #6bf;
+    --hint-color-warning: #fd6;
+    --hint-color-danger: #f66;
 }
 
-
 @mixin theme-dark {
-  --gray-100: rgba(255, 255, 255, 0.1);
-  --gray-200: rgba(255, 255, 255, 0.2);
-  --gray-500: rgba(255, 255, 255, 0.5);
-  --gray-700: rgba(255, 255, 255, 0.7);
+    --gray-100: rgba(255, 255, 255, 0.1);
+    --gray-200: rgba(255, 255, 255, 0.2);
+    --gray-500: rgba(255, 255, 255, 0.5);
+    --gray-700: rgba(255, 255, 255, 0.7);
+
+    --color-link: #84b2ff;
+    --color-visited-link: #84b2ff;
+
+    --body-background: #181818;
+    --body-font-color: #e9ecef;
+
+    --btn-color: red;
+    --btn-bg: blue;
+
+    --hint-color-info: #6bf;
+    --hint-color-warning: #fd6;
+    --hint-color-danger: #f66;
+}
+
+@mixin theme-yayu {
+    --gray-100: rgba(255, 255, 255, 0.1);
+    --gray-200: rgba(255, 255, 255, 0.2);
+    --gray-500: rgba(255, 255, 255, 0.5);
+    --gray-700: rgba(255, 255, 255, 0.7);
+
+    --color-link: #e2c274;
+    --color-visited-link: #e2c274;
+
+    --body-background: #222;
+    --body-font-color: #e3cc94;
+
+    --btn-color: red;
+    --btn-bg: blue;
+
+    --hint-color-info: #6bf;
+    --hint-color-warning: #fd6;
+    --hint-color-danger: #f66;
+}
+
+@mixin theme-yuhang {
+    --gray-100: rgba(255, 255, 255, 0.1);
+    --gray-200: rgba(255, 255, 255, 0.2);
+    --gray-500: rgba(255, 255, 255, 0.5);
+    --gray-700: rgba(255, 255, 255, 0.7);
 
-  --color-link: #84b2ff;
-  --color-visited-link: #84b2ff;
+    --color-link: rgb(235, 153, 161);
+    --color-visited-link: rgb(235, 153, 161);
 
-  --body-background: #181818;
-  --body-font-color: #e9ecef;
+    --body-background: #44403c;
+    --body-font-color: #f6f8fa;
 
-  --icon-filter: brightness(0) invert(1);
+    --btn-color: red;
+    --btn-bg: blue;
 
-  --hint-color-info: #6bf;
-  --hint-color-warning: #fd6;
-  --hint-color-danger: #f66;
+    --hint-color-info: #6bf;
+    --hint-color-warning: #fd6;
+    --hint-color-danger: #f66;
 }