Semantic UI Theming

Semantic UI Theming#

Deprecated since version Volto: 18

Semantic UI development and maintenance has been inconsistent since 2018. The Volto Team made the decision to move forward in a sustainable direction. Plone 7 will use a different theming approach, based on the @plone/components—which in turn is based on React Aria Components—and @plone/theming packages. Using Semantic UI theming for your project or add-on is deprecated from Volto 18 onward, and will be removed in Plone 7.

As we hinted previously, Semantic UI theming happens in several stages using several layers of inheritance. Let's discover each of these layers.

Default definitions#

Semantic UI defines the default definitions in LESS files making a strong breakdown into components, organized in these categories:

  • globals

  • elements

  • modules

  • views

  • collections

  • behaviors

Each category holds a bunch of LESS files, each representing an item from the category.

The default definitions are the base for the themes. It is expected that you don't have to modify these definitions in any case. All the customization happens in the next layers.

Themes#

The Semantic UI themes are modifications on the default definitions that get loaded after them. Using LESS variables and LESS overrides they modify the defaults in a first customization layer. There are several community driven themes that you can use right away.

Site Theme#

The Site theme is another layer of possible customization that Semantic UI allows you to have. Let's say you have a theme, but you have a project that will require some modifications over that theme.

This will be the most common use as in Plone we will use Pastanaga UI theme and we would only want to customize some of it for some project. We can even switch to another existing theme and use a site theme on the top of it (or only use a theme per project). Semantic UI theming engine allows that kind of flexibility.

Contents