從必須在預設情況下不允許JavaScript 的工作場所共享點環境中編寫.html 文件的角度來看，我的任務是「哦，添加一個按鈕來切換暗模式，謝謝！
除了我們政策文件中的“有效且可訪問的語義 HTML”措辭之外，老闆將其等同於“即使是一個 DIV 也是懶惰”，至少可以說，這讓事情變得有點棘手。
@media（首選顏色方案：深色）
作為對立點，我建議不要進行切換，我們只需設定頁面樣式，以符合每個使用者與媒體查詢的明/暗系統偏好。得到的答覆是「好吧，從這個開始，但仍然要打開開關。」太棒了，我透過努力創造更少的工作，為自己創造了更多的工作。
我已經注意到我需要CSS 變數和複選框輸入/標籤方法來控制亮/暗模式，但是
:checked ~ * 仍然只會影響輸入之後的元素，使得背景樣式很難切換。
我的第一個解決方案是使用絕對位於所有內容下方的通用 DIV，直到老闆發現它並說將其刪除為止。令人寬慰的一點是，只要相容性支援覆蓋率超過 90% 的瀏覽器，它們就可以使用現代 HTML/CSS。
:has() 來救援！
當我第一次看到這個建議用於在實現之前定位父元素的 CSS 語法時，我不確定它有什麼用處。現在，當我尋找解決方案時再次遇到它，我想，「為什麼不在 BODY 上嘗試呢？」
它立即起作用了，我為自己沒有早點嘗試而自責！這是我最後得到的相關 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) 做了一個作弊，以保持 SECTION 滾動條顏色中性。
最終結果（不受共享點抑制）如下所示。
作為獎勵，這是使用屬性手動新增的該頁面的架構資料結構，這是我接受的另一項無 JavaScript 任務。
現在我只需要弄清楚如何在沒有 JavaScript 的情況下觸發這些音訊聲音！ ？
請隨意評論您自己在有限環境中工作的經驗，哪些有效，哪些無效！
以上是使用 DIVLESS Pure CSS 切換深色模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
