@sugarat/theme 0.4.4 → 0.4.6

package/node.d.ts

@@ -338,7 +338,7 @@ declare namespace Theme {
         /**
          * 内置一些主题色
          * @default 'vp-default'
-         * 也可以自定义颜色，详见 TODO：文档
+         * 也可以自定义颜色，详见 https://theme.sugarat.top/config/style.html#%E4%B8%BB%E9%A2%98%E8%89%B2
          */
         themeColor?: ThemeColor;
         pagesData: PageData[];

package/node.js

@@ -518,6 +518,9 @@ function themeReloadPlugin() {
 function getVitePlugins(cfg = {}) {
   const plugins = [];
   plugins.push(coverImgTransform());
+  if (cfg.themeColor) {
+    plugins.push(setThemeScript(cfg.themeColor));
+  }
   plugins.push(themeReloadPlugin());
   plugins.push(providePageData(cfg));
   if (cfg && cfg.search !== false) {
@@ -606,6 +609,33 @@ function providePageData(cfg) {
     }
   };
 }
+function setThemeScript(themeColor) {
+  let resolveConfig;
+  const pluginOps = {
+    name: "@sugarat/theme-plugin-theme-color-script",
+    enforce: "pre",
+    configResolved(config) {
+      if (resolveConfig) {
+        return;
+      }
+      resolveConfig = config;
+      const vitepressConfig = config.vitepress;
+      if (!vitepressConfig) {
+        return;
+      }
+      const selfTransformHead = vitepressConfig.transformHead;
+      vitepressConfig.transformHead = async (ctx) => {
+        const selfHead = await Promise.resolve(selfTransformHead?.(ctx)) || [];
+        return selfHead.concat([
+          ["script", { type: "text/javascript" }, `;(function() {
+            document.documentElement.setAttribute("theme", "${themeColor}");
+          })()`]
+        ]);
+      };
+    }
+  };
+  return pluginOps;
+}
 
 // src/node.ts
 function getThemeConfig(cfg = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "author": "sugar",
   "license": "MIT",
@@ -50,9 +50,9 @@
     "vitepress-markdown-timeline": "^1.2.1",
     "vitepress-plugin-mermaid": "2.0.13",
     "vitepress-plugin-tabs": "0.2.0",
-    "vitepress-plugin-rss": "0.2.7",
-    "vitepress-plugin-pagefind": "0.4.2",
-    "@sugarat/theme-shared": "0.0.1"
+    "vitepress-plugin-pagefind": "0.4.3",
+    "vitepress-plugin-rss": "0.2.8",
+    "@sugarat/theme-shared": "0.0.2"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.3.1",

package/src/composables/config/index.ts

@@ -371,7 +371,7 @@ export namespace Theme {
     /**
      * 内置一些主题色
      * @default 'vp-default'
-     * 也可以自定义颜色，详见 TODO：文档
+     * 也可以自定义颜色，详见 https://theme.sugarat.top/config/style.html#%E4%B8%BB%E9%A2%98%E8%89%B2
      */
     themeColor?: ThemeColor
     pagesData: PageData[]

package/src/utils/node/vitePlugins.ts

@@ -1,7 +1,7 @@
 import path from 'node:path'
 import { existsSync, readFileSync } from 'node:fs'
 import { Buffer } from 'node:buffer'
-import type { SiteConfig } from 'vitepress'
+import type { HeadConfig, SiteConfig } from 'vitepress'
 import {
   pagefindPlugin
 } from 'vitepress-plugin-pagefind'
@@ -16,13 +16,13 @@ import { getArticles } from './theme'
 export function getVitePlugins(cfg: Partial<Theme.BlogConfig> = {}) {
   const plugins: any[] = []
 
-  // const buildEndFn: any[] = []
-  // Build完后运行的一系列列方法，执行自定义的 buildEnd 钩子
-  // plugins.push(inlineBuildEndPlugin(buildEndFn))
-
   // 处理cover image的路径（暂只支持自动识别的文章首图）
   plugins.push(coverImgTransform())
 
+  // 处理自定义主题色
+  if (cfg.themeColor) {
+    plugins.push(setThemeScript(cfg.themeColor))
+  }
   // 自动重载首页
   plugins.push(themeReloadPlugin())
 
@@ -156,3 +156,35 @@ export function providePageData(cfg: Partial<Theme.BlogConfig>) {
     },
   } as PluginOption
 }
+
+export function setThemeScript(
+  themeColor: Theme.ThemeColor
+) {
+  let resolveConfig: any
+  const pluginOps: PluginOption = {
+    name: '@sugarat/theme-plugin-theme-color-script',
+    enforce: 'pre',
+    configResolved(config: any) {
+      if (resolveConfig) {
+        return
+      }
+      resolveConfig = config
+
+      const vitepressConfig: SiteConfig = config.vitepress
+      if (!vitepressConfig) {
+        return
+      }
+      // 通过 head 添加额外的脚本注入
+      const selfTransformHead = vitepressConfig.transformHead
+      vitepressConfig.transformHead = async (ctx) => {
+        const selfHead = (await Promise.resolve(selfTransformHead?.(ctx))) || []
+        return selfHead.concat([
+          ['script', { type: 'text/javascript' }, `;(function() {
+            document.documentElement.setAttribute("theme", "${themeColor}");
+          })()`]
+        ] as HeadConfig[])
+      }
+    }
+  }
+  return pluginOps
+}