El principio es inyectar variables en el estilo del cuerpo y modificar el color de la variable al cambiar el color del tema.
La ventaja de poner variables scss --color:red
en el cuerpo es que están disponibles globalmente.
if(sheme==="dark"){
document.getElementsByTagName('body')[0].style.setProperty('--color', `#27202E`);
}else{
document.getElementsByTagName('body')[0].style.setProperty('--color', `#ffffff`);
}
usar:
div:hover {
color: var(--color);
}
Enfoque 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.ver
changeTheme() {
this.theme = this.theme == "dark" ? "light" : "dark";
document.documentElement.setAttribute("theme", this.theme);
},
<style scoped lang="scss">
.home {
background: var(--background-color);
}
</style>
[consejos: alcance Agregue un atributo de datos que no se repite (como: data-v-2311c06a) al nodo DOM de HTML para indicar su singularidad. Agregue uno al final
de cada selector css (instrucción css generada compilada) El atributo de datos selector del componente actual (como [data-v-2311c06a]) para privatizar el estilo
Si el componente contiene otros componentes dentro, solo se agregará el atributo de datos del componente actual a la etiqueta más externa de otros componentes]
Siga el enfoque del sistema, ya sea un modo oscuro.
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
function darkModeHandler() {
if (mediaQuery.matches) {
console.log('现在是深色模式')
} else {
console.log('现在是浅色模式')
}
}
// 判断当前模式
darkModeHandler()
// 监听模式变化
mediaQuery.addListener(darkModeHandler)
Fácil cambio de color y eliminación de efectos como imágenes de emoji. [prefiere-color-scheme] es para leer automáticamente si el tema del sistema está en modo oscuro. Sigue el sistema.
@media (prefers-color-scheme: dark) {
body {
filter: invert(100%);
background-color: rgb(29, 32, 31) !important;
}
img,
.astro-code,
.emoji {
filter: invert(100%);
}
}