Changing the appearance

• Less than a minute to read

How to change default colors of the user interface

The Preflight Tool uses the following CSS variables for colors applied in the user interface.

html {
    --theme-primary-color: #30c2ff;
    --theme-border-color: #e0e0e0;
    --theme-dark-border-color: #cccccc;

    --theme-white-color: #ffffff;
    --theme-grey-color: #505253;
    --theme-light-grey-color: #909293;
    --theme-dark-grey-color: #666666;

    --theme-green-color: #00b628;
    --theme-red-color: #ff0000;
    --theme-orange-color: #f4a100;
    --theme-blue-color: #0000ff;

    --theme-viewer-background-color: #f8f9fa;
    --theme-scrollbar-color: #dadce0;
    --theme-report-title-color: #212121;

    --theme-uploader-progressbar-color: #e5e5e5;
    --theme-uploader-hinttext-color: #6f747d;
    --theme-uploader-hover-color: rgba(48, 194, 255, .1);

    --theme-popup-box-shadow: 0 2px 16px rgba(33, 43, 54, .08), 0 31px 41px rgba(33, 43, 54, .2);

    --theme-overlay-color: rgba(0, 0, 0, .3);
    --theme-light-overlay-color: rgba(255, 255, 255, 0.9)
}

To specify a custom color, change the variable values in the style section of params, for example:

{
    "widgets": [{
        "name": "preflight",
        "type": "preflight",
        "params": {
            "config": {
                ...
            },
            "style": {
                "--theme-primary-color": "#ff0000",
                "--theme-viewer-background-color": "#ffffff"
            }
        }
    }]
}

How to localize text resources

In the \ui-framework\<version>\static\preflight\locales.json file, you can find text resources for supported languages. You can change these locales or add new ones.

Note that text in rightToolbar.info.rules can include HTML tags, for example:

{
    "en": {
        ...
        "rightToolbar": {
            "info": {
                "rules": {
                    "important": "Important:",
                    "text": "Your artwork must be in <b>{{COLORSPACE}}</b> color space and its resolution should be at least <b>{{DPI}}</b> dpi."
                }
            },
            ...
}