taro 主题切换_自定义 Taro UI 主题《 电商小程序案例：准备 》

自定义 taro ui 的样式，可以修改一下它的变量的值，然后再重新编译一下就行了 ... Taro UI 的默认的变量是在 node_modules .. taro-ui .. dist .. style 下面的 variables 这个目录里面，打开 default.scss ..

先复制一下这些变量的值 .. 然后在项目的 src .. assets .. styles 下面，新建一个文件 .. 名字是 _variable_overrides.scss

把刚才复制的东西粘贴到这个文件里面 .. 先注释掉所有的代码 .. 现在我想覆盖一下 Taro UI 里的主色 .. 取消注释 $color-brand 这个变量 .. 修改一下它的值 .. 比如换成纯黑色 ..

打开 app.scss .. 导入刚才创建的 scss 文件 .. variable_overrides ..

Taro 会重新编译样式 .. 模拟器上现在显示的按钮，它的颜色变成了黑色 .. 因为我们把 Taro UI 的主色 修改成了黑色 .. primary 类型的按钮的背景颜色应该使用了 $color-brand 这个变量的值，所以它现在的背景颜色就变成了黑色..