feat(主题): 新增暗色模式支持

buhuazhen

2026-03-17 e597b6da4faa1f30c7b3479cdbb96ac5b4fbb0f5

feat(主题): 新增暗色模式支持

- 在设置面板中添加暗色模式选择器，支持跟随系统、浅色和深色三种模式
- 重构设置存储模块，使用 VueUse 的 useColorMode 替代 useDark 实现更灵活的主题管理
- 将设置存储从 Options API 迁移到 Composition API，提高代码可维护性

 src/layout/components/Settings/index.vue

@@ -71,6 +71,24 @@
        />

      </span>

    </div>

    <div class="drawer-item">

      <span>显示模式</span>

      <span class="comp-style">

        <el-select

          v-model="settingsStore.darkMode"

          placeholder="请选择"

          style="width: 130px"

          @change="darkModeChange"

        >

          <el-option

            v-for="item in darkModeOptions"

            :key="item.value"

            :label="item.label"

            :value="item.value"

          />

        </el-select>

      </span>

    </div>

    <el-divider />



    <h3 class="drawer-title">系统布局配置</h3>

@@ -152,6 +170,11 @@
  "#8F4B28",

  "#4C0009",

]);

const darkModeOptions = ref([

  { label: "跟随系统", value: "auto" },

  { label: "浅色", value: "light" },

  { label: "深色", value: "dark" },

]);



/** 是否需要topnav */

function topNavChange(val) {

@@ -164,6 +187,10 @@
function themeChange(val) {

  settingsStore.theme = val;

  handleThemeStyle(val);

}



function darkModeChange(val) {

  settingsStore.setDarkMode(val);

}



function handleTheme(val) {

@@ -181,6 +208,7 @@
    dynamicTitle: storeSettings.value.dynamicTitle,

    sideTheme: storeSettings.value.sideTheme,

    theme: storeSettings.value.theme,

    darkMode: storeSettings.value.darkMode,

  };

  localStorage.setItem("layout-setting", JSON.stringify(layoutSetting));

  setTimeout(proxy.$modal.closeLoading(), 1000);


 src/settings.js

@@ -36,6 +36,10 @@
   * 是否显示动态标题

   */

  dynamicTitle: false,

  /**

   * 主题模式 auto跟随系统，light浅色，dark深色

   */

  darkMode: "auto",



  /**

   * @type {string | array} 'production' | ['production', 'development']


 src/store/modules/settings.js

@@ -1,67 +1,105 @@
import defaultSettings from "@/settings";

import { useDark, useToggle } from "@vueuse/core";

import { useDynamicTitle } from "@/utils/dynamicTitle";



const isDark = useDark();

const toggleDark = useToggle(isDark);



const {

  sideTheme,

  showSettings,

  topNav,

  tagsView,

  fixedHeader,

  sidebarLogo,

  dynamicTitle,

} = defaultSettings;



const storageSetting = JSON.parse(localStorage.getItem("layout-setting")) || "";



const useSettingsStore = defineStore("settings", {

  state: () => ({

    title: "",

    theme: storageSetting.theme || "#002fa7",

    sideTheme: storageSetting.sideTheme || sideTheme,

    showSettings: showSettings,

    topNav:

      storageSetting.topNav === undefined ? topNav : storageSetting.topNav,

    tagsView:

      storageSetting.tagsView === undefined

        ? tagsView

        : storageSetting.tagsView,

    fixedHeader:

      storageSetting.fixedHeader === undefined

        ? fixedHeader

        : storageSetting.fixedHeader,

    sidebarLogo:

      storageSetting.sidebarLogo === undefined

        ? sidebarLogo

        : storageSetting.sidebarLogo,

    dynamicTitle:

      storageSetting.dynamicTitle === undefined

        ? dynamicTitle

        : storageSetting.dynamicTitle,

    isDark: isDark.value,

  }),

  actions: {

    // 修改布局设置

    changeSetting(data) {

      const { key, value } = data;

      if (this.hasOwnProperty(key)) {

        this[key] = value;

      }

    },

    // 设置网页标题

    setTitle(title) {

      this.title = title;

      useDynamicTitle();

    },

    // 切换暗黑模式

    toggleTheme() {

      this.isDark = !this.isDark;

      toggleDark();

    },

  },

});



export default useSettingsStore;

import defaultSettings from "@/settings";
import { useColorMode, usePreferredDark } from "@vueuse/core";
import { useDynamicTitle } from "@/utils/dynamicTitle";

const preferredDark = usePreferredDark();
const colorMode = useColorMode({
  emitAuto: true,
});

const {
  sideTheme,
  showSettings,
  topNav,
  tagsView,
  fixedHeader,
  sidebarLogo,
  dynamicTitle,
  darkMode,
} = defaultSettings;

const storageSetting = JSON.parse(localStorage.getItem("layout-setting") || "{}");
const defaultDarkMode = darkMode || "auto";
const initialDarkMode = storageSetting.darkMode || defaultDarkMode;
colorMode.value = initialDarkMode;
const getIsDark = (mode) => mode === "dark" || (mode === "auto" && preferredDark.value);

const useSettingsStore = defineStore("settings", () => {
  const title = ref("");
  const theme = ref(storageSetting.theme || "#002fa7");
  const sideThemeValue = ref(storageSetting.sideTheme || sideTheme);
  const showSettingsValue = ref(showSettings);
  const topNavValue = ref(
    storageSetting.topNav === undefined ? topNav : storageSetting.topNav
  );
  const tagsViewValue = ref(
    storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView
  );
  const fixedHeaderValue = ref(
    storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader
  );
  const sidebarLogoValue = ref(
    storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo
  );
  const dynamicTitleValue = ref(
    storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle
  );
  const darkModeValue = ref(initialDarkMode);
  const isDark = computed(() => getIsDark(darkModeValue.value));

  function changeSetting(data) {
    const { key, value } = data;
    const settingMap = {
      title,
      theme,
      sideTheme: sideThemeValue,
      showSettings: showSettingsValue,
      topNav: topNavValue,
      tagsView: tagsViewValue,
      fixedHeader: fixedHeaderValue,
      sidebarLogo: sidebarLogoValue,
      dynamicTitle: dynamicTitleValue,
      darkMode: darkModeValue,
    };
    if (Object.prototype.hasOwnProperty.call(settingMap, key)) {
      settingMap[key].value = value;
      if (key === "darkMode") {
        colorMode.value = value;
      }
    }
  }

  function setTitle(value) {
    title.value = value;
    useDynamicTitle();
  }

  function setDarkMode(mode) {
    darkModeValue.value = mode;
    colorMode.value = mode;
  }

  function toggleTheme() {
    setDarkMode(isDark.value ? "light" : "dark");
  }

  return {
    title,
    theme,
    sideTheme: sideThemeValue,
    showSettings: showSettingsValue,
    topNav: topNavValue,
    tagsView: tagsViewValue,
    fixedHeader: fixedHeaderValue,
    sidebarLogo: sidebarLogoValue,
    dynamicTitle: dynamicTitleValue,
    darkMode: darkModeValue,
    isDark,
    changeSetting,
    setTitle,
    setDarkMode,
    toggleTheme,
  };
});

export default useSettingsStore;