Angular Material Theme Switcher
This library will help you to use multiple themes and easily switch between them in your project.
Requirement
- Create your project with supporting to Sass (.scss / .sass)
Example :
ng new Example-Project --style scss
- Install Angular Material in your project
ng add @angular/material
How to install?
You can NPM to install this library in your project.
npm install @sheyxneo/angular-material-theme-switcher
or
npm i @sheyxneo/angular-material-theme-switcher
How to use?
Firstly you have to import Library in the your module
- .module
import {
AngularMaterialThemeSwitcherModule
} from '@sheyxneo/angular-material-theme-switcher';
Then import theme in styles.scss
- styles.scss
@import '~@sheyxneo/angular-material-theme-switcher/am-theme';
Now you can add Theme Switchers and Theme Containers
Theme Switchers
There are two switchers to use according to your needs- You can call these component in your component's HTML file.
Color Switcher
Switcher to switch color theme of your project.
- Basic use
component.html
<am-theme-color-switcher></am-theme-color-switcher>
-
Advance Configuration
- Configure Default Color Theme
component.html
<am-theme-color-switcher colorTheme="color-theme-name"></am-theme-color-switcher>
- Provide your Color Themes
component.html
<am-theme-color-switcher [themes]="['color-theme-name']"></am-theme-color-switcher>
or
component.ts
themes = ['indigo-green'];
component.html
<am-theme-color-switcher [themes]="themes"></am-theme-color-switcher>
- Configure Library Color Themes should use or not- Default value is 'true'
component.html
<am-theme-color-switcher [isUseLibraryThemes]="false"></am-theme-color-switcher>
Dark Switcher
Switch to Dark or Light
- Basic use
component.html
<am-theme-dark-switcher></am-theme-dark-switcher>
-
Advance Configuration
- Configure Theme is Dark or Not, Default value is 'false'.
component.html
<am-theme-dark-switcher [isDark]="true"></am-theme-dark-switcher>
Theme Container
To apply themes to your project, you can use following directives.
You must have to add these directives to none Angular Material wrapper html element.
Exapmle :
component.html
<div amThemeDirective>
...
</div>
Active Theme
To apply current Active theme.
component.html
<div amThemeActive>
...
</div>
Dark Theme
To apply current Active Dark theme- This container will not change with Dark Switcher.
component.html
<div amThemeDark>
...
</div>
Light Theme
To apply current Light theme- This container will not change with Dark Switcher.
component.html
<div amThemeLight>
...
</div>
Custom Theme
To apply Custom theme- You must have to provide Color Theme name- Your theme is Dark or Not is optional- Default value is 'false'- It mean, whether you will did't set value for 'isDark', your theme will be Light.
- Light Custom Theme
component.html
<div amThemeCustom colorTheme="indigo-pink">
...
</div>
- Dark Custom Theme
component.html
<div amThemeCustom colorTheme="indigo-pink" [isDark]="true">
...
</div>
Theme Container
Special directive to manage your theme- It is also like Active Theme, but also canfigure like Custome Theme.
- Like a Active Theme
This will use states of your Theme Switchers.
component.html
<div amThemeContainer>
...
</div>
* Fixed Color Theme
This will use fixed Color Theme and state of your Dark Switcher.
component.html
```html
<div amThemeContainer colorTheme="indigo-pink">
...
</div>
- Fixed Dark or Light Theme
This will use fixed Dark or Light Theme and state of your Color Switcher.
component.html
<div amThemeContainer [isDark]="true">
...
</div>
- Like Custom Theme
This will use fixed both Color Theme and Dark or Light Theme- And don't use states of your Theme Switchers.
component.html
<div amThemeContainer colorTheme="indigo-pink" [isDark]="true">
...
</div>
How make your Themes?
It is so easy to make your theme- You only have to pass selected colors to the theme builder in 'styles.scss' file or your custom 'theme.scss' file, but you must have to import 'theme.scss' file into 'styles.scss' file.
- Basic use
You can make theme providing primary, accent and warn color.
styles.scss
...
@import "~@angular/material/theming";
@include mat-core();
$theme: (
deeppurple-amber: (
primary: mat-palette($mat-deep-purple),
accent: mat-palette($mat-amber, A200, A100, A400),
warn: mat-palette($mat-red)
),
indigo-pink: (
primary: mat-palette($mat-indigo),
accent: mat-palette($mat-pink, A200, A100, A400),
warn: mat-palette($mat-red)
),
pink-bluegrey: (
primary: mat-palette($mat-pink),
accent: mat-palette($mat-blue-grey, A200, A100, A400),
warn: mat-palette($mat-red)
),
purple-green: (
primary: mat-palette($mat-purple),
accent: mat-palette($mat-green, A200, A100, A400),
warn: mat-palette($mat-red)
)
);
@import '~@sheyxneo/angular-material-theme-switcher/am-theme';
@include am-theme($theme);
...
- Advance use
You can provide any of these or all of these build your Advance Themes.
-
light-background
-
dark-background
-
light-background-status-bar
-
dark-background-status-bar
-
light-background-app-bar
-
dark-background-app-bar
-
light-background-hover
-
dark-background-hover
-
light-background-card
-
dark-background-card
-
light-background-dialog
-
dark-background-dialog
-
light-background-disabled-button
-
dark-background-disabled-button
-
light-background-raised-button
-
dark-background-raised-button
-
light-background-focused-button
-
dark-background-focused-button
-
light-background-selected-button
-
dark-background-selected-button
-
light-background-selected-disabled-button
-
dark-background-selected-disabled-button
-
light-background-disabled-button-toggle
-
dark-background-disabled-button-toggle
-
light-background-unselected-chip
-
dark-background-unselected-chip
-
light-background-disabled-list-option
-
dark-background-disabled-list-option
-
light-foreground-base
-
dark-foreground-base
-
light-foreground-divider
-
dark-foreground-divider
-
light-foreground-dividers
-
dark-foreground-dividers
-
light-foreground-disabled
-
dark-foreground-disabled
-
light-foreground-disabled-button
-
dark-foreground-disabled-button
-
light-foreground-disabled-text
- dark-foreground-disabled-text
-
light-foreground-elevation
-
dark-foreground-elevation
-
light-foreground-hint-text
-
dark-foreground-hint-text
-
light-foreground-secondary-text
-
dark-foreground-secondary-text
-
light-foreground-icon
-
dark-foreground-icon
-
light-foreground-icons
-
dark-foreground-icons
-
light-foreground-text
-
dark-foreground-text
-
light-foreground-slider-min
-
dark-foreground-slider-min
-
light-foreground-slider-off
-
dark-foreground-slider-off
-
light-foreground-slider-off-active
-
dark-foreground-slider-off-active
Additional Gift
How is nice you can use these themes for your None Angular Material html elemants- It is easy- You can use following 'css' classes to them.
-
Background colors
-
primary-background
-
accent-background
-
warn-background
-
status-bar-background
-
app-bar-background
-
background-background
-
hover-background
-
card-background
-
dialog-background
-
disabled-button-background
-
raised-button-background
-
focused-button-background
-
selected-button-background
-
selected-disabled-button-background
-
disabled-button-toggle-background
-
unselected-chip-background
-
disabled-list-option-background
-
-
Foreground and Text colors
-
primary-color
-
accent-color
-
warn-color
-
base-color
-
divider-color
-
dividers-color
-
disabled-color
-
disabled-button-color
-
disabled-text-color
-
elevation-color
-
hint-text-color
-
secondary-text-color
-
icon-color
-
icons-color
-
text-color
-
slider-min-color
-
slider-off-color
-
slider-off-active-color
-