來到燈光（）

>同時創建淺色和深色模式似乎令人生畏。 基於@media管理prefers-color-scheme>查詢，可容納用戶覆蓋OS設置，並製定對比鮮明的調色板以訪問可訪問性，這都增加了複雜性。但是現代CSS大大簡化了這一點。

>

利用本機HTML配色方案

> HTML既提供標準的黑白和黑色主題（儘管經常被CSS重置隱藏）。 白色黑色主題為黑暗模式提供了絕佳的基礎，最大程度地減少了對輸入和按鈕等元素的手動調整的需求。

>

>自動配色方案通過操作系統首選項開關

>沒有任何@media>查詢，只需在root元素上聲明color-scheme: light dark;，可以根據用戶的OS首選項啟用自動切換即可。 瀏覽器尊重操作系統的“光”，“黑暗”或“自動”配色方案設置。 這也可以通過html<meta>標籤來實現：。 兩種方法都達到了相同的結果：同時可用和黑暗方案可用並應用適當的一種。 <meta content="light dark" name="color-scheme">>您可以使用JavaScript控制

標籤或CSS屬性。 也可能將

應用於各個元素，但需要明確聲明<meta>>和color-scheme>屬性以避免繼承問題。 color>默認文本和背景顏色變量background-color 這些主題中的默認“黑色”和“白色”通常略有黑色和灰白色，改善對比度。 這些顏色可作為

>變量訪問：

（背景）和

（text）。 這些變量會自動調整

的變化，行為與<system-color></system-color>相似，但是Canvas>仍然固定為默認文本顏色。 CanvasText>以下示例演示了更改color-scheme屬性的影響：> currentColor>還有許多其他變量（總計19個）。 MDN提供了一個完整的列表。 但是，瀏覽器和操作系統不一致存在於其渲染和支持中。 egor kloos的CanvasText框架跟踪這些變量的當前狀態。

聲明這兩種模式的顏色color-scheme

>自動燈/暗開關就位，聲明顏色的最佳方法至關重要。 這是三種方法，排名最低至最有效：

> <system-color></system-color>3。 基於不透明度的方法：system.css

使用顏色不透明度（例如，

）允許

顏色顯示，但對文本的有效性較小，並且導致柔和的顏色。

2。 color-mix()函數：

color-mix()函數可以將顏色與指定比例（例如，color-mix(in oklab, Canvas 75%, RebeccaPurple)）混合。 這對於維持跨模式的色調和飽和度一致性很有用。與HSL相比

1。

函數：light-dark()

light-dark()函數（例如，light-dark(lavender, saddlebrown)）提供了最精確的控制，可以在輕度和深色模式中完全不同的顏色。 它也可以合併color-mix()。 瀏覽器支持很高，但可能需要後備。

>

和color-scheme的優點超過light-dark() @media

>提供了

>的幾個優點：color-scheme> @media prefers-color-scheme

>輕鬆地提供了基本的黑暗模式。

• 處理基於操作系統的基於OS的本地切換。
允許基於JavaScript的切換，同時尊重聲明的顏色。
實施光，黑暗和自動模式控件
>提供淺色，深色和自動模式提供靈活性。 自動模式默認為操作系統設置，而用戶可以手動切換。 這消除了對複雜檢測邏輯和事件聽眾的需求。

> 基於CSS的配色方案調整

>

純CSS調整可以使用 pseudo-Selector和Radio Inputs或元素進行調整。 但是，這僅限於每頁更改，需要

支持。

> 基於JavaScript的配色方案調整

JavaScript 標籤或

可以用來操縱:has()。 函數提高代碼可重複性。 <select></select> :has()記住用戶首選項

> Web Storage API（LocalStorage或SessionStorage）允許存儲用戶首選項以備將來訪問。

>在會議上持續存在，而

在瀏覽器閉合上清除。 選擇取決於用戶行為和GDPR合規性注意事項。 <meta> html.style.setProperty()>可訪問性注意事項color-scheme

提供燈光和深色模式可提高可訪問性。 考慮添加對比度設置（使用

和

）以進行進一步的自定義。 使用ARIA屬性（例如，

）少於增強的屏幕讀取器兼容性。 localStorage 總而言之，現代CSS簡化了光和黑暗模式的創建。 擁抱sessionStorage>，

和用戶偏好存儲提供的靈活性和用戶選擇。

以上是來到燈光（）的詳細內容。更多資訊請關注PHP中文網其他相關文章！