@hysalim/theming v0.0.1

Angular Material Theming

Get Starting

Installation

$npm install @hysalim/theming

Angular

In angular.json add

"projects": {
  "architect": {
    "build": {
      "options": {
        /** Add properties */

        "stylePreprocessorOptions": {
          "includePaths": [
            "node_modules/
          ]
        }
        .......................................
      }
    }
  }
}

SCSS

Import SCSS in your style sheet

@use "@hysalim/theming/theme";

TypeScript

Import service in appModule

@import {MatThemingModule, MatThemingConfig} from '@hysalim/theming';

const theme: MatThemingConfig[] = [
  {name: 'default', dataClass: ''}
];

@NgModule({
  ................
  MatThemingModule.forRoot(theme)
  ................
})
export class AppModule { }

Usage

To set multiple themes within your app

SCSS

In your stylesheet

@use "@hysalim/theming/theme" with (
  theme-list: (
    default: (
      primary: (color: blue),
      accent: (color: teal)
    ),
    secondary-theme: (
      primary: (color: teal, default: 600)
    )
  )
);

Each theme you create is based on a basic theme. You don't have to write down all the settings

$_base-theme: (
  light-color: #FFF,
  dark-color: #000,
  light-status-bar: #E0E0E0,
  dark-status-bar: black,
  primary: (color: #6200EE, default: 500, lighter: 100, darker: 700, text: 500),
  accent: (color: #018786, default: 500, lighter: 100, darker: 700, text: 500),
  warn: (color: #B00020, default: 500, lighter: 100, darker: 700, text: 500),
  darkBackground: #121212,
  darkThemeMixToPrimary: "true",
  darkMaterialReference: "true"
) !default;

TypeScript

Import service in appModule

@import {MatThemingModule, MatThemingConfig} from '@hysalim/theming';

const theme: MatThemingConfig[] = [
  {name: 'default', dataClass: ''},
  {name: 'Name of my Secondary Theme', dataClass: 'secondary-theme'}
];

@NgModule({
  ................
  MatThemingModule.forRoot(theme)
  ................
})
export class AppModule { }

In app.component.ts

import { Component } from '@angular/core';
import { MatThemingService } from '@hysalim/theming';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'documentation';

  constructor(public theme: MatThemingService) {}
}

HTML

<mat-menu #menu="matMenu">
    <button mat-menu-item *ngFor="let item of theme.themeList" (click)="theme.setMatTheme(item.dataClass)">
      <span>{{item.name}}</span>
    </button>
  </mat-menu>

Mixins and functions

Luminance

theme.luminance($color)

Calculate the luminance value (0 - 1) of a given color.

@debug theme.luminance(#9C27B0); //return 0.116554

Contrast

theme.contrast($background, $front)

Calculates the contrast ratio between two colors.

@debug theme.contrast(#9C27B0, #000); // return 3.33071

Note:
Minimum contrast recommanded by Material Theming is 3.1

Tone

theme.tone($color)

Determines whether the given color is light or dark. If the input color is a string literal equal to "light" or "dark", it will be returned verbatim.

@debug theme.tone(#9C27B0); // return dark
@debug(light); // return light

Tone contrast

theme.contrast-tone($color)

Determines whether to use light or dark text on top of a given color.

@debug theme.contrast-tone(#9C27B0); // return light

Accessible text color

theme.accessible-ink-color($color, $light-color: #FFF, $dark-color: #000)

Returns an accessible ink color that has sufficient contrast against the given color fill.

@include theme.accessible-ink-color(bleu); // return color: #FFF

Custom properties

theme.property($property,$value-of-property-values)

Keys of palette colors |Key Name|Description| |--------|-----------| |primary-default|The theme of primary default color| |primary-lighter|The theme of primary lighter color| |primary-darker|The theme of primary darker color| |primary-text|The theme of primary text color| |primary-50 primary-100 or other hue|The theme of primary hue 50 color or other hue color| |primary-contrast-default|The theme of primary contrast default color| |primary-contrast-lighter|The theme of primary contrast lighter color| |primary-contrast-darker|The theme of primary contrast darker color| |primary-contrast-text|The theme of primary contrast text color| |primary-contrast-50 primary-contrast-100 or other hue|The theme of primary contrast hue 50 color or other contrast hue color|

Note:
Idem for other palette:

• accent
• warn

Keys of foreground |Key name|Description| |--------|-----------| |base|The theme of base color| |disabled|The theme of disabled color| |disabled-button|The theme of disabled button color| |elevation|The theme of elevation color (black)| |secondary-text|The theme of secondary text color| |icon|The theme of icon color| |text|The theme of text color| |slider-off|The theme of slider off color| |slider-off-active|The theme of slider off active color| Keys of background |Key name|Description| |--------|-----------| |status-bar|The theme of status bar color| |app-bar|The theme of application bar color| |background|The theme of background color| |hover|The theme of hover color| |surface|The theme of surface color| |disabled-button-background|The theme of disabled background button color| |focused|The theme of focused color| |selected|The theme of selected color| |selected-disabled|The theme of selected disabled color| |disabled-component|The theme of disabled component color| |unselect-chip|The theme of unselected chip color| |tooltip|The theme of tooltip color|

@use "@hysalim/theming/theme";

.foo {
  @include theme.property(background, primary-red-500);
}
/// return in CSS
.foo {
  background: red;
  background: var(--mat-theme-red-500, red);
}

The theme.property() mixin also accepts a custom property Map for the $value argument. The map must contain a varname key with the name of the custom property, and an optional fallback key with the value of the custom property.

Use the @hysalim/theme/helper/custom-properties module to create custom property Maps.

@use "@hysalim/theming/theme";
@use "@hysalim/theming/theme/helper/custom-properties";

.foo {
  @include theme.property(color, custom-properties.create(--foo-color, red));
}
/// return in CSS
.foo {
  background: red;
  background: var(--foo-color, red);
}