devui-theme v0.0.7

主题定制

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

DevUI Theme提供了4种内置主题+5种扩展主题：

内置主题：

• 浅色主题devuiLightTheme（默认主题，DevUI蓝主题）
• 深色主题devuiDarkTheme
• 绿色主题devuiGreenTheme

• 绿色深色主题devuiGreenDarkTheme

扩展主题：

• 无限主题infinityTheme
• 紫罗兰主题provenceTheme
• 蜜糖主题sweetTheme
• 深邃夜空主题deepTheme

• 追光主题galaxyTheme

安装 DevUI Theme

npm i devui-theme

初始化主题

import { ThemeServiceInit, devuiDarkTheme } from 'devui-theme';
 
// 使用深色主题
ThemeServiceInit({ devuiDarkTheme }, 'devuiDarkTheme');

切换主题

import { ThemeServiceInit, devuiDarkTheme } from 'devui-theme';

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

自定义主题

可以通过给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