在角材料中创建自定义主题2

Question

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

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

我无法找到角度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);

我计划发出合并请求以添加在

中传递它们的功能