feat: 主题色配置

themes/hexo/config.js

@@ -41,6 +41,6 @@ const CONFIG = {
   HEXO_WIDGET_DARK_MODE: true, // 夜间模式
   HEXO_WIDGET_TOC: true, // 移动端悬浮目录
 
-  HEXO_THEME_COLOR: '#98FB98' // 主题色配置（默认为 #928CEE）
+  HEXO_THEME_COLOR: '#3CB371' // 主题色配置（默认为 #928CEE）
 }
 export default CONFIG

themes/hexo/style.js

@@ -1,76 +1,95 @@
 /* eslint-disable react/no-unknown-property */
+import { siteConfig } from '@/lib/config'
+import CONFIG from './config'
+
 /**
  * 这里的css样式只对当前主题生效
  * 主题客制化css
  * @returns
  */
 const Style = () => {
-  return (<style jsx global>{`
-    // 底色
-    body{
-        background-color: #f5f5f5
-    }
-    .dark body{
+  // 从配置中获取主题色，如果没有配置则使用默认值 #928CEE
+  const themeColor = siteConfig('HEXO_THEME_COLOR', '#928CEE', CONFIG)
+
+  return (
+    <style jsx global>{`
+      :root {
+        --theme-color: ${themeColor};
+      }
+      // 底色
+      body {
+        background-color: #f5f5f5;
+      }
+      .dark body {
         background-color: black;
-    }
-  
-    /*  菜单下划线动画 */
-    #theme-hexo .menu-link {
+      }
+
+      /*  菜单下划线动画 */
+      #theme-hexo .menu-link {
         text-decoration: none;
-        background-image: linear-gradient(#928CEE, #928CEE);
+        background-image: linear-gradient(
+          var(--theme-color),
+          var(--theme-color)
+        );
         background-repeat: no-repeat;
         background-position: bottom center;
         background-size: 0 2px;
         transition: background-size 100ms ease-in-out;
-    }
-    
-    #theme-hexo .menu-link:hover {
-        background-size: 100% 2px;
-        color: #928CEE;
-    }
+      }
 
-    /* 设置了从上到下的渐变黑色 */
-    #theme-hexo .header-cover::before {
-        content: "";
+      #theme-hexo .menu-link:hover {
+        background-size: 100% 2px;
+        color: var(--theme-color);
+      }
+
+      /* 设置了从上到下的渐变黑色 */
+      #theme-hexo .header-cover::before {
+        content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
-        background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
-    }
+        background: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0.5) 0%,
+          rgba(0, 0, 0, 0.2) 10%,
+          rgba(0, 0, 0, 0) 25%,
+          rgba(0, 0, 0, 0.2) 75%,
+          rgba(0, 0, 0, 0.5) 100%
+        );
+      }
 
-    /* Custem */
-    .tk-footer{
+      /* Custem */
+      .tk-footer {
         opacity: 0;
-    }
+      }
 
-    // 选中字体颜色
-    ::selection {
-        background: rgba(45, 170, 219, 0.3);
-    }
+      // 选中字体颜色
+      ::selection {
+        background: color-mix(in srgb, var(--theme-color) 30%, transparent);
+      }
 
-    // 自定义滚动条
-    ::-webkit-scrollbar {
+      // 自定义滚动条
+      ::-webkit-scrollbar {
         width: 5px;
         height: 5px;
-    }
+      }
 
-    ::-webkit-scrollbar-track {
+      ::-webkit-scrollbar-track {
         background: transparent;
-    }
+      }
 
-    ::-webkit-scrollbar-thumb {
-        background-color: #49b1f5;
-    }
+      ::-webkit-scrollbar-thumb {
+        background-color: var(--theme-color);
+      }
 
-    * {
-        scrollbar-width:thin;
-        scrollbar-color: #49b1f5 transparent
-    }
-    
-
-  `}</style>)
+      * {
+        scrollbar-width: thin;
+        scrollbar-color: var(--theme-color) transparent;
+      }
+    `}</style>
+  )
 }
 
 export { Style }