doc site add theme switch feature

Author: huangshuwei

examples/src/comp/app.less

@@ -80,11 +80,13 @@
                         font-size: 16px;
 
                         .switch-lang-container,
+                        .switch-theme-container,
                         .switch-version-container {
                             position: relative;
                             line-height: 1;
 
                             .switch-lang-dropdown-pannel,
+                            .switch-theme-dropdown-pannel,
                             .switch-version-dropdown-pannel {
                                 position: absolute;
                                 display: none;
@@ -130,6 +132,7 @@
                         }
 
                         .switch-lang,
+                        .switch-theme,
                         .switch-version {
                             color: #666;
                             cursor: pointer;

examples/src/comp/app.vue

@@ -14,7 +14,7 @@
                 <div class="main-banner-menus-container">
                     <div class="main-banner-menus">
                         <span
-                            v-for="item in menus"
+                            v-for="item in currentLocal.menus"
                             :key="item.name"
                             :class="[
                                 'main-banner-menu-item',
@@ -119,6 +119,50 @@
                             </div>
                         </span>
 
+                        <!-- switch theme -->
+                        <span class="main-banner-menu-item">
+                            <div
+                                v-click-outside="
+                                    () => (showThemeDropdown = false)
+                                "
+                                class="switch-theme-container"
+                            >
+                                <span
+                                    class="switch-theme"
+                                    @click="
+                                        showThemeDropdown = !showThemeDropdown
+                                    "
+                                >
+                                    {{ currentLocal.docTheme }}
+                                    <i class="icon iconfont icon-dropdown" />
+                                </span>
+                                <div
+                                    class="switch-theme-dropdown-pannel"
+                                    :class="
+                                        showThemeDropdown
+                                            ? 'dropdown-pannel-show'
+                                            : ''
+                                    "
+                                >
+                                    <span
+                                        v-for="item in currentLocal.switchDocThemeOptions"
+                                        :key="item.value"
+                                        :class="[
+                                            'dropdown-item',
+                                            {
+                                                active:
+                                                    item.value ===
+                                                    currentDocTheme,
+                                            },
+                                        ]"
+                                        @click.stop="themeChange(item)"
+                                    >
+                                        {{ item.label }}
+                                    </span>
+                                </div>
+                            </div>
+                        </span>
+
                         <span class="main-banner-menu-item">
                             <a
                                 class="main-banner-menu-link"
@@ -139,6 +183,7 @@
 </template>
 
 <script>
+import { getDocTheme, setDocTheme } from "@/utils/cookies";
 import locale from "./locale";
 import I18nMixins from "./mixins/i18n-mixins";
 import ThemeSwitchMixins from "./mixins/theme-switch-mixins.js";
@@ -159,16 +204,23 @@ export default {
                 { value: "en", label: "English" },
                 { value: "zh", label: "简体中文" },
             ],
+            // show lang dropdown
             showLangDropdown: false,
-            //switch version option
+            //switch version option,
             switchVersionOptions: [],
             showVersionDropdown: false,
+            // show theme dropdown
+            showThemeDropdown: false,
+            // default doc theme
+            defalutDocTheme: "default",
+            // current doc theme
+            currentDocTheme: "",
         };
     },
     computed: {
-        // menus
-        menus() {
-            return locale[this.currentDocLang]["menus"];
+        // current local
+        currentLocal() {
+            return locale[this.currentDocLang];
         },
 
         // show logo
@@ -213,6 +265,21 @@ export default {
                 this.showLangDropdown = false;
             }, 150);
         },
+        // theme change
+        themeChange({ value }) {
+            setDocTheme(value);
+            this.showThemeDropdown = false;
+
+            if (window.env === "dev") {
+                setTimeout(() => {
+                    window.location.reload();
+                });
+            } else {
+                this.switchThemeMix(value).finally(() => {
+                    //this.loadingInstance.close();
+                });
+            }
+        },
         // version change
         versionChange(item) {
             const { protocol, host, pathname, hash } = window.location;
@@ -250,11 +317,23 @@ export default {
             }
             return result;
         },
