定制主题
具体使用
找到工程根目录 theme.less
文件,将以下要修改的变量字段复制到 theme.less
文件中,并且自定义修改相对应的变量值。
@hd: 1px;
@color-text-base: #000; @color-text-base-inverse: #fff; @color-text-secondary: #a4a9b0; @color-text-placeholder: #bbb; @color-text-disabled: #bbb; @color-text-caption: #888; @color-text-paragraph: #333; @color-link: @brand-primary;
@fill-base: #fff; @fill-body: #f5f5f9; @fill-tap: #ddd; @fill-disabled: #ddd; @fill-mask: rgba(0, 0, 0, 0.4); @color-icon-base: #ccc; @fill-grey: #f7f7f7;
@opacity-disabled: 0.3;
@brand-primary: #108ee9; @brand-primary-tap: #0e80d2; @brand-success: #6abf47; @brand-warning: #ffc600; @brand-error: #f4333c; @brand-important: #ff5b05; @brand-wait: #108ee9;
@border-color-base: #ddd;
@font-size-icontext: 10 * @hd; @font-size-caption-sm: 12 * @hd; @font-size-base: 14 * @hd; @font-size-subhead: 15 * @hd; @font-size-caption: 16 * @hd; @font-size-heading: 17 * @hd;
@radius-xs: 2 * @hd; @radius-sm: 3 * @hd; @radius-md: 5 * @hd; @radius-lg: 7 * @hd; @radius-circle: 50%;
@border-width-sm: 1PX; @border-width-md: 1PX; @border-width-lg: 2 * @hd;
@h-spacing-sm: 5 * @hd; @h-spacing-md: 8 * @hd; @h-spacing-lg: 15 * @hd;
@v-spacing-xs: 3 * @hd; @v-spacing-sm: 6 * @hd; @v-spacing-md: 9 * @hd; @v-spacing-lg: 15 * @hd; @v-spacing-xl: 21 * @hd;
@line-height-base: 1; @line-height-paragraph: 1.5;
@icon-size-xxs: 15 * @hd; @icon-size-xs: 18 * @hd; @icon-size-sm: 21 * @hd; @icon-size-md: 22 * @hd; @icon-size-lg: 36 * @hd;
@ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
@actionsheet-item-height: 50 * @hd; @actionsheet-item-font-size: 18 * @hd;
@button-height: 47 * @hd; @button-font-size: 18 * @hd;
@button-height-sm: 30 * @hd; @button-font-size-sm: 13 * @hd;
@primary-button-fill: @brand-primary; @primary-button-fill-tap: @brand-primary-tap;
@ghost-button-color: @brand-primary; @ghost-button-fill-tap: fade(@brand-primary, 60%);
@warning-button-fill: #e94f4f; @warning-button-fill-tap: #d24747;
@link-button-fill-tap: #ddd; @link-button-font-size: 16 * @hd;
@menu-multi-select-btns-height: @button-height;
@modal-font-size-heading: 18 * @hd; @modal-button-font-size: 18 * @hd; @modal-button-height: 50 * @hd;
@list-title-height: 30 * @hd; @list-item-height-sm: 35 * @hd; @list-item-height: 44 * @hd;
@input-label-width: 17 * @hd; @input-font-size: 17 * @hd; @input-color-icon: #ccc; @input-color-icon-tap: @brand-primary;
@tabs-color: @brand-primary; @tabs-height: 43.5 * @hd; @tabs-font-size-heading: 15 * @hd; @tabs-ink-bar-height: @border-width-lg;
@segmented-control-color: @brand-primary; @segmented-control-height: 27 * @hd; @segmented-control-fill-tap: fade(@brand-primary, 0.1);
@tab-bar-fill: #ebeeef; @tab-bar-height: 50 * @hd;
@toast-fill: rgba(58, 58, 58, 0.9);
@search-bar-fill: #efeff4; @search-bar-height: 44 * @hd; @search-bar-input-height: 28 * @hd; @search-bar-font-size: 15 * @hd; @search-color-icon: #bbb;
@notice-bar-fill: #fefcec; @notice-bar-height: 36 * @hd; @notice-bar-color: #f76a24;
@switch-fill: #4dd865; @switch-fill-android: @brand-primary;
@tag-height: 25 * @hd; @tag-height-sm: 15 * @hd; @tag-color: @brand-primary;
@keyboard-confirm-color: @brand-primary; @keyboard-confirm-tap-color: @brand-primary-tap;
@option-height: 42 * @hd;
@progress-zindex: 2000; @popover-zindex: 1999; @toast-zindex: 1999; @action-sheet-zindex: 1000; @picker-zindex: 1000; @popup-zindex: 999; @modal-zindex: 999; @tabs-pagination-zindex: 999;
|