Semantic UI theming

Instead of having to create components from a blank canvas, developers using Semantic UI only need to specify how their components should differ from the default theme using LESS variables.

Chap version 1.0.8 added support for manually overriding LESS variables by changing files in the child theme folder. Keeping the files separate in child theme folder ensures no changes are lost with theme updates.

A Semantic UI component consist of up to 3 base files:

These 3 files are constant and shouldn’t be changed.
Changes are made by adding our own .variables and .overrides files to the mix:

For Chap these files are located in the child theme folder:

Each of the folders contains .variables and .overrides empty “stub” files for all possible theme overrides. Keeping your site theme separate makes sure you don’t lose any changes when updating Semantic UI or Chap theme to new versions.

A .variables file specifies variables which should be adjusted.

Due to inheritance, it only needs to include variables which are different.

An .overrides file specifies additional CSS rules to be added to a definition for a theme. This file also has access to all inherited variables for a component.

Site variables file can be used to override or add new global variables, accessible in all the components .overrides files.

Let’s override some global site variables. First we must have a look at what variables are already there. We can do that by looking at the source code of the site component definition file at chap/semantic-ui/themes/default/site.variables or we can just use GitHub to browse the source code.

Many of the variables, such as font name, size, emsize, primary color, border radius and more are already customizable from Chap settings in the WordPress dashboard, so there is no reason to override these. But we can override variables that are not significant enough to deem their own theme option, such as colors. Let’s change the color “red” from #DB2828 to #FF0000. And while we’re at it, let’s add our own custom variable, @chapRed.

@red: #FF0000;
@chapRed: #A22600;

After making changes, save the file and recompile Semantic UI in the WordPress admin dashboard at Chap Theme -> Chap Compiler. You will be able to see the color change take effect, for example, when outputting a negative button (since we can read from the source code that @negativeColor is equal to @red).

<button negative>Button</button>

Now let’s make use of the custom variable we declared earlier. Let’s change the text color to use our previously defined new variable.

body {
  color: @chapRed;
}

Let’s customize the menu component to look a bit different than default.

/* Change the background color */
@background: @darkWhite;
/* Add a box shadow */
@boxShadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
/* Remove dividers */
@dividerSize: 0px;
/* Increase padding */
@itemVerticalPadding: @relativeLarge;
@itemHorizontalPadding: @relativeLarge;