feat: 🚀 新增主题模式和主题尺寸的默认值配置

Author: Kele-Bingtang

README.md

@@ -4,7 +4,6 @@
 
 ## TODO
 
-- 首页 PostList 图片支持单选数镜像对称，镜像对称参考 `http://niubin.site/`
 - 添加评论功能
 - 文章页支持动态全屏大小和默认大小
 - 归档页添加 commit 图标风格，如：`http://niubin.site/archive.html`

vitepress-theme-tk/src/components/RightBottomButton.vue

@@ -30,11 +30,11 @@ onUnmounted(() => {
 });
 
 const { theme } = useUnrefData();
-const { themeMode = [], themeSize = [] } = theme;
+const { themeMode = "vp-default", themeModeAppend = [], themeSize = "default", themeSizeAppend = [] } = theme;
 
 // 主题切换
 const showThemeModeItem = ref(false);
-const currentThemeMode = ref("vp-default");
+const currentThemeMode = ref(themeMode);
 
 const themeModeList = [
   {
@@ -57,29 +57,37 @@ const themeModeList = [
       { name: "红色", theme: "el-red" },
     ],
   },
-  ...themeMode,
+  ...themeModeAppend,
 ];
 
 const changeThemeMode = (themeMode: string) => {
+  if (themeMode === unref(currentThemeMode)) return;
   currentThemeMode.value = themeMode;
   document.documentElement.setAttribute("theme", themeMode);
 };
 
+// 初始化主题模式
+changeThemeMode(themeMode);
+
 // 主题尺寸
 const showThemeSizeItem = ref(false);
-const currentThemeSize = ref("default");
+const currentThemeSize = ref(themeSize);
 
 const themeSizeList = [
   { name: "Large", size: "large" },
   { name: "Default", size: "default" },
   { name: "Small", size: "small" },
-  ...themeSize,
+  ...themeSizeAppend,
 ];
 
 const changeThemeSize = (themeSize: string) => {
+  if (themeSize === unref(currentThemeSize)) return;
   currentThemeSize.value = themeSize;
   document.documentElement.setAttribute("size", themeSize);
 };
+
+// 初始化主题尺寸
+changeThemeSize(themeSize);
 </script>
 
 <template>

vitepress-theme-tk/src/config/types.ts

@@ -76,9 +76,23 @@ export interface KtThemeConfig {
     showCapture?: boolean;
   };
   /**
-   * 主题模式配置
+   * 设置当前主题模式
+   * @default 'vp-default'
    */
-  themeMode?: {
+  themeMode?:
+    | "vp-default"
+    | "vp-green"
+    | "vp-yellow"
+    | "vp-red"
+    | "el-blue"
+    | "el-green"
+    | "el-yellow"
+    | "el-red"
+    | string;
+  /**
+   * 自定义主题模式，将会追加到内置主题模式后面
+   */
+  themeModeAppend?: {
     /**
      * 主题组名称
      */
@@ -101,10 +115,11 @@ export interface KtThemeConfig {
       theme: string;
     }[];
   }[];
+  themeSize?: "small" | "default" | "large" | string;
   /**
-   * 主题尺寸配置
+   * 自定义主题尺寸，将会追加到内置主题尺寸后面
    */
-  themeSize?: {
+  themeSizeAppend?: {
     /**
      * 主题尺寸名称，用于页面文字渲染
      */