How do I change the theme in Semantic UI?

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!

1 Like

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.

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.

1 Like