Color Configuration
In order to fit the Docutain Scanner SDK for Capacitor into your corporate design, you have a bunch of options to alter the default color theming of the ready to use UI components.
Supported colors
The following is a list of all colors currently supported.
Color | Default Value | Description |
---|---|---|
ColorPrimary | light: #4CAF50 dark: #4CAF50 | Used to tint progress indicators, the text color of secondary or dialog buttons and the background color of primary buttons. |
ColorOnPrimary | light: #FFFFFF dark: #000000 | Used to tint elements that reside on ColorPrimary , like the icon and text of primary buttons. E.g. on the empty result screen or onboarding. |
ColorSecondary | light: #4CAF50 dark: #4CAF50 | Used to tint selectable controls and the capture button. ![]() |
ColorOnSecondary | light: #FFFFFF dark: #000000 | Used to tint elements that reside on ColorSecondary , like the icon of the capture button. |
ColorScanButtonsLayoutBackground | light: #121212 dark: #121212 | Used to tint the background of the scan buttons layout. |
ColorScanButtonsForeground | light: #FFFFFF dark: #FFFFFF | Used to tint the foreground of the scan buttons layout, like the torch button. |
ColorScanPolygon | light: #4CAF50 dark: #4CAF50 | Used to tint the polygon overlay which highlights the currently detected document. ![]() |
ColorBottomBarBackground | light: #FFFFFF dark: #212121 | Used to tint the bottom toolbar background of the image editing page. |
ColorBottomBarForeground | light: #323232 dark: #BEBEBE | Used to tint the buttons within the bottom toolbar of the image editing page. |
ColorTopBarBackground | light: #4CAF50 dark: #2a2a2a | Used to tint the top toolbar background. |
ColorTopBarForeground | light: #FFFFFF dark: #DEFFFFFF | Used to tint the buttons contained in the top toolbar. |
ColorTopBarTitle | light: #FFFFFF dark: #DEFFFFFF | Used to tint the text of the top toolbar title. |
Dark Mode
The Docutain Scanner SDK for Capacitor also supports dark mode theming. The process is the same, just define different colors for the night version of your theme. The SDK decides which color to use depending on the device's sytem setting and it will change at runtime, if the device's display mode changes.
Defining a custom theme
In order to alter at least one of the colors mentioned above, you need to pass a ColorConfig
containing the colors you wish to alter.
The following is an example which alters some (not all) colors to get a bluish-purple theme.
- Document Scan
- Photo Payment
import { DocutainSDK } from '@docutain/capacitor-plugin-docutain-sdk'
const result = await DocutainSDK.startDocumentScanner({
ColorConfig: {
ColorTopBarBackground: {
Light: '#0000CF',
Dark: '#2A2A2A'
},
ColorBottomBarBackground: {
Light: '#0000CF',
Dark: '#2A2A2A'
},
ColorPrimary: {
Light: '#0000CF',
Dark: '#b894f6'
},
ColorSecondary: {
Light: '#0000CF',
Dark: '#b894f6'
},
ColorOnSecondary: {
Light: '#FFFFFF',
Dark: '#000000'
},
ColorScanPolygon: {
Light: '#0000CF',
Dark: '#b894f6'
},
ColorBottomBarForeground: {
Light: '#FFFFFF',
Dark: '#DEFFFFFF'
}
}
});
import { DocutainSDK } from '@docutain/capacitor-plugin-docutain-sdk'
const result = await DocutainSDK.startPhotoPayment({
ColorConfig: {
ColorTopBarBackground: {
Light: '#0000CF',
Dark: '#2A2A2A'
},
ColorBottomBarBackground: {
Light: '#0000CF',
Dark: '#2A2A2A'
},
ColorPrimary: {
Light: '#0000CF',
Dark: '#b894f6'
},
ColorSecondary: {
Light: '#0000CF',
Dark: '#b894f6'
},
ColorOnSecondary: {
Light: '#FFFFFF',
Dark: '#000000'
},
ColorScanPolygon: {
Light: '#0000CF',
Dark: '#b894f6'
},
ColorBottomBarForeground: {
Light: '#FFFFFF',
Dark: '#DEFFFFFF'
}
}
});