purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-10-31 13:13:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Theming) Color themes

Browse Source
This commit is contained in:
Sercan Yemen 2018-08-27 12:28:57 +03:00
parent ecbc370064
commit e92f34b38f
2 changed files with 78 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/@fuse/components/theme-options/theme-options.component.html
View File

@ -18,9 +18,10 @@
<h2>Color themes</h2>
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="colorTheme">
<mat-radio-button class="mb-12" value="theme-default">Default</mat-radio-button>
<mat-radio-button class="mb-12" value="theme-default-dark">Default Dark</mat-radio-button>
<mat-radio-button class="mb-12" value="theme-default">Default Light</mat-radio-button>
<mat-radio-button class="mb-12" value="theme-yellow-light">Yellow Light</mat-radio-button>
<mat-radio-button class="mb-12" value="theme-blue-gray-dark">Blue-Gray Dark</mat-radio-button>
<mat-radio-button class="mb-12" value="theme-pink-dark">Pink Dark</mat-radio-button>
</mat-radio-group>
</div>

112
src/app/app.theme.scss
View File

@ -173,7 +173,8 @@ $default-warn-palette: mat-palette($mat-red);
// Create the Material theme object
$theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
// Add ".theme-default" class to the body to activate this theme
// Add ".theme-default" class to the body to activate this theme.
// Class name must start with "theme-" !!!
body.theme-default {
// Create an Angular Material theme from the $theme map
@ -196,41 +197,7 @@ body.theme-default {
}
// -----------------------------------------------------------------------------------------------------
// @ Define the default dark theme
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
$default-dark-theme-primary-palette: mat-palette($mat-blue, 600, 400, 700);
$default-dark-theme-accent-palette: mat-palette($mat-blue-gray);
$default-dark-theme-warn-palette: mat-palette($mat-red);
// Create the Material theme object
$default-dark-theme: mat-dark-theme($default-dark-theme-primary-palette, $default-dark-theme-accent-palette, $default-dark-theme-warn-palette);
// Add ".theme-default-dark" class to the body to activate this theme
body.theme-default-dark {
// Generate the Angular Material theme
@include angular-material-theme($default-dark-theme);
// Apply the theme to the Fuse Core
@include fuse-core-theme($default-dark-theme);
// Apply the theme to the user components
@include components-theme($default-dark-theme);
// Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: (
primary: $default-dark-theme-primary-palette,
accent: $default-dark-theme-accent-palette,
warn: $default-dark-theme-warn-palette
);
@include fuse-color-classes($custom-palettes);
}
// -----------------------------------------------------------------------------------------------------
// @ Define the yellow light theme
// @ Define a yellow light theme
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
@ -241,7 +208,8 @@ $yellow-light-theme-warn-palette: mat-palette($mat-red);
// Create the Material theme object
$yellow-light-theme: mat-light-theme($yellow-light-theme-primary-palette, $yellow-light-theme-accent-palette, $yellow-light-theme-warn-palette);
// Add ".theme-yellow-light" class to the body to activate this theme
// Add ".theme-yellow-light" class to the body to activate this theme.
// Class name must start with "theme-" !!!
body.theme-yellow-light {
// Generate the Angular Material theme
@ -262,3 +230,73 @@ body.theme-yellow-light {
@include fuse-color-classes($custom-palettes);
}
// -----------------------------------------------------------------------------------------------------
// @ Define a blue-gray dark theme
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
$blue-gray-dark-theme-primary-palette: mat-palette($mat-blue);
$blue-gray-dark-theme-accent-palette: mat-palette($mat-blue-gray);
$blue-gray-dark-theme-warn-palette: mat-palette($mat-red);
// Create the Material theme object
$blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette);
// Add ".theme-blue-gray-dark" class to the body to activate this theme.
// Class name must start with "theme-" !!!
body.theme-blue-gray-dark {
// Generate the Angular Material theme
@include angular-material-theme($blue-gray-dark-theme);
// Apply the theme to the Fuse Core
@include fuse-core-theme($blue-gray-dark-theme);
// Apply the theme to the user components
@include components-theme($blue-gray-dark-theme);
// Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: (
primary: $blue-gray-dark-theme-primary-palette,
accent: $blue-gray-dark-theme-accent-palette,
warn: $blue-gray-dark-theme-warn-palette
);
@include fuse-color-classes($custom-palettes);
}
// -----------------------------------------------------------------------------------------------------
// @ Define a pink dark theme
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
$pink-dark-theme-primary-palette: mat-palette($mat-pink);
$pink-dark-theme-accent-palette: mat-palette($mat-pink);
$pink-dark-theme-warn-palette: mat-palette($mat-red);
// Create the Material theme object
$pink-dark-theme: mat-dark-theme($pink-dark-theme-primary-palette, $pink-dark-theme-accent-palette, $pink-dark-theme-warn-palette);
// Add ".theme-pink-dark" class to the body to activate this theme.
// Class name must start with "theme-" !!!
body.theme-pink-dark {
// Generate the Angular Material theme
@include angular-material-theme($pink-dark-theme);
// Apply the theme to the Fuse Core
@include fuse-core-theme($pink-dark-theme);
// Apply the theme to the user components
@include components-theme($pink-dark-theme);
// Generate Fuse color classes for primary, accent and warn colors
$custom-palettes: (
primary: $pink-dark-theme-primary-palette,
accent: $pink-dark-theme-accent-palette,
warn: $pink-dark-theme-warn-palette
);
@include fuse-color-classes($custom-palettes);
}