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

buhuazhen

2026-03-17 e597b6da4faa1f30c7b3479cdbb96ac5b4fbb0f5

 src/store/modules/settings.js

@@ -1,48 +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 || '#2C51D9',

      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;