Skip to content

Dark theme: tertiary_bg_color and segmented_control_active_bg use hardcoded greys instead of Telegram theme colors #114

@mrm007

Description

@mrm007

Problem

In dark mode, --tgui--tertiary_bg_color is hardcoded to #2a2a2a and --tgui--segmented_control_active_bg to #2f2f2f. These are neutral greys that don't match Telegram's actual dark theme palette.

According to the official Telegram Mini Apps theming documentation, the default dark theme colors are:

{
  "bg_color": "#17212b",
  "secondary_bg_color": "#232e3c",
  "section_bg_color": "#17212b",
  "header_bg_color": "#17212b"
}

These are blue-grey tones, not neutral greys. The hardcoded #2a2a2a and #2f2f2f visually clash with the actual Telegram dark theme.

This affects SegmentedControl, Avatar, Cell hover states, PinInput, and other components that use --tgui--tertiary_bg_color.

Expected behavior

These variables should derive from the Telegram theme CSS variables (e.g. --tg-theme-secondary-bg-color) rather than being hardcoded, so they match the user's actual Telegram theme — including custom themes.

Precedent

This is the same class of issue as #53 and #59, where Section was using the wrong color variable instead of the Telegram theme-aware one.

Workaround

Override on AppRoot:

<AppRoot
  style={{
    '--tgui--tertiary_bg_color': 'var(--tg-theme-secondary-bg-color)',
    '--tgui--segmented_control_active_bg': 'var(--tg-theme-bg-color)',
  } as React.CSSProperties}
/>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions