docz-theme-umi
The umi theme of docz.
Sorting your documents
You can sort your documents by setting the order
property in *.mdx
.
---name: BarComonentsubName: Bar Componentroute: /barorder: 1---
Also, you can group your documents by setting the menu
property.
---name: FooComonentsubName: Foo Componentroute: /foomenu: Basic UsagemenuOrder: 1---
---name: AdvanceFooComonentsubName: Advanced Foo Componentroute: /foo-advancemenu: Advanced UsagemenuOrder: 2---
By sorting multiple documents and menus, order
is prior to menuOrder
.
Changing your logo
Use your own logo by changing the logo
property:
// doczrc.js themeConfig: logo: src: '/path/of/my/logo' width: 150
Changing playground theme
If you want to customize <Playground>
theme, you just need to import the css of your codemirror theme and change the codemirrorTheme
to use your theme. One of ways to import a new css without pain, is add new link on htmlContext
:
// doczrc.js htmlContext: head: links: rel: 'stylesheet' href: 'https://codemirror.net/theme/dracula.css' themeConfig: codemirrorTheme: 'dracula'
themeConfig
Default As explained on Customizing section of docz website, you can customize the theme that you're using by changing themeConfig
property on your doczrc.js
. So, each theme has your own specific configuration and for this theme, is that the default config and what you can change:
const config = /** * Mode */ mode: 'light' // you can use: 'dark' or 'light' /** * Show/hide Playground editor by default */ showPlaygroundEditor: true /** * Set the numbers of max lines before scroll editor */ linesToScrollEditor: 14 /** * Customize codemirror theme */ codemirrorTheme: 'docz-light' /** * Logo */ logo: src: null width: null /** * Radius */ radii: '4px' /** * Colors (depends on select mode) */ colors: white: '#FFFFFF' grayExtraLight: '#EEF1F5' grayLight: '#CED4DE' gray: '#7D899C' grayDark: '#2D3747' grayExtraDark: '#1D2330' dark: '#13161F' blue: '#0B5FFF' skyBlue: '#1FB6FF' /** properties bellow depends on mode select */ primary: colorsblue text: colorsgrayDark link: colorsblue footerText: colorsgrayDark sidebarBg: colorsgrayExtraLight sidebarText: colorsdark sidebarHighlight: null sidebarBorder: colorsgrayLight background: colorswhite border: colorsgrayLight theadColor: colorsgray theadBg: colorsgrayExtraLight tableColor: colorsdark codeBg: codeColor: colorsgray preBg: colorsgrayExtraLight blockquoteBg: colorsgrayExtraLight blockquoteBorder: colorsgrayLight blockquoteColor: colorsgray /** * Styles */ styles: body: css` font-family: ; font-size: 16px; line-height: 1.6; ` h1: css` margin: 40px 0 20px; font-family: ; font-size: 48px; font-weight: 500; letter-spacing: -0.02em; ` h2: css` margin: 30px 0 20px; line-height: 1.4em; font-family: ; font-weight: 500; font-size: 28px; letter-spacing: -0.02em; ` h3: css` margin: 25px 0 10px; font-size: 20px; font-weight: 400; ` h4: css` margin: 25px 0 10px; font-size: 16px; font-weight: 400; ` h5: css` margin: 20px 0 10px; font-size: 16px; font-weight: 400; ` h6: css` margin: 20px 0 10px; font-size: 16px; font-weight: 400; text-transform: uppercase; ` ol: css` padding: 0; margin: 10px 0 10px; ` ul: css` padding: 0; margin: 10px 0 10px; ` playground: css` padding: 40px; ` code: css` margin: 0 3px; border-radius: 3px; font-family: ; padding: 2px 5px; font-size: 0.8em; border: '1px solid rgba(0, 0, 0, 0.02)'; ` pre: css` font-family: ; font-size: 14px; line-height: 1.8; ` paragraph: css` margin: 10px 0 20px 0; ` table: css` overflow-y: hidden; width: 100%; font-family: ; font-size: 14px; overflow-x: initial; display: block; ` blockquote: css` margin: 25px 0; padding: 20px; font-style: italic; font-size: 16px; `