---
title: Theming
description: Customize colors, fonts, and styling for your documentation site.
icon: palette
---

# Theming

Syntext sites are customizable to match your brand. This guide covers colors, fonts, and advanced styling options.

## Brand Colors

Set your primary brand color in `syntext.json`:

```json
{
  "colors": {
    "primary": "#6366F1"
  }
}
```

The primary color is used for:
- Links
- Buttons
- Focus rings
- Active navigation items
- Code syntax accents

### Additional Colors

```json
{
  "colors": {
    "primary": "#6366F1",
    "accent": "#2AC3DE",
    "background": "#0F172A"
  }
}
```

| Property | Description |
|----------|-------------|
| `primary` | Main brand color |
| `accent` | Secondary accent for highlights |
| `background` | Page background (dark mode) |

## Dark Mode

Syntext is dark-first by design. Users can toggle between modes, and their preference is saved.

Configure default mode:

```json
{
  "theme": {
    "defaultMode": "dark"
  }
}
```

Options: `"dark"`, `"light"`, `"system"` (follows OS preference).

## Typography

### Default Fonts

Syntext uses a carefully selected font stack:

| Role | Font |
|------|------|
| Headings | Space Grotesk |
| Body | Inter |
| Code | JetBrains Mono |

### Custom Fonts

Override with Google Fonts:

```json
{
  "fonts": {
    "heading": "Plus Jakarta Sans",
    "body": "Nunito Sans",
    "mono": "Fira Code"
  }
}
```

Or use local fonts:

```json
{
  "fonts": {
    "heading": {
      "family": "CustomFont",
      "src": "/fonts/CustomFont.woff2"
    }
  }
}
```

## Logo

Add your logo for light and dark modes:

```json
{
  "logo": {
    "light": "/logo-light.svg",
    "dark": "/logo-dark.svg"
  }
}
```

Place logo files in your `public/` directory.

For a single logo that works on both backgrounds:

```json
{
  "logo": "/logo.svg"
}
```

## Favicon

```json
{
  "favicon": "/favicon.ico"
}
```

Or use multiple sizes:

```json
{
  "favicon": {
    "default": "/favicon.ico",
    "apple": "/apple-touch-icon.png",
    "32": "/favicon-32x32.png",
    "16": "/favicon-16x16.png"
  }
}
```

## Code Theme

Customize syntax highlighting colors:

```json
{
  "codeTheme": "one-dark-pro"
}
```

Available themes:
- `one-dark-pro` (default)
- `github-dark`
- `dracula`
- `nord`
- `monokai`
- `solarized-dark`

## Custom CSS

Inject custom CSS for advanced styling:

```json
{
  "customCSS": "/custom.css"
}
```

Create `public/custom.css`:

```css
/* Override link color */
:root {
  --color-primary: #10B981;
}

/* Custom heading style */
h1 {
  letter-spacing: -0.02em;
}

/* Style code blocks */
pre {
  border-radius: 12px;
}
```

### Available CSS Variables

```css
:root {
  /* Colors */
  --color-primary: #6366F1;
  --color-accent: #2AC3DE;
  --color-background: #0F172A;
  --color-surface: #1E293B;
  --color-text: #E2E8F0;
  --color-text-muted: #94A3B8;
  --color-border: #334155;
  
  /* Typography */
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  /* Spacing */
  --content-width: 720px;
  --sidebar-width: 240px;
}
```

## Custom JavaScript

Add custom scripts (analytics, chat widgets, etc.):

```json
{
  "scripts": [
    {
      "src": "https://analytics.example.com/script.js",
      "async": true
    },
    {
      "src": "/custom.js",
      "defer": true
    }
  ]
}
```

## Top Banner

Display announcements or promotional banners:

```json
{
  "banner": {
    "text": "📢 Version 2.0 is here!",
    "link": "/changelog/v2",
    "dismissible": true
  }
}
```

## Footer

Every page ends with a full-width footer band. By default it shows your social links and a "Powered by Syntext" credit. Add `footer.columns` for a rich footer with your logo and grouped link columns:

```json
{
  "footer": {
    "columns": [
      {
        "title": "Product",
        "links": [
          { "label": "Documentation", "url": "/guides/quickstart" },
          { "label": "Status", "url": "https://status.example.com" }
        ]
      },
      {
        "title": "Legal",
        "links": [
          { "label": "Terms", "url": "https://example.com/terms" },
          { "label": "Privacy", "url": "https://example.com/privacy" }
        ]
      }
    ]
  }
}
```

Relative URLs stay on your doc site; absolute URLs open in a new tab. See the [footer reference](/configuration/syntext-json) for details.

## Social Links

Add social media links to the header:

```json
{
  "socialLinks": [
    { "platform": "GitHub", "url": "https://github.com/yourorg" },
    { "platform": "X", "url": "https://x.com/yourhandle" },
    { "platform": "Discord", "url": "https://discord.gg/your-server" }
  ]
}
```

Supported platforms: `GitHub`, `X`, `Discord`, `LinkedIn`, `YouTube`, `Slack`.