Logo and branding

Make your documentation site match your brand identity by setting your own logo and brand colors.

Add your logo

To add your logo, put your logo’s image file in your site’s src/assets directory. We recommend using an SVG or PNG image, but any image format supported by Astro will work.

Next, add your logo to astro.config.ts:

astro.config.ts

import { defineConfig } from "astro/config";
import {
  generateAPIReferenceItems,
  stainlessDocs,
} from "@stainless-api/docs";

export default defineConfig({
  integrations: [
    stainlessDocs({
      // ...
      logo: {
        src: "./src/assets/logo.svg",
        replacesTitle: true, // If your logo contains your site's title
        alt: "My Docs",
      },
    }),
  ],
});

If you have different logo images for light and dark mode, you can specify both paths in your astro.config.ts:

astro.config.ts

import { defineConfig } from "astro/config";
import {
  generateAPIReferenceItems,
  stainlessDocs,
} from "@stainless-api/docs";

export default defineConfig({
  integrations: [
    stainlessDocs({
      // ...
      logo: {
       src: "./src/assets/logo.svg",
       light: "./src/assets/logo-light.svg",
       dark: "./src/assets/logo-dark.svg",
       replacesTitle: true, // If your logo contains your site's title
       alt: "My Docs",
      },
    }),
  ],
});

Change theme colors

To use your brand colors for links and accents on your site, open theme.css and modify --stl-color-accent.

For example, this will change your site’s colors from blue to green:

theme.css

:root {
  --stl-color-accent: light-dark(#155dfc, #2b7fff);
  /* Green accent color */
  --stl-color-accent: light-dark(#1eb281, #11cc8d);
}

Continue to Styles, fonts, and CSS to keep customizing your site’s appearance.