Skip to main content

CSS variables

Mobiscroll components can be styled by overriding CSS color variables. In addition to Sass variables, these CSS variables let you customize colors at runtime without rebuilding styles.

Mobiscroll uses a two-level CSS variable system:

  • Theme variables define the base color palette for a theme (ios, material, windows)
  • Component variables are component-specific and inherit their values from the theme variables.

Components never use hardcoded colors. They always resolve colors from theme variables, making global theming predictable.

Overriding a theme variable updates all dependent components. Component variables can still be overridden for fine-grained control.

Using theme color variables

Theme variables can be overridden in CSS by redefining them on :root.

/* Override the iOS accent color */
:root {
  --mbsc-ios-accent: #ff3b30;
}

Here's the complete list of the CSS theme color variables, grouped by themes.

info

Dark variants

Each theme also exposes matching dark-mode CSS variables using the -dark- prefix:

  • --mbsc-ios-dark-background
  • --mbsc-material-dark-background
  • --mbsc-windows-dark-background

These follow the same naming pattern as the light variables listed here.

iOS color variables​

Available color variables and defaults for iOS (light).

  • --mbsc-ios-background: Main component background (e.g. calendar surface)
  • --mbsc-ios-background-alt: Page-level background (e.g. page background)
  • --mbsc-ios-surface-1: Popup background, Eventcalendar/Scheduler/Timeline disabled background
  • --mbsc-ios-surface-2: Secondary surface color (e.g. switch handle/thumb)
  • --mbsc-ios-surface-3: Surface color for component backgrounds (e.g. datepicker, select)
  • --mbsc-ios-surface-4: Segmented selected background
  • --mbsc-ios-surface-5: Button standard background, switch track, segmented background, timeline parent resource hover
  • --mbsc-ios-surface-6: Timeline parent resource background
  • --mbsc-ios-surface-7: Form control background inside popup, list item background inside popup
  • --mbsc-ios-text: Primary text color
  • --mbsc-ios-text-soft: Secondary/muted text color (e.g. helper text, secondary labels)
  • --mbsc-ios-accent: Primary accent color (selected states, highlights)
  • --mbsc-ios-accent-soft: Soft accent background (e.g. calendar event background)
  • --mbsc-ios-border: Border/separator color (e.g. dividers, grid lines)
  • --mbsc-ios-focus: Focus outline color (keyboard navigation)
  • --mbsc-ios-highlight: Highlight background (e.g. range selection, day hover)
  • --mbsc-ios-action-success: Success state color (e.g. switch “on”, valid drag)
  • --mbsc-ios-action-error: Error state color (e.g. invalid drag)
  • --mbsc-ios-on-accent: Text/icons shown on accent background
  • --mbsc-ios-on-accent-soft: Text/icons shown on accent-soft background

Base colors

  • --mbsc-ios-primary
  • --mbsc-ios-secondary
  • --mbsc-ios-success
  • --mbsc-ios-danger
  • --mbsc-ios-warning
  • --mbsc-ios-info
  • --mbsc-ios-light
  • --mbsc-ios-dark

Material color variables​

Available color variables and defaults for Material (light).

  • --mbsc-material-accent: Primary accent color
  • --mbsc-material-background: Main surface / background color
  • --mbsc-material-text: Primary surface text color
  • --mbsc-material-outline: Outline color (e.g. button/switch outline, switch handle)
  • --mbsc-material-outline-variant: Subtle outline / border color (e.g. Eventcalendar border)
  • --mbsc-material-secondary-accent: Secondary accent color (e.g. focus outline)
  • --mbsc-material-secondary-container: Secondary container surface (e.g. scroller selected line, segmented selected, stepper background, range highlight)
  • --mbsc-material-surface-container-lowest: Lowest container surface (e.g. Eventcalendar background)
  • --mbsc-material-surface-container: Container surface (e.g. timeline parent)
  • --mbsc-material-surface-container-high: Elevated container surface (e.g. popup background, disabled surfaces)
  • --mbsc-material-surface-container-highest: Highest container surface (e.g. input box background, timeline parent hover)
  • --mbsc-material-on-accent: Text/icons on accent backgrounds
  • --mbsc-material-on-surface-variant: Text/icons on surface-variant (e.g. input, checkbox, radio borders)
  • --mbsc-material-shadow: Shadow color (e.g. selected event shadow)
  • --mbsc-material-action-success: Success state color
  • --mbsc-material-action-error: Error state color

Base colors

  • --mbsc-material-primary
  • --mbsc-material-secondary
  • --mbsc-material-success
  • --mbsc-material-danger
  • --mbsc-material-warning
  • --mbsc-material-info
  • --mbsc-material-light
  • --mbsc-material-dark

Windows color variables​

Available color variables and defaults for Windows (light).

  • --mbsc-windows-background: Main surface / background color
  • --mbsc-windows-surface-1: Secondary surface (e.g. Eventcalendar disabled, input tags)
  • --mbsc-windows-surface-2: Timeline parent background
  • --mbsc-windows-surface-3: Timeline parent hover background
  • --mbsc-windows-text: Primary surface text color
  • --mbsc-windows-accent: Brand / accent color
  • --mbsc-windows-accent-soft: Soft accent color (e.g. segmented selected, range highlight, scroller selected line)
  • --mbsc-windows-border: Default border color (e.g. button border, input border)
  • --mbsc-windows-border-hover: Border color on hover
  • --mbsc-windows-border-focus: Border color on focus
  • --mbsc-windows-border-strong: Strong border color (checkbox, radio, switch, input bottom border)
  • --mbsc-windows-border-strong-hover: Strong border color on hover
  • --mbsc-windows-action-success: Success state color
  • --mbsc-windows-action-error: Error state color
  • --mbsc-windows-on-accent: Text/icons on accent backgrounds

Base colors

  • --mbsc-windows-primary
  • --mbsc-windows-secondary
  • --mbsc-windows-success
  • --mbsc-windows-danger
  • --mbsc-windows-warning
  • --mbsc-windows-info
  • --mbsc-windows-light
  • --mbsc-windows-dark