Vue 实现主题切换（明暗）

项目地址：https://gitee.com/abcdfdewrw/vue3_xiaohongshu_project

效果展示：

步骤1：定义明暗scss样式

// 浅色模式
html[data-theme="light"]:root {
  --header-height: 72px;
  --color-border-bottom: #eef2f9;
  --color-primary-label: #333;
  --color-secondary-label: rgba(51, 51, 51, 0.8);
  --color-tertiary-label: rgba(51, 51, 51, 0.6);
  --color-quaternary-label: rgba(51, 51, 51, 0.3);
  --color-link: #13386c;
  --color-inverted-label: #fff;
  --color-background: #fff;
  --color-active-background: rgba(0, 0, 0, 0.03);
  --color-border: rgba(0, 0, 0, 0.08);
  --color-shadow-border: rgba(0, 0, 0, 0.02);
  --elevation-low-background: #fff;
  --elevation-high-background: #fff;
  --elevation-note-background: #fff;
  --elevation-low-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04),
    0 1px 2px 0 rgba(0, 0, 0, 0.02);
  --elevation-high-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.08),
    0 1px 4px 0 rgba(0, 0, 0, 0.04);
  --elevation-note-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.04),
    0 1px 4px 0 rgba(0, 0, 0, 0.02);
  --elevation-low-shadow-filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.04))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.02));
  --elevation-high-shadow-filter: drop-shadow(0 4px 32px rgba(0, 0, 0, 0.08))
    drop-shadow(0 1px 4px rgba(0, 0, 0, 0.04));
  --material-filter: saturate(150%) blur(10px);
  --material-background: rgba(64, 64, 64, 0.25);
  --material-inverted-background: rgba(51, 51, 51, 0.9);
  --mask-backdrop: rgba(0, 0, 0, 0.25);
  --mask-note-card: rgba(0, 0, 0, 0.25);
  --mask-paper: rgba(255, 255, 255, 0.98);
  --color-white: #fff;
  --color-red: #ff2442;
  --color-tinted-red: rgba(255, 36, 66, 0.06);
  --color-blue: #3d8af5;
  --color-tinted-blue: rgba(61, 138, 245, 0.1);
  --mask-video-player-mask: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0) 24.48%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.75) 100%
  );
  --search-hotspot-hint: linear-gradient(90deg, #ff2543 0%, #ff5225 100%);
  --color-vertical-channel: #fff9d5;
}

// 深色模式
html[data-theme="dark"]:root {
  --header-height: 72px;
  --color-primary-label: #fff;
  --color-secondary-label: rgba(255, 255, 255, 0.8);
  --color-tertiary-label: rgba(255, 255, 255, 0.6);
  --color-quaternary-label: rgba(255, 255, 255, 0.3);
  --color-link: #c7daef;
  --color-inverted-label: #0a0a0a;
  --color-background: #0a0a0a;
  --color-active-background: rgba(255, 255, 255, 0.04);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-shadow-border: rgba(255, 255, 255, 0.02);
  --elevation-low-background: #121212;
  --elevation-high-background: #181818;
  --elevation-note-background: #121212;
  --elevation-low-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04),
    0 1px 2px 0 rgba(0, 0, 0, 0.02), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  --elevation-high-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.08),
    0 1px 4px 0 rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  --elevation-note-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.04),
    0 1px 4px 0 rgba(0, 0, 0, 0.02);
  --elevation-low-shadow-filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.04))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.02))
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.04));
  --elevation-high-shadow-filter: drop-shadow(0 4px 32px rgba(0, 0, 0, 0.08))
    drop-shadow(0 1px 4px rgba(0, 0, 0, 0.04))
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.06));
  --material-filter: saturate(150%) blur(10px);
  --material-background: rgba(64, 64, 64, 0.25);
  --material-inverted-background: rgba(255, 255, 255, 0.9);
  --mask-backdrop: rgba(0, 0, 0, 0.5);
  --mask-note-card: rgba(0, 0, 0, 0.25);
  --mask-paper: rgba(10, 10, 10, 0.98);
  --color-white: #fff;
  --color-red: #ff2e4d;
  --color-tinted-red: rgba(255, 46, 77, 0.06);
  --color-blue: #3d8af5;
  --color-tinted-blue: rgba(61, 138, 245, 0.1);
  --mask-video-player-mask: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0) 24.48%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.75) 100%
  );
  --search-hotspot-hint: linear-gradient(90deg, #ff2543 0%, #ff5225 100%);
  --color-vertical-channel: #181714;
}

所有页面就需要使用你定义的这些scss变量

步骤2：切换主题调用方法

// 主要代码
export const useTheme = (model = "light") => {
  window.document.documentElement.setAttribute("data-theme", model);
};