Themes & Customization

Make your documentation match your brand with Cirth's theming system. Choose from pre-built themes or customize colors to match your identity.

Selecting a Theme

Pre-built Themes

Cirth offers several professionally designed themes:

1. Go to Project Settings > Appearance

2. Browse available themes

3. Click to preview

4. Select Apply Theme

Theme Preview

Before applying, you can:

• See colors in light and dark mode

• Preview typography choices

• Check code block styling

Theme Components

Each theme defines:

Colors

Typography

• Font family - Sans-serif for readability

• Heading weights - Bold for hierarchy

• Code font - Monospace for code blocks

Dark Mode

All themes include dark mode variants:

• Automatic detection based on system preference

• Manual toggle available for readers

• Colors optimized for each mode

Branding Options

Logo

Add your logo to the documentation header:

1. Go to Project Settings > Branding

2. Upload your logo image

3. Recommended: 200x200px PNG with transparency

Your logo appears in:

• Documentation header

• Browser tab (as favicon)

• Social sharing previews

Favicon

Customize the browser tab icon:

1. Upload a favicon image

2. Supported formats: ICO, PNG

3. Recommended: 32x32px

Project Colors

Override theme colors for your brand:

1. Select Custom Colors

2. Set your primary brand color

3. Secondary colors auto-generate

Light and Dark Mode

How It Works

Readers can choose their preferred mode:

• System - Follows OS preference

• Light - Always light theme

• Dark - Always dark theme

Designing for Both

Tips for content that works in both modes:

1. Avoid pure black/white - Use near-black and near-white

2. Test images - Ensure they're visible in both modes

3. Use theme colors - They adapt automatically

Code Block Themes

Code syntax highlighting adapts to the mode:

• Light mode: Light background, dark syntax

• Dark mode: Dark background, bright syntax

Custom CSS (Advanced)

For advanced customization, you can add custom CSS:

      

        css
        
          
          
        
      
    /* Custom styles for your documentation */
.prose h2 {
  border-bottom: 2px solid var(--primary);
}

.prose code {
  background: var(--muted);
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

Available CSS Variables

      

        css
        
          
          
        
      
    :root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --border: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

Best Practices

Consistency

• Use the same theme across all versions

• Match documentation to your main website

• Keep branding elements consistent

Accessibility

• Ensure sufficient color contrast

• Test with colorblindness simulators

• Don't rely solely on color for meaning

Performance

• Optimize logo images (compress PNG)

• Use SVG for logos when possible

• Avoid heavy custom CSS

Troubleshooting

Theme Not Applying

• Clear browser cache

• Check if custom CSS is overriding

• Try a different browser

Logo Not Displaying

• Verify image format (PNG, JPG, SVG)

• Check file size (under 1MB)

• Ensure URL is accessible

Dark Mode Issues

• Test both modes after changes

• Check for hardcoded colors in content

• Verify images work in both modes