Publishers · Reference

Task styling

CSS variables, ::part selectors and slots for the <adsun-task> element.

The task card follows Telegram theme colors by default. To match your app exactly, use CSS variables:

adsun-task {
  --adsun-task-bg: #1c1c1e;
  --adsun-task-padding: 12px;
  --adsun-task-font-size: 15px;          /* min 14px */
  --adsun-task-icon-size: 44px;          /* min 30px */
  --adsun-task-icon-border-radius: 12px;
  --adsun-task-icon-title-gap: 12px;     /* 5–40px */
  --adsun-task-button-width: 88px;       /* min 40px */
  --adsun-radius: 16px;                  /* card corner radius */
  --adsun-fg: #ffffff;                   /* main text colour */
  --adsun-text: #a1a1aa;                 /* secondary text colour */

What you can change

Those variables are the whole styling API of the task row: background, padding, icon size, button width, gap, corner radius and the two text colours. The SDK clamps them so the row always stays readable — the font never goes below 14 px, the icon below 30 px, the button below 40 px wide, and the gap stays between 5 and 40 px. The markup inside the row is private, so there is nothing to select with ::part() or a child selector.

Previous pageSDK API reference Next pageReact, Vue & Unity

Still stuck? Write to support@adsun.io or our Telegram support — we answer fast.