Documentation Index
Fetch the complete documentation index at: https://docs.tally.site/llms.txt
Use this file to discover all available pages before exploring further.
Tallysight widgets support light and dark modes, and apply workspace branding automatically through a CSS variable system. You control appearance through your workspace settings and optional per-widget configuration — no manual style overrides needed.
Light and dark mode
Widgets default to light mode. The active theme for a widget is set through your workspace branding settings in the Tallysight dashboard. When you configure a dark-mode palette for your workspace, widgets embedded with that workspace slug will render in dark mode automatically.
CSS variable system
Widget colors are resolved through a three-tier fallback chain. When a widget renders, it looks up each color in priority order and uses the first value it finds:
| Priority | Source | When used |
|---|
| 1 | Per-widget config overrides (--custom-*) | Explicit overrides set on an individual widget embed |
| 2 | Workspace branding (--background-*, --text-*, --border-*) | Colors fetched from your workspace settings in the Tallysight API |
| 3 | Design system defaults | Built-in fallback values when no workspace branding is set |
Color properties
Each workspace can customize 12 color properties, and each property has a separate value for light and dark mode — 24 values in total.
Border colors
| Property | Purpose |
|---|
borderAccent | Highlighted borders |
borderPrimary | Default borders |
borderSecondary | Subtle borders |
borderTertiary | Faintest borders |
| Property | Purpose |
|---|
backgroundAccent | Highlighted backgrounds |
backgroundPrimary | Main widget background |
backgroundSecondary | Card backgrounds |
backgroundTertiary | Nested container backgrounds |
| Property | Purpose |
|---|
textAccent | Highlighted text — links and emphasis |
textPrimary | Main body text |
textSecondary | Muted and secondary text |
textTertiary | Placeholder and disabled text |
Theming is applied at the workspace level. All widgets that reference the same workspace slug share branding automatically — you set your colors once, and every widget picks them up without any additional configuration.