Styles Directory¶
The ~/src/styles
directory is used to store scss style sheets for the
application. It can contain themes, Bootstrap, Angular Material, and any
other styles.
~/src/styles.scss
is installed in the default Angular skeleton. It should
contain @import statements for all your global application scss files.
For instance it can import theme files stored in the ~/src/styles
directory.
Themes¶
The ~/src/styles/themes
directory should contain the application-wide
themes. This application includes two theme-files, black-theme.scss and
light-theme.scss.
A theme file generates the color-palette that composes the final theme and is constructed of three main palettes: primary, accent and warn. These palettes are defined using the mat-palette mixin, which accepts a mat-color and a hue-number that represents different shades of the chosen color. In terms of code, this is what we have:
$my-black-primary: mat-palette($mat-grey, 700, 300, 900);
$my-black-accent: mat-palette($mat-blue-grey, 400);
$my-black-warn: mat-palette($mat-red, 500);
$my-black-theme: mat-dark-theme(
$my-black-primary,
$my-black-accent,
$my-black-warn
);
The themes are included in the styles.scss file along with the mat-core mixin, which adds the base styles to material components.
@import '~@angular/material/theming';
@import './styles/themes/black-theme.scss';
@import './styles/themes/light-theme.scss';
@include mat-core();
.my-light-theme {
@include angular-material-theme($my-light-theme);
}
.my-dark-theme {
@include angular-material-theme($my-dark-theme);
}
The downside here is that the approach above only will style material components and not custom ones.
To achieve this, we’ve added a file called
project-container.component.scss-theme.scss
. This file imports the material
theme and defines a mixin that styles the content with the appropriate color
values - pulling color-palettes from the theme.
@import '~@angular/material/theming';
@mixin my-project-container-component-theme($theme) {
$accent: map-get($theme, accent);
.active {
color: mat-color($accent, default-contrast);
background-color: mat-color($accent);
&:hover {
color: mat-color($accent, default-contrast);
background-color: mat-color($accent);
}
}
}
Then those files are referred to in the styles.scss files:
@import 'app/modules/home/page/project-item/project-container.component.scss-theme.scss';
@mixin custom-components-theme($theme) {
// ...
@include my-project-container-component-theme($theme);
}
.my-light-theme {
// ...
@include custom-components-theme($my-light-theme);
}
.my-dark-theme {
// ...
@include custom-components-theme($my-black-theme);
}
The application content needs to be placed inside either a
mat-sidenav-container
element or have the mat-app-background
class
applied to work. This application follows the last approach by appending this
class to the div
that wraps the app-content in the
src/app/layout/content-layout/content-layout.component.html
file:
<div class="my-dark-theme">
<div class="mat-app-background">
<app-nav></app-nav>
<div class="container">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
</div>
The height of the viewport the theme should affects is also defined:
.mat-app-background {
height: 100%;
}
Bootstrap¶
The ~/src/styles
directory can be used for compiling bootstrap and storing
other scss resources. To install a custom bootstrap download the source files,
extract bootstrap into ~/src/styles/bootstrap
, then modify the
bootstrap/scss/_variables.scss
. Include boostrap in the styles.scss
:
@import './styles/bootstrap/scss/bootstrap.scss';
Install¶
mkdir src/styles
This is documentation for angular-folder-structure. If you find this useful please add your ★ star to the project.