我最近通過關注此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