标签：Dark Mode

共 2 篇相关文章

IT 累计浏览 3

TailwindCSS v4 全新颜色系统与主题切换

TailwindCSS v4 对颜色系统进行了重大重构，核心解决了此前通过 CSS 变量自定义颜色时遇到的痛点。旧方法在变量中存储分离的 RGB 分量字符串，不仅导致编辑器无法识别颜色预览，更严重的问题是当颜色自身带有透明度时，`/` 语法会完全失效，因为无法二次应用透明度。 v4 的关键改进是引入了 `color-mix()` 函数来处理透明度调整。它允许将任意颜色（包括本身带透明度的）与 `transparent` 进行混合，通过控制混合比例来实现最终的透明效果，从而彻底解决了上述限制。此外，v4 利用原生的 CSS `@layer` 机制，将颜色定义统一收拢在 `@layer theme` 中。这使得主题配置不再依赖 JavaScript，而是纯粹通过 CSS 实现，极大地提升了灵活性。通过覆写 `@layer theme` 内的变量，可以轻松实现 light/dark 模式切换以及基于 `data-theme` 等属性的自定义主题（如“可爱”风格）切换，并且每套主题都能良好适配暗色模式。整个系统在开发时即可直观预览颜色，体验远优于以往。

IT 累计浏览 2,081

Android夜间模式实现

这篇讲的是如何利用Android的Theme机制，相对简单地实现夜间模式切换。作者从一个实际需求出发，通过一个小Demo演示了核心步骤。核心思路是先在`res/values`中定义自己的属性名（比如背景色），然后为日间和夜间模式分别创建主题样式文件，为这些属性赋予不同的值。在布局文件中，控件通过`?attr/属性名`来引用这些值，而不是直接写死颜色。实现动态切换的关键在于代码逻辑：在Activity中通过`setTheme()`方法切换主题，并且一定要在调用`setContentView()`之前执行。对于已经显示的界面，作者提供了一个简洁的刷新方法：直接调用`recreate()`重建Activity即可应用新主题，省去了手动重设所有视图的麻烦。文章没有堆砌理论，而是聚焦于“定义属性 -> 创建主题 -> 引用属性 -> 动态切换”这条实用路径。最后也提醒了几个实现细节，比如自定义主题必须继承系统Theme以避免报错，确保切换过程流畅。