Theme CSS Variables

This page lists the main Scheduler theme CSS variables that can be useful when customizing skins. The defaults are defined in scheduler/sources/css/src/themes/variables.less; other theme files override part of this list. For examples of overriding these variables in an application or a custom skin, see Skins Customization.

提示

Start with the base typography, color, container, popup, border, radius, spacing, and event variables. Variables described as "Defaults to" or "Derived from" inherit from another CSS variable by default; override them directly only when that part of Scheduler should intentionally differ from the rest of the theme.

Theme identity

Variable	Description
--dhx-scheduler-theme	Stores the active Scheduler theme name used by Scheduler to detect CSS-variable based skins.

Typography

Variable	Description
--dhx-scheduler-font-family	Sets the main font family for the Scheduler container and inherited UI elements.
--dhx-scheduler-font-size	Sets the base font size used by Scheduler text and derived typography tokens.
--dhx-scheduler-heading-font-size	Sets the font size for prominent headings such as the current date label and popup titles; derived from --dhx-scheduler-font-size by default.
--dhx-scheduler-heading-font-weight	Sets the font weight for Scheduler headings and section labels.
--dhx-scheduler-important-font-size	Sets the font size for emphasized text such as toolbar and quick-info date labels; defaults to --dhx-scheduler-font-size.
--dhx-scheduler-important-line-height	Sets the line height for emphasized text blocks.
--dhx-scheduler-important-font-weight	Sets the font weight for emphasized text and navigation labels.
--dhx-scheduler-regular-font-size	Sets the regular body text size for popups, tooltips, and general content; defaults to --dhx-scheduler-font-size.
--dhx-scheduler-regular-font-weight	Sets the regular body text weight for Scheduler content.
--dhx-scheduler-regular-line-height	Sets the regular body text line height.
--dhx-scheduler-caption-font-size	Sets the compact caption text size used by scales, month events, and event titles; derived from --dhx-scheduler-font-size by default.
--dhx-scheduler-caption-font-weight	Sets the compact caption text weight used by scales and month events.
--dhx-scheduler-caption-line-height	Sets the compact caption text line height.

Base colors

Variable	Description
--dhx-scheduler-base-colors-primary	Sets the main accent color for active controls, datepicker highlights, and default action styling.
--dhx-scheduler-base-colors-primary-hover	Sets the hover color for primary controls and datepicker hover states.
--dhx-scheduler-base-colors-primary-active	Sets the active or pressed color for primary controls.
--dhx-scheduler-base-colors-primary-lighter	Sets the light accent fill used by outline button hover states and subtle highlights.
--dhx-scheduler-base-colors-warning	Sets the warning color used by warning messages.
--dhx-scheduler-base-colors-error	Sets the danger color used by delete buttons, error messages, and related states.
--dhx-scheduler-base-colors-error-hover	Sets the hover color for danger controls.
--dhx-scheduler-base-colors-error-active	Sets the active or pressed color for danger controls.
--dhx-scheduler-base-colors-error-lighter	Sets the light danger fill used by danger-outline hover states.
--dhx-scheduler-base-colors-error-text	Sets the text color for controls with an error-colored background.
--dhx-scheduler-base-colors-success	Defines the semantic success color token in the theme palette.
--dhx-scheduler-base-colors-white	Sets the white color token used by controls and selected datepicker cells.
--dhx-scheduler-base-colors-select	Sets the selected or highlighted background color for current dates, selected rows, and alternating grid rows.
--dhx-scheduler-base-colors-hover-color	Defines a shared hover background token in the theme palette.
--dhx-scheduler-base-colors-border	Sets the base border color for grid lines, scales, and form controls.
--dhx-scheduler-base-colors-icons	Sets the default icon color.
--dhx-scheduler-base-colors-icons-hover	Sets the icon color for hovered icon buttons.
--dhx-scheduler-base-colors-icons-active	Sets the icon color for active icon buttons.
--dhx-scheduler-base-colors-disabled	Sets the disabled background color for controls and blocked time areas.
--dhx-scheduler-base-colors-readonly	Sets the text color for read-only values in the lightbox; defaults to --dhx-scheduler-base-colors-icons.
--dhx-scheduler-base-colors-text-light	Sets the secondary text color used by navigation, scales, and sort indicators.
--dhx-scheduler-base-colors-text-base	Sets the main text color token used by the Scheduler container and derived elements.
--dhx-scheduler-base-colors-background	Sets the main background color token used by the Scheduler container.

