Est-il possible de fusionner des règles CSS « ​​classiques » avec des requêtes multimédias contenant le même style ?

Question

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 :

• Basé sur prefers-color-scheme 将颜色应用于 .content,
• Quand 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 ?

Answer 1

: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);
}

dark

light

default

Test

Answer 2

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 :

@include themed-style(dark);
@include themed-style(light);

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);