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 the six CSS variables at the top (three for light mode, three for dark mode).

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

theme.css

:root[data-theme="light"] {
  --stl-ui-swatch-accent-base: #155dfc;
  --stl-ui-swatch-accent-muted: #bedbff;
  --stl-ui-swatch-accent-faint: #eff6ff;
  --stl-ui-swatch-accent-base: #11cc8d;
  --stl-ui-swatch-accent-muted: #beffe9;
  --stl-ui-swatch-accent-faint: #effff9;
}

:root[data-theme="dark"] {
  --stl-ui-swatch-accent-base: #2b7fff;
  --stl-ui-swatch-accent-muted: #132762;
  --stl-ui-swatch-accent-faint: #0b1128;
  --stl-ui-swatch-accent-base: #1eb281;
  --stl-ui-swatch-accent-muted: #136247;
  --stl-ui-swatch-accent-faint: #0b281e;
}

Make sure everything looks correct in both light and dark mode when you change these colors. You can quickly switch between light and dark mode using the switcher at the top right on your site.

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