Vue实现主题切换（明暗）

项目地址： gitee /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); };