Skip to content
JustDocs

Customization

Make JustDocs your own by customizing colors, fonts, and more.

Theme Colors

Primary Colors

Customize your brand colors in the theme configuration:

// astro.config.mjs
export default defineConfig({
  theme: {
    colors: {
      primary: '#9333ea',
      secondary: '#ec4899'
    }
  }
});

Color Palette

JustDocs uses a semantic color system:

  • Primary: Main brand color
  • Secondary: Accent color
  • Gray: Neutral colors for text and backgrounds
  • Purple: Default theme color

Typography

Font Families

Change the default fonts:

theme: {
  fonts: {
    sans: ['Inter', 'system-ui', 'sans-serif'],
    mono: ['JetBrains Mono', 'Courier', 'monospace']
  }
}

Font Sizes

Adjust typography scale:

:root {
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
}

Replace the default logo:

justdocs({
  logo: {
    src: '/logo.svg',
    alt: 'My Documentation'
  }
})

Logo Sizes

  • Recommended: 200x50px
  • Format: SVG or PNG
  • Location: public/ folder

Add custom navigation links:

nav: {
  links: [
    { text: 'Home', href: '/' },
    { text: 'Blog', href: '/blog' },
    { text: 'GitHub', href: 'https://github.com/you/repo' }
  ]
}

Configure social media links:

social: {
  github: 'https://github.com/username',
  twitter: 'https://twitter.com/username',
  discord: 'https://discord.gg/invite'
}

Custom Order

Control sidebar ordering with the order frontmatter field:

---
order: 1
---

Lower numbers appear first.

Customize the footer content:

footer: {
  copyright: '© 2025 Your Company',
  links: [
    { text: 'Privacy', href: '/privacy' },
    { text: 'Terms', href: '/terms' }
  ]
}

On This Page