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