Balance Logo
Reckon Design System
Open playroom

Theming playground

This page allows you to experience Balance with different themes. You can edit all Balance theming tokens and save them as your own custom theme. You can switch between themes and move around the docs site to see what Balance would look like under a different theme.


The playground is always rendered with the default theme and all its tokens prepoulated so you can start making changes immediately.

For example, scroll down to the ACTIONS token group and change the active color a red shade.

Now scroll back up and hit the Save theme button. It should show a popup explaining that you can't override the default theme and that you need to pick a different name for your theme so let's do that. Go to the Theme name input and change it to something like red buttons and hit save. You'll notice that it saves the theme and immediately switches to it.

Notice the red buttons. You can switch back to the default theme by selecting Reckon web: Light from the Current theme menu.

For now switch back to the red buttons theme and visit the buttons package. Notice all the buttons there are red as well, this is because your selected theme has been applied to the entire site.

Navigate back to the theming playground page and hit refresh. You'll notice everything has switched back to the default theme but worry not, we have saved your theme in local storage so it persists through page refreshes. You can simply select it from the Current theme menu and you're back where you left off.

Lastly, you can delete a theme easily when you're done with it. Simply clicking the Remove theme button will remove your custom theme and revert the site back to the default theme. Note that you cannot delete the default theme.

Edit in Playroom
Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo