How does the theming engine work?

How does the theming engine work?#

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.

It basically uses heavily the LESS precompiler language features. No code is involved (which is good).

theme.config#

theme.config is where we define which theme we use. We can decide the theme of each of the Semantic UI components. Yes, you read well... The Semantic UI theming engine provides not only global theming but per component.

  /* Global */
  @site       : 'default';
  @reset      : 'default';

  /* Elements */
  @button     : 'default';
  @container  : 'default';
  @divider    : 'default';
  @flag       : 'default';
  @header     : 'default';
  @icon       : 'default';
  @image      : 'default';
  // [...]

  /* Collections */
  @breadcrumb : 'default';
  @form       : 'default';
  @grid       : 'default';
  @menu       : 'default';
  @message    : 'default';
  @table      : 'default';

  /* Modules */
  @accordion  : 'default';
  @checkbox   : 'default';
  @dimmer     : 'default';
  @dropdown   : 'default';
  @embed      : 'default';
  // [...]


  /* Views */
  @ad         : 'default';
  @card       : 'default';
  @comment    : 'default';
  // [...]

semantic.less#

Semantic UI has uses a single LESS file as entry point: semantic.less this is the root LESS file and pulls all the components that we want to compile. We have to import this file either from the node_modules semantic-ui-less module directory or make a local copy of it locally. More on this later.

theme.less#

theme.less does all the Semantic UI theming magic. It controls all the Semantic UI workflow that each component has to comply with. It loads all the files inheritance in the correct order and applies it properly.

Contents