Container and popup surfaces

Variable	Description
--dhx-scheduler-container-background	Sets the Scheduler container background; defaults to --dhx-scheduler-base-colors-background.
--dhx-scheduler-container-color	Sets the Scheduler container text color; defaults to --dhx-scheduler-base-colors-text-base.
--dhx-scheduler-popup-background	Sets the background for popups, tooltips, quick info, datepickers, and lightbox-derived surfaces; defaults to --dhx-scheduler-container-background.
--dhx-scheduler-popup-color	Sets the text color for popups, tooltips, quick info, datepickers, and lightbox-derived surfaces; defaults to --dhx-scheduler-container-color.
--dhx-scheduler-popup-border	Sets the border for popup-style surfaces.
--dhx-scheduler-popup-border-radius	Sets the border radius for popup-style surfaces; defaults to --dhx-scheduler-border-radius.

Layout, borders, and shadows

Variable	Description
--dhx-scheduler-base-module	Sets the base sizing unit used for compact dimensions such as event padding and resize handles.
--dhx-scheduler-base-padding	Sets the base spacing unit used across Scheduler controls, scales, month cells, and forms.
--dhx-scheduler-border-radius	Sets the common border radius for Scheduler controls, events, tabs, and framed UI elements; defaults to --dhx-scheduler-base-module.
--dhx-scheduler-box-shadow-s	Sets the small shadow used by quick info, datepickers, and selected event menus.
--dhx-scheduler-box-shadow-m	Sets the medium shadow used by tooltips, minicalendars, global tips, and info messages.
--dhx-scheduler-box-shadow-l	Sets the large shadow used by modal boxes.
--dhx-scheduler-toolbar-height	Sets the minimum height of the Scheduler navigation line.
--dhx-scheduler-navline-font-color	Sets the text color of the navigation line; defaults to --dhx-scheduler-base-colors-text-light.
--dhx-scheduler-default-border	Sets the default border used for data areas, scale cells, month cells, and list rows; derived from --dhx-scheduler-base-colors-border by default.
--dhx-scheduler-header-border	Sets the border used by header and scale areas; defaults to --dhx-scheduler-default-border.
--dhx-scheduler-halfhour-border	Sets the border style for inner time slots between full-hour rows; derived from --dhx-scheduler-base-colors-border by default.

Events

Variable	Description
--dhx-scheduler-event-text-primary	Sets the default text color token for event text placed over the default event background.
--dhx-scheduler-event-blue	Sets the predefined blue event background gradient.
--dhx-scheduler-event-green	Sets the predefined green event background gradient.
--dhx-scheduler-event-violet	Sets the predefined violet event background gradient.
--dhx-scheduler-event-yellow	Sets the predefined yellow event background gradient.
--dhx-scheduler-event-background	Sets the default background for rendered events in day, week, timeline, agenda, year, and map views; defaults to --dhx-scheduler-event-blue.
--dhx-scheduler-event-border	Sets the border for rendered event boxes and bars.
--dhx-scheduler-event-color	Sets the default text color for rendered event boxes and bars; defaults to --dhx-scheduler-event-text-primary.
--dhx-scheduler-event-marker-color	Sets the color of small event markers used in compact calendar cells; defaults to --dhx-scheduler-event-background.
--dhx-scheduler-event-title-font-size	Sets the font size for the event title/header line; defaults to --dhx-scheduler-caption-font-size.
--dhx-scheduler-event-title-line-height	Sets the line height for the event title/header line; defaults to --dhx-scheduler-caption-line-height.
--dhx-scheduler-event-text-font-size	Sets the font size for event body text; defaults to --dhx-scheduler-regular-font-size.
--dhx-scheduler-event-text-line-height	Sets the line height for event body text; defaults to --dhx-scheduler-regular-line-height.
--dhx-scheduler-event-text-font-weight	Sets the font weight for event body text; defaults to --dhx-scheduler-regular-font-weight.
--dhx-scheduler-event-bar-font-size	Sets the compact font size used by event bars and small events; defaults to --dhx-scheduler-caption-font-size.
--dhx-scheduler-event-bar-line-height	Sets the compact line height used by event bars and small events; defaults to --dhx-scheduler-caption-line-height.
--dhx-scheduler-event-menu-background	Sets the background for the selected event action menu; defaults to --dhx-scheduler-popup-background.
--dhx-scheduler-event-menu-color	Sets the text and icon color for the selected event action menu; defaults to --dhx-scheduler-base-colors-primary.

