Theming Your Docsite

Speakeasy docsites are easily customizable. You can change the colors, fonts, and logos to match your brand. Theme options are intended to be lightweight and easy to use, so you can get your docs up and running quickly. If you need more customization, feel free to reach out to us and we'll help make that happen.

Testing Your Theme Locally

You can run your docsite locally by running pnpm install and pnpm run dev in the root directory of your project. Any changes you make to the theme.yaml file will be reflected in the local server. Usually these changes apply instantly, but sometimes you may need to restart the server.

The Theme File

Your docs project will be generated with a default theme.yaml file, which you can edit to customize your site. The theme.yaml file is located in the root directory. Simply edit the file and restart the server to see your changes. The available options are shown below (this is the default theme.yaml file you'll see after generating).

Title

The title of your site, shown in the browser tab. This is important for things like SEO.

Colors

Any valid CSS color for setting the primary color of your site. E.g. #75f96f or green. You can provide a light and dark color, in case your primary color doesn't show up well in both themes. dark is used for dark mode, and light is used for light mode.

Logo and Favicon

The logo to display, based on current theme. You can provide a different logo to use in dark and light mode, in case your logo doesn't show up well in both. You can use a relative path or a URL. If you use a relative path, make sure the file is in the public directory.

link is the URL to go to when the logo is clicked. This will likely be your company's homepage.

favicon is the icon to display in the browser tab. You can use a relative path or a URL. If you use a relative path, make sure the file is in the public directory.

Code Theme

The code theme to use for code snippets. See https://codehike.org/docs/themes (opens in a new tab) for a list of themes.

Fonts

The fonts to use. You can use any font from Google Fonts. See https://fonts.google.com/ (opens in a new tab) for a list of fonts. main is the font used for the main text of the site, and code is the font used for code snippets. name should exactly match the name given on Google fonts.

theme.yaml

title: Speakeasy Bar SDK Docs
primaryColor:
dark: rgb(251, 227, 50)
light: rgb(22, 21, 14)
logo:
dark: /logo-dark.png
light: /logo-light.png
link: https://www.speakeasyapi.dev/
favicon: /favicon.png
codeTheme: material-darker
fonts:
main:
name: Inter
url: https://fonts.googleapis.com/css2?family=Inter&display=swap
code:
name: IBM Plex Mono
url: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap