How To Switch Custom Theme ?

[kudorori]

How To Switch Custom Theme ?

Is there a simple example?

[awgv]

Hi @kudorori, open installation_folder/src/theme.config and change 'default' to a theme that you want to use, for example, @button: 'github'; instead of @button: 'default';, then rebuild the framework with gulp build.

A theme might not support all of the SUI components, for example, there’s a theme called colored that changes the checkbox component only, so you can only use the colored theme for checkboxes—it’s pointless to use it for other components; either nothing will be changed, or you’ll get an error during the execution of gulp build.

To see what components are supported by a theme, you’ll need to navigate to a theme’s folder in installation_folder/src/themes/ and see if a component’s files exist there. SUI separates its components by 5 categories (you can see it on the documentation website as well): globals, elements, collections, views, modules and behaviors.

Say, we need to understand if the basic theme supports the button component—we can take a look at the sidebar on the documentation website to see that the button component is located under Elements, which means that we need to look for it in installation_folder/src/themes/basic/elements. When we open that folder, we can see that button.overrides and button.variables files are there, so we can use the basic theme for buttons in theme.config.

Please see Using Packaged Themes section here for more information on packages themes. If you have more questions, I’ll be happy to answer them in this thread.