# Theme settings for Android SDK

Theme parameters in the Android SDK are used across many system components, so changing any of them may affect multiple UI elements.

Starting from SDK version 1.30.1, the SDK theme API is available:

// create a theme using CBRTheme
val customTheme = CBRTheme {
    // configure theme parameters
    colors.backgroundCommon = CBRThemeColor(resources.getColor(R.color.owl_yellow_200))
    fonts.headline1 = CBRThemeFont(Typeface.MONOSPACE, 40)
    metrics.activityIndicatorStyle = CBRThemeMetric.Size.LARGE
    // ... other parameters
    // alternatively
    colors {
        backgroundNeutral = CBRThemeColor(Color.RED)
        // ... other parameters
    }

    fonts {
        headline1 = CBRThemeFont(Typeface.MONOSPACE, 40)
        subtitle2 = CBRThemeFont(Typeface.MONOSPACE, 10)
        // ... other parameters
    }

    metrics {
        screenHorizontalMargin = resources.getDimension(R.dimen.cbr_margin_large)
        screenHeaderAlignment = CBRThemeMetric.TextAlignment.RIGHT
        bottomSheetHandleSize = SizeF(20f, 20f)
        // ... other parameters
    }

}
val cbrSdk = CBRMobileSDK.Builder(this, apiUrl).withTheme(customTheme)

// create a theme using the CBRThemeKt.newCBRTheme() method
CBRThemeHolder theme = CBRThemeKt.newCBRTheme();

// get theme parameter scopes
ColorsScope colorsScope = theme.getColorsScope();
MetricsScope metricsScope = theme.getMetricsScope();
FontsScope fontsScope = theme.getFontsScope();

// configure theme parameters
colorsScope.setBackgroundCommon(new CBRThemeColor(Color.RED, Color.GREEN));
metricsScope.setSectionHeaderAlignment(CBRThemeMetric.TextAlignment.CENTER);
fontsScope.setHeadline2(new CBRThemeFont(Typeface.SERIF, 15));
// ... other parameters

CBRMobileSDK.Builder cbrSdk = new CBRMobileSDK.Builder(this).withTheme(theme);

# Fonts

data class CBRThemeFont(
    val typeface: Typeface,
    val sizeSp: Int
)

# headline1

theme.fonts.headline1: CBRThemeFont

Level 1 headline. Used for screen titles, primarily in combination with colors.contentStrong.

# headline2

theme.fonts.headline2: CBRThemeFont

Level 2 headline. Used for section titles, primarily in combination with colors.contentStrong.

# subtitle1

theme.fonts.subtitle1: CBRThemeFont

Level 1 subtitle. Used for subtitles, primarily in combination with colors.contentStrong.

# subtitle2

theme.fonts.subtitle2: CBRThemeFont

Level 2 subtitle. Used for subtitles, primarily in combination with colors.contentNeutral.

# body

theme.fonts.body: CBRThemeFont

Body text. Used for paragraphs, text fields, and other elements, primarily in combination with colors.contentNeutral.

# caption

theme.fonts.caption: CBRThemeFont

Secondary text. Used for auxiliary captions, primarily in combination with colors.contentWeak.

# Colors

data class CBRThemeColor(
    val colorLight: Int,
    val colorDark: Int
)

# General

# navigationBarItem

theme.colors.navigationBarItem: CBRThemeColor

Color of navigation bar items. Used only for the close button.
Default: #94A0B8 and #FFFFFF with 40% opacity in dark mode

# alertTint

theme.colors.alertTint: CBRThemeColor

Color of buttons in system notifications and on the toolbar.
Default: #1693E9 and #1485D1 in dark mode

# Backgrounds

# backgroundCommon

theme.colors.backgroundCommon: CBRThemeColor

Primary background color. Used for all screens except the camera screen.
Default: #FFFFFF and #1E232E in dark mode

# backgroundNeutral

