---
title: Logo and branding | Stainless
---

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](/docs/docs-platform/customization/styles-and-fonts/index.md) to keep customizing your site’s appearance.