注释

Per-event color and textColor values override --dhx-scheduler-event-background and --dhx-scheduler-event-color through inline CSS variables.

Lightbox and form controls

Variable	Description
--dhx-scheduler-control-height	Sets the default height of buttons, inputs, and select controls.
--dhx-scheduler-checkbox-height	Sets the height of checkbox-style inputs in the lightbox.
--dhx-scheduler-lightbox_font-family	Sets the font family used inside the lightbox; defaults to --dhx-scheduler-font-family.
--dhx-scheduler-lightbox-font-size	Sets the default font size used inside the lightbox; defaults to --dhx-scheduler-important-font-size.
--dhx-scheduler-lightbox-font-weight	Sets the default font weight used inside the lightbox; defaults to --dhx-scheduler-important-font-weight.
--dhx-scheduler-lightbox-background	Sets the lightbox background color; defaults to --dhx-scheduler-popup-background.
--dhx-scheduler-lightbox-border	Sets the outer lightbox border; defaults to --dhx-scheduler-popup-border.
--dhx-scheduler-lightbox-control-border	Sets the border for lightbox inputs, selects, and textareas; defaults to --dhx-scheduler-default-border.
--dhx-scheduler-lightbox-color	Sets the lightbox text color; defaults to --dhx-scheduler-popup-color.
--dhx-scheduler-lightbox-title-background	Sets the lightbox title bar background; defaults to --dhx-scheduler-base-colors-select.
--dhx-scheduler-lightbox-title-color	Sets the lightbox title bar text color; defaults to --dhx-scheduler-lightbox-color.
--dhx-scheduler-lightbox-title-font-size	Sets the lightbox title font size; defaults to --dhx-scheduler-heading-font-size.
--dhx-scheduler-lightbox-max-width	Sets the default maximum width of the lightbox.
--dhx-scheduler-lightbox-wide-max-width	Sets the maximum width of the wide lightbox layout.
--dhx-scheduler-lightbox-width	Sets the active lightbox width token used by the default and wide lightbox layouts; defaults to --dhx-scheduler-lightbox-max-width.

Scales and calendar views

Variable	Description
--dhx-scheduler-scale-color	Sets the text color for day, week, month, and timeline scale labels; defaults to --dhx-scheduler-container-color.
--dhx-scheduler-timescale-background	Sets the background for time scale holders and month cells; defaults to --dhx-scheduler-container-background.
--dhx-scheduler-timescale-today-background	Sets the background used for the current day in time scales, month cells, and datepicker cells; defaults to --dhx-scheduler-base-colors-select.
--dhx-scheduler-hours-font-size	Sets the font size for hour labels in day and week views; defaults to --dhx-scheduler-caption-font-size.
--dhx-scheduler-hours-font-weight	Sets the font weight for hour labels in day and week views; defaults to --dhx-scheduler-caption-font-weight.
--dhx-scheduler-inactive-month-color	Sets the color for dates outside the active month; defaults to --dhx-scheduler-base-colors-icons.
--dhx-scheduler-month-header-color	Sets the text color for month-cell headers; defaults to --dhx-scheduler-container-color.
--dhx-scheduler-month-day-header-padding	Sets the padding of month-cell day headers; derived from --dhx-scheduler-base-padding by default.
--dhx-scheduler-month-event-marker-size	Sets the size of compact event markers in month, quick-info, and datepicker UI; derived from --dhx-scheduler-base-module by default.
--dhx-scheduler-list-line-height	Sets the row height and line height for agenda legacy and grid rows.