theme.colors.backgroundNeutral: CBRThemeColor

Secondary background color. Used for verification step cards in a neutral status and for dropdown lists. The card background will be filled when using the .filled style. Default: #F6F7F9 and #FFFFFF with 7% opacity in dark mode

# backgroundSuccess

theme.colors.backgroundSuccess: CBRThemeColor

Used as the background for verification step cards in a successful status and for the successful verification message (icon images.pictureSuccess).
Default: #18B494 at 12% opacity and #18B494 at 30% opacity in dark mode

# backgroundWarning

theme.colors.backgroundWarning: CBRThemeColor

Used as the background for verification step cards in a warning status, for the data submission message (icon images.pictureSubmitted), and for the network error message (icon images.pictureWarning).
Default: #F2AA0D at 12% opacity and #F2AA0D at 30% opacity in dark mode

# backgroundCritical

theme.colors.backgroundCritical: CBRThemeColor

Used as the background for verification step cards in a critical status and for the failed verification message (icon images.pictureFailure).
Default: #F05C5C at 12% opacity and #F05C5C at 30% opacity in dark mode

# Content

# contentLink

theme.colors.contentLink: CBRThemeColor

Color of text links.
Default: #1693E9 and #1485D1 in dark mode

# contentStrong

theme.colors.contentStrong: CBRThemeColor

Color of headings and some subheadings.
Default: #333C4D and #FFFFFF at 85% opacity in dark mode

# contentNeutral

theme.colors.contentNeutral: CBRThemeColor

Color of main text, some subheadings, and auxiliary elements.
Default: #5C6B8A and #FFFFFF at 60% opacity in dark mode

# contentWeak

theme.colors.contentWeak: CBRThemeColor

Color of secondary text and auxiliary elements.
Default: #94A0B8 and #FFFFFF at 40% opacity in dark mode

# contentInfo

theme.colors.contentInfo: CBRThemeColor

Used only for the border of the viewport on the video screen.
Default: #1693E9 and #1485D1 in dark mode

# contentSuccess

theme.colors.contentSuccess: CBRThemeColor

Used as the icon color for verification step cards in the success status, text color for instructions, color of the images.pictureSuccess icon, and outline color of the capture area.
Default: #18B494

# contentWarning

theme.colors.contentWarning: CBRThemeColor

Text color for warnings during verification and automatically generated images images.pictureWarning and images.pictureSubmitted.
Default: #E6A00B

# contentCritical

theme.colors.contentCritical: CBRThemeColor

Text color for critical issues during verification and automatically generated images images.pictureFailure.
Default: #F05C5C

# Primary button

# primaryButtonBackground

theme.colors.primaryButtonBackground: CBRThemeColor

Background color of the primary button in normal state.
Default: #1693E9 and #1485D1 in dark mode

# primaryButtonBackgroundHighlighted

theme.colors.primaryButtonBackgroundHighlighted: CBRThemeColor

Background color of the primary button in pressed state.
Default: #1485D1 and #0B4A75 in dark mode

# primaryButtonBackgroundDisabled

theme.colors.primaryButtonBackgroundDisabled: CBRThemeColor

Background color of the primary button in disabled state.
Default: #A1D2F7 and #072F4B in dark mode

# primaryButtonContent

theme.colors.primaryButtonContent: CBRThemeColor

Text color of the primary button in normal state.
Default: #FFFFFF and #FFFFFF at 85% opacity in dark mode

# primaryButtonContentHighlighted

theme.colors.primaryButtonContentHighlighted: CBRThemeColor

Content color of the primary button in pressed state.
Default: #FFFFFF and #FFFFFF at 85% opacity in dark mode

# primaryButtonContentDisabled

theme.colors.primaryButtonContentDisabled: CBRThemeColor

Content color of the primary button in disabled state.
Default: #FFFFFF and #0B4A75 in dark mode

# Secondary button

