Skip to content
Aggarly OS
  • Getting Started
    • Introduction
  • Foundations
    • Colors
    • Spacing
    • Radius
    • Typography
    • Shadows
    • Z-Index
    • Gradients
    • Tokens
    • RTL & Direction
    • Theming
  • Layout
    • Containers
    • Grid System
    • Layout Utilities
  • Components
    • Alerts
    • Avatars
    • Buttons
    • Button Group
    • Badges
    • Inputs
    • Select
    • Checkbox
    • Counters-timers
    • Radio
    • Switch
    • Stepper
    • Select-pro
    • Cards
    • Modals
    • Dropdown
    • Popover
    • Tooltip
    • Accordion
    • Breadcrumb
    • Tabs
    • Navbar
    • List Group
    • Toasts
    • Skeleton
    • Pagination
    • Progress
    • Table
    • Icons
    • Form
    • Ribbons
    • Spinner
    • Offcanvas
    • Feedback
    • Grid
    • Data UI
  • Data UI
    • Overview
  • Platform
    • Reference DataCore
  • Widgets
    • KPI
    • Analytics
    • Behavior
  • Brand
    • Logo
    • Brand Usage
Foundations/Theming

Theming

Aggarly Platform uses CSS variables for theming. Tokens are generated from a single source of truth and applied at runtime using [data-theme="light"] and [data-theme="dark"].

Theme Switcher

The theme switcher controls the data-theme attribute on the document root. All components respond automatically.

Theme Surfaces

Light
Elevated surface content
Muted text preview
Dark
Elevated surface content
Muted text preview

Implementation

Themes are applied by setting the data-theme attribute. No component-level theming logic is required.

Theme application
<html data-theme="dark">
  ...
</html>
Theme variables (generated)
[data-theme="dark"] {
  --ds-color-bg-page: #020617;
  --ds-color-text-main: #e5e7eb;
}

Theming Rules

  • Never hardcode colors inside components.
  • Components must rely exclusively on tokens.
  • Theme overrides belong only in token definitions.
  • Adding a new theme requires no component changes.