feat: allow customize the primary color

amals-qy · Jan 20, 2023 · 637c382 · 637c382
1 parent 0d9bdaa
commit 637c382
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 23 deletions.
diff --git a/docs/.vuepress/config/en/series.ts b/docs/.vuepress/config/en/series.ts
@@ -1,15 +1,37 @@
 export const series = {
   // todo README.md 无法展示，没有对 '' 进行处理
-  '/en/docs/guide/': ['introduce', 'getting-started', 'style', 'contribute', 'folder-specification'],
+  '/en/docs/guide/': [
+    'introduce',
+    'getting-started',
+    'style',
+    'contribute',
+    'folder-specification',
+  ],
   '/en/docs/theme/': [
     {
       text: 'Basic',
-      children: ['introduce', 'usage', 'custom-catalog-title']
+      children: [
+        'introduce',
+        'usage',
+        'custom-catalog-title',
+        'custom-primary-color',
+      ],
     },
     {
       text: 'Advance',
-      children: ['home', 'series', 'comments', 'auto-set-category', 'custom-container', 'custom-style', 'code-import', 'bulletin-popover', 'register-components', 'password']
-    }
+      children: [
+        'home',
+        'series',
+        'comments',
+        'auto-set-category',
+        'custom-container',
+        'custom-style',
+        'code-import',
+        'bulletin-popover',
+        'register-components',
+        'password',
+      ],
+    },
   ],
   '/en/docs/plugins/': ['page', 'comments', 'vue-previews', 'bulletin-popover'],
 }
diff --git a/docs/.vuepress/config/zh/series.ts b/docs/.vuepress/config/zh/series.ts
@@ -1,15 +1,37 @@
 export const series = {
   // todo README.md 无法展示，没有对 '' 进行处理
-  '/docs/guide/': ['introduce', 'getting-started', 'style', 'contribute', 'folder-specification'],
+  '/docs/guide/': [
+    'introduce',
+    'getting-started',
+    'style',
+    'contribute',
+    'folder-specification',
+  ],
   '/docs/theme/': [
     {
       text: '基础',
-      children: ['introduce', 'usage', 'custom-catalog-title']
+      children: [
+        'introduce',
+        'usage',
+        'custom-catalog-title',
+        'custom-primary-color',
+      ],
     },
     {
       text: '高级',
-      children: ['home', 'series', 'comments', 'auto-set-category', 'custom-container', 'custom-style', 'code-import', 'bulletin-popover', 'register-components', 'password']
-    }
+      children: [
+        'home',
+        'series',
+        'comments',
+        'auto-set-category',
+        'custom-container',
+        'custom-style',
+        'code-import',
+        'bulletin-popover',
+        'register-components',
+        'password',
+      ],
+    },
   ],
   '/docs/plugins/': ['page', 'comments', 'vue-previews', 'bulletin-popover'],
 }
diff --git a/docs/docs/theme/custom-primary-color.md b/docs/docs/theme/custom-primary-color.md
@@ -0,0 +1,21 @@
+---
+title: 自定义主题的基础色
+date: 2023-01-21 01:00:00
+---
+
+::: warning
+主题是通过 `tailwindcss` 来配置 css 的，后期可能会开放更多的配置能力，所以当前功能的 API 在以后可能会改变。
+:::
+
+如果你对主题的默认的主色不喜欢，可以通过 `themeConfig.primaryColor` 来自定义，主题会修改 `tailwindcss` 的配置：
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { recoTheme } from 'vuepress-theme-reco'
+
+export default defineUserConfig({
+  theme: recoTheme({
+    primaryColor: '#3aa675'
+  })
+})
+```
diff --git a/docs/en/docs/theme/custom-primary-color.md b/docs/en/docs/theme/custom-primary-color.md
@@ -0,0 +1,21 @@
+---
+title: Customize the primary color
+date: 2023-01-21 01:00:00
+---
+
+::: warning
+The theme configures css through `tailwindcss`, more configuration capabilities may be opened later, so the API of the current functionality may change later.
+:::
+
+If you don't like the theme's default primary color, you can customize it by `themeConfig.primaryColor` :
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { recoTheme } from 'vuepress-theme-reco'
+
+export default defineUserConfig({
+  theme: recoTheme({
+    primaryColor: '#3aa675'
+  })
+})
+```
diff --git a/example/.vuepress/config.js b/example/.vuepress/config.js
@@ -30,12 +30,18 @@ export default defineUserConfig({
             children: [
               {
                 text: '是大法师的',
-                children: ['/blogs/category1/blog1.md', '/blogs/category1/blog2.md']
+                children: [
+                  '/blogs/category1/blog1.md',
+                  '/blogs/category1/blog2.md',
+                ],
               },
               {
                 text: '爽肤水的饭',
-                children: ['/blogs/category1/blog1.md', '/blogs/category1/blog2.md']
-              }
+                children: [
+                  '/blogs/category1/blog1.md',
+                  '/blogs/category1/blog2.md',
+                ],
+              },
             ],
           },
         ],
