Angular Material: How can I create a stlyes.scss after I did set up the project so I am able to change the theme/colours?

Question

My problem: I have created a project with Webstorm. Sadly, apparently, there is only an empty styles.css file. I have installed angular material with ng.

I want to change the theme (colours and maybe typeface).

All guides I have found online just open up the styles.scss file under src and change some parameters. I mean, I would be able to do that as well, but sadly, I do not have a styles.scss file.

Any ideas how to progress from here? Is there an ng command that automatically generates the styles.scss file so that I can follow the tutorials I found on the inte.net?

I gooogled for solutions, couldn't find any.

Answer 1

You just need an example?

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
@import "@angular/material/theming";
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

/*
Theme   Light or dark?  Palettes (primary, accent, warn)
deeppurple-amber.css    Dark    deep-purple, amber, red
indigo-pink.css Light   indigo, pink, red
pink-bluegray.css   Dark    pink, bluegray, red
purple-green.css    Light   purple, green, red

 */


$angular-warn: mat.define-palette(mat.$red-palette);

$angular-default-theme: mat.define-light-theme(
  (
    color: (
      primary: mat.define-palette(mat.$purple-palette, 500, 700, 800),
      accent:  mat.define-palette(mat.$amber-palette, 200, 100, 400),
      warn: $angular-warn,
    ),
  )
);

// Include theme styles for core and each componentAttributes used in your app.

$angular-light-theme-purple: mat.define-light-theme(
    (
      color: (
        primary: mat.define-palette(mat.$deep-purple-palette, 500, 100, 900),
        accent: mat.define-palette(mat.$blue-gray-palette, 700, 100, 400),
        warn: $angular-warn,
      ),
    )
);

$angular-dark-theme-purple: mat.define-dark-theme(
  (
    color: (
      primary: mat.define-palette(mat.$purple-palette, 500, 100, 900),
      accent: mat.define-palette(mat.$amber-palette, 400, 100, 900),
      warn: $angular-warn,
    ),
  )
);

$angular-light-theme-teal: mat.define-light-theme(
    (
      color: (
        primary: mat.define-palette(mat.$teal-palette, 500, 100, 900),
        accent: mat.define-palette(mat.$blue-gray-palette, 700, 100, 400),
        warn: $angular-warn,
      ),
    )
);

$angular-dark-theme-teal: mat.define-dark-theme(
    (
      color: (
        primary: mat.define-palette(mat.$teal-palette, 500, 100, 900),
        accent: mat.define-palette(mat.$amber-palette, 500, 100, 900),
        warn: $angular-warn,
      ),
    )
);

@include mat.all-component-themes($angular-default-theme);

.lightModePurple {
  @include mat.all-component-colors($angular-light-theme-purple);
}
.darkModePurple {
  @include mat.all-component-colors($angular-dark-theme-purple);
}
.lightModeTeal {
  @include mat.all-component-colors($angular-light-theme-teal);
}
.darkModeTeal {
  @include mat.all-component-colors($angular-dark-theme-teal);
}