SASS Variables can not be overriden using Custom Theme

[taauntik]

Forum post

Hey, we are trying to implement a custome theme for the calendar following the documentation found here: Calendar/Customization/Styling#creating a custom theme via npm. The documentation says to override the variable and import one of the included themes. However almost all variables in the custom themes do not specify !default and can therfore not be overriden by us.

Example:

$fa-font-path: "@bryntum/calendar/fonts";
$roboto-font-path: "@bryntum/calendar/fonts";

$button-default-color: red; <!-- has no effect -->

@import "node_modules/@bryntum/calendar/source/resources/sass/themes/material";

The documentation says that all variable can be found inside "node_modules/@bryntum/calendar/source/resources/core-sass/themes/vars/material-vars.scss"

$button-default-color                    : $primary;

Is this intended behavior? If so, how can we create a full custom theme?

[ghulamghousdev]

Also check for the issue mentioned here: https://forum.bryntum.com/viewtopic.php?p=150033#p150033

[geop-bbm]

My temporary workaround was to modify the file "resources\core-sass\themes\vars\classic-vars.scss". The option ‘!default’ to make $button-default-color overwritable is missing here.

$button-default-color : scale-color($gray, $lightness : 20%) !default;

After that my custom SCSS build worked for the Buttons.