The principle is to inject variables into the body style, and modify the color of the variable when changing the theme color.
The advantage of putting scss variables --color:red
in the body is that they are available globally.
if(sheme==="dark"){
document.getElementsByTagName('body')[0].style.setProperty('--color', `#27202E`);
}else{
document.getElementsByTagName('body')[0].style.setProperty('--color', `#ffffff`);
}
use:
div:hover {
color: var(--color);
}
Approach 2: scss
filter.App.vue
<style lang="scss">
:root {
--background-color: white;
--text-color: black;
}
[theme="dark"] {
--background-color: black;
--text-color: white;
}
</style>
xxxpage.view
changeTheme() {
this.theme = this.theme == "dark" ? "light" : "dark";
document.documentElement.setAttribute("theme", this.theme);
},
<style scoped lang="scss">
.home {
background: var(--background-color);
}
</style>
[tips: scoped Add a non-repeating data attribute (such as: data-v-2311c06a) to the DOM node of HTML to indicate its uniqueness.
Add one at the end of each css selector (compiled generated css statement) The data attribute selector of the current component (such as [data-v-2311c06a]) to privatize the style
If the component contains other components inside, only the data attribute of the current component will be added to the outermost label of other components]
Follow the system's approach, whether it is a dark mode.
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
function darkModeHandler() {
if (mediaQuery.matches) {
console.log('现在是深色模式')
} else {
console.log('现在是浅色模式')
}
}
// 判断当前模式
darkModeHandler()
// 监听模式变化
mediaQuery.addListener(darkModeHandler)
Easy color flipping, and remove effects such as emoji pictures. [prefers-color-scheme] is to automatically read whether the theme of the system is dark mode. Follow the system.
@media (prefers-color-scheme: dark) {
body {
filter: invert(100%);
background-color: rgb(29, 32, 31) !important;
}
img,
.astro-code,
.emoji {
filter: invert(100%);
}
}