從必須在預(yù)設(shè)情況下不允許JavaScript 的工作場(chǎng)所共享點(diǎn)環(huán)境中編寫.html 文件的角度來(lái)看，我的任務(wù)是「哦，添加一個(gè)按鈕來(lái)切換暗模式，謝謝！

除了我們政策文件中的“有效且可訪問(wèn)的語(yǔ)義 HTML”措辭之外，老闆將其等同於“即使是一個(gè) DIV 也是懶惰”，至少可以說(shuō)，這讓事情變得有點(diǎn)棘手。

@media（首選顏色方案：深色）

作為對(duì)立點(diǎn)，我建議不要進(jìn)行切換，我們只需設(shè)定頁(yè)面樣式，以符合每個(gè)使用者與媒體查詢的明/暗系統(tǒng)偏好。得到的答覆是「好吧，從這個(gè)開(kāi)始，但仍然要打開(kāi)開(kāi)關(guān)。」太棒了，我透過(guò)努力創(chuàng)造更少的工作，為自己創(chuàng)造了更多的工作。

我已經(jīng)注意到我需要CSS 變數(shù)和複選框輸入/標(biāo)籤方法來(lái)控制亮/暗模式，但是

:checked ~ * 仍然只會(huì)影響輸入之後的元素，使得背景樣式很難切換。

我的第一個(gè)解決方案是使用絕對(duì)位於所有內(nèi)容下方的通用 DIV，直到老闆發(fā)現(xiàn)它並說(shuō)將其刪除為止。令人寬慰的一點(diǎn)是，只要相容性支援覆蓋率超過(guò) 90% 的瀏覽器，它們就可以使用現(xiàn)代 HTML/CSS。

:has() 來(lái)救援！

當(dāng)我第一次看到這個(gè)建議用於在實(shí)現(xiàn)之前定位父元素的 CSS 語(yǔ)法時(shí)，我不確定它有什麼用處?，F(xiàn)在，當(dāng)我尋找解決方案時(shí)再次遇到它，我想，「為什麼不在 BODY 上嘗試呢？」

它立即起作用了，我為自己沒(méi)有早點(diǎn)嘗試而自責(zé)！這是我最後得到的相關(guān) CSS：

      * { /* 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 */

我使用 rgba(128,128,128,0.5) 做了一個(gè)作弊，以保持 SECTION 滾動(dòng)條顏色中性。

最終結(jié)果（不受共享點(diǎn)抑制）如下所示。

作為獎(jiǎng)勵(lì)，這是使用屬性手動(dòng)新增的該頁(yè)面的架構(gòu)資料結(jié)構(gòu)，這是我接受的另一項(xiàng)無(wú) JavaScript 任務(wù)。

現(xiàn)在我只需要弄清楚如何在沒(méi)有 JavaScript 的情況下觸發(fā)這些音訊聲音！ ？

請(qǐng)隨意評(píng)論您自己在有限環(huán)境中工作的經(jīng)驗(yàn)，哪些有效，哪些無(wú)效！

以上是使用 DIVLESS Pure CSS 切換深色模式的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！