Dynamic control theming via scss mixins

Question

Hi, I have an application that's using a dynamic theme system. I would want to define my syncfusion's components theme based on my theme color map. Do we have any mixins we can call with the desired color map to customize syncfusion's controls theme like i am doing for this angular calendar component. It dynamically changes its colors based on the color map below. This is the particular component I am trying to replace with syncfusion's scheduler component and this ability is critical.

@import "~angular-calendar/scss/angular-calendar";
.content {
  // the default event primary color if not set on the event color object
  $event-color-primary: nb-theme(color-primary-100);

  // the default event secondary color if not set on the event color object
  $event-color-secondary: nb-theme(color-primary-400);

  // the border color used between cells
  $border-color: nb-theme(border-basic-color-1);

  // the primary background of each component
  $bg-primary: nb-theme(background-primary-color-1);

  // the secondary background, used for alternating rows on the day and week views
  $bg-secondary: nb-theme(background-alternative-color-1);

  // the color used when hovering over cells and headers
  $bg-active: nb-theme(color-basic-active);

  // the background color to mark today in the week view header
  $today-bg: nb-theme(background-basic-color-1);

  // the color used to indicate a day is a weekend
  $weekend-color: nb-theme(color-danger-transparent-100);

  // the badge background color on the month view
  // color-info-500
  $badge-color: nb-theme(background-basic-color-4);

  // the current time marker color on the week and day view
  $current-time-marker-color: nb-theme(color-info-700);

  // a standard white color used for tooltip text and month view event titles
  $white: nb-theme(color-primary-100);

  // a standard gray color used for the background color of the open month view events box
  $gray: nb-theme(color-primary-300);

  // a standard black color used as the tooltip background and the gradient color of the open month view events
  $black: nb-theme(color-primary-900);

  // Call the calendar mixin with a sass color map of your theme. Every property is optional.
  // For a list of all variables and how they are used,
  // see https://github.com/mattlewis92/angular-calendar/tree/master/projects/angular-calendar/src/variables.scss
  @include cal-theme(
    (
      // the default event primary color if not set on the event color object
        event-color-primary: $event-color-primary,
      // the default event secondary color if not set on the event color object
        event-color-secondary: $event-color-secondary,
      // the border color used between cells
        border-color: $border-color,
      // the primary background of each component
        bg-primary: $bg-primary,
      // the secondary background, used for alternating rows on the day and week views
        bg-secondary: $bg-secondary,
      // the color used when hovering over cells and headers
        bg-active: $bg-active,
      // the background color to mark today in the week view header
        today-bg: $today-bg,
      // the color used to indicate a day is a weekend
        weekend-color: $weekend-color,
      // the badge background color on the month view
        badge-color: $badge-color,
      // the current time marker color on the week and day view
        current-time-marker-color: $current-time-marker-color,
      // a standard white color used for tooltip text and month view event titles
        white: $white,
      // a standard gray color used for the background color of the open month view events box
        gray: $gray,
      // a standard black color used as the tooltip background and the gradient color of the open month view events
        black: $black
    )
  );

Vengatesh Maniraj · Answer

Hi Takudzwa,  
 
Thank you for contacting Syncfusion support.  
  
We can customize the Schedule’s default theme with the help of theme studio, kindly refer the below User Guide link for more details.  
https://ej2.syncfusion.com/documentation/appearance/theme-studio.html?lang=typescript  
  
Regards,  
Vengatesh

Pon Geetha A J · Answer

So does this mean there is no support to do that in scss

Vengatesh Maniraj · Answer

Hi Takudzwa Mawarire, 

Thanks for the update. 

We can override the SCSS variables after referring its definition file to achieve your requirement instead of adding !default flag to each variable. You can override the required variables alone from the definition file. 
 
Please find the below code snippet for further details.  
$schedule-appointment-bg-color: green; 
@import './assets/material.scss'; 
 
For your convenience, we have created a simple sample for overriding styles using scss variable and the same can be download from the below link.  
 
Sample: https://www.syncfusion.com/downloads/support/forum/152212/ze/angular-scss-408435723 
 
Kindly try the above and get back to us if you would require any further assistance. 
 
Regards, 
Vengatesh

Takudzwa Mawarire · Answer

Hi Takudzwa Mawarire, 

Thanks for the update. 

We can override the SCSS variables after referring its definition file to achieve your requirement instead of adding !default flag to each variable. You can override the required variables alone from the definition file. 
 
Please find the below code snippet for further details.  
$schedule-appointment-bg-color: green; 
@import './assets/material.scss'; 
 
For your convenience, we have created a simple sample for overriding styles using scss variable and the same can be download from the below link.  
 
Sample: https://www.syncfusion.com/downloads/support/forum/152212/ze/angular-scss-408435723 
 
Kindly try the above and get back to us if you would require any further assistance. 
 
Regards, 
Vengatesh Thanks for the response. Will test the sample and revert if it's meeting the requirements. Thanks alot.

Takudzwa Mawarire · Answer

It's exactly what I was looking for, thanks. I am assuming that the material scss file was generated by the theme builder?

Vengatesh Maniraj · Answer

Hi Takudzwa Mawarire, 
 
Thanks for the update. 
 
Yes. The material.scss file was generated from our theme studio. 
 
Regards, 
Vengatesh