Theme

The colors, fonts and sizes of the website are defined by the theme.

Default 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)',
};

Custom theme

Use the config theme to provide the name of a built-in theme or the path of a theme file in JSON format or a module that default exports the theme, the theme only needs to contain the values to be modified:

{
  "theme": "dark"
}

/**
 * @type {Partial<import('gem-book/plugin').Theme>}
 */
export default {
  backgroundColor: '#1a1a1a',
  borderColor: 'rgb(41, 41, 41)',
  textColor: 'rgb(240, 240, 240)',
};

CSS variables

The theme is defined as CSS variables on :root, for example primaryColor is --gem-book-primary-color, you can also modify them with CSS on specific pages, for example using <gbp-content>:

<gbp-content>
  <style>
    :root {
      --gem-book-primary-color: tomato;
    }
  </style>
</gbp-content>