blocks|key|218664|text|变量在“node_modules/@+define+/material/”下的"_theming.scss“中定义。.To定义我们需要修改以下函数的自定义变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|218665|//+Creates+a+container+object+for+a+light+theme+to+be+given+to+individual+component+theme+mixins.
@function+mat-light-theme($success,+$primary,+$accent,+$warn:+mat-palette($mat-red))+{
++@return+(
++++success:$success,
++++primary:+$primary,
++++accent:+$accent,
++++warn:+$warn,
++++is-dark:+false,
++++foreground:+$mat-light-theme-foreground,
++++background:+$mat-light-theme-background,
++);
}

//+Creates+a+container+object+for+a+dark+theme+to+be+given+to+individual+component+theme+mixins.
@function+mat-dark-theme($success,+$primary,+$accent,+$warn:+mat-palette($mat-red))+{
++@return+(
++++success:$success,
++++primary:+$primary,
++++accent:+$accent,
++++warn:+$warn,
++++is-dark:+true,
++++foreground:+$mat-dark-theme-foreground,
++++background:+$mat-dark-theme-background,
++);
}|code-block|syntax|javascript|218666|218667|在同一个文件中，我们还可以将新引入的变量应用于组件，就像我将其应用于按钮一样。|blockquote|218668|218669|218670|//+Applies+a+focus+style+to+an+md-button+element+for+each+of+the+supported+palettes.
@mixin+_mat-button-focus-color($theme)+{
++$success:+map-get($theme,+success);
++$primary:+map-get($theme,+primary);
++$accent:+map-get($theme,+accent);
++$warn:+map-get($theme,+warn);

++&.mat-success+.mat-button-focus-overlay+{
++++background-color:+mat-color($success,+0.12);
++}
++&.mat-primary+.mat-button-focus-overlay+{
++++background-color:+mat-color($primary,+0.12);
++}
++&.mat-accent+.mat-button-focus-overlay+{
++++background-color:+mat-color($accent,+0.12);
++}

++&.mat-warn+.mat-button-focus-overlay+{
++++background-color:+mat-color($warn,+0.12);
++}

++&[disabled]+.mat-button-focus-overlay+{
++++background-color:+transparent;
++}
}

@mixin+_mat-button-ripple-color($theme,+$hue,+$opacity:+0.2)+{
++$success:+map-get($theme,+success);
++$primary:+map-get($theme,+primary);
++$accent:+map-get($theme,+accent);
++$warn:+map-get($theme,+warn);

++&.mat-success+.mat-ripple-element+{
++++background-color:+mat-color($success,+$hue,+$opacity);
++}
++&.mat-primary+.mat-ripple-element+{
++++background-color:+mat-color($primary,+$hue,+$opacity);
++}
++&.mat-accent+.mat-ripple-element+{
++++background-color:+mat-color($accent,+$hue,+$opacity);
++}

++&.mat-warn+.mat-ripple-element+{
++++background-color:+mat-color($warn,+$hue,+$opacity);
++}
}

//+Applies+a+property+to+an+md-button+element+for+each+of+the+supported+palettes.
@mixin+_mat-button-theme-color($theme,+$property,+$color:+'default')+{
++$success:+map-get($theme,+success);
++$primary:+map-get($theme,+primary);
++$accent:+map-get($theme,+accent);
++$warn:+map-get($theme,+warn);
++$background:+map-get($theme,+background);
++$foreground:+map-get($theme,+foreground);

++&.mat-success+{
++++#{$property}:+mat-color($success,+$color);
++}
++++&.mat-primary+{
++++#{$property}:+mat-color($primary,+$color);
++}
++&.mat-accent+{
++++#{$property}:+mat-color($accent,+$color);
++}
++&.mat-warn+{
++++#{$property}:+mat-color($warn,+$color);
++}

++&.mat-success+,&.mat-primary,+&.mat-accent,+&.mat-warn,+&[disabled]+{
++++&[disabled]+{
++++++$palette:+if($property+==+'color',+$foreground,+$background);
++++++#{$property}:+mat-color($palette,+disabled-button);
++++}
++}
}

