Semantic UI - Change Theme

Question

I can't get the theme selection to work in Semantic UI.

I attempt to follow the instructions provided in the workflow section of the documentation:

Files in the examples/ folder of your project can be useful for testing out changes in your UI. For example, you might run gulp watch download a new theme to src/site/themes/ then adjust your theme.config file with the name of the new theme and refresh examples/kitchensink.html to inspect changes in the theme.

So in the semantic ui directory, after the suitable gulp build / gulp install steps,

1. I type gulp watch,

2. I modify src/theme.config, for example:

   ...
   /* Elements */
   @button     : 'material';
   ...
   

3. The file dist/semantic.css is regenerated (says inotify).

So far so good ... except that the rendering of the examples/kitchensink is still the default one. A closer look at dist/semantic.css shows that it is actually identical to the original one.

Could anyone point out the (probably obvious) issue in my process ?

Answer 1

Step 1. Change /src/themes/theme.config to reflect your desired theme (ex. @button: 'material')

Step 2. Rebuild - gulp build

Step 3. Refresh your browser