颜色

得益于 ant design 色彩设计体系，stepin template 可以根据规则生成一套平衡了可读性、美感以及可用性的衍生色。

主题色

系统主题色可以自由定义，它主要用一些组件及功能性文本上。点击下面的拾色器，可以看到面板底部内置的推荐颜色：

#0ea5e9

使用 setPrimaryColor 设置主题色

vue

<script lang="ts" setup>
import { useThemeStore } from 'stepin/es/theme-provider';

const { setPrimaryColor } = useThemeStore();
setPrimaryColor({DEFAULT: '#3B82F6'});
</script>

使用 ThemeProvider 组件配置主题：

vue

<template>
  <ThemeProvider :color="{ primary: { DEFAULT: '#3B82F6'}}">
    <stepin-view>...</stepin-view>
  </ThemeProvider>
</template>
<script lang="ts" setup>
  import { ThemeProvider } from 'stepin/es/theme-provider'
</script>

根据主色，系统还会自动生成一系列衍生色，方便使用：

#0ea5e9

如果想对主色衍生色做定制，一样使用 setPrimaryColor 设置即可：

import { useThemeStore } from 'stepin/es/theme-provider';

const { setPrimaryColor } = useThemeStore();
setPrimaryColor({
  'DEFAULT': string;            // 主色默认色
  'bg': string;                 // 主色衍生背景色
  'bg-hover': string;           // 主色衍生悬浮色
  'border': string;             // 主色衍生边框色
  'border-hover': string;       // 主色衍生悬浮边框色
  'hover': string;              // 主色衍生悬浮色
  'active': string;             // 主色衍生激活色
  'text': string;               // 主色衍生文本色
  'text-hover': string;         // 主色衍生文本悬浮色
  'text-active': string;        // 主色衍生文本激活色
});

使用 ThemeProvider 定制

vue

<template>
  <ThemeProvider :color="{
    primary: {
      bg: '#3B82F6',
      'bg-hover': '#3B82F6',
      border: '#3B82F6',
    }
  }">
    <stepin-view>...</stepin-view> 
  </ThemeProvider>
</template>
<script lang="ts" setup>
  import { ThemeProvider } from 'stepin/es/theme-provider'
</script>

文本色文本激活色边框色背景色

使用示例

这些颜色都集成到 tailwindcss 主题中了，可以很方便的使用。详细可以查看 tailwindcss 变量对照表

显示代码复制代码

<button class="bg-primary text-text-inverse px-2 py-[2px] rounded">默认色</button>
<span class="text-primary-text hover:text-primary-text-hover font-bold ml-2">文本色</span>
<span class="text-primary-text-active ml-2 font-bold">文本激活色</span>
<span class="p-1 border border-solid border-primary-border hover:border-primary-border-hover ml-2">边框色</span>
<span class="bg-primary-bg inline-block p-1 hover:bg-primary-bg-hover ml-2">背景色</span>

功能色

功能色分为四种：信息色、警告色、错误色、成功色。它们的用法和主色用法基本一致：

信息色:

#0ea5e9

警告色:

#f97316

成功色:

#10ba81

错误色:

#ef4343

可以通过 setFunctionalColor 设置功能色：

import { useThemeStore } from 'stepin/es/theme-provider';

const { setFunctionalColor } = useThemeStore();
// 设置信息色默认色，自动生成衍生色
setFunctionalColor('info', {DEFAULT: '#0ea5e9'});
// 设置警告色默认色，自动生成衍生色
setFunctionalColor('warning', {DEFAULT: '#f97316'});
// 设置成功色默认色，自动生成衍生色
setFunctionalColor('success', {DEFAULT: '#10ba81'});
// 设置错误色默认色，自动生成衍生色
setFunctionalColor('error', {DEFAULT: '#ef4343'});

使用 ThemeProvider 定制：

vue

<template>
  <ThemeProvider :color="{
    info: { DEFAULT: '#0ea5e9'},
    warning: { DEFAULT: '#f97316'},
  }">
    <stepin-view>...</stepin-view> 
  </ThemeProvider>
</template>
<script lang="ts" setup>
  import { ThemeProvider } from 'stepin/es/theme-provider'
</script>

功能色的衍生色也可以自由定制：

import { useThemeStore } from 'stepin/es/theme-provider';

const { setFunctionalColor } = useThemeStore();
setFunctionalColor(
  type: 'info' | 'warning' | 'success' | 'error', // 功能色类型
  {
    'DEFAULT': string;                            // 功能色默认色
    'bg': string;                                 // 功能色衍生背景色
    'bg-hover': string;                           // 功能色衍生悬浮色
    'border': string;                             // 功能色衍生边框色
    'border-hover': string;                       // 功能色衍生悬浮边框色
    'hover': string;                              // 功能色衍生悬浮色
    'active': string;                             // 功能色衍生激活色
    'text': string;                               // 功能色衍生文本色
    'text-hover': string;                         // 功能色衍生文本悬浮色
    'text-active': string;                        // 功能色衍生文本激活色
  }
);

