<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>`;