Skip to main content

​
ABHA SDK - Customizing the Theme

The ABHA SDK supports full color-token overriding. You can pass a theme object during initialization to match your application’s branding.

​
Passing theme to initAbhaApp

The theme parameter is an optional key in initAbhaApp. Pass it alongside your other configuration:
NameTypeRequiredDescription
themeobject⚙️ OptionalColor token overrides to match your organisation’s design system. All keys are optional — only supply the tokens you want to change.
window.initAbhaApp({
  containerId: "sdk_container",
  clientId: "ext",
  theme: {
    // pass only the tokens you want to override
  },
  data: { /* ... */ },
  onSuccess: (params) => { /* ... */ },
  onError: (params) => { /* ... */ },
});

​
Default Theme Colors

If no theme is provided, the SDK uses the following default values: 
const defaultAbhaColors = {
  semantic: {
    error: '#BD0F0F',
    warning: '#FCB069',
    success: '#27B961',
  },
  primary: {
    brand: '#6B5CE0', // Main buttons, radios, and active states
  },
  surface: {
    base: '#FFFFFF',      // Background of pages
    subtle: '#F2F4F7',    // Card backgrounds
    muted: '#E4E7EC',     // Dividers and borders
    strong: '#BEC5D0',
    success: '#D5F6E2',   // Success background alerts
    neutral: '#0000000D',
    danger: '#DD3F3F',
    abhaCard: '#232477',  // Specific background for the ABHA ID card
  },
  content: {
    primary: '#111B31',   // Heading and main text
    secondary: '#4B596D', // Subtext
    muted: '#9EA8B8',     // Disabled or placeholder text
    success: '#1B7E43',   // Success text
    enabled: '#ffffff',   // Enabled button text color
  },
  qrCodeColors: {
    fgColor: '#000000',   // Color of the QR code dots
    bgColor: '#FFFFFF'    // Background of the QR code
  }
};

​
Overriding the Theme

To customize the look, add the theme key to your initAbhaApp configuration: 
window.initAbhaApp({
  containerId: "sdk_container",
  clientId: "ext",
  theme: {
    primary: {
      brand: '<your_org_primary_color>',    // Brand color
    },
    semantic: {
      error: '<your_semantic_error_color>',
      warning: '<your_semantic_warning_color>',
      success: '<your_semantic_success_color>',
    },
    surface: {
      base: '<your_base_color>',            // Background of pages
      subtle: '<your_subtle_color>',        // Card backgrounds
      muted: '<your_muted_color>',          // Dividers and borders
      strong: '<your_strong_color>',
      success: '<your_success_color>',      // Success background alerts
      neutral: '<your_neutral_color>',
      danger: '<your_danger_color>',
      abhaCard: '<your_abhaCard_color>',    // Specific background for the ABHA ID card
    },
    content: {
      primary: '<your_content_primary_color>',     // Heading and main text
      secondary: '<your_content_secondary_color>', // Subtext
      muted: '<your_content_muted_color>',         // Disabled or placeholder text
      success: '<your_content_success_color>',     // Success text
      enabled: '<enabled_button_text_color>',      // Enabled button text color
    },
    qrCodeColors: {
      fgColor: '<your_qrcode_dot_color>',  // Color of the QR code dots
      bgColor: '<your_qrcode_bg_color>'    // Background of the QR code
    }
  },
  data: {
    orgIconUrl: "https://your-domain.com/logo.png",
    // ... rest of your data
  },
  onSuccess: (params) => { /* ... */ },
  onError: (params) => { /* ... */ },
  // ... other methods
});