Angular 2 Bulma variables doesn't work with ngClass attribute

Question

When my code is compiled the variables($tooltip-background-color, $tooltip-color) don't change. The values remain default.

HTML code:

<div class="has-tooltip-multiline has-tooltip-top"
     [ngClass]="{'dark-theme': darkTheme === true, 'light-theme': darkTheme !== true}"
     [attr.data-tooltip]="tooltipText">
  {{Title}}
</div>

SCSS code:

.dark-theme{
  $tooltip-background-color: #363636;
  $tooltip-color: #fff;
}

.light-theme{
  $tooltip-background-color: #ECEFF0;
  $tooltip-color: #333333;
}

@import '~bulma/bulma';
@import '~bulma-tooltip/src/sass';

Component.ts file:

@Component({
  selector: 'box-component',
  templateUrl: './box.component.html',
  styleUrls: ['./box.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom,
})
export class TextBoxComponent implements OnInit {

  @Input('darkTheme') darkTheme: boolean;
  @Input('Title') Title: string;
  @Input('tooltipText') tooltipText: string;


  constructor() {
  }

  ngOnInit() {
  }
}

Angular.json file

"styles": [
              "node_modules/bulma/css/bulma.min.css",
              "node_modules/bulma-switch/dist/css/bulma-switch.min.css",
              "node_modules/bulma-tooltip/dist/css/bulma-tooltip.min.css",
              "src/styles.scss"
            ]

Angular version is 8.2.14

Answer 1

.light-theme {
  --tooltip-background-color: 236, 239, 240;
  --tooltip-color: 51, 51, 51;
}

.dark-theme{
  --tooltip-background-color: 54, 54, 54;
  --tooltip-color: 255, 255, 255;
}


$tooltip-background-opacity: 1;
$tooltip-background-color: var(--tooltip-background-color);
$tooltip-color: var(--tooltip-color);


@import '~bulma/bulma';
@import '~bulma-tooltip/src/sass';