# secondaryButtonBackground

theme.colors.secondaryButtonBackground: CBRThemeColor

Background color of the secondary button in normal state.
Default: transparent

# secondaryButtonBackgroundHighlighted

theme.colors.secondaryButtonBackgroundHighlighted: CBRThemeColor

Background color of the secondary button in pressed state.
Default: #E8F4FD and #072F4B in dark mode

# secondaryButtonBackgroundDisabled

theme.colors.secondaryButtonBackgroundDisabled: CBRThemeColor

Background color of the secondary button in disabled state.
Default: transparent

# secondaryButtonContent

theme.colors.secondaryButtonContent: CBRThemeColor

Content color of the secondary button in normal state.
Default: #1693E9 and #1485D1 in dark mode

# secondaryButtonContentHighlighted

theme.colors.secondaryButtonContentHighlighted: CBRThemeColor

Content color of the secondary button in pressed state.
Default: #1693E9 and #1485D1 in dark mode

# secondaryButtonContentDisabled

theme.colors.secondaryButtonContentDisabled: CBRThemeColor

Content color of the secondary button in disabled state.
Default: #A1D2F7 and #0B4A75 in dark mode

# Cards

The area highlighting elements related to a specific verification step.

# cardPlainBackground

theme.colors.cardPlainBackground: CBRThemeColor

Background color for cards with the .plain style.
Default: nil

# cardBorderedBackground

theme.colors.cardBorderedBackground: CBRThemeColor

Background color for cards with the .bordered style.
Default: nil

# Camera

# cameraBackground

theme.colors.cameraBackground: CBRThemeColor

Background color of the camera screen.
Default: #1E232E

# cameraContent

theme.colors.cameraContent: CBRThemeColor

Color of interface elements on the camera screen: gallery button, shutter button, etc.
Default: #FFFFFF

# Input fields

# fieldBackground

theme.colors.fieldBackground: CBRThemeColor

Background color of text input fields.
Default: #F6F7F9 and #FFFFFF with 7% opacity in dark mode

# fieldBackgroundInvalid

theme.colors.fieldBackgroundInvalid: CBRThemeColor

Background color for invalid input fields.
Default: colors.backgroundCritical

# fieldBorder

theme.colors.fieldBorder: CBRThemeColor

Border color of input fields.
Default: transparent

# fieldPlaceholder

theme.colors.fieldPlaceholder: CBRThemeColor

Color of placeholder text in input fields.
Default: #94A0B8 and #FFFFFF with 40% opacity in dark mode

# fieldContent

theme.colors.fieldContent: CBRThemeColor

Color of text entered into input fields.
Default: #333C4D and #FFFFFF with 85% opacity in dark mode

# fieldTint

theme.colors.fieldTint: CBRThemeColor

Highlight color for input fields, used for text fields, checkboxes, and switches.
Default: #1693E9 and #1485D1 in dark mode

# List

# listSeparator

theme.colors.listSeparator: CBRThemeColor

Color of list separators.
Default: #D1D6E1 and #FFFFFF with 20% opacity in dark mode

# listSelectedItemBackground

theme.colors.listSelectedItemBackground: CBRThemeColor

Background color for selected list items.
Default: #F6F7F9 and #FFFFFF with 7% opacity in dark mode

# Bottom sheet

# bottomSheetHandle

theme.colors.bottomSheetHandle: CBRThemeColor

Foreground color of the bottom sheet handle. The handle can appear inside (bottomSheetBackground) or outside (backgroundCommon).
Default: #D1D6E1 and #FFFFFF with 20% opacity in dark mode

# bottomSheetBackground

theme.colors.bottomSheetBackground: CBRThemeColor

Background color of the bottom sheet.
Default: #FFFFFF and #333C4D in dark mode

# Metrics

# Common

# activityIndicatorStyle

theme.metrics.activityIndicatorStyle: CBRThemeMetric.Size

