Semantic Ui Theme Builder For Multiple Semantic Ui Themes With Support For Font Awesome Classnames And Original Semantic Ui React Docs Demo

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

Solution 1:

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.

The source code of the themes that get built lives in themes/src/themes/. In the example included in this repo you will find one parent theme and two children themes.

• parent-theme: a parent theme where general overrides can be defined, which consume variables from children themes
• child-theme-light: a child theme where color variables for a light theme are defined, which are consumed by the variables and overrides in the parent theme
• child-theme-dark: a child theme where color variables for a dark theme are defined, which are consumed by the variables and overrides in the parent theme

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

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