使用 ThemeProvider 定制：

vue

<template>
  <ThemeProvider :color="{
    info: {
      bg: '#3B82F6',
      'bg-hover': '#3B82F6',
      border: '#3B82F6',
    },
    warning: {
      bg: '#3B82F6',
      'bg-hover': '#3B82F6',
      border: '#3B82F6',
    }
  }">
    <stepin-view>...</stepin-view> 
  </ThemeProvider>
</template>
<script lang="ts" setup>
  import { ThemeProvider } from 'stepin/es/theme-provider'
</script>

文本色

文本色可细分为：一级文本色、二级文本色、三级文本色和四级文本色，它们由文本基色生成，可运用于不同的场景需求。

亮色背景文本基色：

#000

名称	颜色	色值
一级文本色		rgba(0, 0, 0, 0.85)
二级文本色		rgba(0, 0, 0, 0.65)
三级文本色		rgba(0, 0, 0, 0.45)
四级文本色		rgba(0, 0, 0, 0.25)

暗色背景文本基色：

#fff

名称	颜色	色值
一级文本色		rgb(255, 255, 255)
二级文本色		rgba(255, 255, 255, 0.85)
三级文本色		rgba(255, 255, 255, 0.65)
四级文本色		rgba(255, 255, 255, 0.45)

TIP

当你使用 stepin 主题 api 设置背景色时，文本色会自动适配。

INFO 文本衍生色

当设置文本色时，系统还会生成一系列文本色衍生色，如边框色和填充色等，供更多场景使用。详情可查看 tailwindcss 与 css变量

文本衍生色也可以自由定义：

import { useThemeStore } from 'stepin/es/theme-provider';

const { setTextSeriesColors } = useThemeStore();
setTextSeriesColors({
  'text-base': string;        // 文本基色
  'text': string;             // 默认文本色
  'text-1': string;           // 一级文本色
  'text-2': string;           // 一级文本色
  'text-3': string;           // 一级文本色
  'text-4': string;           // 一级文本色
  'subtext': string;          // 次级文本色
  'text-disabled': string;    // 禁用文本色
  'fill': string;             // 默认填充色
  'fill-1': string;           // 一级填充色
  'fill-2': string;           // 二级填充色
  'fill-3': string;           // 三级填充色
  'fill-4': string;           // 四级填充色
  'shadow': string;           // 阴影色
  'shadow-light': string;     // 阴影色淡
  'border': string;           // 默认边框色
  'border-1': string;         // 一级边框色
  'border-2': string;         // 二级边框色
})

使用 ThemeProvider 定制：

vue

<template>
  <ThemeProvider :color="{
    middle: {
      'text-base': '#fff',
      'text-disabled': '#9a9a9a',
    }
  }">
    <stepin-view>...</stepin-view> 
  </ThemeProvider>
</template>
<script lang="ts" setup>
  import { ThemeProvider } from 'stepin/es/theme-provider'
</script>

背景色

背景色可分为：布局背景色、容器背景色、菜单背景色以及浮窗背景色。只需设置背景基色，其它的衍生背景色将自动生成。

#fff

名称	颜色	色值
布局背景色		#f5f5f5
容器背景色		#fff
浮窗背景色		#fff

背景色有一系列衍生色，全部可自由定义：

import { useThemeStore } from 'stepin/es/theme-provider';

const { setBgSeriesColors } = useThemeStore();
setBgSeriesColors({
  'bg-base': string;              // 背景基色
  'bg-layout': string;            // 布局背景色
  'bg-container': string;         // 容器背景色
  'bg-container-light': string;   // 容器次级背景色
  'bg-popover': string;           // 浮窗背景色
  'bg-spotlight': string;         // 关注背景色
  'bg-mask': string;              // 遮罩背景色
  'bg-hover': string;             // 悬浮背景色
  'bg-disabled': string;          // 禁用背景色
  'bg-side': string;              // 侧边背景色
  'bg-header': string;            // 顶部背景色
  'bg-menu': string;              // 菜单背景色
  'bg-submenu': string;           // 子级菜单背景色
})

使用 ThemeProvider 定制：

vue

<template>
  <ThemeProvider :color="{
    middle: {
      'bg-base': '#000',
      'bg-disabled': '#9a9a9a',
    }
  }">
    <stepin-view>...</stepin-view> 
  </ThemeProvider>
</template>
<script lang="ts" setup>
  import { ThemeProvider } from 'stepin/es/theme-provider'
</script>

颜色 ​

主题色 ​

使用示例

功能色 ​

文本色 ​

背景色 ​

颜色

主题色

功能色

文本色

背景色