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:

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

The primary color is used for:

• Links
• Buttons
• Focus rings
• Active navigation items
• Code syntax accents

Additional Colors

{
  "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:

{
  "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:

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

Or use local fonts:

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

Logo

Add your logo for light and dark modes:

{
  "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:

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

Favicon

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

Or use multiple sizes:

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

Code Theme

Customize syntax highlighting colors:

{
  "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:

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

Create public/custom.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

: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.):

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

Top Banner

Display announcements or promotional banners:

{
  "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:

{
  "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 for details.

Social Links

Add social media links to the header:

{
  "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.