Tome

https://www.tome.center/docs
Admin
Tome is an open-source documentation platform that transforms Markdown and MDX files into beautiful,...
Tokens:3,176
Snippets:40
Trust Score:4.5
Update:6 months ago
Show doc for...
Tokens:
Raw
### Configure Search and Announcements

Source: https://www.tome.center/docs/configuration

Enables integration with external search providers like Algolia and manages the display of site-wide announcement banners. Banners can be configured with links and dismissible states.

```javascript
search: {
  provider: "algolia",
  appId: "YOUR_APP_ID",
  apiKey: "YOUR_SEARCH_KEY",
  indexName: "your-index",
},
banner: {
  text: "v2.0 is now available!",
  link: "/changelog",
  dismissible: true,
};
```

--------------------------------

### Tome Center Project Configuration (JavaScript)

Source: https://www.tome.center/docs/configuration

The main configuration object for the Tome Center project. It defines site name, logo, base URL, theme settings (preset, accent color, mode), navigation structure, top navigation links, search provider, a dismissible banner, and math rendering enablement. This object is typically exported from a configuration file.

```javascript
export default {
  name: "Acme Docs",
  logo: "/acme-logo.svg",
  favicon: "/favicon.ico",
  baseUrl: "https://docs.acme.com",
  theme: {
    preset: "editorial",
    accent: "#2563eb",
    mode: "auto",
  },
  navigation: [
    { group: "Overview", pages: ["index", "quickstart"] },
    { group: "Guides", pages: ["guides/auth", "guides/deploy"] },
    { group: "API", pages: ["api/rest", "api/webhooks"] },
  ],
  topNav: [
    { label: "Changelog", href: "/changelog" },
  ],
  search: { provider: "local" },
  banner: {
    text: "v2.0 is now available!",
    link: "/changelog",
    dismissible: true,
  },
  math: true,
};

```

--------------------------------

### Customize Theme and Appearance

Source: https://www.tome.center/docs/configuration

Configures visual aspects of the site including color presets, accent colors, and typography. The theme object allows for fine-grained control over the site's aesthetic.

```javascript
theme: {
  preset: "editorial",
  accent: "#ff6b4a",
  mode: "auto",
  fonts: {
    heading: "Playfair Display",
    body: "Source Sans Pro",
    code: "Fira Code",
  },
};
```

--------------------------------

### Enable Advanced Rendering Features

Source: https://www.tome.center/docs/configuration

Toggles support for advanced content rendering, such as math notation in Markdown files. This setting enables KaTeX rendering for inline and block-level mathematical expressions.

```javascript
math: true;
```

--------------------------------

### Configure Tome Site Metadata and Navigation

Source: https://www.tome.center/docs/configuration

Defines the site's identity, including name, logo, and base URL, alongside the sidebar navigation structure. Navigation supports grouping and nested hierarchies to organize documentation pages effectively.

```javascript
export default {
  name: "My Docs",
  logo: "/logo.svg",
  favicon: "/favicon.ico",
  baseUrl: "https://docs.example.com",
  navigation: [
    {
      group: "SDK",
      pages: [
        "sdk/overview",
        {
          group: "Languages",
          pages: ["sdk/javascript", "sdk/python", "sdk/go"],
        },
      ],
    },
  ]
};
```

--------------------------------

### Apply Theme Presets in JavaScript

Source: https://www.tome.center/docs/theming

Demonstrates how to apply one of the four built-in theme presets (Amber, Editorial, Cipher, Mint) by configuring the 'preset' option in the theme settings.

```javascript
theme: {
  preset: "amber",
}
```

```javascript
theme: {
  preset: "editorial",
}
```

```javascript
theme: {
  preset: "cipher",
}
```

```javascript
theme: {
  preset: "mint",
}
```

--------------------------------

### Control Dark Mode Settings in JavaScript

Source: https://www.tome.center/docs/theming

