三言兩語說透設計模式的藝術-簡單工廠模式
一、寫在前面工廠模式是最常見的一種創建型設計模式，通常說的工廠模式指的是工廠方法模式，是使用頻率最高的工廠模式。簡單工廠模式又稱為靜態工廠方法模式，不屬于GoF 23種設計
在Web開發中，有時希望能夠根據用戶的偏好模式（明暗模式）來更改網頁的顏色。以前們需要使用媒體查詢（prefers-color-scheme）來實現這個功能。但現在，CSS提供了一個更簡單的方法：light-dark()函數。這個函數可以接受兩種不同的顏色作為參數，根據當前所使用的顏色方案，自動輸出其中的一種顏色，從而實現自適應的顏色顯示。
要根據所使用的淺色模式或深色模式更改顏色值，通常會使用 prefers-color-scheme 媒體查詢來更改自定義屬性的值：
:root { --text-color: #333; /* 淺色模式的值 */}@media (prefers-color-scheme: dark) { --text-color: #ccc; /* 深色模式的值 */}在實現深色模式時，通常會出現一堆重復的CSS變量，用于設置每種模式的值。然后，CSS 將使用這些自定義屬性進行實際聲明。
body { color: var(--text-color);}CSS 顏色模塊第 5 級規范[1]的新增了 light-dark() 函數。該函數接受兩個顏色值作為其參數。根據正在使用的顏色方案，它將輸出第一個或第二個顏色參數。
light-dark(<color>, <color>);根據規范，如果使用的顏色方案是light或未知，則該函數計算為第一種顏色的計算值；如果使用的顏色方案是dark，則計算為第二種顏色的計算值。
使用的顏色方案不僅是用戶選擇的亮暗模式，還需要根據color-scheme屬性的值確定使用的顏色方案。color-scheme屬性可以指示元素使用哪種顏色方案進行渲染，這個方案會與用戶的偏好進行協商，最終確定使用的顏色方案。因此，在使用light-dark()函數時，還需要在CSS中包含對應的color-scheme聲明，以確保函數能夠正確工作。
:root { color-scheme: light dark;}:root { --text-color: light-dark(#333, #ccc); }對于上面的代碼，在淺色模式下返回第一個值，在深色模式下返回第二個值。
由于設置了color-scheme，這意味著可以針對某個元素覆蓋其值，以強制其進入特定模式。
.dark { color-scheme: dark; }對于上面的代碼，該元素及其子元素上的 light-dark() 將始終返回 dark對應的值。
如果你的瀏覽器支持light-dark()函數，下面的演示將顯示幾個標有.auto的<div>元素，這些元素會響應切換到淺色或深色模式。而具有.light或.dark類的<div>元素則強制進入它們的正確模式。
#demo { color-scheme: light dark; .dark { color-scheme: dark; } .light { color-scheme: light; } & div { background: light-dark(#d4d4d4, #000); color: light-dark(#333, #ccc); }}light-dark() 函數的瀏覽器支持如下：
可以通過以下代碼來判斷當前使用的瀏覽器是否支持 CSS light-dark()函數：
@supports(color: light-dark(#fff, #000)) { #output::after { content: "? 瀏覽器支持 light-dark()"; background-color: #00ff002b; }}關注瀏覽器的支持情況：
[1]CSS 顏色模塊第 5 級規范： https://drafts.csswg.org/css-color-5/。
[2]Issue #1490618： https://bugs.chromium.org/p/chromium/issues/detail?id=1490618。
[3]Issue #1856999： https://bugzilla.mozilla.org/show_bug.cgi?id=1856999。
[4]Issue #262914： https://bugs.webkit.org/show_bug.cgi?id=262914。
本文鏈接：http://www.tebozhan.com/showinfo-26-13270-0.html更現代化方式實現明暗模式，兩行CSS搞定！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號