CODEWITHSUNDEEP
angularsassangular-material
user p
user p

Reputation: 57

Why does my angular 18 material design tokens not override theme?

I'm currently trying out the design tokens on Angular 18.2.10. I've ran into in an issue with my project when applying the design tokens override for a slide toggle. It seems that some style overrides the angular material azure theme while others are not.

Here's the stackblitz: https://stackblitz.com/edit/stackblitz-starters-i9rg73?file=angular.json

My folder structure: I've a styles.scss with @forward './assets/styles/main.scss'; only in it. In my assets folder I have two style sheets a main.scss and _variables.scss. Main's content is: @forward './_variables';. In _variables.scss is where the magic is happening.

_variables.scss:

@use '@angular/material' as mat;

$white-0: #ffffff;
$grey-600: #72777e;
$grey-800: #3c4046;
$grey-1000: #15181b;

:root {
  @include mat.slide-toggle-overrides((
   unselected-track-color: $grey-800,
   unselected-icon-color: $grey-1000,
   unselected-pressed-track-color: $grey-800,
   unselected-hover-track-color: $grey-800,
   unselected-focus-track-color: $grey-800,
   unselected-handle-color: $grey-600,
   selected-icon-color: $grey-1000,
   selected-handle-color: $white-0,
   selected-focus-handle-color: $white-0,
   selected-track-color: $grey-800,
  ));
 }

This is what I see in the console: 

picture of console

How do I make sure that my styling overrides the azure-blue theme?

Upvotes: 1

Views: 371

Answers (1)

JSON Derulo
JSON Derulo

Reputation: 17688

The selector for applying the CSS variables has a lower specificity than the ones that apply the Material ones. So in general your setup works correctly, however some of your variables are overridden by Angular Material again. You can also see this in the DevTools, the properties are striked through:

Screenshot of the CSS properties in the DevTools

To fix it, choose a selector with sufficient specificity:

@use '@angular/material' as mat;

:root mat-slide-toggle.mat-mdc-slide-toggle {
  @include mat.slide-toggle-overrides(
    (
      // your overrides
    )
  );
}

Also see the updated StackBlitz.

Upvotes: 1

Related Questions