自从我根据用户的系统偏好设置在我的博客上实现暗黑模式以来，已经过去了一年多的时间。基本上，如果你的系统设置为暗黑模式，你就会看到我网站的暗黑模式版本，反之亦然。
这是通过设置这样的颜色变量，然后在需要的地方引用它来完成的。
:root { --background-color: #fff; --heading-color: #222; --text-color: #444; --link-color: #006C67; @media (prefers-color-scheme: dark) { :root { --background-color: #0C1821; --heading-color: #f5f3f4; --text-color: #ffffff; --link-color: #90e0ef;
这是一个相当简单的实现，并且对我来说已经有效了一段时间。然而，我最终意识到，很多时候我都想覆盖我的系统设置。于是，我决定，我实际上想要一个能够遵循用户偏好（并且能够记住它）的开关，而不受系统设置的影响。
📝 在 Bear 上实现暗/亮模式切换
1️⃣ CSS 中的主题变量
在Themes > Edit theme CSS中，我没有像上面那样使用代码，而是像下面这样合并了明暗模式的颜色变量。说实话，这花了我最长的时间，因为我的 CSS 有点乱。我知道，我知道……我需要稍微清理一下。我倾向于把旧代码注释掉而不是删除。哎呀。总之……
:root { --background-color: light-dark(#fff, #212529); --accent-color: light-dark(#E9ECEF, #343a40); --heading-color: light-dark(#222, #f5f3f4); --text-color: light-dark(#444, #ffffff); --link-color: light-dark(#006C67, #f9c784);
由于我在页脚中添加了切换按钮（稍后会详细介绍），我还添加了 CSS 来稍微调整一下样式。以下是其中的一个代码片段。您可以根据自己的喜好添加，但实现切换按钮并非必需。
#preferdark, #preferlight { text-decoration: none; cursor: pointer; z-index: 1000; color: var(--text-color); margin: 0 5px; } /* Style for hover state */ #preferdark:hover, #preferlight:hover { color: var(--link-color); }
2️⃣ 添加 Toggle HTML 和 Javascript
截至撰写本文时，暗/亮模式切换按钮目前位于本博客的页脚，因此操作说明也大致如此。最终，我正在考虑将其移至导航栏以便于访问，但这是以后的事情了。如果您想了解具体方法，请查看BinaryDigit 的帖子，了解她是如何实现的。
需要注意的是，访问 Header / Footer 指令 + 使用 Javascript需要 Bearblog 订阅。如果您想在您的博客上实现此功能，则免费版本将无法使用。
要访问页眉/页脚指令，请从 Bearblog 仪表板转到Settings > Header / Footer directives 。
在标题中添加以下脚本。此脚本加载得相当早。它的主要作用是判断用户之前是否选择过主题（存储在浏览器内存中），如果未选择，则使用系统偏好设置。这有望避免切换主题时出现白色闪烁，尽管出于某种原因，这种情况仍然偶尔发生。我不确定还有什么其他方法可以解决这个问题，但如果您有什么想法或建议，请告诉我。这种情况很少发生，所以我不会让它困扰我。
<script> (function() { const savedTheme = localStorage.getItem('theme'); const htmlElement = document.documentElement; let initialTheme; if (savedTheme) { initialTheme = savedTheme; } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) { initialTheme = 'dark'; } else { initialTheme = 'light'; } htmlElement.style.setProperty('color-scheme', initialTheme); })(); </script>
在页脚部分，我提供了以下 HTML 代码，它提供了两个图标作为切换按钮：☀️ 表示亮色模式，🌙 表示暗色模式。您可以根据自己的喜好随意修改。
<a id="preferdark" onclick="switchMode('dark')" style="display: none;"> 🌙 </a> <a id="preferlight" onclick="switchMode('light')"> ☀️ </a>
之后，同样在页脚部分，我添加了以下脚本。switchMode switchMode通过更新你之前在 CSS 中设置的color-scheme属性来更改网站的主题。它还会根据你当前的主题在页面加载后切换 ☀️ 和 🌙。它还会监听你系统偏好设置中暗/亮模式的变化，除非你已经手动选择了暗/亮模式。
<script> function switchMode(mode) { const htmlElement = document.documentElement; const preferDarkLink = document.getElementById('preferdark'); const preferLightLink = document.getElementById('preferlight'); if (mode === 'dark') { htmlElement.style.setProperty('color-scheme', 'dark'); preferDarkLink.style.display = 'none'; preferLightLink.style.display = 'inline-block'; localStorage.setItem('theme', 'dark'); } else { htmlElement.style.setProperty('color-scheme', 'light'); preferDarkLink.style.display = 'inline-block'; preferLightLink.style.display = 'none'; localStorage.setItem('theme', 'light'); } } document.addEventListener('DOMContentLoaded', () => { const currentAppliedTheme = document.documentElement.style.getPropertyValue('color-scheme'); if (currentAppliedTheme === 'dark') { document.getElementById('preferdark').style.display = 'none'; document.getElementById('preferlight').style.display = 'inline-block'; } else { document.getElementById('preferdark').style.display = 'inline-block'; document.getElementById('preferlight').style.display = 'none'; } const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); prefersDark.addEventListener('change', (event) => { if (!localStorage.getItem('theme')) { if (event.matches) { switchMode('dark'); } else { switchMode('light'); } } }); }); </script>
…就是这样！
我不知道有没有更简洁或更高效的方法来实现这个切换，但目前对我来说这是可行的。如果您能给我一些建议或指点，我很乐意听取。
祝您切换愉快！
评论
如果您想发表评论，请给我发送电子邮件，在您知道的任何社交媒体上回复，或在我的留言簿上签名。
通过电子邮件回复
原文： https://notes.jeddacp.com/darklight-mode-toggle-on-bearblog/