Global Sass Variables No Longer Working After Upgrading to Syncfusion Version 32

2 Replies
2 Participants

Created by
TE techlandandyzhang

Platform
Angular - EJ 2

Platform
Angular - EJ 2

Control
General

Created On
Feb 5, 2026 04:17 AM UTC

Last Activity On
Feb 10, 2026 05:31 PM UTC

Want to subscribe?
SIGN IN

Dear Syncfusion Support Team,

I recently upgraded my project from Syncfusion version 31 to version 32. In version 31, I was extensively customizing the theme by overriding a large number of global Sass variables in my custom SCSS file (imported after the Syncfusion theme).

After the upgrade to v32, all these overrides have stopped taking effect. I tried redefining them (some using CSS custom properties where possible), but the customizations are still not applied.

Here are the variables I was overriding:

$is-roboto-loaded: 'true';

$font-family: var(--tec-default-font);

$font-size: var(--tec-font-size);

$border-radius: 20px !default;

$accent: #004185;

$editor-value-text-border: 0px solid;

$calendar-date-font-size: var(--tec-font-size);

$tab-nrml-font-size: var(--tec-font-size-btn);

$listview-font-size: var(--tec-font-size);

$dialog-content-font-size: var(--tec-font-size);

$splitpane-font-size: var(--tec-font-size);

$grid-header-border-color: var(--rgb-border-color);

$grid-cell-border-color: var(--rgb-border-color);

$tbar-btn-family: var(--ion-font-family);

$tbar-default-font: var(--rgb-medium-color);

$tooltip-font-size: var(--tec-font-size);

$tab-content-font-size: var(--tec-font-size);

2 Replies

JS Jeeva Selvarasu Syncfusion Team February 6, 2026 07:45 PM UTC

Hi ,

After updating the Syncfusion component to version 32.x, you can continue to customize SCSS variables in accordance with the latest SCSS standards. To ensure the SCSS code runs correctly in your application, the following changes are required:

Declare the required CSS variables (for example, --tec-font-size) within the :root {} block.
SCSS variables must be declared inside the @use ... with {} block in order to override them with user-defined CSS variables.
Some variables are theme-specific. For example, tbar-btn-family is available only in the Fusion theme definition.
The $is-roboto-loaded variable is used to disable loading the font from an online source. However, it cannot currently be overridden when variables such as $font-family, $font-size, and others are defined.

To override $is-roboto-loaded, you currently need to use the code shown below. However, this override does not work when other base variables are already defined in the application.

@use '@syncfusion/ej2-base/styles/material.scss' as * with (

$is-roboto-loaded: false

);

We will analyze this further and share an update with you by February 10, 2026.

For reference, a sample SCSS code is provided below, and a sample project has been attached for your convenience.

// Override base theme variables

@use '@syncfusion/ej2-base/styles/definition/material' as * with (

$font-family: var(--tec-default-font),

$font-size: var(--tec-font-size),

$border-radius: 20px ,

$accent: #b8ca16

);

@use '@syncfusion/ej2-splitbuttons/styles/drop-down-button/material-definition' as *;

// Override calendar-specific variables

@use '@syncfusion/ej2-calendars/styles/calendar/material-definition' as * with (

$calendar-date-font-size: var(--tec-font-size)

);

// Override tab-specific variables

@use '@syncfusion/ej2-navigations/styles/tab/material-definition' as * with (

$tab-nrml-font-size: var(--tec-font-size-btn),

$tab-content-font-size: var(--tec-font-size)

);

// Override toolbar-specific variables

@use '@syncfusion/ej2-navigations/styles/toolbar/material-definition' as * with (

$tbar-default-font: var(--rgb-medium-color)

);

// Override listview-specific variables

@use '@syncfusion/ej2-lists/styles/list-view/material-definition' as * with (

$listview-font-size: var(--tec-font-size)

);

// Override dialog-specific variables

@use '@syncfusion/ej2-popups/styles/dialog/material-definition' as * with (

$dialog-content-font-size: var(--tec-font-size)

);

// Override tooltip-specific variables

@use '@syncfusion/ej2-popups/styles/tooltip/material-definition' as * with (

$tooltip-font-size: var(--tec-font-size)

);

// Override inplace-editor-specific variables

@use '@syncfusion/ej2-inplace-editor/styles/inplace-editor/material-definition' as * with (

$editor-value-text-border: 0px solid

);

// Override splitter-specific variables

@use '@syncfusion/ej2-layouts/styles/splitter/material-definition' as * with (

$splitpane-font-size: var(--tec-font-size)

);

// Override grid-specific variables

@use '@syncfusion/ej2-grids/styles/grid/material-definition' as * with (

$grid-header-border-color: var(--rgb-border-color),

$grid-cell-border-color: var(--rgb-border-color),

);

@use '@syncfusion/ej2-calendars/styles/material.scss' as *;

@use '@syncfusion/ej2-grids/styles/material.scss' as *;

@use '@syncfusion/ej2-buttons/styles/material.scss' as *;

@use '@syncfusion/ej2-navigations/styles/material.scss' as *;

@use '@syncfusion/ej2-icons/styles/material.scss' as *;

@use '@syncfusion/ej2-schedule/styles/material.scss' as *;

@use '@syncfusion/ej2-splitbuttons/styles/material.scss' as *;

@use '@syncfusion/ej2-dropdowns/styles/material.scss' as *;

@use '@syncfusion/ej2-querybuilder/styles/material.scss' as *;

:root {

--tec-font-size: 54px;

--tec-font-size-btn: 54px;

--tec-default-font: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', 'sans-serif', '-apple-system', 'BlinkMacSystemFont';

--tec-border-radius: 20px;

--rgb-border-color:#468ace;

--rgb-medium-color:#345673;

--custom-primary-color: #125632;

}

Please let us know if you need any further assistance.

Regards,

Jeeva S

Attachment: scssoverridesample_5092f24a.zip

JS Jeeva Selvarasu Syncfusion Team February 10, 2026 05:31 PM UTC

Hi,

The $is-roboto-loaded variable is specifically meant for controlling whether the Roboto font is loaded from an online source or used offline. If you are overriding other theme variables you can safely ignore $is-roboto-loaded.

As discussed earlier, you can override variables as shown below where theme variables are customized according to your requirements.