Style of the activity indicator.
Default: MEDIUM

# Content

# screenHorizontalMargin

theme.metrics.screenHorizontalMargin: Float

Horizontal margin for screen content.
Default: 16pt

# Buttons

# buttonHeight

theme.metrics.buttonHeight: Float

Height of primary and secondary buttons.
Default: 48dp

# buttonCornerRadius

theme.metrics.buttonCornerRadius: Float

Corner radius of primary and secondary buttons.
Default: 8dp

# buttonBorderWidth

theme.metrics.buttonBorderWidth: Float

Border width of secondary buttons. Primary buttons with borders are not supported yet.
Default: 1dp

# Input fields

# fieldHeight

theme.metrics.fieldHeight: Float

Height of text input fields.
Default: 48dp

# fieldBorderWidth

theme.metrics.fieldBorderWidth: Float

Border width of text input fields.
Default: 0dp

# fieldCornerRadius

theme.metrics.fieldCornerRadius: Float

Corner radius of text input fields.
Default: 8dp

# Viewport

# viewportBorderWidth

theme.metrics.viewportBorderWidth: Float

Thickness of the selfie viewport border.
Default: 8dp

# Bottom sheet

# bottomSheetCornerRadius

theme.metrics.bottomSheetCornerRadius: Float

Corner radius of the bottom sheet.
Default: 16dp

# bottomSheetHandleSize

theme.metrics.bottomSheetHandleSize: SizeF

Size of the bottom sheet handle.>
Default: 36dp x 4dp

# List separator

# listSeparatorHeight

theme.metrics.listSeparatorHeight: Float

Height of the list separator.
Default: 1dp

# listSeparatorMarginLeft

theme.metrics.listSeparatorMarginLeft: Float

Left margin of the list separator.
Default: 0dp

# listSeparatorMarginRight

theme.metrics.listSeparatorMarginRight: Float

Right margin of the list separator.
Default: 0dp

# Card style

Available styles:

• PLAIN — no border or background (see colors.cardPlainBackground).
• DEFAULT — uses standard background.
• BORDERED — card has a border (see colors.cardBorderedBackground).

enum class CardStyle(val value: String) : CBRThemeMetric {
    BORDERED("bordered"),
    PLAIN("plain"),
    DEFAULT("default")
}

# verificationStepCardStyle

theme.metrics.verificationStepCardStyle: CBRThemeMetric.CardStyle

Style for verification step cards.
Default: DEFAULT

# verificationCommentCardStyle

theme.metrics.verificationCommentCardStyle: CBRThemeMetric.CardStyle

Style for verification comment cards, shown on temporary rejection.
Default: BORDERED

# supportItemCardStyle

theme.metrics.supportItemCardStyle: CBRThemeMetric.CardStyle

Style for support item cards.
Default: BORDERED

# documentTypeCardStyle

theme.metrics.documentTypeCardStyle: CBRThemeMetric.CardStyle

Style for document type cards.
Default: DEFAULT

# selectedCountryCardStyle

theme.metrics.selectedCountryCardStyle: CBRThemeMetric.CardStyle

Style for selected country cards.
Default: DEFAULT

# cardCornerRadius

theme.metrics.cardCornerRadius: Float

Corner radius of cards.
Default: 8dp

# cardBorderWidth

theme.metrics.cardBorderWidth: Float

Border width of cards (used only for BORDERED style).
Default: 1dp

# Text alignment

enum class TextAlignment(val value: String) : CBRThemeMetric {
    LEFT("left"),
    CENTER("center"),
    RIGHT("right")
}

# screenHeaderAlignment

theme.metrics.screenHeaderAlignment: CBRThemeMetric.TextAlignment

Alignment of screen headers.
Default: CENTER

# sectionHeaderAlignment

theme.metrics.sectionHeaderAlignment: CBRThemeMetric.TextAlignment

Alignment of section headers.
Default: LEFT