MTheme

M-Theme is a set of SCSS files (and fonts).

An Angular 8 project is also provided as demo.

How to use

This theme define a custom Angular Material theme.

Install

npm install @metromobilite/m-theme

Import

In your main scss file (ex: src/styles.scss if you start your project using Angular CLI):

// The m-theme package needs to know where your assets are.
$assets-path: "/assets";

// Import all style from m-theme
@import "~@metromobilite/m-theme/style";

If you need more flexibility you can also import files one by one:

@import "~@metromobilite/m-theme/reset";
@import "~@metromobilite/m-theme/variables";
@import "~@metromobilite/m-theme/font";
@import "~@metromobilite/m-theme/theme";
@import "~@metromobilite/m-theme/classes";
@import "~@metromobilite/m-theme/components";

Then, in your index.html file you can add the class dark-theme or light-theme on the body tag.

This theme provide custom palettes and provides the following variables:

• $light-theme-background
• $light-theme-foreground
• $dark-theme-background
• $dark-theme-foreground

Example:

.my-container {
  color: map-get($dark-theme-foreground, text);
}

Some helper functions are also provided:

• dark-color-overlay($elevation)
• light-color-overlay($elevation)

$elevation must be a value in [0, 1, 2, 3, 4, 6, 8, 12, 16, 24]

Example:

.my-container {
  background: dark-color-overlay(16);
}

Components

Short documentation is available for some components (list, expansion_panel, toolbar, and more) in their respective SCSS file.