Custom Colors

To make the widget match your brand's color scheme, you can customize the colors used in the widget. This article explains how to use the Theme Editor in the Widget Customization Editor to customize the colors of the widget.

Theme Editor

Color Mode

The Scrimmage widget support two color modes: Light and Dark. Color mode can be toggled any time using widget parameters. Check this guide to learn more about the widget parameters.

In case you don't want to have two color modes, you can lock the color mode to a specific one. In this case, the widget will always use the specified color mode even if parameters are changed.

Customizing Colors

All colors divided into several categories:

• Primary: The main colors used for buttons, links, and other essential elements.
• Secondary: A secondary colors used for non-primary actions or elements.
• Background: The colors used for the widget's background and other surfaces.
• Success: The colors used to indicate success or positive actions.
• Warning: The colors used to indicate warnings or alerts.
• Error: The colors used to indicate errors or negative actions.
• Info: The colors used to indicate informational messages.
• Action: The colors used to attract attention to specific actions.
• Text: The colors used for text elements.
• Divider: The colors of the dividers and borders.
• Perks: Special set of colors used only for perks elements.

Every color set in HEX format. Scrimmage widget supports 3 types of HEX format:

• #RRGGBB: The most common format.
• #RGB: The short format.
• #RRGGBBAA: The format with alpha channel.

R - Red, G - Green, B - Blue, A - Alpha (transparency).