主题

<gem-book> 元素提供了主题的 API,可以非常方便的来自定义主题。

默认主题

export const defaultTheme = { font: '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif', codeFont: 'Source Code Pro, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace', sidebarWidthSmall: '270px', sidebarWidth: '304px', maxMainWidth: '52rem', headerHeight: '56px', normalRound: '0.5rem', smallRound: '0.25rem', backgroundColor: 'white', borderColor: '#eaeaea', textColor: 'rgb(40, 44, 52)', primaryColor: 'rgb(38, 192, 227)', noteColor: 'rgb(9, 105, 218)', tipColor: 'rgb(26, 127, 55)', importantColor: 'rgb(130, 80, 223)', warningColor: 'rgb(154, 103, 0)', cautionColor: 'rgb(209, 36, 47)', };

自定义主题

可以直接使用命令行参数提供 JSON/CommonJS/ESM 格式的主题文件路径或者内置主题名称:

gem-book docs --theme path/my-theme.mjs gem-book docs --theme dark

当然,你也可以在直接使用 <gem-book> 的 DOM API 设置主题。

new GemBookElement(config, theme);html`<gem-book .config=${config} .theme=${theme}></gem-book>`;