Togol Mod Gelap menggunakan DIVLESS Pure CSS

Berasal dari perspektif perlu menulis dokumentasi .html dalam persekitaran titik kongsi tempat kerja yang tidak membenarkan javascript secara lalai, saya ditugaskan dengan "Oh, dan tambahkan butang untuk menogol mod gelap, terima kasih!"

Ini, selain daripada perkataan "HTML Semantik yang Sah dan Boleh Dicapai" dalam dokumen dasar kami yang bos menyamakan dengan "Walaupun satu DIV adalah kemalasan" menjadikan perkara agak sukar untuk diperkatakan.

@media (lebih suka skema warna: gelap)

Sebagai titik balas, saya mencadangkan bukannya togol, kami hanya menggayakan halaman untuk memadankan keutamaan sistem terang/gelap bagi setiap pengguna dengan pertanyaan media. Jawapannya ialah "Baiklah, mulakan dengan itu, tetapi tetap masukkan togol." Hebat, saya mencipta lebih banyak kerja untuk diri saya sendiri dengan cuba mencipta lebih sedikit.

Saya sudah menyatakan bahawa saya memerlukan pembolehubah CSS dan kaedah input / label kotak semak untuk mengawal mod Cerah/Gelap, tetapi :checked ~ * masih akan hanya menjejaskan elemen yang datang selepas input, menjadikan gaya latar belakang sukar untuk ditogol.

Penyelesaian pertama saya ialah menggunakan DIV generik yang diletakkan betul-betul di bawah segala-galanya, yang berkesan sehingga bos melihatnya dan berkata untuk menyingkirkannya. Satu perkara yang melegakan ialah ianya baik dengan HTML/CSS moden digunakan asalkan liputan sokongan keserasian melebihi 90% penyemak imbas.

:has() untuk menyelamatkan!

Apabila saya mula-mula melihat sintaks CSS ini dicadangkan untuk menyasarkan kembali elemen induk sebelum ia dilaksanakan, saya tidak pasti untuk kegunaannya. Kini terjumpa sekali lagi semasa saya mencari penyelesaian, saya terfikir, "Mengapa tidak mencubanya pada BODY?"

Ia berkesan serta-merta dan saya menyentak diri saya sendiri kerana tidak mencubanya lebih awal! Berikut ialah CSS yang berkaitan yang saya dapatkan:

      * { /* LIGHT mode */
        --tcolor: #000;
        --bgcolor: #FFF;
        --lcontent: "DARK";
        --bgimage: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(255,255,255,0.75);
        --alink:blue;
        --avisited:purple;
      }
      body:has(#d:checked), body:has(#d:checked) * { /* DARK mode */
        --tcolor: #FFF;
        --bgcolor: #000;
        --lcontent: "LIGHT";
        --bgimage: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(0,0,0,0.75);
        --alink:lightblue;
        --avisited:#8467D7;
      }
@media (prefers-color-scheme: dark) {
      * { /* DARK mode */
        --tcolor: #FFF;
        --bgcolor: #000;
        --lcontent: "LIGHT";
        --bgimage: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(0,0,0,0.75);
        --alink:lightblue;
        --avisited:#8467D7;
      }
      body:has(#d:checked), body:has(#d:checked) * { /* LIGHT mode */
        --tcolor: #000;
        --bgcolor: #FFF;
        --lcontent: "DARK";
        --bgimage: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url(INSERT_SEASONAL_BACKGROUND);
        --sbgcolor: rgba(255,255,255,0.75);
        --alink:blue;
        --avisited:purple;
      }
}
      body { /* base element under control of mode */
        color:var(--tcolor); /* match text color to mode */
        background-image:var(--bgimage); /* match opacity overlay to mode */
        background-repeat: no-repeat no-repeat, space no-repeat;
        background-size:auto 100vh;
        margin:-1ex;
      }
      label[for="d"]::after {content: var(--lcontent);} /* DARK or LIGHT text */
      section{ /* main interaction area */
        margin:0 auto;
        background-color:var(--sbgcolor);
        padding:1ex;
        padding-top:0;
        height:fit-content;
        max-height:96.2vh;
        overflow-y:scroll;
        scrollbar-color:rgba(128,128,128,0.5) var(--sbgcolor);
      }
      li:nth-of-type(even){ /* subtle horizontal lines */
        background-color:rgba(128,128,128,0.1);
      }
      summary:hover,summary:focus-visible,a:hover,a:focus-visible { /* match mouseover or     */
        background-color:var(--bgcolor);                            /* keyboard focus to mode */
      }
      a:link {color: var(--alink)}       /* match link     */
      a:visited {color: var(--avisited)} /* colors to mode */

Saya melakukan satu penipuan menggunakan rgba(128,128,128,0.5) untuk memastikan warna bar skrol BAHAGIAN neutral.

Keputusan akhir (tidak dihalang oleh sharepoint) kelihatan seperti ini.

Sebagai bonus berikut ialah struktur data skema halaman itu yang ditambahkan secara manual menggunakan atribut, satu lagi tugasan saya diberikan sans-javascript.

Sekarang saya hanya perlu memikirkan cara untuk mencetuskan bunyi audio tersebut tanpa javascript!?

Jangan ragu untuk mengulas tentang pengalaman anda sendiri bekerja dalam persekitaran terhad, perkara yang berkesan dan tidak!

Atas ialah kandungan terperinci Togol Mod Gelap menggunakan DIVLESS Pure CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!