Timeline, grid, and agenda

Variable	Description
--dhx-scheduler-agenda-date-column-width	Sets the date column width in the legacy agenda view.
--dhx-scheduler-agenda-date-width	Sets the date header column width in the newer agenda view.
--dhx-scheduler-agenda-event-date-width	Sets the minimum width of the event time column in the newer agenda view.
--dhx-scheduler-grid-event-background	Sets the background for grid view event rows.
--dhx-scheduler-grid-event-text	Sets the text color for grid view event rows.
--dhx-scheduler-timeline-folder-background	Sets the background for folder rows and folder cells in timeline and tree timeline views; defaults to --dhx-scheduler-base-colors-disabled.
--dhx-scheduler-timeline-folder-color	Sets the text color for timeline folder labels; defaults to --dhx-scheduler-base-colors-primary.
--dhx-scheduler-treetimeline-level-padding	Sets the indentation step for each nested level in tree timeline labels.
--dhx-scheduler-week-agenda-scale-height	Sets the height of day headers in week agenda view.
--dhx-scheduler-week-agenda-scale-font-size	Sets the font size of day headers in week agenda view; defaults to --dhx-scheduler-important-font-size.
--dhx-scheduler-week-agenda-scale-font-weight	Sets the font weight of day headers in week agenda view; defaults to --dhx-scheduler-heading-font-weight.

Markers and blocked time

Variable	Description
--dhx-scheduler-blocked-time-background	Sets the background for blocked or marked time spans; defaults to --dhx-scheduler-base-colors-disabled.
--dhx-scheduler-today-marker-color	Sets the color of the current-time marker line; defaults to --dhx-scheduler-base-colors-error.

Modal boxes and messages

Variable	Description
--dhx-scheduler-info-background	Sets the background for Scheduler info messages; defaults to --dhx-scheduler-popup-background.
--dhx-scheduler-info-color	Sets the text color for Scheduler info messages; defaults to --dhx-scheduler-popup-color.
--dhx-scheduler-info-border	Sets the border for Scheduler info messages; defaults to --dhx-scheduler-popup-border.
--dhx-scheduler-info-shadow	Sets the shadow for Scheduler info messages; defaults to --dhx-scheduler-box-shadow-m.
--dhx-scheduler-modal-background	Sets the background for Scheduler modal boxes; defaults to --dhx-scheduler-popup-background.
--dhx-scheduler-modal-border	Sets the border for Scheduler modal boxes; defaults to --dhx-scheduler-popup-border.
--dhx-scheduler-modal-padding	Sets the internal padding for Scheduler modal content and controls.
--dhx-scheduler-modal-width	Sets the width of Scheduler modal boxes.
--dhx-scheduler-modal-border-radius	Sets the border radius for Scheduler modal boxes; defaults to --dhx-scheduler-popup-border-radius.
--dhx-scheduler-undo-delete-background	Sets the background for the undo-delete info message; defaults to --dhx-scheduler-base-colors-text-base.
--dhx-scheduler-undo-delete-color	Sets the text color for the undo-delete info message; defaults to --dhx-scheduler-event-color.

Scheduler geometry bridge

Variable	Description
--dhx-scheduler-xy-scale_width	Sets the CSS-driven value for scheduler.xy.scale_width.
--dhx-scheduler-xy-bar_height	Sets the CSS-driven value for scheduler.xy.bar_height.
--dhx-scheduler-xy-month_head_height	Sets the CSS-driven value for scheduler.xy.month_head_height.
--dhx-scheduler-xy-scale_height	Sets the CSS-driven value for scheduler.xy.scale_height.
--dhx-scheduler-xy-scroll_width	Sets the CSS-driven value for scheduler.xy.scroll_width.
--dhx-scheduler-config-form_wide	Lets a theme enable the wide lightbox form setting through CSS.

注释

Scheduler reads the geometry bridge variables from computed styles and applies numeric values to the matching scheduler.xy settings.