Primary Theme Colors Customization

The authID Complete UI enables you to customize page colors for better alignment with your brand. Below are the key colors you can adjust:

Here’s an example of configuration file parameters responsible for color customization in the UI:

// Bootstrap integration is used at build-time code generation
$authid-primary-color: #1B4E90;

$theme-colors: (
    "primary":    $authid-primary-color,
    "success":    #56C06A,
    "danger":     #F63A39,
    "disabled":   #cdcecd,
    "cancel":     #6F7071,
);

// Dynamic CSS variable, which can be configured through ExecForm.theme without the "--auid-" prefix:
    --auid-font: 'Manrope';
    --auid-primaryColor: var(--bs-primary);
    --auid-warningColor: #FFCB00;
    --auid-dangerColor: #FEA402;
    --auid-cancelColor: var(--bs-cancel);
    --auid-errorColor: var(--bs-danger);
    --auid-successColor: var(--bs-success);
    --auid-disabledColor: var(--bs-disabled);
    --auid-activeColor: #247834;
    --auid-actColor: var(--auid-primaryColor); /* accent color */
    --auid-txtColor: #333746;
    --auid-txtLgColor: #505F79;
    --auid-txtContrColor: #FFFFFF; /* constrast color */
    --auid-headingColor: var(--auid-actColor);
    --auid-bgColor: #FFFFFF;
    --auid-rootBgColor: #F1F3F6;
    --auid-formBorderColor: #DFDFDF;
    --auid-dialogBorderColor: #A6A8AE;
    --auid-separatorColor: #EFEFEF;

    --auid-scrollbarColor: #0166B3;
    --auid-scrollbarTrackColor: #FFFFFF;

    --auid-headerTxtColor: #222222;
    --auid-headerBgColor: 'transparent';


    --auid-spinnerColor1: #22D1EE;
    --auid-spinnerColor2: #3D5AF1;
    --auid-spinnerTrackColor: #D9D9D9;

    --auid-linkColor: var(--auid-actColor);

    --auid-btnFont: var(--auid-font);
    --auid-btnPrimaryBgColor: var(--auid-primaryColor);
    --auid-btnPrimaryColor: var(--auid-txtContrColor);
    --auid-btnDangerBgColor: var(--auid-errorColor);
    --auid-btnDangerColor: var(--auid-txtContrColor);
    --auid-btnSuccessBgColor: var(--auid-successColor);
    --auid-btnSuccessColor: var(--auid-txtContrColor);
    --auid-btnCancelBgColor: var(--auid-cancelColor);
    --auid-btnCancelColor: var(--auid-txtContrColor);


    --auid-captureActColor: var(--auid-actColor);
    --auid-captureHeadingColor: var(--auid-captureActColor);
    --auid-captureTxtColor: var(--auid-headerTxtColor);
    --auid-captureBgColor: var(--auid-bgColor);
    --auid-captureMotionColor: var(--auid-warningColor);
    --auid-captureCorrectionColor: var(--auid-dangerColor);
    --auid-captureErrorColor: var(--auid-errorColor);
    --auid-captureSuccessColor: var(--auid-successColor);
    --auid-captureWaitColor: var(--auid-captureActColor);
    --auid-captureFeedbackColor: #fff;

primaryColor: Specifies the color for the key elements in the authID UI i.e. buttons, and spinners.
headerTxtColor: Specifies the color of the text displayed in the header.
headerBgColor: Specifies the background color displayed in the header. This parameter applies to all pages except capture screens, where the background color in the header does not apply since headerBgColor is transparent on capture screens.
captureActColor: Specifies the color of the manual capture button when the camera is active during a document scan, and, in a desktop environment, the camera selection button when the camera is active for document scanning and taking selfies.
captureTxtColor: Specifies the color of the text displayed when the camera is active for Scanning documents or taking selfies.
captureBgColor: Specifies the color of the text displayed when the camera is active for scanning documents and taking selfies.

when using json please SELECT json from drop-down, typing it in does not work - the auto formatting does not apply.