主题

网站的颜色、字体和尺寸等由主题定义。

默认主题

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

自定义主题

使用配置 theme 提供内置主题的名称，或者 JSON 格式的主题文件、默认导出主题的模块的路径，主题只需要包含要修改的值：

{
  "theme": "dark"
}

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

CSS 变量

主题以 CSS 变量的形式定义在 :root 上，例如 primaryColor 是 --gem-book-primary-color，也可以在特定页面中使用 CSS 修改它们，例如使用 <gbp-content>：

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