@mixin+mat-button-theme($theme)+{
++$success:+map-get($theme,+success);
++$primary:+map-get($theme,+primary);
++$accent:+map-get($theme,+accent);
++$warn:+map-get($theme,+warn);
++$background:+map-get($theme,+background);
++$foreground:+map-get($theme,+foreground);

++.mat-button,+.mat-icon-button+{
++++background:+transparent;

++++@include+_mat-button-focus-color($theme);
++++@include+_mat-button-theme-color($theme,+'color');
++}|218671|可以在"theme.scss“文件中添加|218672|和新的自定义变量|218673|218674|218675|@import+'~@angular/material/_theming';

@include+mat-core();

$primary:+mat-palette($mat-green);
$accent:+mat-palette($mat-blue);
$warn:+mat-palette($mat-blue);
$success:+mat-palette($mat-blue);
$theme:+mat-light-theme($success,$primary,+$accent,$warn);

@include+angular-material-theme($theme);

.dark-theme+{
++$dark-success:+mat-palette($mat-light-blue);
++$dark-primary:+mat-palette($mat-light-blue);
++$dark-accent:+mat-palette($mat-green);

++$dark-theme:+mat-dark-theme($dark-success,+$dark-primary,+$dark-accent);

++@include+angular-material-theme($dark-theme);
}|218676|现在我们可以在|218677|中使用新的变量：|218678|218679|218680|<button++md-button+color="success">Primary</button>|218681|218682|下面是modified+_theming.scss+https://plnkr.co/edit/gMAEyVjb0F7MCC1x6OKe?p=templates的链接|offset|length|218683|218684|218685|注意:在升级angular-material包时，我们需要注意"_theming.scss“文件。|218686|entityMap|0|LINK|mutability|MUTABLE|url|https://plnkr.co/edit/gMAEyVjb0F7MCC1x6OKe?p=templates^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|Q|1I|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1M|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1O|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|1R|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1S|8|@]|9|@]|A|$]]|$1|Q|3|R|5|J|7|1T|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1W|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1X|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|J|7|1Y|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|20|8|@]|9|@]|A|$]]|$1|12|3|13|5|D|7|21|8|@]|9|@]|A|$E|F]]|$1|14|3|-4|5|6|7|22|8|@]|9|@]|A|$]]|$1|15|3|16|5|J|7|23|8|@]|9|@$17|24|18|25|1|26]]|A|$]]|$1|19|3|-4|5|6|7|27|8|@]|9|@]|A|$]]|$1|1A|3|-4|5|6|7|28|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|6|7|29|8|@]|9|@]|A|$]]|$1|1D|3|-4|5|6|7|2A|8|@]|9|@]|A|$]]]|1E|$1F|$5|1G|1H|1I|A|$1J|1K]]]]

<p>Variables are defined in "_theming.scss" which is under "node_modules/@angular/material/".To define the custom variable we need to modify the following functions.</p>

<pre><code>// Creates a container object for a light theme to be given to individual component theme mixins.
@function mat-light-theme($success, $primary, $accent, $warn: mat-palette($mat-red)) {
  @return (
    success:$success,
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: false,
    foreground: $mat-light-theme-foreground,
    background: $mat-light-theme-background,
  );
}

// Creates a container object for a dark theme to be given to individual component theme mixins.
@function mat-dark-theme($success, $primary, $accent, $warn: mat-palette($mat-red)) {
  @return (
    success:$success,
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: true,
    foreground: $mat-dark-theme-foreground,
    background: $mat-dark-theme-background,
  );
}
</code></pre>

<blockquote>
  <p>Inside the same file, we can also apply the newly introduced variable
  to the component as i applied it for buttons.</p>
</blockquote>

<pre><code>// Applies a focus style to an md-button element for each of the supported palettes.
@mixin _mat-button-focus-color($theme) {
  $success: map-get($theme, success);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  &amp;.mat-success .mat-button-focus-overlay {
    background-color: mat-color($success, 0.12);
  }
  &amp;.mat-primary .mat-button-focus-overlay {
    background-color: mat-color($primary, 0.12);
  }
  &amp;.mat-accent .mat-button-focus-overlay {
    background-color: mat-color($accent, 0.12);
  }

  &amp;.mat-warn .mat-button-focus-overlay {
    background-color: mat-color($warn, 0.12);
  }

  &amp;[disabled] .mat-button-focus-overlay {
    background-color: transparent;
  }
}

@mixin _mat-button-ripple-color($theme, $hue, $opacity: 0.2) {
  $success: map-get($theme, success);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  &amp;.mat-success .mat-ripple-element {
    background-color: mat-color($success, $hue, $opacity);
  }
  &amp;.mat-primary .mat-ripple-element {
    background-color: mat-color($primary, $hue, $opacity);
  }
  &amp;.mat-accent .mat-ripple-element {
    background-color: mat-color($accent, $hue, $opacity);
  }

  &amp;.mat-warn .mat-ripple-element {
    background-color: mat-color($warn, $hue, $opacity);
  }
}

// Applies a property to an md-button element for each of the supported palettes.
@mixin _mat-button-theme-color($theme, $property, $color: 'default') {
  $success: map-get($theme, success);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  &amp;.mat-success {
    #{$property}: mat-color($success, $color);
  }
    &amp;.mat-primary {
    #{$property}: mat-color($primary, $color);
  }
  &amp;.mat-accent {
    #{$property}: mat-color($accent, $color);
  }
  &amp;.mat-warn {
    #{$property}: mat-color($warn, $color);
  }

  &amp;.mat-success ,&amp;.mat-primary, &amp;.mat-accent, &amp;.mat-warn, &amp;[disabled] {
    &amp;[disabled] {
      $palette: if($property == 'color', $foreground, $background);
      #{$property}: mat-color($palette, disabled-button);
    }
  }
}

@mixin mat-button-theme($theme) {
  $success: map-get($theme, success);
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .mat-button, .mat-icon-button {
    background: transparent;

    @include _mat-button-focus-color($theme);
    @include _mat-button-theme-color($theme, 'color');
  }
</code></pre>

<blockquote>
  <p>And new custom variable can be added inside the "theme.scss" file</p>
</blockquote>

<pre><code>@import '~@angular/material/_theming';

@include mat-core();

$primary: mat-palette($mat-green);
$accent: mat-palette($mat-blue);
$warn: mat-palette($mat-blue);
$success: mat-palette($mat-blue);
$theme: mat-light-theme($success,$primary, $accent,$warn);

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

.dark-theme {
  $dark-success: mat-palette($mat-light-blue);
  $dark-primary: mat-palette($mat-light-blue);
  $dark-accent: mat-palette($mat-green);

  $dark-theme: mat-dark-theme($dark-success, $dark-primary, $dark-accent);

  @include angular-material-theme($dark-theme);
}
</code></pre>

<blockquote>
  <p>Now We can use new variable inside the html:</p>
</blockquote>

<pre><code>&lt;button  md-button color="success"&gt;Primary&lt;/button&gt;
</code></pre>

<blockquote>
  <p>Following is the link for modified _theming.scss <a href="https://plnkr.co/edit/gMAEyVjb0F7MCC1x6OKe?p=templates" rel="noreferrer">https://plnkr.co/edit/gMAEyVjb0F7MCC1x6OKe?p=templates</a></p>
</blockquote>

<p>Note: We need to take care of "_theming.scss" file while upgrading the angular-material package.</p>


blocks|key|5131191|text|我在PROJECT_NAME\node_modules\@angular\material_theming.scss中的_theming.scss文件内的相应调色板中添加了一种新颜色这是我的工作，并成功地传递了ng构建--prod|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|5131192|你必须尊重颜色和字体之间的对比度，在我的例子中，颜色是#590F46，与白色字体有很好的对比度。|5131193|执行此操作|5131194|5131195|将新颜色添加到相应的调色板中(我的情况是$mat-pink+(调色板围绕第500行开始，因此最好使用文本编辑器中的find+ctrl%2Bf并搜索调色板名称)|ordered-list-item|5131196|在下一节中的contrast:选择字体颜色(+$dark-primary-text或$light-primary-+text+)，请遵守材料设计指南pls.|5131197|Remember！node_modules文件夹不是由github/bitbucket等备份的，所以如果您克隆此项目并使用npm安装或其他原因，您必须备份此文件并将其替换为默认文件，减少危险使用我的建议是只添加您的自定义调色板seccion，不要弄乱其他代码|5131198|5131199|示例Code+example+just+palette+mat-pink+in+_theming.scss和My+file+with+custom+themes+for+angular+material2对不起我的英语我只想帮你:)|5131200|entityMap|0|LINK|mutability|MUTABLE|url|https://i.stack.imgur.com/vBFrQ.png|1|https://i.stack.imgur.com/Qv9m9.png^0|2|1K|1O|D|2X|A|0|0|0|0|1Q|6|0|6|9|0|1P|5|0|0|2|1F|0|1I|1C|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1C|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|N|3|O|5|M|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|M|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1O|8|@]|D|@$9|1P|A|1Q|1|1R]|$9|1S|A|1T|1|1U]]|E|$]]|$1|U|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]]]

<p>I add a new color in the corresponding palette inside the file <strong>_theming.scss</strong> in <strong>PROJECT_NAME\node_modules\@angular\material_theming.scss</strong> this work's for me and pass  succefully the <strong>ng build --prod</strong></p>

<p>You have to respect the contrast ratio between the color and font, in my case the color is #590F46 and have good contrast with white fonts.</p>

<p>do this</p>

<ol>
<li>Add the new color inside the corresppnding palette in my case $mat-pink (color palettes start arround the row 500 so better use find <strong>ctrl+f</strong> in your text editor and search the palette name)</li>
<li>In the next section named <strong>contrast:</strong> choose the font color ( $dark-primary-text or $light-primary-text), respect the material design guidelines pls.</li>
<li>Remember! the node_modules folder are not backup by github/bitbucket etc so you have to backup this file and replace it for the default file if you clone this project and use <strong>npm install</strong> or other reasons, less dangerouse my recomendiation is just add your custom palette seccion and dont mess with the other code</li>
</ol>

<p>Examples
<a href="https://i.stack.imgur.com/vBFrQ.png" rel="nofollow noreferrer">Code example just palette mat-pink in _theming.scss</a>
and 
<a href="https://i.stack.imgur.com/Qv9m9.png" rel="nofollow noreferrer">My file with custom themes for angular material2</a>
Sorry for my english i just want to help :)</p>


blocks|key|2129713|text|你不能这么做。但是如果你愿意，你可以添加“color=”任何“属性到材料的一些元素中，这会为你添加自定义类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2129714|示例：|2129715|​|2129716|.whatever+{
++background-color:+light-blue;
}|code-block|syntax|javascript|2129717|<button+mat-button+color="whatever"></button>+//+this+button+will+have+'.mat-whatever'+class.|2129718|2129719|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>You can`t do it. But if you like you can add "color="whatever" attribute to some element of material and this adds custom class for you.</p>

<p>Example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.whatever {
  background-color: light-blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button mat-button color="whatever"&gt;&lt;/button&gt; // this button will have '.mat-whatever' class.</code></pre>
</div>
</div>
</p>


blocks|key|218770|text|要添加名为success的新颜色，请进行以下更改|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|218771|在主styles.css文件中添加以下样式|218772|​|218773|.mat-success+{
++color:+#fff+!important;
++background-color:+#28a745+!important;
}
.mat-success[disabled]+{
++background-color:+rgba(0,+0,+0,+0.12)+!important;
}|code-block|syntax|javascript|218774|218775|在组件中指定颜色名称|218776|218777|+<button+mat-raised-button+color="success">|218778|218779|entityMap^0|5|7|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|11|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|12|8|@]|D|@]|E|$M|N]]|$1|O|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|14|8|@]|D|@]|E|$]]|$1|R|3|I|5|6|7|15|8|@]|D|@]|E|$]]|$1|S|3|T|5|L|7|16|8|@]|D|@]|E|$M|N]]|$1|U|3|I|5|6|7|17|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|W|$]]

