How do I change the theme in Semantic UI?


#1

Reading the docs here: https://atmospherejs.com/semantic/ui I interpret that I need to edit the file semantic-ui/theme.config.import.less.

I’ve tried to change all the values from default to material, but that gave me an error.

Then I changed only the values for elements I could find inside the folder semantic-ui/themes/material. That compiled fine, it was oly five elements, but I could not see any big difference in the looks.

How should this be done?
Thank in advance!


#2

In the custom.semantic.json set the theme you want to true and the other themes to false. By default the default theme is set to true.


#3

The default theme must always be true.

You set which other themes you requires to be true also.

The in theme.config.import.less you set the elements etc to the theme, e.g.

@button : 'twitter';

Beware that only some items are themeable and there is not a match of all themeable-items to all themes. See the theme list in the docs, e.g. http://semantic-ui.com/elements/button.html lists 11 themes, http://semantic-ui.com/elements/segment.html only 2 and http://semantic-ui.com/elements/input.html none.