Semantic UI React theme builder
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 I set on the journey 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.
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.
Clone the repository
git clone https://github.com/lolero/semantic-ui-theme-builder.git my-theme-builder
Navigate to the cloned repo
cd my-theme-builder
Install the repos dependencies
yarn all:reset
Build the empty themes
yarn themes:build
Run the dev server
yarn docs:start:light
Navigate to themes/src/<theme name> and start writing your theme's overrides as oulined in
the Semantic UI theming guide.
The docs application should hot-reload when changes are made to the theme's .less files
Once you are satisfied with the state of your themes, you can run
yarn themes:build
which will generate your themes' compiled CSS into themes/dist/sui-<theme name>.css.
You can then consume this file in your web app and have all Semantic UI components themed to your preference.
You can also run
yarn docs:build
Which will generate a react-static application with the Semantic UI docs web app, with your themes and your custom examples. You can also deploy this application to your private domain if you want to make your themed components reviewable to anyone.
Note: for the icons to work in applications that consume the themes, you must copy the Semantic UI icon and the Font Awesome webfont files to the application's public folder, these icons are respectively located in
node_modules/semantic-ui-less/themes/default/assets/fonts
node_modules/@fortawesome/fontawesome-free/webfonts
Made possible only by @jlukic authoring Semantic UI. The substantial contributions of @lzear are greatly appreciated!