@sheyxneo/angular-material-theme-switcher v1.0.1
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