Adakah mungkin untuk menggabungkan peraturan CSS "klasik" dengan pertanyaan media yang mengandungi gaya yang sama?

Question

Saya tertanya-tanya sama ada boleh menggabungkan 2 peraturan yang digunakan pada elemen yang sama dan mengandungi gaya yang sama, tetapi salah satu peraturan adalah dalam pertanyaan media dan mendapatkan sesuatu yang serupa dengan:

.a,
.b .a {
  color: white;
  background-color: black;
}

Peraturannya ialah:

• Berdasarkan prefers-color-scheme 将颜色应用于 .content,
• Bila input 为 checked 时，更改 .content Warna

: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>

Jika prefer-color-scheme 为深色，或者选中 #dark-theme，则此处 .content anda akan mendapat latar belakang hitam dan warna putih.

Kedua-dua peraturan menggunakan gaya yang sama.

Adakah terdapat cara untuk menggabungkan peraturan ini?

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

Anda tidak boleh melakukan ini menggunakan CSS asli. Walau bagaimanapun, jika masalah anda berkaitan dengan kurang menulis, maka pengkompil CSS telah pun mengurus keperluan itu. Jika anda bersedia untuk mencubanya, berikut ialah kod ringkas yang ditulis dalam Sass.

Mula-mula, anda bungkus kandungan anda dalam @mixin . Ia akan menyimpan kelas anda menggunakan pembolehubah yang sepatutnya berubah berdasarkan tema yang dipilih.

@mixin content-style($theme) {
  .content {
    color: var(--#{$theme}-color);
    background-color: var(--#{$theme}-bg);
  }
}

Selepas itu, anda boleh menggunakannya dalam campuran lain untuk menentukan gaya tema:

@mixin themed-style($theme) {
  @media (prefers-color-scheme: $theme) {
    @include content-style($theme);
  }
  ##{$theme}-theme:checked ~ {
   @include content-style(#{$theme});
  }
}

Akhir sekali, anda boleh menggunakannya untuk mencipta seberapa banyak tema yang anda mahu, cuma tukar pembolehubah:

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

Jika anda ingin melihat output yang sama seperti kod asal, anda boleh mencubanya di sini

Salin dan tampal kod lengkap untuk melihat penukaran:

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