stream-chat-android-compose/io.getstream.chat.android.compose.ui.theme/StreamDesign/ColorScale

ColorScale

data class ColorScale(val s50: Color, val s100: Color, val s150: Color, val s200: Color, val s300: Color, val s400: Color, val s500: Color, val s600: Color, val s700: Color, val s800: Color, val s900: Color)

An 11-stop color ramp representing the brand (accent) palette.

In the Stream design system the brand scale maps to blue by default. Light themes use the natural order (s50 = lightest, s900 = darkest); dark themes invert the mapping so that perceptual intensity stays consistent (s50 is still the faintest tint suitable for backgrounds).

Re-brand the entire Chat UI from a single color:

val purple = StreamDesign.ColorScale.from(brandColor = Color(0xFF6200EE))
ChatTheme(colors = StreamDesign.Colors.default(brand = purple))

For pixel-perfect branding, provide an explicit scale:

ChatTheme(
    colors = StreamDesign.Colors.default(
        brand = StreamDesign.ColorScale(
            s50 = Color(0xFFF3E8FF),
            // …
            s900 = Color(0xFF3B0764),
        ),
    ),
)

Parameters

s50

Faintest tint — backgrounds, subtle fills.

s100

Light tint — outgoing bubble background.

s150

Light-mid tint — attachment backgrounds, thread connectors.

s200

Mid-light tint — primary button border, poll track.

s300

Mid-tint — outgoing bubble on-chat border.

s400

Mid-strong — interactive accent (dark theme default).

s500

Core brand — interactive accent (light theme default).

s600

Strong — link text (dark theme).

s700

Darker — reply indicator (dark theme).

s800

Deep — brand depth.

s900

Deepest — outgoing text.

Constructors

ColorScale

constructor(s50: Color, s100: Color, s150: Color, s200: Color, s300: Color, s400: Color, s500: Color, s600: Color, s700: Color, s800: Color, s900: Color)