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.
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.
Your docs project will be generated with a default
theme.yaml file, which you can edit to customize your site.
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).
Any valid CSS color for setting the primary color of your site. E.g.
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.
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
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
The code theme to use for code snippets. See https://codehike.org/docs/themes (opens in a new tab) for a list of themes.
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.