Parixa (परीक्षा in Sanskrit) means 'test'.
This application is test and playground for creating custom themes for angular applications. The color combinations are not limited to the Material Palette.
Theming an Angular Material application is describe here.
- Colors are defined in palettes.
- A palette defines:
- Shades of a specific color - main & accent.
- Contrast color for each of these shades.
- 3 distinct color palettes are required for the theme - primary, accent and warn.
- Palettes can have any name.
- You can use palettes from 2014 Material Design color palettes
- Or create your own at Material Design Palette Generator
A theme object is created by functions mat-light-theme
or mat-dark-theme
.
The output of these functions is passed to to angular-material-theme
mixin,
which styles the components based on the theme object.
To build good custom themes, we need to more!
The theme object passed to angular-material-theme
mixin, can be augmented
with 2 additional objects for fine grained control on the styles.
With experiments - in making this application - and bit of browsing through the code, here is my understanding.
The background
map defines these colors:
status-bar
- Fill color of status bar.
app-bar
- Fill color of default toolbar.
background
- Default fill color.
- check-mark in checkbox.
hover
- Fill color on hovering menu.
- Selection options.
- Stepper title.
card
- Fill color of card.
- Fill color of date-picker.
- Fill color of menu.
- Fill color of dropdown selection.
dialog
- Fill color of dialog.
disabled-button
- Fill color of disabled button.
raised-button
- Fill color of raised button.
focused-button
- Fill color of focused button.
selected-button
- Fill color of selected toggle button.
selected-disabled-button
- Fill color of selected, but disabled toggle button.
disabled-button-toggle
- Fill color of disabled toggle button.
unselected-chip
- Fill color of a chip.
disabled-list-option
- Fill color of disabled list option.
The foreground
map defines these colors:
base
- On hover, focus and ripple effects.
divider
- Dividers in lists.
- Form fields.
- stepper guides.
- button toggle borders.
dividers
- ?
disabled
- Disabled radio buttons.
- 'off' color on slide toggle.
disabled-button
- Text and icons on disabled buttons, icons, button-toggles.
disabled-text
- ?
elevation
- Base color for elevation shadow.
hint-text
- Doesn't appear to be used so far...
secondary-text
- Persistent hint text in form fields.
- List subheader.
- Card subtitle.
- Label for disabled controls.
- Border color for unselected checkboxes & radio buttons.
- Panel description.
- Icon fill color for remaining steps in stepper.
icon
- Color for icons e.g. in datepicker.
icons
- ?
text
- Default text color for all controls.
slider-min
- Color of slider at minimum position.
slider-off
- Color of slider from current position till end.
slider-off-active
- Color of slider from current position till end, while slider is in focus.
Until, I setup workflow to individually package themes, the themes must be copied manually.
- The themes are available in the folder themes
- Here, each sub-folder is a theme.
- Grab the folder(s) of desired theme(s) along with
_common.scss
. - Under the
app
folder of your project, create a sub-folderthemes
. - Here, create file
index.scss
with contents below@import '~@angular/material/theming'; @include mat-core();
- Include each theme as below:
@import './theme-name/_theme.scss';
- If you plan to use only one theme, add the class to 'root' and 'overlay' components.
- Else, you may need a switcher. Code in this repo can be reused for the purpose. i. Will create a directive soon...
BSD-3-Clause Copyright Sanjeev Premi