CSS Variables
Bitrix24 UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.
Colors
We are still updating this page. Some data may be missing here — we will complete it shortly.
Text
Bitrix24 UI provides Tailwind CSS utility classes for text colors, allowing you to use class names like text-legend or text-description:
DimmedMutedDescriptionLegendLabel
<template>
<span class="text-dimmed">Dimmed</span>
<span class="text-muted">Muted</span>
<span class="text-description">Description</span>
<span class="text-legend">Legend</span>
<span class="text-label">Label</span>
</template>
Background
We are still updating this page. Some data may be missing here — we will complete it shortly.
Border
We are still updating this page. Some data may be missing here — we will complete it shortly.
Radius
We are still updating this page. Some data may be missing here — we will complete it shortly.
Container
We are still updating this page. Some data may be missing here — we will complete it shortly.
Header
We are still updating this page. Some data may be missing here — we will complete it shortly.
Body
Bitrix24 UI applies default classes on the <body> element of your app for consistent theming across light, edge-light, edge-dark and dark modes:
body {
scrollbar-gutter: stable;
background: var(--air-theme-background);
@apply antialiased font-(family-name:--ui-font-family-system) text-(--b24ui-typography-legend-color) scheme-light dark:scheme-dark edge-light:scheme-light edge-dark:scheme-light
}