Merge pull request #3403 from LooseLi/feat-themeColor-hexo

feat: hexo主题的全站主题色配置和适配

themes/hexo/config.js

@@ -39,6 +39,8 @@ const CONFIG = {
   HEXO_WIDGET_TO_TOP: true,
   HEXO_WIDGET_TO_COMMENT: true, // 跳到评论区
   HEXO_WIDGET_DARK_MODE: true, // 夜间模式
-  HEXO_WIDGET_TOC: true // 移动端悬浮目录
+  HEXO_WIDGET_TOC: true, // 移动端悬浮目录
+
+  HEXO_THEME_COLOR: '#928CEE' // 主题色配置（默认为 #928CEE）
 }
 export default CONFIG

themes/hexo/style.js

@@ -1,76 +1,240 @@
 /* eslint-disable react/no-unknown-property */
+import { siteConfig } from '@/lib/config'
+import CONFIG from './config'
+
 /**
  * 这里的css样式只对当前主题生效
  * 主题客制化css
  * @returns
  */
 const Style = () => {
-  return (<style jsx global>{`
+  // 从配置中获取主题色，如果没有配置则使用默认值 #928CEE
-    // 底色
+  const themeColor = siteConfig('HEXO_THEME_COLOR', '#928CEE', CONFIG)
-    body{
+
-        background-color: #f5f5f5
+  return (
-    }
+    <style jsx global>{`
-    .dark body{
+      :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 .menu-link:hover {
-    #theme-hexo .header-cover::before {
+        background-size: 100% 2px;
-        content: "";
+        color: var(--theme-color);
+      }
+
+      /* 文章列表中标题行悬浮时的文字颜色 */
+      h2:hover .menu-link {
+        color: var(--theme-color) !important;
+      }
+      .dark h2:hover .menu-link {
+        color: var(--theme-color) !important;
+      }
+
+      /* 下拉菜单悬浮背景色 */
+      li[class*='hover:bg-indigo-500']:hover {
+        background-color: var(--theme-color) !important;
+      }
+
+      /* tag标签悬浮背景色 */
+      a[class*='hover:bg-indigo-400']:hover {
+        background-color: var(--theme-color) !important;
+      }
+
+      /* 社交按钮悬浮颜色 */
+      i[class*='hover:text-indigo-600']:hover {
+        color: var(--theme-color) !important;
+      }
+      .dark i[class*='dark:hover:text-indigo-400']:hover {
+        color: var(--theme-color) !important;
+      }
+
+      /* MenuGroup 悬浮颜色 */
+      #theme-hexo #nav div[class*='hover:text-indigo-600']:hover {
+        color: var(--theme-color) !important;
+      }
+      .dark #theme-hexo #nav div[class*='dark:hover:text-indigo-400']:hover {
+        color: var(--theme-color) !important;
+      }
+
+      /* 最新发布文章悬浮颜色 */
+      div[class*='hover:text-indigo-600']:hover,
+      div[class*='hover:text-indigo-400']:hover {
+        color: var(--theme-color) !important;
+      }
+
+      /* 分页组件颜色 */
+      .text-indigo-400 {
+        color: var(--theme-color) !important;
+      }
+      .border-indigo-400 {
+        border-color: var(--theme-color) !important;
+      }
+      a[class*='hover:bg-indigo-400']:hover {
+        background-color: var(--theme-color) !important;
+        color: white !important;
+      }
+      /* 移动设备下，搜索组件中选中分类的高亮背景色 */
+      div[class*='hover:bg-indigo-400']:hover {
+        background-color: var(--theme-color) !important;
+      }
+      .hover\:bg-indigo-400:hover {
+        background-color: var(--theme-color) !important;
+      }
+      .bg-indigo-400 {
+        background-color: var(--theme-color) !important;
+      }
+      a[class*='hover:bg-indigo-600']:hover {
+        background-color: var(--theme-color) !important;
+        color: white !important;
+      }
+
+      /* 右下角悬浮按钮背景色 */
+      .bg-indigo-500 {
+        background-color: var(--theme-color) !important;
+      }
+      .dark .dark\:bg-indigo-500 {
+        background-color: var(--theme-color) !important;
+      }
+      /* 移动设备菜单栏背景色 */
+      .hover\:bg-indigo-500:hover {
+        background-color: var(--theme-color) !important;
+      }
+      .dark .dark\:hover\:bg-indigo-500:hover {
+        background-color: var(--theme-color) !important;
+      }
+
+      /* 文章浏览进度条颜色 */
+      .bg-indigo-600 {
+        background-color: var(--theme-color) !important;
+      }
+      /* 当前浏览位置标题高亮颜色 */
+      .border-indigo-800 {
+        border-color: var(--theme-color) !important;
+      }
+      .text-indigo-800 {
+        color: var(--theme-color) !important;
+      }
+      .dark .dark\:text-indigo-400 {
+        color: var(--theme-color) !important;
+      }
+      .dark .dark\:border-indigo-400 {
+        border-color: var(--theme-color) !important;
+      }
+      .dark .dark\:border-white {
+        border-color: var(--theme-color) !important;
+      }
+      /* 目录项悬浮时的字体颜色 */
+      a[class*='hover:text-indigo-800']:hover {
+        color: var(--theme-color) !important;
+      }
+      /* 深色模式下目录项的默认文字颜色和边框线颜色 */
+      .dark .catalog-item {
+        color: white !important;
+        border-color: white !important;
+      }
+      .dark .catalog-item:hover {
+        color: var(--theme-color) !important;
+      }
+      /* 深色模式下当前高亮标题的边框线颜色 */
+      .dark .catalog-item.font-bold {
+        border-color: var(--theme-color) !important;
+      }
+
+      /* 文章底部版权声明组件左侧边框线颜色 */
+      .border-indigo-500 {
+        border-color: var(--theme-color) !important;
+      }
+
+      /* 归档页面文章列表项悬浮时左侧边框线颜色 */
+      li[class*='hover:border-indigo-500']:hover {
+        border-color: var(--theme-color) !important;
+      }
+
+      /* 自定义右键菜单悬浮高亮颜色 */
+      .hover\:bg-blue-600:hover {
+        background-color: var(--theme-color) !important;
+      }
+      .dark li[class*='dark:hover:border-indigo-300']:hover {
+        border-color: var(--theme-color) !important;
+      }
+      /* 深色模式下，归档页面文章列表项默认状态左侧边框线颜色 */
+      .dark li[class*='dark:border-indigo-400'] {
+        border-color: var(--theme-color) !important;
+      }
+      /* 深色模式下，归档页面文章标题悬浮时的文字颜色 */
+      .dark a[class*='dark:hover:text-indigo-300']:hover {
+        color: var(--theme-color) !important;
+      }
+
+      /* 设置了从上到下的渐变黑色 */
+      #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 */
+      /* Custem */
-    .tk-footer{
+      .tk-footer {
         opacity: 0;
-    }
+      }
 
-    // 选中字体颜色
+      // 选中字体颜色
-    ::selection {
+      ::selection {
-        background: rgba(45, 170, 219, 0.3);
+        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 {
+      ::-webkit-scrollbar-thumb {
-        background-color: #49b1f5;
+        background-color: var(--theme-color);
-    }
+      }
 
-    * {
+      * {
-        scrollbar-width:thin;
+        scrollbar-width: thin;
-        scrollbar-color: #49b1f5 transparent
+        scrollbar-color: var(--theme-color) transparent;
-    }
+      }
-    
+    `}</style>
-
+  )
-  `}</style>)
 }
 
 export { Style }