Semantic UI docs with multiple themes and support for external icon libraries like Font Awesome

2596 views javascript

I am a big fan of Semantic UI and even more so of Semantic UI React. Aside from them being excellent libraries, their docs are amazing.

However, writing and maintaining themes for their components can be cumbersome. And it becomes even more difficult to write, build, and maintain multiple themes.

So the question is: How to write, build, and maintain multiple Semantic UI themes and review their state using the official Semantic UI docs?

answered question

1 Answer


After working with Semantic UI for years and finally getting down to write a proper theme builder, I came up with this solution to the problem here.

The repo is a clone of the Semantic UI React, with a themes directory at the root. In themes/src, there are two directories:

  • themes/src/themes: themes that get built
  • themes/src/themesTemplate: an empty template to create new themes from scratch

The themes directory also contains two directories:

  • parent-theme: a parent theme where general overrides can be defined
  • child-theme: a child theme where variables are defined, which are consumed by the overrides in the parent theme

I wrote this to be able to create multiple themes that share common characteristics, e.g. light and dark theme for the same application. So the color variables are defined in the child theme, and the overrides are defined in the parent theme, which consume the color variables.

If you clone the repo, run yarn reset, yarn build:themes, and yarn start to see the official Semantic UI React docs in dev mode and be able to instantly see changes to your themes as you write them.

I also added the capability of using Font Awesome native classes so you can write <Icon name='fas fa-check'> and the check icon will render.

I just finished it yesterday so I still have to write a proper readme and add some examples for additional features like icons with Font Awesome classes or styling of third party components but that is coming soon.

posted this

Have an answer?


Please login first before posting an answer.