Material Theme for React Components
Syncfusion® React UI components include a built-in Material theme that supports both light and dark modes. Designed in accordance with the official Material Design 3 guidelines, it delivers a modern, cohesive, and accessible user experience across all components.
Users can reference the Material theme using the methods described in the Built-in Themes section.
Material theme variables
The Material theme was built on a consistent, scalable system of CSS custom properties that ensure visual harmony and design coherence across all components. These variables follow a unified naming convention starting with --sf, enabling seamless theming, customization, and responsive behavior.
By centralizing the design through reusable variables, modifying a single variable will instantly reflect changes globally whether adjusting colors, typography scales, or spacing rhythms.
The following tables contain the complete list of Syncfusion® Material theme variables, organized by category for easy reference and customization.
Color variables
The following table contains all color-related CSS variables, including light and dark mode values.
| Name | Value (Default Theme) | Value (Dark Theme) |
|---|---|---|
| --sf-color-black | rgb(0,0,0) | rgb(0,0,0) |
| --sf-color-white | rgb(255,255,255) | rgb(255,255,255) |
| --sf-color-primary | rgb(103, 80, 164) | rgb(208, 188, 255) |
| --sf-color-primary-container | rgb(234, 221, 255) | rgb(79, 55, 139) |
| --sf-color-on-primary | rgb(255, 255, 255) | rgb(55, 30, 115) |
| --sf-color-on-primary-container | rgb(33, 0, 94) | rgb(234, 221, 255) |
| --sf-color-surface | rgb(255, 255, 255) | rgb(28, 27, 31) |
| --sf-color-surface-variant | rgb(231, 224, 236) | rgb(73, 69, 79) |
| --sf-color-on-surface | rgb(28, 27, 31) | rgb(230, 225, 229) |
| --sf-color-on-surface-variant | rgb(73, 69, 78) | rgb(202, 196, 208) |
| --sf-color-secondary | rgb(98, 91, 113) | rgb(204, 194, 220) |
| --sf-color-background | rgb(255, 255, 255) | rgb(28, 27, 31) |
| --sf-color-outline | rgb(121, 116, 126) | rgb(147, 143, 153) |
| --sf-color-outline-variant | rgb(196, 199, 197) | rgb(68, 71, 70) |
| --sf-color-shadow | rgb(0, 0, 0) | rgb(0, 0, 0) |
| --sf-color-inverse-surface | rgb(49, 48, 51) | rgb(230, 225, 229) |
| --sf-color-inverse-on-surface | rgb(244, 239, 244) | rgb(49, 48, 51) |
| --sf-color-scrim | rgb(0, 0, 0) | rgb(0, 0, 0) |
| --sf-color-error | rgb(179, 38, 30) | rgb(242, 184, 181) |
| --sf-color-error-container | rgb(249, 222, 220) | rgb(140, 29, 24) |
| --sf-color-on-error | rgb(255, 250, 250) | rgb(96, 20, 16) |
| --sf-color-on-error-container | rgb(65, 14, 11) | rgb(249, 222, 220) |
| --sf-color-success | rgb(32, 81, 7) | rgb(83, 202, 23) |
| --sf-color-success-container | rgb(209, 255, 186) | rgb(22, 62, 2) |
| --sf-color-on-success | rgb(244, 255, 239) | rgb(13, 39, 0) |
| --sf-color-on-success-container | rgb(13, 39, 0) | rgb(183, 250, 150) |
| --sf-color-info | rgb(1, 87, 155) | rgb(71, 172, 251) |
| --sf-color-info-container | rgb(233, 245, 255) | rgb(0, 67, 120) |
| --sf-color-on-info | rgb(250, 253, 255) | rgb(0, 51, 91) |
| --sf-color-on-info-container | rgb(0, 51, 91) | rgb(173, 219, 255) |
| --sf-color-warning | rgb(145, 76, 0) | rgb(245, 180, 130) |
| --sf-color-warning-container | rgb(254, 236, 222) | rgb(123, 65, 0) |
| --sf-color-on-warning | rgb(255, 255, 255) | rgb(99, 52, 0) |
| --sf-color-on-warning-container | rgb(47, 21, 0) | rgb(255, 220, 193) |
Typography variables
The following tables list the typography related CSS variables. The following base variables serve as a primary variables for customization, and overriding any of these will cascade their effects across all its dependent scale variables and reflect throughout the components.
| Properties | CSS Variable | Default Value |
|---|---|---|
| Font Size | --sf-font-size | 1rem |
| Letter Spacing | --sf-letter-spacing | 0px |
| Font Family | --sf-font-family | Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, sans-serif |
Font size variables
The following table contains font size scale variables with calculated values based on the base font size.
| Level | CSS Variable | Value |
|---|---|---|
| Extra Small | --sf-font-size-xs | calc(var(--sf-font-size) * 0.75) = 0.75rem |
| Small | --sf-font-size-sm | calc(var(--sf-font-size) * 0.875) = 0.875rem |
| Base | --sf-font-size-base | calc(var(--sf-font-size) * 1) = 1rem |
| Large | --sf-font-size-lg | calc(var(--sf-font-size) * 1.125) = 1.125rem |
| Extra Large | --sf-font-size-xl | calc(var(--sf-font-size) * 1.25) = 1.25rem |
| 2X Large | --sf-font-size-2xl | calc(var(--sf-font-size) * 1.5) = 1.5rem |
Font weight variables
The following table contains font weight scale variables for text boldness variations.
| Level | CSS Variable | Value |
|---|---|---|
| Normal | --sf-font-weight-normal | 400 |
| Medium | --sf-font-weight-medium | 500 |
| Semi Bold | --sf-font-weight-semibold | 600 |
Line height variables
The following table contains line height scale variables with calculated values for text readability.
| Level | CSS Variable | Value |
|---|---|---|
| Extra Small | --sf-line-height-xs | calc(var(--sf-font-size) * 1) = 1rem |
| Small | --sf-line-height-sm | calc(var(--sf-font-size) * 1.25) = 1.25rem |
| Base | --sf-line-height-base | calc(var(--sf-font-size) * 1.5) = 1.5rem |
| Large | --sf-line-height-lg | calc(var(--sf-font-size) * 1.75) = 1.75rem |
| 2X Large | --sf-line-height-2xl | calc(var(--sf-font-size) * 2) = 2rem |
| 3X Large | --sf-line-height-3xl | calc(var(--sf-font-size) * 2.25) = 2.25rem |
Letter spacing variables
The following table contains letter spacing scale variables with calculated values based on the base letter spacing.
| Level | CSS Variable | Value |
|---|---|---|
| Normal | --sf-letter-spacing-normal | var(--sf-letter-spacing) = 0px |
| Wide | --sf-letter-spacing-wide | calc(var(--sf-letter-spacing) + 0.1px) = 0.1px |
| Wider | --sf-letter-spacing-wider | calc(var(--sf-letter-spacing) + 0.25px) = 0.25px |
Spacing variables
The spacing system is built on a single base variable. By overriding this variable, users can instantly reflow and adjust spacing across all components.
| Property | CSS Variable | Default value |
|---|---|---|
| Spacing | --sf-spacing | 1rem |
The following table contains spacing scale variables with calculated values based on the base spacing.
| Level | CSS Variable | Value |
|---|---|---|
| 0 | --sf-spacing-0 | 0 |
| 1 | --sf-spacing-1 | calc(var(--sf-spacing) * 0.0625) = 0.0625rem |
| 2 | --sf-spacing-2 | calc(var(--sf-spacing) * 0.125) = 0.125rem |
| 3 | --sf-spacing-3 | calc(var(--sf-spacing) * 0.1875) = 0.1875rem |
| 4 | --sf-spacing-4 | calc(var(--sf-spacing) * 0.25) = 0.25rem |
| 5 | --sf-spacing-5 | calc(var(--sf-spacing) * 0.3125) = 0.3125rem |
| 6 | --sf-spacing-6 | calc(var(--sf-spacing) * 0.375) = 0.375rem |
| 7 | --sf-spacing-7 | calc(var(--sf-spacing) * 0.4375) = 0.4375rem |
| 8 | --sf-spacing-8 | calc(var(--sf-spacing) * 0.5) = 0.5rem |
| 9 | --sf-spacing-9 | calc(var(--sf-spacing) * 0.5625) = 0.5625rem |
| 10 | --sf-spacing-10 | calc(var(--sf-spacing) * 0.625) = 0.625rem |
| 11 | --sf-spacing-11 | calc(var(--sf-spacing) * 0.6875) = 0.6875rem |
| 12 | --sf-spacing-12 | calc(var(--sf-spacing) * 0.75) = 0.75rem |
| 13 | --sf-spacing-13 | calc(var(--sf-spacing) * 0.8125) = 0.8125rem |
| 14 | --sf-spacing-14 | calc(var(--sf-spacing) * 0.875) = 0.875rem |
| 15 | --sf-spacing-15 | calc(var(--sf-spacing) * 0.9375) = 0.9375rem |
| 16 | --sf-spacing-16 | calc(var(--sf-spacing) * 1) = 1rem |
| 18 | --sf-spacing-18 | calc(var(--sf-spacing) * 1.125) = 1.125rem |
| 20 | --sf-spacing-20 | calc(var(--sf-spacing) * 1.25) = 1.25rem |
| 22 | --sf-spacing-22 | calc(var(--sf-spacing) * 1.375) = 1.375rem |
| 24 | --sf-spacing-24 | calc(var(--sf-spacing) * 1.5) = 1.5rem |
| 28 | --sf-spacing-28 | calc(var(--sf-spacing) * 1.75) = 1.75rem |
| 30 | --sf-spacing-30 | calc(var(--sf-spacing) * 1.875) = 1.875rem |
| 32 | --sf-spacing-32 | calc(var(--sf-spacing) * 2) = 2rem |
| 40 | --sf-spacing-40 | calc(var(--sf-spacing) * 2.5) = 2.5rem |
| 48 | --sf-spacing-48 | calc(var(--sf-spacing) * 3) = 3rem |
| 56 | --sf-spacing-56 | calc(var(--sf-spacing) * 3.5) = 3.5rem |
| 72 | --sf-spacing-72 | calc(var(--sf-spacing) * 4.5) = 4.5rem |
Border radius variables
The border radius system is built on a single base variable. By overriding this variable, users can adjust curvature consistently across all components.
| Property | CSS Variable | Default value |
|---|---|---|
| Border radius | --sf-radius | 1rem |
The following table contains border radius scale variables with calculated values based on the base border radius.
| Level | CSS Variable | Value |
|---|---|---|
| None | --sf-radius-0 | 0px |
| 2 | --sf-radius-2 | calc(var(--sf-radius) * 0.125) = 0.125rem |
| 4 | --sf-radius-4 | calc(var(--sf-radius) * 0.25) = 0.25rem |
| 6 | --sf-radius-6 | calc(var(--sf-radius) * 0.375) = 0.375rem |
| 8 | --sf-radius-8 | calc(var(--sf-radius) * 0.5) = 0.5rem |
| 12 | --sf-radius-12 | calc(var(--sf-radius) * 0.75) = 0.75rem |
| 16 | --sf-radius-16 | calc(var(--sf-radius) * 1) = 1rem |
| 20 | --sf-radius-20 | calc(var(--sf-radius) * 1.25) = 1.25rem |
| 24 | --sf-radius-24 | calc(var(--sf-radius) * 1.5) = 1.5rem |
| 28 | --sf-radius-28 | calc(var(--sf-radius) * 1.75) = 1.75rem |
| Full | --sf-radius-full | 999px |
Elevation variables
The following table contains elevation and shadow scale variables for creating visual depth and layers.
| Level | CSS Variable | Value |
|---|---|---|
| 0 | --sf-elevation | 0 .8px 16px rgba($black, .15) |
| 1 | --sf-elevation-1 | 0 1px 3px 1px rgba(0,0,0,.15), 0 1px 2px 0 rgba(0,0,0,.3) |
| 2 | --sf-elevation-2 | 0 2px 6px 2px rgba(0,0,0,.15), 0 1px 2px 0 rgba(0,0,0,.3) |
| 3 | --sf-elevation-3 | 0 1px 3px 0 rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15) |
| Inner | --sf-elevation-inner | inset 0 1px 2px rgba(0,0,0,.075) |
Customization
Users can easily customize the look and feel of the component by overriding these variables in the root stylesheet, without needing to add extra CSS classes or modify the core styles. In the example below, the custom variables are applied to the Grid component.