主题

Pure Ui 支持设置主题的组件，遵循以下规则：

设置主题

通过 theme 属性设置主题，支持内置主题和扩展主题。

内置主题

主题名称	说明
primary	主要，用于主要操作，如提交、确认等。
success	成功，用于表示操作成功，如提交成功、确认成功等。
warning	警告，用于表示警告，如删除、取消等。
danger	危险，用于表示危险操作，如删除、取消等。
info	信息，用于展示信息，如查看详情、了解更多等。

扩展主题

1. 通过按照 Pure Ui 内置主题命名格式 --pure-theme-${自定义主题名称} 的方式进行扩展。

通过此种方式扩展定义好主题后，可以通过 theme=${自定义主题名称} 的方式使用。

示例

<style lang="scss">
page {
	// 扩展主题
	--pure-theme-haha: #ff9900;
	--pure-theme-heihei: #0099ff;
	--pure-theme-hoho: #ff0000;
}
</style>

<template>
	<!-- 使用扩展主题 -->
	<pure-button text="扩展主题" theme="haha" />
	<pure-button text="扩展主题" theme="heihei" />
	<pure-button text="扩展主题" theme="hoho" />
</template>

2. 通过自定义主题变量的方式进行扩展。

示例

<style lang="scss">
page {
	// 扩展主题
	--my-theme-haha: #ff9900;
	--my-theme-heihei: #0099ff;
	--my-theme-hoho: #ff0000;
}
</style>

<template>
	<!-- 使用扩展主题 -->
	<pure-button text="扩展主题" theme="--my-theme-haha" />
	<pure-button text="扩展主题" theme="--my-theme-heihei" />
	<pure-button text="扩展主题" theme="--my-theme-hoho" />
</template>