定制主题

背景知识

小程序基于 Shadow DOM 来实现自定义组件,所以 Vant Weapp 使用与之配套的 CSS 变量 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识,避免许多不必要的困扰。

CSS 变量 的兼容性要求可以在 这里 查看。对于不支持 CSS 变量 的设备,定制主题将不会生效,不过不必担心,默认样式仍会生效。

样式变量

定制使用的 CSS 变量 与 Less 变量 同名,下面是一些基本的样式变量,所有可用的颜色变量请参考 配置文件

  1. // Component Colors
  2. @text-color: #323233;
  3. @border-color: #ebedf0;
  4. @active-color: #f2f3f5;
  5. @background-color: #f8f8f8;
  6. @background-color-light: #fafafa;

定制方法

定制单个组件的主题样式

在 wxss 中为组件设置 CSS 变量

  1. <van-button class="my-button">
  2. 默认按钮
  3. </van-button>
  1. .my-button {
  2. --button-border-radius: 10px;
  3. --button-default-color: #f2f3f5;
  4. }

或通过 style 属性来设置 CSS 变量,这使你能够轻松实现主题的动态切换

  1. <van-button style="{{ buttonStyle }}">
  2. 默认按钮
  3. </van-button>
  1. Page({
  2. data: {
  3. buttonStyle: `
  4. --button-border-radius: 10px;
  5. --button-default-color: green;
  6. `,
  7. },
  8. onLoad() {
  9. setTimeout(() => {
  10. this.setData({
  11. buttonStyle: `
  12. --button-border-radius: 2px;
  13. --button-default-color: pink;
  14. `,
  15. });
  16. }, 2000);
  17. },
  18. });

定制多个组件的主题样式

与单个组件的定制方式类似,只需用一个 container 节点包裹住需要定制的组件,并将 CSS 变量 设置在 container 节点上

  1. <view class="container">
  2. <van-button bind:click="onClick">
  3. 默认按钮
  4. </van-button>
  5. <van-toast id="van-toast" />
  6. </view>
  1. import Toast from '@vant/weapp/toast/toast';
  2. Page({
  3. onClick() {
  4. Toast('我是提示文案,建议不超过十五字~');
  5. },
  6. });
  1. .container {
  2. --button-border-radius: 10px;
  3. --button-default-color: #f2f3f5;
  4. --toast-max-width: 100px;
  5. --toast-background-color: pink;
  6. }

定制全局主题样式

在 app.wxss 中,写入 CSS 变量,即可对全局生效

  1. page {
  2. --button-border-radius: 10px;
  3. --button-default-color: #f2f3f5;
  4. --toast-max-width: 100px;
  5. --toast-background-color: pink;
  6. }

定制主题 - 图1