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?
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
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 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.