Explains how to manage the color scheme for dark mode. Options include 'auto' (system preference), 'light' (always light), and 'dark' (always dark).

```javascript
theme: {
  mode: "auto", // Follows system preference (default)
  // mode: "light", // Always light
  // mode: "dark", // Always dark
}
```

--------------------------------

### Set Theme Preset - YAML

Source: https://www.tome.center/docs/theming

Configure the visual theme of your Tome site by selecting one of the available presets. This is a fundamental step in customizing the site's aesthetic.

```yaml
theme:
  preset: "amber"
```

```yaml
theme:
  preset: "editorial"
```

```yaml
theme:
  preset: "cipher"
```

```yaml
theme:
  preset: "mint"
```

--------------------------------

### Set Border Radius in JavaScript

Source: https://www.tome.center/docs/theming

Demonstrates how to control the border radius for UI elements in pixels. The default value varies depending on the selected theme preset.

```javascript
theme: {
  radius: 8, // pixels, default varies by preset
}
```

--------------------------------

### Customize Accent Color in JavaScript

Source: https://www.tome.center/docs/theming

Shows how to override the default accent color for a theme preset using a hex color value. Tome automatically generates tint and dim variants.

```javascript
theme: {
  preset: "amber",
  accent: "#2563eb", // Blue accent
}
```

--------------------------------

### Override Font Families in JavaScript

Source: https://www.tome.center/docs/theming

Illustrates how to specify custom font families for headings, body text, and code. Ensure fonts are loaded via HTML or self-hosted.

```javascript
theme: {
  fonts: {
    heading: "Playfair Display",
    body: "Inter",
    code: "JetBrains Mono",
  },
}
```

--------------------------------

### Control Dark Mode - YAML

Source: https://www.tome.center/docs/theming

Manage the color scheme of your Tome site. Options include following system preference, always using light mode, or always using dark mode.

```yaml
theme:
  mode: "auto"
```

```yaml
theme:
  mode: "light"
```

```yaml
theme:
  mode: "dark"
```

--------------------------------

### Set Custom Fonts - YAML

Source: https://www.tome.center/docs/theming

Specify custom font families for headings, body text, and code in your Tome site. Ensure the fonts are loaded via `index.html` or self-hosted.

```yaml
theme:
  fonts:
    heading: "Playfair Display"
    body: "Inter"
    code: "JetBrains Mono"
```

--------------------------------

### Override CSS Variables - HTML/CSS

Source: https://www.tome.center/docs/theming

For granular control over styling, override Tome's default CSS variables within a `<style>` block in your `index.html`. This allows direct manipulation of colors, fonts, and backgrounds.

```html
<style>
  :root {
    --ac: #2563eb;      /* Accent */
    --acD: #dbeafe;     /* Accent dim */
    --acT: #1e40af;     /* Accent hover */
    --bg: #ffffff;      /* Background */
    --sf: #f8f8f6;      /* Surface */
    --sfH: #f0efe8;     /* Surface hover */
    --tx: #1a1a1a;      /* Text primary */
    --tx2: #666;        /* Text secondary */
    --txM: #999;        /* Text muted */
    --bd: #e5e5e0;      /* Border */
    --cdBg: #f5f5f0;    /* Code background */
    --cdTx: #333;       /* Code text */
    --sbBg: #fafaf8;    /* Sidebar background */
    --hdBg: #ffffff;    /* Header background */
  }
</style>
```

--------------------------------

### Set Border Radius - YAML

Source: https://www.tome.center/docs/theming

Adjust the roundness of UI elements across your Tome site by setting a pixel value for the border radius.

```yaml
theme:
  radius: 8
```

--------------------------------

### Set Custom Accent Color - YAML

Source: https://www.tome.center/docs/theming

Override the default accent color for your Tome site. This allows for brand consistency or personal preference by specifying a hex color value.

```yaml
theme:
  preset: "amber"
  accent: "#2563eb"
```
Tokens:
Raw