Vue DevUI
主题

主题定制

DevUI Theme是DevUI提供的一个框架无关的通用主题定制方案，内置丰富的主题，并支持自定义主题。

DevUI Theme提供了5种内置主题：

内置主题：

  • 无限主题infinityTheme（默认主题）
  • 紫罗兰主题provenceTheme
  • 蜜糖主题sweetTheme
  • 深邃夜空主题deepTheme
  • 追光主题galaxyTheme

安装 DevUI Theme 

npm i devui-theme

初始化主题 

import { ThemeServiceInit, infinityTheme } from 'devui-theme';
 
// 使用无限主题
ThemeServiceInit({ infinityTheme }, 'infinityTheme');

切换主题 

import { ThemeServiceInit, infinityTheme, galaxyTheme } from 'devui-theme';

import { infinityTheme } from 'devui-theme';
 
// 初始是 infinityTheme 无限主题
const themeService = ThemeServiceInit({ infinityTheme }, 'infinityTheme');
 
// 可以动态切换成 galaxyTheme 追光主题
themeService.applyTheme(galaxyTheme);

自定义主题

可以通过给ThemeServiceInit传参支持自定义主题。

创建自定义主题

可以通过new Theme新建一个主题，并从默认主题里面改变颜色、字号、圆角、阴影值等。

创建一个my-theme.ts文件，写入以下内容：

import { Theme, devuiLightTheme, devuiDarkTheme } from 'devui-theme';
 
export const myLightTheme: Theme = new Theme({
  id: 'my-light-theme',
  name: 'My Light Theme',
  cnName: '我的浅色主题',
  data: Object.assign({}, devuiLightTheme.data, {
    'devui-global-bg': '#ccc',
  }),
  isDark: false,
});
 
export const myDarkTheme: Theme = new Theme({
  id: 'my-dark-theme',
  name: 'My Dark Theme',
  cnName: '我的深色主题',
  data: Object.assign({}, devuiDarkTheme.data, {
    'devui-global-bg': '#333',
  }),
  isDark: true,
});

使用自定义主题

只需要将自定义主题传到ThemeServiceInit的第一个参数即可完成自定义主题的注册。

import { ThemeServiceInit } from 'devui-theme';
import { myLightTheme, myDarkTheme } from './my-theme';
 
ThemeServiceInit(
  {
    'my-light-theme': myLightTheme,
    'my-dark-theme': myDarkTheme,
  },
  'my-light-theme'
);

API



ThemeServiceInit 函数

ThemeServiceInit的函数定义如下：

ThemeServiceInit(
    themes?: {[themeName: string]: Theme},
    defaultThemeName?: string,
    extraData?: {[themeName: string]: {
      appendClasses?: Array<string>,
      cssVariables?: {
        [cssVarName: string]: string
      }
    }},
    ieSupport = true
): ThemeService;
  • themes: 可以用于切换的所有主题 Map 对象，key 值为主题名字，value 为主题类实例。
  • defaultThemeName: 默认主题名字，为 themes 中的一个，在 localStorage 没有指定上一次的主题名字的情况下会使用 defaultThemeName。
  • extraData: 主题的额外数据，用于做三方库兼容，key 值为主题名字， value 为对象，appendClasses 字段指定 body 绑定的类，cssVariables 为主题额外的自定义变量。
  • ieSupport：是否打开 ie 支持，目前使用 css-var-polyfill 方案支持 ie 切换主题。

ThemeServiceInit函数返回一个themeService实例，该实例主要包含以下变量和方法：

  • currentTheme：获取当前主题
  • applyTheme：动态切换主题

Theme 主题类

主题类用来创建自定义主题，主要包含以下属性：

export class Theme {
  id: ThemeId;                    // 主题ID
  name: string;                   // 主题名称
  cnName?: string;                // 主题中文名称
  data: {                         // 主题变量数据
    [cssVarName: string]: string;
  };
  isDark?: boolean;               // 是否是深色主题
}
粤A2-20044005号