在微信小程序中巧妙适配暗夜模式，无需侵入业务代码

作为一名小程序开发者，你一定遇到过这样的困扰：小程序中虽然提供了暗夜模式样式，但需要在根结点增加属性 data-weui-theme="dark" 才能生效。这意味着你必须设置一个页面变量，这无疑会侵入业务代码，让代码变得冗杂。

本文将介绍一种更加优雅的方案来解决这一问题，让你在适配暗夜模式时无需侵入业务代码，保持代码的简洁性。

暗夜模式在小程序中的实现

在微信小程序中，暗夜模式的实现是通过 theme 变量来控制的。当 theme 变量为 "dark" 时，小程序会自动加载暗夜模式的样式。

为了让小程序适配暗夜模式，我们通常的做法是在根结点添加属性 data-weui-theme="dark"，这将强制小程序使用暗夜模式样式。

传统方案的弊端

这种传统方案虽然简单易行，但存在以下弊端：

1. 侵入业务代码： 需要在根结点添加 data-weui-theme="dark" 属性，这会侵入业务代码，影响代码的可读性和可维护性。
2. 不易维护： 当需要切换到浅色模式时，需要手动移除 data-weui-theme="dark" 属性，容易造成遗漏或错误，影响代码的稳定性。
3. 影响多页面共用： 如果需要在多个页面中适配暗夜模式，则需要在每个页面的根结点都添加 data-weui-theme="dark" 属性，这会造成代码冗余和维护困难。

优雅方案：CSS变量

为了解决传统方案的弊端，我们可以使用 CSS 变量来实现暗夜模式的适配。CSS 变量是一种动态存储和使用值的机制，它允许我们在运行时改变样式。

我们可以定义一个 CSS 变量 --theme，其值为 "light" 或 "dark"，然后在样式表中使用这个变量来控制样式的显示。

:root {
  --theme: light;
}

.dark-theme {
  color: #fff;
  background-color: #000;
}

.light-theme {
  color: #000;
  background-color: #fff;
}

在根结点添加 data-theme="dark" 属性，即可切换到暗夜模式。

<view data-theme="dark">...</view>

方案优势

这种方案具有以下优势：

1. 不侵入业务代码： 无需在根结点添加属性，保持代码的简洁性和可维护性。
2. 易于维护： 只需要在根结点添加 data-theme 属性即可切换模式，操作简单，不易出错。
3. 支持多页面共用： 只需要在根结点添加一次 data-theme 属性，即可在多个页面中切换暗夜模式。
4. 灵活性高： 可以通过 JavaScript 动态改变 --theme 变量的值，实现更灵活的模式切换。

示例代码

下面是一个示例代码，展示了如何使用 CSS 变量来适配暗夜模式：

<view data-theme="dark">
  <text class="title">小程序暗夜模式适配</text>
  <text class="content">本文介绍了使用 CSS 变量实现小程序暗夜模式适配的优雅方案，该方案无需侵入业务代码，且易于维护和切换。</text>
</view>

:root {
  --theme: light;
}

.dark-theme {
  color: #fff;
  background-color: #000;
}

.light-theme {
  color: #000;
  background-color: #fff;
}

结语

通过使用 CSS 变量，我们可以优雅地适配小程序的暗夜模式，无需侵入业务代码，简化了代码维护和切换模式的过程。这种方案不仅适用于 WeUI，也适用于其他小程序框架和自定义样式。

希望本文能对你有所帮助，欢迎在评论区留言讨论或分享你的经验。