https://github.com/innocces/dumi-theme-chakra

build theme use Chakra-UI for dumi2 !!!
https://github.com/innocces/dumi-theme-chakra

chakra chakra-ui component dumi dumi-theme library react theme ui umi

Last synced: 17 days ago
JSON representation

build theme use Chakra-UI for dumi2 !!!

• Host: GitHub
• URL: https://github.com/innocces/dumi-theme-chakra
• Owner: innocces
• License: mit
• Created: 2022-12-06T11:35:07.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-07-22T05:58:00.000Z (over 1 year ago)
• Last Synced: 2025-01-03T03:48:26.601Z (22 days ago)
• Topics: chakra, chakra-ui, component, dumi, dumi-theme, library, react, theme, ui, umi
• Language: TypeScript
• Homepage: https://dumi-theme-chakra.pages.dev/
• Size: 22.6 MB
• Stars: 35
• Watchers: 1
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.CN.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

  

  


  


  

    英文 | 

    中文

  

  









  

  

  

  








  
基于 Chakra-UI 的 dumi2 主题







## Usage

```bash

# npm

$ npm i dumi-theme-chakra -D

# yarn

$ yarn add dumi-theme-chakra -D

# pnpm

$ pnpm add dumi-theme-chakra -D

```

## Configure

在 dumi 的配置文件 `.dumirc.ts` 中配置主题相关

```ts

import { defineConfig } from 'dumi';

import { defineThemeConfig } from 'dumi-theme-chakra';

export defineConfig({

  themeConfig: {

    ...defineThemeConfig({

      // ...

    })

  },

});

```

## Options

```tsx

export type ThemeConfig = DocProviderProps & {

  /**

   * @description.zh-CN 社交配置: 比如 github & discord

   */

  social?: SocialMap;

  /**

   * @description.zh-CN 自动生成的title分隔符: 格式为: ${themeConfig.title} ${helmetIcon} ${subTitle}

   */

  helmetIcon?: string;

  /**

   * @description.zh-CN 自定义header meta 描述信息

   */

  description?: string;

  /**

   * @description.zh-CN 自定义header meta 关键字

   */

  keywords?: string[];

  /**

   * @description.zh-CN 自定义header meta 作者

   */

  author?: string;

  /**

   * @description.zh-CN 是否使用搜索. 若为布尔值则表示开启或关闭. 也可以使用对象来配置更多

   * @default true

   */

  search?: boolean | Search;

  /**

   * @description.zh-CN 文档头部声明条幅配置

   */

  announcementBar?: AnnouncementBarConfig;

  /**

   * @description.zh-CN 首页的hero配置

   */

  hero?: HeroConfig;

  /**

   * @description.zh-CN 文档背景图片. 如果为布尔值, 使用默认背景图片

   * @default false

   */

  thumbBackground?: boolean | string;

  /**

   * @description.zh-CN 是否展示主题设置面板

   * @default false

   */

  settingPanelVisible?: boolean;

  /**

   * @description.zh-CN  组件配置

   */

  code?: {

    /**

     * @description.zh-CN prism themes

     * @default { dark: PRISMTHEME.VSDARK, light: PRISMTHEME.VSLIGHT }

     */

    theme?: CodeTheme;

  };

};

```

详情[查看](./src/types.ts)

## Contribution

查看 [贡献指南](CONTRIBUTING.md).

## License

[MIT](LICENSE).

## Sponsoring