使用CSS 變數和JavaScript 自訂深色模式
為您的應用或網站實現深色模式對於提供無縫的用戶體驗至關重要。本機 CSS 媒體規則為瀏覽器提供了一個選項來偵測系統設定的暗模式，但使用者可能會喜歡針對尚未支援它的特定網站或瀏覽器（例如 Microsoft Edge）使用不同的主題。
要解決這樣，我們可以利用 CSS 變數和 JavaScript 來管理主題設定。
使用變數和主題進行CSS 自訂
在根或預設層級定義CSS 變量，並指定深色主題：
<code class="css">:root {
--font-color: #000;
...
--bg-color: rgb(243,243,243);
}
[data-theme="dark"] {
--font-color: #c1bfbd;
...
--bg-color: #333;
}</code>在需要動態調整樣式的地方呼叫變數。
用於主題偵測和切換的JavaScript
在標題中HTML 部分，加入JavaScript 來偵測使用者的首選主題：
<code class="javascript">function detectColorScheme() {
var theme = "light";
...
}
detectColorScheme();</code>使用JavaScript 在淺色和深色主題之間切換：
<code class="javascript">const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');
function switchTheme(e) {
...
}
toggleSwitch.addEventListener('change', switchTheme, false);</code>用於主題切換的HTML
為使用者控制的主題切換建立HTML 複選框：
<code class="html"><label id="theme-switch" class="theme-switch" for="checkbox_theme">
<input type="checkbox" id="checkbox_theme">
</label></code>透過這種方法，您可以自動偵測使用者的主題，讓他們可以覆蓋它，並提供自訂的主題跨瀏覽器和平台的體驗。
以上是如何使用 CSS 變數和 JavaScript 為我的網站建立可自訂的暗模式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
