定制主题

介绍

Vant 提供了一套默认主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。如果你想完全替换主题色或者其他样式,可以按照本文档进行主题定制。

示例工程

我们提供了一个基于 Vue Cli 3 的示例工程,仓库地址为 Vant Demo,其中包含了定制主题的基本配置,可以作为参考。

样式变量

Vant 使用了 Less 对样式进行预处理,并内置了一些样式变量,通过替换样式变量即可定制你自己需要的主题。

下面是所有的基础样式变量,组件的颜色变量请参考各个组件的文档或配置文件

  1. // Color Palette
  2. @black: #000;
  3. @white: #fff;
  4. @gray-1: #f7f8fa;
  5. @gray-2: #f2f3f5;
  6. @gray-3: #ebedf0;
  7. @gray-4: #dcdee0;
  8. @gray-5: #c8c9cc;
  9. @gray-6: #969799;
  10. @gray-7: #646566;
  11. @gray-8: #323233;
  12. @red: #ee0a24;
  13. @blue: #1989fa;
  14. @orange: #ff976a;
  15. @orange-dark: #ed6a0c;
  16. @orange-light: #fffbe8;
  17. @green: #07c160;
  18. // Gradient Colors
  19. @gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
  20. @gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
  21. // Component Colors
  22. @text-color: @gray-8;
  23. @active-color: @gray-2;
  24. @active-opacity: 0.7;
  25. @disabled-opacity: 0.5;
  26. @background-color: @gray-1;
  27. @background-color-light: #fafafa;
  28. @text-link-color: #576b95;
  29. // Padding
  30. @padding-base: 4px;
  31. @padding-xs: @padding-base * 2;
  32. @padding-sm: @padding-base * 3;
  33. @padding-md: @padding-base * 4;
  34. @padding-lg: @padding-base * 6;
  35. @padding-xl: @padding-base * 8;
  36. // Font
  37. @font-size-xs: 10px;
  38. @font-size-sm: 12px;
  39. @font-size-md: 14px;
  40. @font-size-lg: 16px;
  41. @font-weight-bold: 500;
  42. @line-height-xs: 14px;
  43. @line-height-sm: 18px;
  44. @line-height-md: 20px;
  45. @line-height-lg: 22px;
  46. @base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
  47. Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
  48. 'Microsoft Yahei', sans-serif;
  49. @price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
  50. sans-serif;
  51. // Animation
  52. @animation-duration-base: 0.3s;
  53. @animation-duration-fast: 0.2s;
  54. @animation-timing-function-enter: ease-out;
  55. @animation-timing-function-leave: ease-in;
  56. // Border
  57. @border-color: @gray-3;
  58. @border-width-base: 1px;
  59. @border-radius-sm: 2px;
  60. @border-radius-md: 4px;
  61. @border-radius-lg: 8px;
  62. @border-radius-max: 999px;

定制方法

步骤一 引入样式源文件

定制主题时,需要引入组件对应的 Less 样式文件,支持按需引入和手动引入两种方式。

按需引入样式(推荐)

在 babel.config.js 中配置按需引入样式源文件,注意 babel6 不支持按需引入样式,请手动引入样式。

  1. module.exports = {
  2. plugins: [
  3. [
  4. 'import',
  5. {
  6. libraryName: 'vant',
  7. libraryDirectory: 'es',
  8. // 指定样式路径
  9. style: (name) => `${name}/style/less`,
  10. },
  11. 'vant',
  12. ],
  13. ],
  14. };

手动引入样式

  1. // 引入全部样式
  2. import 'vant/lib/index.less';
  3. // 引入单个组件样式
  4. import 'vant/lib/button/style/less';

步骤二 修改样式变量

使用 Less 提供的 modifyVars 即可对变量进行修改,下面是参考的 webpack 配置。

  1. // webpack.config.js
  2. module.exports = {
  3. rules: [
  4. {
  5. test: /\.less$/,
  6. use: [
  7. // ...其他 loader 配置
  8. {
  9. loader: 'less-loader',
  10. options: {
  11. // 若 less-loader 版本小于 6.0,请移除 lessOptions 这一级,直接配置选项。
  12. lessOptions: {
  13. modifyVars: {
  14. // 直接覆盖变量
  15. 'text-color': '#111',
  16. 'border-color': '#eee',
  17. // 或者可以通过 less 文件覆盖(文件路径为绝对路径)
  18. hack: `true; @import "your-less-file-path.less";`,
  19. },
  20. },
  21. },
  22. },
  23. ],
  24. },
  25. ],
  26. };

如果 vue-cli 搭建的项目,可以在 vue.config.js 中进行配置。

  1. // vue.config.js
  2. module.exports = {
  3. css: {
  4. loaderOptions: {
  5. less: {
  6. // 若 less-loader 版本小于 6.0,请移除 lessOptions 这一级,直接配置选项。
  7. lessOptions: {
  8. modifyVars: {
  9. // 直接覆盖变量
  10. 'text-color': '#111',
  11. 'border-color': '#eee',
  12. // 或者可以通过 less 文件覆盖(文件路径为绝对路径)
  13. hack: `true; @import "your-less-file-path.less";`,
  14. },
  15. },
  16. },
  17. },
  18. },
  19. };

定制主题 - 图1