dumi-theme-flex

English | Chinese

Chakra theme for dumi2

Usage

# npm
$ npm i dumi-theme-flex -D
# yarn
$ yarn add dumi-theme-flex -D
# pnpm
$ pnpm add dumi-theme-flex -D

Configure

configure it in dumi config file .dumirc.ts:

import { defineConfig } from 'dumi';
import { defineThemeConfig } from 'dumi-theme-flex';

export defineConfig({
  themeConfig: {
    ...defineThemeConfig({
      // ...
    })
  },
});

Options

export type ThemeConfig = DocProviderProps & {
  /**
   * @description socails config: like github & discord
   */
  social?: SocialMap;
  /**
   * @description splitor of helmet generate word: ${themeConfig.title} ${helmetIcon} ${subTitle}
   */
  helmetIcon?: string;
  /**
   * @description head meta description
   */
  description?: string;
  /**
   * @description head meta keywords
   */
  keywords?: string[];
  /**
   * @description head meta author
   */
  author?: string;
  /**
   * @description whether use search feature, when boolean, open or close. use object to config more
   * @default true
   */
  search?: boolean | Search;
  /**
   * @description announcementBar of top container setting
   */
  announcementBar?: AnnouncementBarConfig;
  /**
   * @description hero setting for homepage
   */
  hero?: HeroConfig;
  /**
   * @description doc body background image. if boolean. use default background image
   * @default false
   */
  thumbBackground?: boolean | string;
  /**
   * @description setting panel visiblity
   * @default false
   */
  settingPanelVisible?: boolean;
  /**
   * @description <SourceCode /> setting
   */
  code?: {
    /**
     * @description prism themes
     * @default { dark: PRISMTHEME.VSDARK, light: PRISMTHEME.VSLIGHT }
     */
    theme?: CodeTheme;
  };
  /**
   * hd solution configurations
   * @note  base on https://github.com/umijs/umi-hd
   */
  hd?: {
    rules: {
      minWidth?: number;
      maxWidth?: number;
      mode: 'vl' | 'flex' | 'vw' | 'vh';
      options?: number | [number, number];
    }[];
  };
  /**
   * set device width in desktop
   */
  deviceWidth?: number;
};

to learn more, see

Contribution

See Contributing Guide.

License

MIT.

Sponsoring