Skip to main content

Theme Customization

While Docsio automatically extracts your brand, you have full control over every visual aspect of your site.

Using the AI Agent

The easiest way to customize your theme is by talking to the AI Agent. You can ask for broad changes or specific tweaks:

  • "Make the sidebar background slightly darker."
  • "Use a rounded style for all buttons."
  • "Change the heading font to 'Geist Sans'."

Manual CSS Overrides

For advanced users, you can edit the custom.css file directly. This file contains CSS variables that control the entire theme:

:root {
  --ifm-color-primary: #A0785A; /* Your main brand color */
  --ifm-font-family-base: 'Inter', sans-serif;
  --ifm-navbar-height: 4rem;
}

Dark Mode Customization

You can define specific styles for dark mode using the [data-theme='dark'] selector:

[data-theme='dark'] {
  --ifm-background-color: #0a0a0c;
  --ifm-color-primary: #d2bcad;
}

Layout Adjustments

You can adjust the width of the sidebar, the maximum width of the content area, and the spacing between elements to create a layout that perfectly fits your content.

Docs by Docsio