Assets and Styling
Use public assets, logos, favicons, theme fonts, CSS variables, and MDX components in Docgo.
Docgo copies files from public to the output root and ships a built-in docs
theme stylesheet.
Public assets
Put static files in public.
public/
favicon.png
logo.png
og.png
images/
screenshot.pngReference them with root-relative URLs:
During docgo build, files are copied to dist before pages are written.
Logo
Configure the header logo with logo.
export default defineConfig({
logo: { src: '/logo.png', alt: 'Example Docs' },
});Supported shapes:
logo: '/logo.png'
logo: { src: '/logo.png', alt: 'Example Docs' }
logo: { light: '/logo-light.png', dark: '/logo-dark.png', alt: 'Example Docs' }
logo: falseWhen no logo is configured, Docgo renders a fallback mark from the site title.
Site title
export default defineConfig({
siteTitle: 'Example Docs',
});Set siteTitle: false to hide the brand text.
Favicons
Use seo.favicon for favicon links.
seo: {
favicon: { href: '/favicon.png', type: 'image/png', sizes: '64x64' },
}Theme toggle
Docgo includes a light/dark theme toggle. The selected theme is stored in
localStorage under docgo-theme.
On first load, Docgo uses the stored value or the user's prefers-color-scheme
setting.
Fonts
Override theme fonts in head.html.
<style>
:root {
--dg-font-sans: 'Inter', sans-serif;
--dg-font-mono: 'JetBrains Mono', monospace;
--font-sans: var(--dg-font-sans);
--font-mono: var(--dg-font-mono);
}
</style>Custom page styling
For one-off custom layouts, use layout: page and write your own markup and
classes.
---
layout: page
title: Showcase
---
<section className="showcase">
<h1>Product docs</h1>
</section>Load extra CSS from head.html:
<link rel="stylesheet" href="/custom.css" />Place custom.css in public.
Footer styling
Configure footer text with footer in docgo.config.mjs.
export default defineConfig({
footer: {
message: 'Documentation built with @kyechan99/docgo.',
copyright: 'Copyright © 2026 kyechan99.',
},
});For logo-like marks or custom decoration, keep the content in config and style the footer from your own stylesheet.
<!-- head.html -->
<link rel="stylesheet" href="/custom.css" />/* public/custom.css */
.dg-footer {
border-top-color: color-mix(in srgb, var(--dg-color-brand) 32%, var(--dg-border));
}
.dg-footer-message::before {
content: '';
display: inline-block;
width: 1rem;
height: 1rem;
margin-right: 0.5rem;
vertical-align: -0.15rem;
background: url('/logo.png') center / contain no-repeat;
}MDX components
Use MDX imports or mdxComponents to add design-system components to docs.
import { Button } from 'bmates-ui';
<Button>Install</Button>Docgo itself uses bmates-ui for the included theme controls.