CODEWITHSUNDEEP
angularangular-materialthemesangular-storybook
PKHDK
PKHDK

Reputation: 23

How to establish a custom material theme in angular storybook?

I am importing my custom theme.scss inside of preview.ts like this

import '!style-loader!css-loader!sass-loader!./../src/theme.scss';

and my theme.scss looks like that:

@use '@angular/material' as mat;
@include mat.core();

// colors
$primary-default: #2364a5;
$primary-light: #a7a6ff;
$primary-dark: #13338f;

$primary-palette: (
  // lighter
  300: $primary-default,
  // default
  600: $primary-light,
  // darker
  900: $primary-dark,
  contrast: (
    // light contrast color
    300: "#fff",
    // medium contrast color
    600: "#fff",
    // bold contrast color
    900: "#fff"
  )
);

$secondary-default: #f5db5f;
$secondary-light: #f2e4a2;
$secondary-dark: #a8953b;

$secondary-palette: (
  // lighter
  300: $secondary-default,
  // default
  600: $secondary-light,
  // darker
  900: $secondary-dark,
  contrast: (
    // light contrast color
    300: "#fff",
    // medium contrast color
    600: "#fff",
    // bold contrast color
    900: "#fff"
  )
);

$hv-landing-page-primary: mat.define-palette(
  theme.$primary-palette,
  600,
  300,
  900
);

$hv-landing-page-accent: mat.define-palette(
  theme.$secondary-palette,
  600,
  300,
  900
);

$hv-landing-page-warn: mat.define-palette(mat.$red-palette);

$hv-landing-page-theme: mat.define-light-theme((
  color: (
    primary: $hv-landing-page-primary,
    accent: $hv-landing-page-accent,
    warn: $hv-landing-page-warn,
  )
));

@include mat.all-component-themes($hv-landing-page-theme);


html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

but when I apply mat-raised-button and color="primary" to one of my buttons the theme just does not apply...(yep, I imported the MatButtonModule)

I could at least solve that the import statement is working. When I write a test class with some dark background-color it is applied... but the angular material theme just won't apply.. Why?

Upvotes: 0

Views: 762

Answers (1)

lukket
lukket

Reputation: 145

If you use the original Storybook executors for Angular (like @storybook/angular:build-storybook to build Storybook), you can apply a custom theme in the options of the executor. See the official Storybook for Angular documentation (expand the "Troubleshooting" section) for more details.

Add the desired style sheets to your angular.json or project.json (when using Nx):

"build-storybook": {
  "executor": "@storybook/angular:build-storybook",
  "options": {
    "styles": ["theme.scss"]
  }
}

You probably need to adjust the path of theme.scss depending on where the files are placed.

Upvotes: 0

Related Questions