<p>To add a new color named <code>success</code>, make the following changes</p>

<p>Add the following styles in your main styles.css file</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.mat-success {
  color: #fff !important;
  background-color: #28a745 !important;
}
.mat-success[disabled] {
  background-color: rgba(0, 0, 0, 0.12) !important;
}</code></pre>
</div>
</div>
</p>

<p>Specify the color name in your component</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;button mat-raised-button color="success"&gt;</code></pre>
</div>
</div>
</p>


<p>How to create "custom" own colors for <a href="https://material.angular.io/" rel="noreferrer">angular material</a>?</p>

<p>For example the bootstrap like colors like <code>success</code> (green), <code>warn</code> (yellow), <code>danger</code> (red), beside <code>primary</code> (blue), <code>accent</code> (pink).</p>

<p>In other words: Extend the color variablen of Angular Material (2+) for using it in html attributes:</p>

<pre><code>&lt;button mat-raised-button color="success"&gt;Success&lt;/button&gt;
</code></pre>

<p>or create a white checkbox like:</p>

<pre><code>&lt;mat-checkbox color="white"&gt;Check me!&lt;/mat-checkbox&gt;
</code></pre>


Add custom color variables in angular material (2+)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

如何为创建“自定义”自己的颜色例如，引导程序喜欢success (绿色)、warn (黄色)、danger (红色)等颜色，旁边还有primary (蓝色)、accent (粉色)。换句话说:扩展Angular Material (2+)的颜色变量，以便在html属性中使用它：<button mat-raised-bu...

问在角度材质(2+)中添加自定义颜色变量
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在角度材质(2+)中添加自定义颜色变量EN