我最近通过关注此guide创建了角质材质2应用程序。现在我想知道如何将主题更改为黑暗或dark-theme
?将角质材质2主题设置为黑色主题
回答
添加按照您的style.css文件CSS:
@import '[email protected]/material/core/theming/all-theme';
// NOTE: Theming is currently experimental and not yet publically released!
@include md-core();
$primary: md-palette($md-deep-purple);
$accent: md-palette($md-amber, A200, A100, A400);
$theme: md-light-theme($primary, $accent);
@include angular-material-theme($theme);
$dark-primary: md-palette($md-pink, 700, 500, 900);
$dark-accent: md-palette($md-blue-grey, A200, A100, A400);
$dark-warn: md-palette($md-deep-orange);
$dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
@include angular-material-theme($dark-theme);
附: https://github.com/jelbourn/material2-app/blob/master/src/material2-app-theme.scss
它不工作,因为上面的代码语言SCSS不是CSS。 – mojtab23
@ mojtab23不支持CSS中的变量(至少广泛)。 SCSS是覆盖CSS的唯一方法。 – codef0rmer
是的,这是正确的答案。您需要使用SCSS构建自定义主题,或者需要使用预先构建的黑暗主题。 – DevVersion
从当前版本:2.0.0-beta.3开始,将波纹管添加到您的全球sass
文件中。
@import '[email protected]/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
// 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.
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
// The warn palette is optional (defaults to red).
$dark-warn: mat-palette($mat-deep-orange);
// Create the theme object (a Sass map containing all of the palettes).
$cdark-theme: mat-light-theme($dark-primary, $dark-accent, $dark-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($cdark-theme);
- 1. 材质涟漪效应:黑暗主题与灯光主题
- 2. 材质主题兼容性
- 3. 如何将Div的背景颜色设置为Angular 2中的主要主题颜色材质
- 4. 如何调整角度材质默认主题中的颜色
- 5. 角质材料2主题在生产中不起作用
- 6. 使用webpack加载主题材质2的角度
- 7. 更改Angular 2的材质设计主题
- 8. 角度材质 - 设置调色板
- 9. 更改主题颜色角材2
- 10. PlacePicker不会拾取材质主题
- 11. setSupportActionBar自定义材质主题
- 12. 运行时更改Android材质主题
- 13. 如何设置与主题颜色不同的gwt材质元素的颜色?
- 14. VS代码:如何设置与Sublime相同的材质主题?
- 15. 如何设置不属于材质组件的材质角度材质
- 16. 如何在角度材质主题中平滑滚动?
- 17. 如何在Android 5.0设备上使用材质设计主题
- 18. 在角2材质滑块
- 19. Android材质设计:创建主题更换器
- 20. 在Delphi中使用Delphi XE8实现材质设计主题
- 21. 材质设计主题在IE7和IE8中不起作用
- 22. 使用AppCompat的材质设计逆旋钮/ edittext主题
- 23. 在Dark和Light主题中将ApplicationBarIconButton颜色设置为黑色
- 24. 为什么角度材质会设置背景颜色?
- 25. 角质材料md.data.table分页问题
- 26. 角质材料md-select验证问题
- 27. 如何在android中更改为材质主题?
- 28. 角材质:如何设置floatPlaceholder从不
- 29. 在新材质DatePicker中设置标题颜色
- 30. 角材2找不到核心主题
https://github.com/jelbourn/material2-app可能有助于 – Searching