Color Scheme¶

Defines the color scheme, brand colors, and various color states for UI elements.

Color Theme¶

ColorTheme {
  scheme: ColorScheme // (1)!

  brand: Color // (2)!
  primary: Color // (3)!
  secondary: Color // (4)!

  onDark: Color // (5)!
  onLight: Color // (6)!

  background: Color // (7)!
  screen: Color // (8)!
  neutral: Color // (9)!
  border: Color // (10)!
}

1. Defines whether the SDK uses a light or dark theme. Provided colors should match the scheme.

2. Main accent color for primary actions and highlights throughout the interface.

   

   Default ARGB #FF4000FF

3. Primary color used for main content labels and icons, and important information.

   

   Default ARGB #FF000000

4. Secondary color used for supporting content and less prominent information.

   

   Default ARGB #FF9F9F9F

5. Preferably light color in any scheme optimized for use on dark, brand, and neutral backgrounds.

   

   Default ARGB #FFFFFFFF

6. Preferably dark color in any scheme optimized for use on light backgrounds.

   

   Default ARGB #FF000000

7. Main background color used throughout the SDK interface.

   Default ARGB #FFFFFFFF

8. Zero-elevation background color.

   For the full-screen mode in the dark scheme, this color is used as a page background color, while bottom sheets inside the SDK will still use the background color. In any scheme, it will be used for full-screen image galleries.

   It's actually supposed to be black or close to black in any scheme.

   Default ARGB #FF000000

9. Neutral background color used for various UI components.

   Default ARGB #FFF2F2F7

10. Color used for component borders and dividers.

    Default ARGB #FFE5E5EA

Color Scheme¶

enum ColorScheme {
  light // (1)!
  dark // (2)!
}

1. Light theme with predominantly light colors in the design.

2. Dark theme with predominantly dark colors in the design.