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

效果展示：

步骤1：定义明暗scss样式

javascript">// 浅色模式
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：切换主题调用方法

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