Customisation

Make the capture screens feel like your product: brand colours, your own wording, Arabic or English, or your own screens entirely.

Brand colours

Platform	Theme
Android	`BlinkTheme(accent, background, text, onAccent)` — ARGB ints
iOS	`BlinkTheme(accent:)`
Web	`theme: { accent, background }` — CSS colours
React Native	`theme={{ accent }}`
Flutter	`BlinkTheme(accent, background, text, onAccent, buttonCornerRadius, instructionPosition, scrimColor, scrimOpacity, brandName, privacyPolicyUrl, …)`

lib/kyc.dartdart

BlinkKyc(
  'https://kyc-api.blink-pay.net',
  sessionToken,
  theme: const BlinkTheme(
    accent: Color(0xFF15803D),
    background: Color(0xFF0E1E4D),
    text: Color(0xFFFFFFFF),
    buttonCornerRadius: 12,
    instructionPosition: BlinkInstructionPosition.bottom,
    brandName: 'Your Bank',
    privacyPolicyUrl: 'https://yourbank.com/privacy',
  ),
);

Accent colours sit on a dark camera stage, so a bright brand colour usually reads well there even if it is too light for text on white.

Every element

Beyond the brand colours, each part of the capture screens can be set on its own. Every field below is optional and keeps the built-in look when you leave it out. Requires Flutter blink_kyc 2.1.0 or Android blink-kyc-android 1.4.0.

Field	Changes
`titleColor`, `titleTextSize`	Screen titles. Help-page titles are drawn a third larger.
`helperTextColor`, `helperTextSize`	Camera instructions and help-page descriptions.
`helperBackgroundColor`	A rounded background behind the live camera instruction.
`secondaryButtonColor`, `secondaryButtonTextColor`	Retake, Change selection and other secondary buttons.
`buttonTextSize`	Every button label, including Capture.
`buttonPosition`	Buttons pinned to the bottom, or directly below the content, on help and message screens. Unset keeps each screen's own placement.
`guideColor`, `guideSuccessColor`	The document frame and face oval while searching, and once placed correctly.
`instructionPosition`, `livenessInstructionPosition`	Instruction at the top, middle or bottom — set separately for the ID camera and the face camera.
`logo`	Shown in the capture screens' top bar instead of `brandName`.
`documentHelpImage`, `documentBackHelpImage`, `livenessHelpImage`, `nfcHelpImage`	Your own illustrations for the ID, back-of-ID, face and chip screens.

Images

In Flutter an image is BlinkImage.asset(path) (declared under flutter: assets: in your pubspec) or BlinkImage.memory(bytes); on Android it is BlinkImage.Resource(R.drawable.…) or BlinkImage.File(path). They are loaded before the camera opens, so a missing asset is reported rather than silently skipped.

lib/kyc.dartdart

BlinkKyc(
  blinkApi,
  sessionToken,
  theme: const BlinkTheme(
    titleColor: Color(0xFFFFFFFF),
    helperTextColor: Color(0xFFE2E8F0),
    helperBackgroundColor: Color(0x99000000),
    guideColor: Color(0xFF15803D),
    guideSuccessColor: Color(0xFF22C55E),
    buttonPosition: BlinkButtonPosition.belowContent,
    livenessInstructionPosition: BlinkInstructionPosition.top,
    logo: BlinkImage.asset('assets/kyc/logo.png'),
    documentHelpImage: BlinkImage.asset('assets/kyc/id_help.png'),
    livenessHelpImage: BlinkImage.asset('assets/kyc/face_help.png'),
  ),
);

VerifyActivity.ktkotlin

BlinkKyc(
    baseUrl, sessionToken,
    theme = BlinkTheme(
        titleColor = 0xFFFFFFFF.toInt(),
        helperBackgroundColor = 0x99000000.toInt(),
        buttonPosition = BlinkButtonPosition.BELOW_CONTENT,
        livenessInstructionPosition = BlinkInstructionPosition.TOP,
        logo = BlinkImage.Resource(R.drawable.bank_logo),
        documentHelpImage = BlinkImage.Resource(R.drawable.kyc_id_help),
    ),
)

The same field names apply on Android, iOS and the Flutter-drawn screens, so one theme covers every platform. The Web and React Native SDKs keep their existing accent and background options.

Text & language

Every piece of customer-facing copy can be replaced with BlinkStrings, for example the document title and the capture button:

lib/kyc.dartdart

BlinkKyc(apiUrl, sessionToken,
    strings: const BlinkStrings(documentTitle: 'Verify your identity', captureButton: 'Take photo'));

For Blink's complete built-in Arabic copy, call setLocale('ar') (Flutter). English is the default. Hosted links default to Arabic unless the link carries lang=en.

Your own screens

To design every screen yourself, let the SDK tell you what to capture and hand it the bytes. Blink still issues the challenges, receives the upload and decides.

Platform	How
Flutter	`.capture(BlinkCaptureController())` and watch `controller.request` — see the Flutter guide.
Android	`.capture(CaptureHooks)` — see Headless capture.
Web	`.capture({ document, liveness })` — see Headless capture.

The built-in screens capture better. They guide the customer, check sharpness, glare and framing, and only take the photo when it is usable. Your own screens should do the same, or expect more DOCUMENT_UNREADABLE outcomes.

Dark mode

The capture screens use a dark camera stage in both system themes, set by background. The rest of your app is unaffected.