主题

移动端的组件对主题定制的需求会更多，从 cube-ui^1.0.2 开始，通过 webpack 工具可以实现自定义主题样式。

注意： 自定义主题依赖后编译。

主题文件

在你的项目的 src/ 目录下创建一个 theme.styl 的文件，内容如下（展示的全是默认样式，你可以选择这针对不同组件做定制）：

  1. // 如果你需要使用 cube-ui 自带的颜色值 需要 require 进来
  2. @require "~cube-ui/src/common/stylus/var/color.styl"
  4. // action-sheet
  5. action-sheet-color := color-grey
  6. action-sheet-active-color := color-orange
  7. action-sheet-bgc := color-white
  8. action-sheet-active-bgc := color-light-grey-opacity
  9. action-sheet-title-color := color-dark-grey
  10. action-sheet-space-bgc := color-mask-bg
  11. /// picker style
  12. action-sheet-picker-cancel-color := color-light-grey
  13. action-sheet-picker-cancel-active-color := color-light-grey-s
  15. // bubble
  17. // button
  18. btn-color := color-white
  19. btn-bgc := color-regular-blue
  20. btn-bdc := color-regular-blue
  21. btn-active-bgc := color-blue
  22. btn-active-bdc := color-blue
  23. btn-disabled-color := color-white
  24. btn-disabled-bgc := color-light-grey-s
  25. btn-disabled-bdc := color-light-grey-s
  26. /// primary
  27. btn-primary-color := color-white
  28. btn-primary-bgc := color-orange
  29. btn-primary-bdc := color-orange
  30. btn-primary-active-bgc := color-dark-orange
  31. btn-primary-active-bdc := color-dark-orange
  32. /// light
  33. btn-light-color := color-grey
  34. btn-light-bgc := color-light-grey-sss
  35. btn-light-bdc := color-light-grey-sss
  36. btn-light-active-bgc := color-active-grey
  37. btn-light-active-bdc := color-active-grey
  38. /// outline
  39. btn-outline-color := color-grey
  40. btn-outline-bgc := transparent
  41. btn-outline-bdc := color-grey
  42. btn-outline-active-bgc := color-grey-opacity
  43. btn-outline-active-bdc := color-grey
  44. /// outline-primary
  45. btn-outline-primary-color := color-orange
  46. btn-outline-primary-bgc := transparent
  47. btn-outline-primary-bdc := color-orange
  48. btn-outline-primary-active-bgc := color-orange-opacity
  49. btn-outline-primary-active-bdc := color-dark-orange
  51. // checkbox
  52. checkbox-color := color-grey
  53. checkbox-icon-color := color-light-grey-s
  54. /// checked
  55. checkbox-checked-icon-color := color-orange
  56. checkbox-checked-icon-bgc := color-white
  57. /// disabled
  58. checkbox-disabled-icon-color := color-light-grey-ss
  59. checkbox-disabled-icon-bgc := color-light-grey-ss
  60. // checkbox hollow
  61. checkbox-hollow-checked-icon-color := color-orange
  62. checkbox-hollow-disabled-icon-color := color-light-grey-ss
  63. // checkbox-group
  64. checkbox-group-bgc := color-white
  65. checkbox-group-horizontal-bdc := color-light-grey-s
  67. // radio
  68. radio-group-bgc := color-white
  69. radio-group-horizontal-bdc := color-light-grey-s
  70. radio-color := color-grey
  71. radio-icon-color := color-light-grey-s
  72. /// selected
  73. radio-selected-icon-color := color-white
  74. radio-selected-icon-bgc := color-orange
  75. /// disabled
  76. radio-disabled-icon-bgc := color-light-grey-ss
  77. // radio hollow
  78. radio-hollow-selected-icon-color := color-orange
  79. radio-hollow-disabled-icon-color := color-light-grey-ss
  81. // dialog
  82. dialog-color := color-grey
  83. dialog-bgc := color-white
  84. dialog-icon-color := color-regular-blue
  85. dialog-icon-bgc := color-background
  86. dialog-title-color := color-dark-grey
  87. dialog-close-color := color-light-grey
  88. dialog-btn-color := color-light-grey
  89. dialog-btn-bgc := color-white
  90. dialog-btn-active-bgc := color-light-grey-opacity
  91. dialog-btn-highlight-color := color-orange
  92. dialog-btn-highlight-active-bgc := color-light-orange-opacity
  93. dialog-btn-disabled-color := color-light-grey
  94. dialog-btn-disabled-active-bgc := transparent
  95. dialog-btns-split-color := color-row-line
  97. // index-list
  98. index-list-bgc := color-white
  99. index-list-title-color := color-dark-grey
  100. index-list-anchor-color := color-light-grey
  101. index-list-anchor-bgc := #f7f7f7
  102. index-list-item-color := color-dark-grey
  103. index-list-item-active-bgc := color-light-grey-opacity
  104. index-list-nav-color := color-grey
  105. index-list-nav-active-color := color-orange
  107. // loading
  109. // picker
  110. picker-bgc := color-white
  111. picker-title-color := color-dark-grey
  112. picker-confirm-btn-color := color-orange
  113. picker-confirm-btn-active-color := color-light-orange
  114. picker-cancel-btn-color := color-light-grey
  115. picker-cancel-btn-active-color := color-light-grey-s
  116. picker-item-color := color-dark-grey
  118. // popup
  119. popup-mask-bgc := rgb(37, 38, 45)
  120. popup-mask-opacity := .4
  122. //scroll
  124. // slide
  125. slide-dot-bgc := color-light-grey-s
  126. slide-dot-active-bgc := color-orange
  128. // time-picker
  130. // tip
  131. tip-color := color-white
  132. tip-bgc := color-dark-grey-opacity
  134. // toast
  135. toast-color := color-light-grey-s
  136. toast-bgc := rgba(37, 38, 45, 0.9)
  138. // upload
  139. upload-btn-color := color-grey
  140. upload-btn-bgc := color-white
  141. upload-btn-active-bgc := color-light-grey-opacity
  142. upload-btn-box-shadow := 0 0 6px 2px color-grey-opacity
  143. upload-btn-border-color := #e5e5e5
  144. upload-file-bgc := color-white
  145. upload-file-remove-color := rgba(0, 0, 0, .8)
  146. upload-file-remove-bgc := color-white
  147. upload-file-state-bgc := color-mask-bg
  148. upload-file-success-color := color-orange
  149. upload-file-error-color := #f43530
  150. upload-file-status-bgc := color-white
  151. upload-file-progress-color := color-white
  153. // switch
  154. switch-on-bgc := color-orange
  155. switch-off-bgc := color-white
  156. switch-off-border-color := #e4e4e4
  158. // input
  159. input-color := color-grey
  160. input-bgc := color-white
  161. input-border-color := color-row-line
  162. input-focus-border-color := color-orange
  163. input-placeholder-color := color-light-grey-s
  164. input-clear-icon-color := color-light-grey
  166. //textarea
  167. textarea-color := color-grey
  168. textarea-bgc := color-white
  169. textarea-border-color := color-row-line
  170. textarea-focus-border-color := color-orange
  171. textarea-outline-color := color-orange
  172. textarea-placeholder-color := color-light-grey-s
  173. textarea-indicator-color := color-light-grey-s
  175. // validator
  176. validator-msg-def-color := #e64340
  178. // select
  179. select-color := color-grey
  180. select-bgc := color-white
  181. select-disabled-color := #b8b8b8
  182. select-disabled-bgc := color-light-grey-opacity
  183. select-border-color := color-light-grey-s
  184. select-border-active-color := color-orange
  185. select-icon-color := color-light-grey
  186. select-placeholder-color := color-light-grey
  188. // swipe
  189. swipe-btn-color := color-white
  191. // form
  192. form-color := color-grey
  193. form-bgc := color-white
  194. form-invalid-color := #e64340
  195. form-group-legend-color := color-light-grey
  196. form-group-legend-bgc := color-background
  197. form-label-required-color := #e64340
  199. // drawer
  200. drawer-color := color-dark-grey
  201. drawer-title-bdc := color-light-grey-ss
  202. drawer-title-bgc := color-white
  203. drawer-panel-bgc := color-white
  204. drawer-item-active-bgc := color-light-grey-opacity

