在 Angular Material 2 中创建自定义主题

Question

我正在尝试为我的 angular 2 应用程序创建一个自定义主题，该应用程序使用了 angular material 2 中的一些组件。

我试图用谷歌搜索，但找不到太多。唯一可用的文档是 Angular Material :- https://material.angularjs.org/latest/Theming/03_configuring_a_theme

我找不到 angular 2 的相应文档。

到目前为止，我发现@angular2-material/core/style 下有一个名为 _default-theme.scss 的文件，其内容如下：-

@import 'theme-functions';
@import 'palette';


// Person creating a theme writes variables like this:
$md-is-dark-theme: false;


$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes);
$md-accent: md-palette($md-purple, 500, 300, 800, $md-contrast-palettes);
$md-warn: md-palette($md-red, 500, 300, 900, $md-contrast-palettes);
$md-foreground: if($md-is-dark-theme, $md-dark-theme-foreground, $md-light-theme-foreground);
$md-background: if($md-is-dark-theme, $md-dark-theme-background, $md-light-theme-background);

我变了

$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes);

到

$md-primary: md-palette($md-blue, 500, 100, 700, $md-contrast-palettes);

但是这似乎不起作用。欢迎提出任何建议。

Answer 1

晚会有点晚了—— 看起来你只是错过了通过 Material 的 SCSS 函数建立主题的执行

$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);

可能会更改您围绕深色与浅色主题的 if 语句以运行 mat-light-theme 与 mat-dark-theme。

编辑

当我在玩的时候，想出了如何在不覆盖默认值的情况下获取背景/前景

$md-primary: mat-palette($mat-teal, 500, 100, 700);
$md-accent: mat-palette($mat-purple, 500, 300, 800);
$md-warn: mat-palette($mat-red, 500, 300, 900);

$my-theme-foreground: (
  base: red,
  divider: $dark-dividers,
  dividers: $dark-dividers,
  disabled: $dark-disabled-text,
  disabled-button: rgba(red, 0.26),
  disabled-text: $dark-disabled-text,
  hint-text: $dark-disabled-text,
  secondary-text: $dark-secondary-text,
  icon: rgba(red, 0.54),
  icons: rgba(red, 0.54),
  text: rgba(red, 0.87),
  slider-min: rgba(red, 0.87),
  slider-off: rgba(red, 0.26),
  slider-off-active: rgba(red, 0.38),
);

$my-theme-background: (
  status-bar: map_get($mat-grey, 300),
  app-bar:    map_get($mat-grey, 100),
  background: map_get($mat-grey, 50),
  hover:      rgba(black, 0.04),
  card:       white,
  dialog:     white,
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
  unselected-chip: map_get($mat-grey, 300),
  disabled-list-option: map_get($mat-grey, 200),
);

$theme: (
  primary:$md-primary,
  accent:$md-accent,
  warn:$md-warn,
  is-dark:false,
  foreground:$my-theme-foreground,
  background:$my-theme-background,
);
// Was `$theme: mat-light-theme($primary, $accent, $warn);`
//   -- Doesn't allow passing in of foreground/background, which may not matter if you're only doing 1 color scheme

// Establish theme
@include angular-material-theme($theme);

我计划提出合并请求以添加将它们传入的功能