Theming Your Docs Site
Speakeasy docs sites are easy to customize. You can change the colors, fonts, and logos to match your brand.
Theme options are intended to be lightweight and straightforward 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 docs site 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. Changes usually 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. To see changes you make, restart the server after modifying the file.
The available options are shown below (this is the default theme.yaml file you'll see after generating).
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 modes, in case your logo doesn't show up well in both.
You can use a URL or relative path here. If you use a relative path, make sure the file is in the public directory.
The link field contains the URL to go to when the logo is clicked, likely your company website homepage.
The favicon field contains the URL or relative path to the icon to display in the browser tab.
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.