angular-material-theming-example/src/_theming.scss at master · 12storeez/angular-material-theming-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
@use '~@angular/material' as mat;
@use './helpers' as helpers;

$dark-primary-text: rgba(black, 0.87);
$light-primary-text: white;
$wms-light-primary-text: #887569;

// Creating custom palettes
$_wms-light-primary-palette: (
  100: #dac6b3,
  500: #a89583,
  700: #796756,
  contrast: (
    100: $dark-primary-text,
    500: $light-primary-text,
    700: $light-primary-text,
  ),
);
$_wms-light-accent-palette: (
  100: #b3dac1,
  500: #83a891,
  700: #567963,
  contrast: (
    100: $dark-primary-text,
    500: $light-primary-text,
    700: $light-primary-text,
  ),
);
$_wms-light-warn-palette: (
  100: #da7370,
  500: #a54545,
  700: #71151e,
  contrast: (
    100: $light-primary-text,
    500: $light-primary-text,
    700: $light-primary-text,
  ),
);

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker hue.
// Default hues: 500, 100, 700
$wms-light-primary: mat.define-palette($_wms-light-primary-palette);
$wms-light-accent: mat.define-palette($_wms-light-accent-palette);
$wms-light-warn: mat.define-palette($_wms-light-warn-palette);

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

$light-theme: helpers.set-ground(
  $light-theme,
  "foreground",
  (
    text: $wms-light-primary-text,
  )
);

$dark-theme: mat.define-dark-theme(
  (
    color: (
      primary: $wms-light-primary,
      accent: $wms-light-accent,
      warn: $wms-light-warn,
    ),
  )
);