Web UI Themes

In order to change colors and fonts in the MyQ web UI, you need to provide a theme file in the config.ini.

Save the theme file to C:\ProgramData\MyQ\Themes\webUI\ (default path), and set the name of the file to the themeFile option in the config.ini file.

For example, if the theme file’s name is customTheme.css, the config.ini should look like:

[General]
themeFile=customTheme.css

Only one theme can be set at a time and it is used for all users and administrators. If no theme file is provided, MyQ uses the built-in default theme.

Theme file properties

Theme files are created by overriding the values of variables in a CSS file. The variables follow the standard CSS custom property syntax and receive standard CSS values. The variables must be in the :root scope. Variables not specified in the theme file, keep the value from the default theme.

Example:

:root {
    --primary: MediumOrchid;
    --primary-light: thistle;
    --secondary: peachpuff;
    --secondary-light: #fee3ca;
    --secondary-dark: orange;
    --list-item-highlight: plum;
}

Variables

• It is possible to use an existing variable using the notation --variableB: var(–variableA);.

• It is recommended to keep values expressed in rem units