介绍

sard-uniapp 使用 CSS 变量声明组件的颜色、字号、圆角等样式， 因此通过变量动态更新主题也是相当容易的。

开启暗黑模式

sard-uniapp 暗黑主题是通过 prefers-color-scheme 媒体查询特性实现的，并提供了暗黑主题的样式文件 dark.scss，将其置于全局样式文件之后便可随着系统的主题变化而修改颜色。

<!-- App.vue -->
<style lang="scss">
  @import 'sard-uniapp/index.scss';
  @import 'sard-uniapp/dark.scss';
</style>

动态暗黑模式

默认情况下会随着系统的主题变化而修改颜色，在 web 端，如果希望动态切换暗黑模式，可以使用 color-scheme 属性。