The <gem-book> element provides the theme API, which can be very convenient to customize the theme.
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)',
};
You can directly use the cli options to provide the theme file path in json/CommonJs format or build-in theme name:
gem-book docs --theme path/my-theme.mjs
gem-book docs --theme darkOf course, you can also set the theme directly using the DOM API of <gem-book>.
new GemBookElement(config, theme);html`<gem-book .config=${config} .theme=${theme}></gem-book>`; 