70 lines
2.0 KiB

// Custom Theming for Angular Material
// For more information:
@import '~@angular/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();
// import your custom themes
@import 'theme-light.scss';
@import 'theme-dark.scss';
@import 'theme-contrast.scss';
.theme-light {
@include angular-material-theme($theme-light);
.theme-dark {
@include angular-material-theme($theme-dark);
.theme-contrast {
@include angular-material-theme($theme-contrast);
You can add global.scss styles to this file, and also import other style files
all styles should be imported in an order from top:
most global scope, to bottom: the most specific scope of qualification.
// configuration
@import './styles/variables';
@import './styles/dev-utilities/mixins';
@import './styles/dev-utilities/helpers';
// @import './styles/dev-utilities/debug';
@import './styles/libraries/frameworks';
@import './styles/libraries/overrides';
// typography
//@import './styles/partials/font-families';
@import './styles/partials/typo';
// themes
@import './styles/themes/all';
// most general dom elements
@import './styles/partials/global';
@import './styles/partials/logo';
@import './styles/partials/navigation';
// main content elements
@import './styles/partials/main';
@import './styles/partials/tables';
@import './styles/partials/buttons';
// @import './styles/partials/links';
@import './styles/partials/forms';
@import './styles/partials/form-controls';
@import './styles/partials/images';
// responsive, mobile first goal
@import './styles/partials/responsive';
// reset suggested by material-angular
body {
height: 100%;
body {
margin: 0;
font-family: Roboto, 'Helvetica Neue', sans-serif;