配置 webpack

如果你的项目是用 vue-cli 生成的，那么找到 build/utils.js 中的 exports.cssLoaders 函数，改成如下：

  1. exports.cssLoaders = function (options) {
  2.   options = options || {}
  4.   const cssLoader = {
  5.     loader: 'css-loader',
  6.     options: {
  7.       minimize: process.env.NODE_ENV === 'production',
  8.       sourceMap: options.sourceMap
  9.     }
  10.   }
  12.   var postcssLoader = {
  13.     loader: 'postcss-loader',
  14.     options: {
  15.       sourceMap: options.sourceMap
  16.     }
  17.   }
  19.   // generate loader string to be used with extract text plugin
  20.   function generateLoaders (loader, loaderOptions) {
  21.     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
  22.     if (loader) {
  23.       loaders.push({
  24.         loader: loader + '-loader',
  25.         options: Object.assign({}, loaderOptions, {
  26.           sourceMap: options.sourceMap
  27.         })
  28.       })
  29.     }
  31.     // Extract CSS when that option is specified
  32.     // (which is the case during production build)
  33.     if (options.extract) {
  34.       return ExtractTextPlugin.extract({
  35.         use: loaders,
  36.         fallback: 'vue-style-loader'
  37.       })
  38.     } else {
  39.       return ['vue-style-loader'].concat(loaders)
  40.     }
  41.   }
  43.   const stylusOptions = {
  44.     'resolve url': true,
  45.     // 这里 新增 import 配置项，指向自定义主题文件
  46.     import: [path.resolve(__dirname, '../src/theme')]
  47.   }
  49.   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  50.   return {
  51.     css: generateLoaders(),
  52.     postcss: generateLoaders(),
  53.     less: generateLoaders('less'),
  54.     sass: generateLoaders('sass', { indentedSyntax: true }),
  55.     scss: generateLoaders('sass'),
  56.     stylus: generateLoaders('stylus',stylusOptions),
  57.     styl: generateLoaders('stylus',stylusOptions)
  58.   }
  59. }

结果

这样修改自定义的主题文件内容，最终编译打包后的样式就是你需要的；而且这样也不存在样式冗余覆盖的问题，因为直接是对组件样式的变量做的修改，而不是采用传统的样式覆盖。

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/theme