Theme Colors
The default set of theme colors are provided as RGB and HSL SASS files and may be switched or edited. If changes are made to these SASS files the WebUI project will need to be rebuilt using the included build tools. For more information on editing source files and building the project, see the WebUI Build section.
Default Theme File
These colors are from the default theme shipped with WebUI and can be replaced in either _theme.scss or _theme-hsl.scss. For projects using the SASS files as a development build step this is very straightforward.
Color Example
The above classes all set the background and a complimentary foreground color. However, you can use the background and foreground colors separately by simply prefixing the class name with background- or color-. See the following example.
<div class="text-sm">
<div class="row col-padding-sm">
<div class="col background-accent-1-dark color-light">Lorem ipsum</div>
<div class="col background-accent-3-dark color-accent-3-alternate">Lorem ipsum</div>
<div class="col background-accent-4-dark color-highlight">Lorem ipsum</div>
</div>
</div>
Inherited Colors
The following color classes are available for using the inherited color value known as the currentColor property in CSS.
- color-current
- color-focus-current
- color-hover-current
- background-current
- background-focus-current
- background-hover-current
If you are using the webui-all.css or webui-components-all.css files, then you are also able to set border, boundary, and outline colors by prefixing with border-, boundary-, or outline- instead.
Naming conventionTo use the event color classes the following format should be followed. [element attribute]-[element event]-[theme color].
For example background-focus-info or border-hover-accent-1
Color CombinationsColor combinations should always be chosen carefully, taking into account people with partial sight and / or color blindness.
Translucency
The translucent-* classes range from a zero alpha transparency to a value of 0.9, and can be used to set color and background together, or to set the color only with the color- prefix and the background only with the background- prefix.
Translucent Example
Additional color shades can be created using the translucent classes.
<div class="container background-accent-1 color-light">
<div class="background-translucent pad-md">
background-translucent
</div>
<div class="background-translucent-1 pad-md">
background-translucent-1
</div>
<div class="background-translucent-2 pad-md">
background-translucent-2
</div>
<div class="background-translucent-3 pad-md">
background-translucent-3
</div>
<div class="background-translucent-4 pad-md">
background-translucent-4
</div>
<div class="background-translucent-5 pad-md">
background-translucent-5
</div>
<div class="background-translucent-6 pad-md">
background-translucent-6
</div>
<div class="background-translucent-7 pad-md">
background-translucent-7
</div>
<div class="background-translucent-8 pad-md">
background-translucent-8
</div>
<div class="background-translucent-9 pad-md">
background-translucent-9
</div>
</div>
Translucent Classes
The following classes can be used to quickly add a translucent background and foreground to any element.
| Classes | Alpha value |
|---|---|
| translucent, color-translucent, background-translucent | 0 |
| translucent-1, color-translucent-1, background-translucent-1 | 0.1 |
| translucent-2, color-translucent-2, background-translucent-2 | 0.2 |
| translucent-3, color-translucent-3, background-translucent-3 | 0.3 |
| translucent-4, color-translucent-4, background-translucent-4 | 0.4 |
| translucent-5, color-translucent-5, background-translucent-5 | 0.5 |
| translucent-6, color-translucent-6, background-translucent-6 | 0.6 |
| translucent-7, color-translucent-7, background-translucent-7 | 0.7 |
| translucent-8, color-translucent-8, background-translucent-8 | 0.8 |
| translucent-9, color-translucent-9, background-translucent-9 | 0.9 |
Focus and Hover Colors
Focus and Hover Events
WebUI has a full range classes supporting focus and hover events for colors. These are used for various types of button by default, but are also there for you to use on other elements.
<div class="container gap-vertical-md width-lg-xl"> <button type="button" class="menu-button-sm menu-button-info background-focus-info-dark">Background Focus</button> <input type="text" class="input-lg border-sm border-focus-info-dark width-full" placeholder="Border Focus" /> <button type="button" class="menu-button-sm menu-button-info background-hover-info-dark">Background Hover</button> <input type="text" class="input-lg border-sm border-hover-info-dark width-full" placeholder="Border Hover" /> </div>
Supported ElementsNot all HTML elements accept focus events by default. If you need focus events for elements such as divs or spans, then you will need to to add a tabindex attribute to them and set the value to -1, 0 or the required sequential order.
Color Modes for Custom Controls
Toggle switches, checkboxes and radio buttons support a dark-mode and a light-mode class. This makes it easy to switch between light and dark modes using existing theme colors and avoids the need to re-compile SASS themes, with the ability to change a single class for individual controls.
When the light-mode class is present, it cannot be overridden by dark-mode. However, light-mode will override dark-mode and is the default.
Custom Toggle Switches
When the dark-mode class is applied to the root element of the control the background will be dark grey in color and the switch button will be black, based on the default theme (approximately inverse to the default theme). If the light-mode class is applied there would be no change to the default behavior, but it allows switching between light and dark modes programmatically. Any WebUI color class may be applied directly to the label or toggle-switch-button, overriding the background, foreground color or switch color. Any colors applied will only affect the checked state, not unchecked.
<div class="row col-padding-md">
<div class="col">
<div class="toggle-switch-sm check dark-mode">
<input type="checkbox" value="1" id="check-switch-1" />
<label for="check-switch-1" class="info rounded-sm text-xl">
<div class="toggle-switch-button background-info-dark left-transition-medium"></div>
</label>
</div>
</div>
<div class="col">
<div class="toggle-switch-sm check light-mode">
<input type="checkbox" value="2" id="check-switch-2" />
<label for="check-switch-2" class="danger-dark rounded-sm text-xl">
<div class="toggle-switch-button background-warning-dark left-transition-medium"></div>
</label>
</div>
</div>
</div>
Custom Checkboxes and Radio Buttons
When the dark-mode class is applied to the root element of the control the check mark will be light in color and the background dark. If the light-mode class is applied there would be no change to the default behavior, but it allows switching between light and dark modes programmatically. Any WebUI color class (except combined colors) may be applied directly to the label overriding the background color.
<div class="row text-sm col-padding-md">
<div class="col">
<div class="checkbox dark-mode">
<input type="checkbox" value="1" id="checkbox1" />
<label for="checkbox1"></label>
</div>
</div>
<div class="col">
<div class="checkbox light-mode">
<input type="checkbox" value="2" id="checkbox2" />
<label for="checkbox2"></label>
</div>
</div>
</div>
<div class="row text-sm col-padding-md">
<div class="col">
<div class="radio dark-mode">
<input type="radio" value="1" name="radiogroup1" id="radio1" />
<label for="radio1"></label>
</div>
</div>
<div class="col">
<div class="radio light-mode">
<input type="radio" value="2" name="radiogroup1" id="radio2" />
<label for="radio2"></label>
</div>
</div>
</div>
Combined Color ClassesCustom checkboxes and radio buttons don't support combined color classes such as info-dark which sets the color and background color at the same time. Instead, use the separate background-* classes. Using color-* classes will have no effect on the check mark.