Je me demandais s'il était possible de combiner 2 règles qui s'appliquent au même élément et contiennent le même style, mais l'une des règles est dans une requête média et obtient quelque chose de similaire à :
.a,
.b .a {
color: white;
background-color: black;
}
Les règles sont :
prefers-color-scheme 将颜色应用于 .content, input 为 checked 时，更改 .content Couleur
:root {
--dark-color: white;
--dark-bg: black;
--light-color: black;
--light-bg: white;
}
@media (prefers-color-scheme: dark) {
.content {
color: var(--dark-color);
background-color: var(--dark-bg);
}
}
#dark-theme:checked~.content {
color: var(--dark-color);
background-color: var(--dark-bg);
}
@media (prefers-color-scheme: light) {
.content {
color: var(--light-color);
background-color: var(--light-bg);
}
}
#light-theme:checked~.content {
color: var(--light-color);
background-color: var(--light-bg);
}
<input type="radio" name="color-theme" id="dark-theme"> <label for="dark-theme">dark</label> <input type="radio" name="color-theme" id="light-theme"> <label for="light-theme">light</label> <input type="radio" name="color-theme" id="default-theme" checked> <label for="default-theme">default</label> <div class="content">Test</div>
Si prefer-color-scheme 为深色，或者选中 #dark-theme，则此处 .content vous obtiendrez un fond noir et une couleur blanche.
Les deux règles appliquent le même style.
Existe-t-il un moyen de combiner ces règles ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
:root { --dark-color: white; --dark-bg: black; --light-color: black; --light-bg: white; } @media (prefers-color-scheme: dark) { #default-theme:checked~.content { color: var(--dark-color); background-color: var(--dark-bg); } } #dark-theme:checked~.content { color: var(--dark-color); background-color: var(--dark-bg); } @media (prefers-color-scheme: light) { #default-theme:checked~.content { color: var(--light-color); background-color: var(--light-bg); } } #light-theme:checked~.content { color: var(--light-color); background-color: var(--light-bg); }Vous ne pouvez pas faire cela en utilisant du CSS natif. Cependant, si votre problème est lié à moins d’écriture, alors le compilateur CSS a déjà pris en charge ce besoin. Si vous êtes prêt à essayer, voici un code simple écrit en Sass.
Tout d'abord, vous enveloppez votre contenu dans
@mixin. Il stockera votre classe à l'aide d'une variable qui devrait changer en fonction du thème sélectionné.@mixin content-style($theme) { .content { color: var(--#{$theme}-color); background-color: var(--#{$theme}-bg); } }Ensuite, vous pouvez l'utiliser dans un autre mixin pour définir des styles de thème :
@mixin themed-style($theme) { @media (prefers-color-scheme: $theme) { @include content-style($theme); } ##{$theme}-theme:checked ~ { @include content-style(#{$theme}); } }Enfin, vous pouvez l'utiliser pour créer autant de thèmes que vous le souhaitez, il suffit de changer les variables :
Si vous souhaitez voir le même résultat que le code original, vous pouvez l'essayer ici
Copiez et collez le code complet pour voir la conversion :
:root { --dark-color: white; --dark-bg: black; --light-color: black; --light-bg: white; } @mixin content-style($theme) { .content { color: var(--#{$theme}-color); background-color: var(--#{$theme}-bg); } } @mixin themed-style($theme) { @media (prefers-color-scheme: $theme) { @include content-style($theme); } ##{$theme}-theme:checked ~ { @include content-style(#{$theme}); } } @include themed-style(dark); @include themed-style(light);