Customizing Theme

Lito allows you to easily customize the appearance of your documentation site to match your brand.

Basic Colors

The easiest way to change the theme is by modifying the branding.colors object in your docs-config.json.

{
  "branding": {
    "colors": {
      "primary": "#6366f1",
      "secondary": "#4f46e5",
      "accent": "#22d3ee",
      "background": "#ffffff",
      "text": "#1f2937"
    }
  }
}

Logo and Favicon

You can update your logo and favicon in the branding section:

{
  "branding": {
    "logo": {
      "src": "/logo.svg",
      "href": "/"
    },
    "favicon": "/favicon.svg"
  }
}

Place your logo and favicon files in either:

• The public/ folder in your docs directory
• The _assets/ folder (will be available at /assets/)

Assets

Lito supports special folders for organizing your static assets. These folders are automatically synced to your built site.

Folder Structure

my-docs/
├── docs-config.json
├── _assets/          # Static files → /assets/
├── _images/          # Images → /images/
├── _css/             # Custom stylesheets
├── public/           # Root static files → /
└── ...

_assets/ - Static Files

Place any static files (PDFs, downloads, etc.) in the _assets/ folder. They will be available at /assets/ in your built site.

_assets/
├── brand-guidelines.pdf
├── logo-pack.zip
└── presentation.pptx

Reference in your markdown:

Download our [Brand Guidelines](/assets/brand-guidelines.pdf).

_images/ - Images

Store images in the _images/ folder. They will be available at /images/ in your built site.

_images/
├── hero-banner.png
├── screenshots/
│   ├── dashboard.png
│   └── settings.png
└── diagrams/
    └── architecture.svg

Reference in your markdown:

![Dashboard Screenshot](/images/screenshots/dashboard.png)

public/ - Root Static Files

Files in the public/ folder are copied to the root of your site. Use this for:

• Favicon files
• Logos
• robots.txt
• OpenGraph images
• Any file that needs to be at the root URL

public/
├── favicon.svg
├── logo.svg
├── og-image.png
└── robots.txt

Configuration

You can customize asset folder names in docs-config.json:

{
  "assets": {
    "images": "_images",
    "css": "_css",
    "static": "_assets"
  }
}

Custom CSS

Lito allows you to add custom CSS to override or extend the default theme styles.

Adding Custom Styles

Create a _css/ folder in your docs directory and add a custom.css file:

my-docs/
├── docs-config.json
├── _css/
│   └── custom.css
└── ...

Your custom styles will be automatically imported and applied to your site.

Example: Custom Styles

/* Custom font */
:root {
  --font-sans: 'Inter', system-ui, sans-serif;
}

/* Custom link color */
.docs-prose a {
  color: #2563eb;
}

/* Custom code block styling */
.docs-prose pre {
  border-radius: 12px;
  border: 2px solid var(--primary-200);
}

/* Custom button style */
.cta-button {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

Theme Overrides

For more extensive theme changes, create a theme.css file:

/* Override primary color palette */
:root {
  --primary-50: #faf5ff;
  --primary-100: #f3e8ff;
  --primary-200: #e9d5ff;
  --primary-300: #d8b4fe;
  --primary-400: #c084fc;
  --primary-500: #a855f7;
  --primary-600: #9333ea;
  --primary-700: #7e22ce;
  --primary-800: #6b21a8;
  --primary-900: #581c87;
  --primary-950: #3b0764;
}

/* Override gray palette */
:root {
  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;
  --gray-950: #09090b;
}

Available CSS Variables

Lito uses CSS custom properties (variables) for theming. Here are the main variables you can override:

Colors

Typography

Layout

Multiple CSS Files

You can add multiple CSS files to the _css/ folder. All .css files will be copied to the build:

_css/
├── custom.css      # Main custom styles (auto-imported)
├── theme.css       # Theme overrides (auto-imported)
├── components.css  # Additional component styles
└── utilities.css   # Custom utility classes

@import "./components.css";
@import "./utilities.css";

Dark Mode

Lito includes built-in dark mode support. Your custom styles should account for both themes:

/* Light mode styles (default) */
.my-component {
  background: white;
  color: #1f2937;
}

/* Dark mode styles */
.dark .my-component {
  background: #1f2937;
  color: white;
}

/* Or use CSS variables for automatic theming */
.my-component {
  background: var(--background);
  color: var(--foreground);
  border: 1px solid var(--border);
}

Best Practices