简介
深色模式是指在黑暗环境下使用的主题，它可以减少亮度刺激，减轻眼睛疲劳。在移动设备上，由于电池寿命的考虑，深色模式还能够有效延长电池续航时间。越来越多的操作系统和应用开始支持深色模式，Web 端也不例外。
“渐进式 Web 应用”（Progressive Web App, PWA）是指可以像本地应用一样访问的 Web 应用。PWA 可以在离线或网络较差的情况下工作，还可以安装到设备上。在开发 PWA 时，我们也想要实现深色模式，在为用户带来更好的使用体验的同时，也可以扩展我们的技术栈。
在本文中，我们将介绍如何在 PWA 中实现深色模式。首先，我们需要了解深色模式的实现原理。
实现原理
Web 端实现深色模式主要通过 CSS Media Queries。CSS Media Queries 是一种通过媒体类型和媒体特性来应用不同样式的方法。例如，在设备宽度为 768 像素以下时，我们可以通过 @media screen and (max-width: 768px) 就可以渲染出不同的样式。
在深色模式下，我们需要应用一些特定的样式来使颜色更加柔和。当用户开启深色模式时，我们可以通过 JavaScript 来修改网页中的 CSS 样式，也可以使用深色模式封装好的 CSS 样式表。此外，我们还可以通过动态添加和移除 class 名称的方式实现深色模式的切换。
接下来，我们来看一下如何实现深色模式。
实现步骤
步骤一：检测深色模式开关
在实现深色模式之前，我们首先需要检测操作系统或设备是否有深色模式功能。使用 window.matchMedia 方法，可以获取到浏览器当前的色彩方案和深色模式开关状态。
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); if (darkModeMediaQuery.matches) { // 深色模式开启 } else { // 深色模式关闭 }
当用户在操作系统或设备中开启深色模式时，我们就可以通过 JavaScript 检测到，从而准备相应的样式。
步骤二：为深色模式应用样式
我们可以将深色模式下的样式写到一个 CSS 文件中。当我们检测到深色模式开启时，通过往 html 文件中添加一个 link 元素的方式引入该文件。如果深色模式关闭，则移除该 link 元素。
-- -------------------- ---- ------- ----- ------------------ - ----------------------------------------- -------- -------- --------------------- - -- ---------- ----- ----------- - ------------------------------- -------------- - ---------------- --------------- - ------------- ---------------- - ---------------- -- -------- -- --------------- - --------------------------------------- -- -------- - ---- - --------------------------------------- - - -----------------------------------------------展开代码
我们可以通过动态应用样式表的方式轻松切换深色模式。
步骤三：通过 JavaScript 切换深色模式
有时候我们想要明确地告诉用户是否应用深色模式。例如，我们可以创建一个开关按钮，让用户自由切换深色模式。为这个按钮添加一个点击事件，通过动态添加或移除 class 名称的方式切换深色模式样式即可。
const toggleButton = document.querySelector('#toggle-button'); toggleButton.addEventListener('click', function(event) { document.body.classList.toggle('dark-mode'); });
在 CSS 样式表中，我们就需要为 dark-mode 类名添加深色模式下的样式。
.dark-mode { background-color: #222; color: #ccc; /* 其他深色模式下的样式 */ }
至此，我们就实现了在 PWA 中使用 CSS Media Queries 和 JavaScript 在深色模式下应用不同的样式的步骤。
结语
深色模式既能为用户带来更好的使用体验，又能为开发者带来更多的技术挑战。通过本文，我们了解了深色模式的实现原理，并在 PWA 中实现了深色模式切换功能。如果你正在开发 PWA，并希望为用户提供更好的使用体验，可以试试在你的 PWA 中实现深色模式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6792daab504e4ea9bd6cc7b8
