Creating and managing styleguide themes
Nic Allen
All customers can customize the appearance of styleguides built on zeroheight. The degree to which you can customize the appearance will vary by plan. Multiple, reusable themes are only available to Pro & Enterprise plans.
Pro and Enterprise customers can create reusable color themes to customize the appearance of their styleguides. Multiple themes can be applied to a single styleguide. And multiple styleguides can use a single theme.
When a styleguide has multiple themes applied, viewers of that styleguide can toggle between the different themes. This may be useful for offering viewers a light and dark mode for your styleguide.
Free and Starter plan customers can customize the appearance of individual styleguides to reflect their brand.
Creating and managing reusable themes
Editors can create and manage reusable themes from the ‘Themes’ tab within the Styleguide dashboard. From here, you can create new themes and edit existing themes. Edits made to a theme will be applied to any styleguides currently displaying that theme when you save your changes.
Creating a theme from existing customization settings
If you have already customized the appearance of your styleguides, you can create a theme from these existing settings. Go to the ‘Color’ section of that styleguide’s settings and click the ‘Create theme’ button.
Adding themes to a styleguide
To add a theme to a styleguide, go to the ‘Color’ section of the styleguide’s settings. From here, you will see available themes that can be added to this styleguide. You will also see the option to create a new theme.
Adding a theme will update the appearance of your site in both editor and viewer modes.
Adding multiple themes will allow editors and viewers to toggle between the themes at any time.
Switching between themes
When multiple themes have been added to a styleguide, editors and viewers will be able to toggle between these available themes from the theme selector.
The theme selector will appear in the top navigation bar, next to the releases selector, or at the bottom of the left navigation bar for styleguides that don’t use a top navigation bar.
Uploading different logos per theme
You can upload a different logo for each theme applied to a styleguide. This will allow you to have different logos for light and dark modes, for example. Simply click on the logo to manage your logos. When viewers switch between themes, the visual appearance of your site, including your logo will update.
FAQs
What happens if I delete a theme?
Deleting a theme will remove it from any styleguides to which it was previously applied. If a styleguide no longer has any theme applied, it will revert to the zeroheight default theme.
Is there a limit on the number of themes I can have?
There is no limit for Pro and Enterprise teams on the number of themes you can have or the number of themes you can apply to a styleguide.
What is included in a theme?
Currently, only colors are included in a theme. More details on the theme editor can be found here.
Can the contents of a styleguide be updated when switching between themes?
You can upload different a logo for each theme applied to a styleguide that will update when switching between themes. However, it is not currently possible to update content within pages.