+        // init theme
+        initDocTheme() {
+            this.currentDocTheme = getDocTheme() ?? this.defalutDocTheme;
+            // 初始化
+            if (window.env != "dev") {
+                this.switchThemeMix(this.currentDocTheme);
+            }
+            console.log("current doc theme ::", this.currentDocTheme);
+        },
     },
     created() {
         getVersions().then(({ data }) => {
             this.switchVersionOptions = data;
         });
     },
+    mounted() {
+        this.initDocTheme();
+    },
 };
 </script>

examples/src/comp/locale/index.js

@@ -20,6 +20,12 @@ export default {
                 isRouter: false,
             },
         ],
+        docTheme: "主题",
+        // 主题切换配置
+        switchDocThemeOptions: [
+            { value: "default", label: "默认" },
+            { value: "dark", label: "暗黑" },
+        ],
         anchorCatalogTitle: "目录",
         // 组件配置多语言跟着文档语言环境走
         compLang: zhCN,
@@ -79,6 +85,12 @@ export default {
                 isRouter: false,
             },
         ],
+        docTheme: "Theme",
+        // 主题切换配置
+        switchDocThemeOptions: [
+            { value: "default", label: "default" },
+            { value: "dark", label: "dark" },
+        ],
         anchorCatalogTitle: "Contents",
         compLang: enUS,
         eidtDemoTitle: "Edit this on Github",

examples/src/comp/mixins/theme-switch-mixins.js

@@ -6,12 +6,12 @@ const themeSwitcherTool = ThemeSwitcherTool({
     // Your theme list
     themeList: [
         {
-            themeName: "theme-dark",
+            themeName: "dark",
             themePath:
                 "https://unpkg.com/vue-easytable/libs/theme-dark/index.css",
         },
         {
-            themeName: "theme-default",
+            themeName: "default",
             themePath:
                 "https://unpkg.com/vue-easytable/libs/theme-default/index.css",
         },

examples/src/main.js

@@ -6,6 +6,8 @@ import Vue from "vue";
 import APP from "@/comp/app.vue";
 import router from "@/router/index";
 
+import { getDocTheme } from "@/utils/cookies";
+
 import NProgress from "nprogress"; // Progress 进度条
 
 import "@/css/index.less";
@@ -82,7 +84,12 @@ dev mode
 */
 
 if (window.env === "dev") {
-    require("../../packages/theme-default/index.less");
+    const docTheme = getDocTheme();
+    if (docTheme && docTheme === "dark") {
+        require("../../packages/theme-dark/index.less");
+    } else {
+        require("../../packages/theme-default/index.less");
+    }
 }
 
 import {

examples/src/utils/constant.js

@@ -4,5 +4,14 @@ export const DOC_LANG = {
     ZH: "zh",
 };
 
+// doc theme
+// export const DOC_THEME = {
+//     DEFAULT: "default",
+//     DARK: "dark",
+// };
+
 // doc lang cookie
 export const DOC_LANG_COOKIE = "doc_lang_cookie";
+
+// doc theme cookie
+export const DOC_THEME_COOKIE = "doc_lang_cookie";

examples/src/utils/cookies.js

@@ -1,20 +1,14 @@
-/* import Cookies from "js-cookie";
-import { DOC_LANG_COOKIE, DOC_LANG } from "./constant";
+import Cookies from "js-cookie";
 
-// set doc lang cookie
-export function setDocLang(value) {
-    return Cookies.set(DOC_LANG_COOKIE, value);
-}
-
-// get doc lang cookie
-export function getDocLang() {
-    let result = Cookies.get(DOC_LANG_COOKIE);
+import { DOC_THEME_COOKIE } from "./constant";
 
-    console.log("doc lang::", result);
+// set doc theme cookie
+export function setDocTheme(value) {
+    return Cookies.set(DOC_THEME_COOKIE, value);
+}
 
-    if (!result) {
-        result = DOC_LANG.EN;
-    }
+// get doc theme cookie
+export function getDocTheme() {
+    let result = Cookies.get(DOC_THEME_COOKIE);
     return result;
 }
- */