@@ -59,7 +65,11 @@ export default defineUserConfig({
       '/blogs/': [
         {
           text: 'blogs1',
-          children: ['/blogs/category1/blog1.md', '/blogs/category1/blog2.md', '/blogs/category1/blog3.md'],
+          children: [
+            '/blogs/category1/blog1.md',
+            '/blogs/category1/blog2.md',
+            '/blogs/category1/blog3.md',
+          ],
         },
       ],
     },
@@ -70,12 +80,18 @@ export default defineUserConfig({
         children: [
           {
             text: '是大法师的',
-            children: ['/blogs/category1/blog1.md', '/blogs/category1/blog2.md']
+            children: [
+              '/blogs/category1/blog1.md',
+              '/blogs/category1/blog2.md',
+            ],
           },
           {
             text: '爽肤水的饭',
-            children: ['/blogs/category1/blog1.md', '/blogs/category1/blog2.md']
-          }
+            children: [
+              '/blogs/category1/blog1.md',
+              '/blogs/category1/blog2.md',
+            ],
+          },
         ],
       },
     ],
@@ -96,7 +112,7 @@ export default defineUserConfig({
             <li>QQ群1：1037296104</li>
             <li>QQ群2：1061561395</li>
           </ul>`,
-          style: 'font-size: 12px;'
+          style: 'font-size: 12px;',
         },
         {
           type: 'hr',
@@ -109,7 +125,7 @@ export default defineUserConfig({
             <li><a href="https://github.com/vuepress-reco/vuepress-theme-reco/issues">Issues<a/></li>
             <li><a href="https://github.com/vuepress-reco/vuepress-theme-reco/discussions/1">Discussions<a/></li>
           </ul>`,
-          style: 'font-size: 12px;'
+          style: 'font-size: 12px;',
         },
         {
           type: 'hr',
@@ -119,17 +135,18 @@ export default defineUserConfig({
           children: [
             {
               text: '打赏',
-              link: '/views/other/donate.html'
+              link: '/views/other/donate.html',
             },
             {
               text: '打赏',
-              link: '/views/other/donate.html'
-            }
-          ]
-        }
+              link: '/views/other/donate.html',
+            },
+          ],
+        },
       ],
     },
-    password: ['e10adc3949ba59abbe56e057f20f883e']
+    password: ['e10adc3949ba59abbe56e057f20f883e'],
+    primaryColor: '#3aa675',
   }),
   debug: true,
 })
diff --git a/packages/vuepress-theme-reco/src/node/recoTheme.ts b/packages/vuepress-theme-reco/src/node/recoTheme.ts
@@ -37,6 +37,10 @@ export const recoTheme = (themeConfig: Record<string, unknown>): Theme => {
   return {
     name: 'vuepress-theme-reco',
     onInitialized(app) {
+      if (themeConfig.primaryColor) {
+        tailwindcssConfig.theme.extend.colors.reco.primary = themeConfig.primaryColor as string
+      }
+
       // todo @vuepress/bundler-webpack 适配问题
       // app.options.bundler.name = '@vuepress/bundler-webpack'