Theming

TaskOn widgets use a two-layer token system:

Seed tokens: base inputs (brand colors, radius, font size)
Map tokens: final resolved tokens used by UI

Resolution priority:


map override > derived from seed > default

Basic Usage


import { ThemeProvider } from "@taskon/widget-react/core";
 
<ThemeProvider
  theme={{
    mode: "dark",
    seed: {
      colorPrimary: "#2563eb",
      borderRadius: 10,
    },
  }}
>
  {children}
</ThemeProvider>

Default mode is dark when no theme.mode is set.

Seed Tokens (Input)

Common seed tokens:

colorPrimary
colorSecondary
colorSuccess
colorWarning
colorError
colorLink
colorText
colorTextOnPrimary
colorBgBase
borderRadius
fontSize

Map Tokens (Output)

Common map tokens:

colorPrimary, colorPrimaryHover, colorPrimaryActive, colorPrimaryBg
colorBgCanvas, colorBgSurface, colorBgSurfaceSubtle, colorBgFloating
colorText, colorTextSecondary, colorTextDisabled
colorBorder, colorBorderSecondary
fontSize, fontSizeSm, fontSizeLg
spacing, spacingSm, spacingMd, spacingLg

Light/Dark Split Config


<ThemeProvider
  theme={{
    mode: "auto",
    light: { seed: { colorPrimary: "#2563eb" } },
    dark: { seed: { colorPrimary: "#60a5fa" } },
  }}
>
  {children}
</ThemeProvider>

Cloud Theme and `themeMode`

Widgets that support widgetId can load theme from TaskOn cloud config. You can still override mode on the widget instance:


<QuestWidget widgetId={123} themeMode="light" />
<QuestWidget widgetId={123} themeMode="dark" />
<QuestWidget widgetId={123} themeMode="auto" />

themeMode applies to:

QuestWidget
CommunityTaskList
LeaderboardWidget
UserCenterWidget

CSS Variables

All resolved tokens are exposed as CSS variables with --taskon- prefix:


colorPrimary  -> --taskon-color-primary
borderRadius  -> --taskon-border-radius
colorBgCanvas -> --taskon-color-bg-canvas
colorText     -> --taskon-color-text

Example:


.my-button {
  background: var(--taskon-color-primary);
  border-radius: var(--taskon-border-radius);
  color: var(--taskon-color-text);
}

Compact Mode


<ThemeProvider theme={{ compact: true }}>
  {children}
</ThemeProvider>