如何使用 CSS 变量和 JavaScript 为我的网站创建可自定义的暗模式？

使用 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中文网其他相关文章！