以下是 pure-admin-thin v3.5.0 更改主題設定

如果想新增主題色要怎麼做呢?

作者文章:
https://pure-admin-doc.vercel.app/pages/1579c5/#%E7%94%A8%E6%B3%95
上次更新: 2022/08/30 看起來作者後來還有再更改

阿咪老師幫我下偵探的BGM

拆成2部分

• 設定檔
  • 我們先找到設定檔在哪
• 使用
  • 再來去找使用(觸發的function)

找到 vite.config.ts 設定檔

//第62行左右
    plugins: getPluginsList(command, VITE_LEGACY),

下一步找 getPluginsList 源頭

找到 \build\plugins.ts

看到 scss: 了

//第34行左右
    themePreprocessorPlugin({
      scss: {
        multipleScopeVars: genScssMultipleScopeVars(),
//...略
      }
    }),

下一步找 genScssMultipleScopeVars 源頭

找到 \src\layout\theme\index.ts

OK 這邊就是主題的主要設定檔

/** 预设主题色 */
const themeColors = {
  default: {
    vxeColor,
    subMenuActiveText: "#fff",
    menuBg: "#001529",
    menuHover: "#4091f7",
    subMenuBg: "#0f0303",
    subMenuActiveBg: "#4091f7",
    navTextColor: "#fff",
    menuText: "rgb(254 254 254 / 65%)",
    sidebarLogo: "#002140",
    menuTitleHover: "#fff",
    menuActiveBefore: "#4091f7"
  },
  //...略

因此可以增加一個顏色設定物件，假設叫做veryWhite

  veryWhite: {
    vxeColor: "#ffffff",
    subMenuActiveText: "#ffffff",
    menuBg: "#ffffff",
    menuHover: "#ffffff",
    subMenuBg: "#ffffff",
    subMenuActiveBg: "#ffffff",
    navTextColor: "#ffffff",
    menuText: "#ffffff",
    sidebarLogo: "#ffffff",
    menuTitleHover: "#ffffff",
    menuActiveBefore: "#ffffff"
  }

設定完成，下一步是找到使用的地方

使用的地方在 setting\index.vue

\src\layout\components\setting\index.vue

發現setLayoutThemeColor抽出去了

//第44行左右
const {
  body,
  dataTheme,
  layoutTheme,
  themeColors,
  dataThemeChange,
  setEpThemeColor,
  setLayoutThemeColor
} = useDataThemeChange();

\src\layout\hooks\useDataThemeChange.ts

最後我們終於找到使用的設定

//第17行左右
  const themeColors = ref<Array<themeColorsType>>([
    /* 道奇蓝（默认） */
    { color: "#1b2a47", themeColor: "default" },
//...略
  ]);

我們加入剛剛的 veryWhite

示意圖:

大功告成，真的非常白呢!

實務上建議不要用白色，會看不到

如果要使用 找到\src\layout\components\setting\index.vue
要學作者添加一個 border 顏色

/** 516行  */
    &:nth-child(2) {
      border: 1px solid #ddd;
    }

OK，以上就是如何更改主題色的教學

感謝觀看!