自定义主题

11:47

uView Pro 目前可以自定主题色，字体颜色，边框颜色等，所有组件内部的样式，都基于同一套主题，比如您修改了primary主题色，所有用到了primary颜色的组件都会受影响。

教程

可以在打开的颜色拾取器中输入或者选择颜色，再点"确定"按钮即可。
颜色配置完后，在页面底部下载文件，会得到一个名为uview-pro.theme.scss和uview-pro.theme.ts(可选)的文件。

配置 scss 变量

将uview-pro.theme.scss文件复制到项目的公共目录(视情况而定)中，再在项目根目录的uni.scss中引入即可。
删除uni.scss文件中原来引入的@import 'uview-pro/theme.scss';(旧的内置主题文件引入语句)。
重新编译项目或者重启编辑器即可生效。

配置 ts 变量

将uview-pro.theme.ts文件复制到项目的公共目录(视情况而定)中，再在项目根目录的main.ts中引入即可，如下：
重新编译项目即可生效。

引入方式：

import { createSSRApp } from 'vue'
import App from './App.vue'
import theme from '@/common/uview-pro.theme'
import uViewPro from 'uview-pro'

export function createApp() {
  const app = createSSRApp(App)
  // 引入uView Pro 主库，及theme主题
  app.use(uViewPro, { theme })
  return {
    app
  }
}

如何使用

在 scss 中使用：

html

<style lang="scss" scoped>
	.title{
		color: $u-type-primary;
	}
</style>

在 ts 中使用：

import { ref, onMounted } from 'vue';

const color = ref('');

onMounted(() => {
  color.value = uni.$u.color['primary'];
});

两者的主题即可同步！

主题色

目前有五个主题色，每个主题色又分别有对应的`light`(淡色)、`dark`(深色)、`disabled`(禁止状态时的颜色)：

primary

#2979ff

success

#19be6b

error

#fa3534

warning

#ff9900

info

#909399

primary-dark

#2b85e4

success-dark

#18b566

error-dark

#dd6161

warning-dark

#f29100

info-dark

#82848a

primary-disabled

#a0cfff

success-disabled

#71d5a1

error-disabled

#fab6b6

warning-disabled

#fcbd71

info-disabled

#c8c9cc

primary-light

#ecf5ff

success-light

#dbf1e1

error-light

#fef0f0

warning-light

#fdf6ec

info-light

#f4f4f5

文字颜色

内置的文字颜色有：主要文字、常规文字，次要文字、占位文字颜色，如需更详细的，详见：Color 色彩章节。

main-color

#303133

content-color

#606266

tips-color

#909399

light-color

#c0c4cc

边框颜色

uView Pro 所有组件边框相关的(特别说明的除外)，用的都是这一个颜色。

border-color

#e4e7ed

背景颜色

这个颜色是 uView Pro 推荐的背景色，目前内置组件中使用的场景不多。

bg-color

#f3f4f6

Input 边框颜色

此颜色用于在`u-input`组件显示边框时的边框颜色。

form-item-border-color

#dcdfe6

自定义主题 ​

教程 ​

配置 scss 变量 ​

配置 ts 变量 ​

如何使用 ​

主题色