In the name of God

.gitignore

@@ -0,0 +1,3 @@
+.idea/
+.vscode/
+node_modules/

.npmignore

@@ -0,0 +1,4 @@
+*
+!/LICENSE
+!/dist/types/**/*
+!/dist/main.js

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Mir-Ismaili
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,222 @@
+<p dir="auto">
+    <a href="https://npmjs.com/package/angular-material-dynamic-themes">
+        <img alt="npm (scoped)" src="https://img.shields.io/npm/v/angular-material-dynamic-themes.svg">
+    </a>
+    <a href="https://david-dm.org/mirismaili/angular-material-dynamic-themes">
+        <img src="https://david-dm.org/mirismaili/angular-material-dynamic-themes.svg" alt="Dependencies Status">
+    </a>
+    <a href="https://snyk.io//test/github/mirismaili/angular-material-dynamic-themes?targetFile=package.json">
+        <img src="https://snyk.io//test/github/mirismaili/angular-material-dynamic-themes/badge.svg?targetFile=package.json" alt="Known Vulnerabilities" data-canonical-src="https://snyk.io//test/github/mirismaili/angular-material-dynamic-themes?targetFile=package.json">
+    </a>
+    <a href="https://packagephobia.now.sh/result?p=angular-material-dynamic-themes">
+        <img src="https://packagephobia.now.sh/badge?p=angular-material-dynamic-themes" alt="install size">
+    </a>
+    <br>
+    <a href="https://github.com/mirismaili/angular-material-dynamic-themes/fork">
+        <img src="https://img.shields.io/github/forks/mirismaili/angular-material-dynamic-themes.svg?style=social" alt="GitHub forks">
+    </a>
+    <a href="https://github.com/mirismaili/angular-material-dynamic-themes">
+        <img src="https://img.shields.io/github/stars/mirismaili/angular-material-dynamic-themes.svg?style=social" alt="GitHub stars">
+    </a>
+    <br>
+    <a href="https://github.com/mirismaili/angular-material-dynamic-themes/blob/master/LICENSE">
+        <img alt="GitHub" src="https://img.shields.io/github/license/mirismaili/angular-material-dynamic-themes.svg">
+    </a>
+</p>
+
+**Angular-Material-Dynamic-Themes**
+
+A library to make it easier to add dynamic themes (changeable at run-time) to you Angular Material app
+
+***
+
+# Installation
+
+In your **Angular Material project**:
+
+```bash
+npm install angular-material-dynamic-themes
+```
+
+# Basic Usage
+
+In your `styles.scss` (or `themes.scss` if you have):
+
+```scss
+// Below codes should only be included ONCE in your application.
+
+@include mat-core();
+
+// Add your desired themes to this map.
+$themes-map: (
+  indigo-pink: (
+    primary-base: $mat-indigo,
+    accent-base: $mat-pink,
+  ),
+
+  deeppurple-amber: (
+    primary-base: $mat-deep-purple,
+    accent-base: $mat-amber,
+  ),
+
+  pink-bluegrey: (
+    primary-base: $mat-pink,
+    accent-base: $mat-blue-gray,
+  ),
+
+  purple-green: (
+    primary-base: $mat-purple,
+    accent-base: $mat-green,
+  ),
+);
+
+// Import the library and do the job:
+@import 'angular-material-dynamic-themes/themes-core';
+@include make-stylesheets($themes-map);
+```
+
+<sup>For more information about `$themes-map` and adding more customizations to your themes, see [Advanced Usage](#advanced-usage).</sup>
+
+In your main component:
+
+```typescript
+import {Component, HostBinding} from '@angular/core'
+import {OverlayContainer} from '@angular/cdk/overlay'
+
+const THEME_DARKNESS_SUFFIX = `-dark`
+
+export class AppComponent {
+    @HostBinding('class') activeThemeCssClass: string
+    isThemeDark = false
+    activeTheme: string
+
+    constructor(overlayContainer: OverlayContainer) {
+        // Set default theme here:
+        this.setTheme('deeppurple-amber', false)
+    }
+
+    setTheme(theme: string, darkness: boolean = null) {
+        if (darkness === null)
+            darkness = this.isThemeDark
+        else if (this.isThemeDark === darkness) {
+            if (this.activeTheme === theme) return
+        } else
+            this.isThemeDark = darkness
+
+        this.activeTheme = theme
+
+        const cssClass = darkness === true ? theme + THEME_DARKNESS_SUFFIX : theme
+
+        const classList = this.overlayContainer.getContainerElement().classList
+        if (classList.contains(this.activeThemeCssClass))
+            classList.replace(this.activeThemeCssClass, cssClass)
+        else
+            classList.add(cssClass)
+
+        this.activeThemeCssClass = cssClass
+    }
+}
+```
+
+And change the theme using `setTheme()` whenever you want. ✓
+
+# Advanced Usage
+
+## Possible configurations
+
+`make-stylesheets()` is the only thing in the API and gets a single parameter named `$themes-map` that was a *map* like what you saw in [Basic Usage](#basic-usage). You can see its documentation in the sources. But we bring the most important section of it here, that is **the schema of each member (of this map)**:
+
+```
+css-class-name: (
+    primary-base: base-palette,   // example: $mat-purple  // will be ignored if you set corresponding mat-palette (primary). Set it to `null` in this case.
+    accent-base:  base-palette,   // example: $mat-green   // will be ignored if you set corresponding mat-palette (accent). Set it to `null` in this case.
+    warn-base?:   base-palette,   // DEFAULT: $mat-red     // will be ignored if you set corresponding mat-palette (warn). Set it to `null` in this case.
+    primary?: mat-palette,   // DEFAULT: mat-palette(primary-base)
+    accent?:  mat-palette,   // DEFAULT: mat-palette(accent-base)
+    warn?:    mat-palette,   // DEFAULT: mat-palette(warn-base)
+    light-or-dark?: {'light' | 'dark' | ''},   // DEFAULT: '' => "Both light & dark"
+),
+```
+
+## Use material themes for other elements (non-material elements)
+
+Define `themed-stylesheets()` mixin before invoking `make-stylesheets()` with one important input: `$mat-theme` (that would be what you want):
+
+```scss
+/**
+ * // IMPORTANT NOTE: This mixin is just for other elements (non-material elements) that you want use material themes 
+ * // for them. If you don't have such elements, simply remove this mixin.
+ *
+ * This is a *callback-mixin* and will be called in `make-stylesheets` with a argument ($mat-theme). The schema of this
+ * only argument would be:
+ *   {
+ *     primary: mat-palette,
+ *     accent:  mat-palette,
+ *     warn:    mat-palette,
+ *     background: mat-theme-background,
+ *     foreground: mat-theme-foreground,
+ *     is-dark: boolean,
+ *   }
+ */
+@mixin themed-stylesheets($mat-theme) {
+  // We only need "primary-color" and "accent-color" in this example. So commented out other (not-necessary)
+  // things. Uncomment each you need.
+
+  $primary: map-get($mat-theme, primary);
+  $accent: map-get($mat-theme, accent);
+  //$warn: map-get($mat-theme, warn);
+  //$background: map-get($mat-theme, background);
+  //$foreground: map-get($mat-theme, foreground);
+
+  $primary-color: mat-color($primary);
+  $accent-color: mat-color($accent);
+  //$warn-color: mat-color($warn);
+
+  //// Background colors:
+  //$status-bar-color:               map-get($background, 'status-bar'              );
+  //$app-bar-color:                  map-get($background, 'app-bar'                 );
+  //$background-color:               map-get($background, 'background'              );
+  //$hover-color:                    map-get($background, 'hover'                   );
+  //$card-color:                     map-get($background, 'card'                    );
+  //$dialog-color:                   map-get($background, 'dialog'                  );
+  //$disabled-button-color:          map-get($background, 'disabled-button'         );
+  //$raised-button-color:            map-get($background, 'raised-button'           );
+  //$focused-button-color:           map-get($background, 'focused-button'          );
+  //$selected-button-color:          map-get($background, 'selected-button'         );
+  //$selected-disabled-button-color: map-get($background, 'selected-disabled-button');
+  //$disabled-button-toggle-color:   map-get($background, 'disabled-button-toggle'  );
+  //$unselected-chip-color:          map-get($background, 'unselected-chip'         );
+  //$disabled-list-option-color:     map-get($background, 'disabled-list-option'    );
+
+  //// Foreground colors:
+  //$base-color:              map-get($foreground, 'base'             );
+  //$divider-color:           map-get($foreground, 'divider'          );
+  //$dividers-color:          map-get($foreground, 'dividers'         );
+  //$disabled-color:          map-get($foreground, 'disabled'         );
+  //$disabled-button-color:   map-get($foreground, 'disabled-button'  );
+  //$disabled-text-color:     map-get($foreground, 'disabled-text'    );
+  //$elevation-color:         map-get($foreground, 'elevation'        );
+  //$hint-text-color:         map-get($foreground, 'hint-text'        );
+  //$secondary-text-color:    map-get($foreground, 'secondary-text'   );
+  //$icon-color:              map-get($foreground, 'icon'             );
+  //$icons-color:             map-get($foreground, 'icons'            );
+  //$text-color:              map-get($foreground, 'text'             );
+  //$slider-min-color:        map-get($foreground, 'slider-min'       );
+  //$slider-off-color:        map-get($foreground, 'slider-off'       );
+  //$slider-off-active-color: map-get($foreground, 'slider-off-active');
+
+  //$is-dark: map-get($mat-theme, is-dark);
+
+  // Define themed-stylesheets here:
+
+  // Example themed-stylesheet:
+  .themed-element {
+    background: $primary-color;
+    color: $accent-color;
+  }
+}
+```
+
+# Sample
+
+Comming soon ...

_themes-core.scss

@@ -0,0 +1,70 @@
+/**
+ * Created at 1398/4/27 (2019/7/18).
+ * @author {@link https://mirismaili.github.io S. Mahdi Mir-Ismaili}
+ */
+
+/**
+ * @param $themes-map - Custom themes should be passed via this argument.
+ * The "key" of each member is "the name of CSS class for that theme".
+ *
+ * Full schema of each member:
+ *     css-class-name: (
+ *         primary-base: base-palette,   // example: $mat-purple  // will be ignored if you set corresponding mat-palette (primary). Set it to `null` in this case.
+ *         accent-base:  base-palette,   // example: $mat-green   // will be ignored if you set corresponding mat-palette (accent). Set it to `null` in this case.
+ *         warn-base?:   base-palette,   // DEFAULT: $mat-red     // will be ignored if you set corresponding mat-palette (warn). Set it to `null` in this case.
+ *         primary?: mat-palette,   // DEFAULT: mat-palette(primary-base)
+ *         accent?:  mat-palette,   // DEFAULT: mat-palette(accent-base)
+ *         warn?:    mat-palette,   // DEFAULT: mat-palette(warn-base)
+ *         light-or-dark?: {'light' | 'dark' | ''},   // DEFAULT: '' => "Both light & dark"
+ *     ),
+ *
+ * @see `mat-palette()`: https://github.com/angular/components/blob/dcde115980a2e94fae8e667d1dfa300fc82a77cb/src/material/core/theming/_theming.scss#L12-L37
+ * @see https://material.angular.io/guide/theming
+ */
+//noinspection SassScssUnresolvedMixin, SassScssResolvedByNameOnly
+@mixin make-stylesheets($themes-map) {
+  @each $css-class, $theme in $themes-map {
+    $primary-base: map-get($theme, primary-base);
+    $accent-base: map-get($theme, accent-base);
+    $warn-base: if(map-has-key($theme, warn-base), map-get($theme, warn-base), $mat-red);
+
+    $primary: if(map-has-key($theme, primary), map-get($theme, primary), mat-palette($primary-base));
+    $accent: if(map-has-key($theme, accent), map-get($theme, accent), mat-palette($accent-base));
+    $warn: if(map-has-key($theme, warn), map-get($theme, warn), mat-palette($warn-base));
+
+    $light-or-dark: if(map-has-key($theme, light-or-dark), map-get($theme, light-or-dark), '');
+
+    // Light-themes:
+    @if $light-or-dark == '' or $light-or-dark == 'light' or $light-or-dark == 'l' or $light-or-dark == 'both' {
+      .#{$css-class} {
+        $mat-theme: mat-light-theme($primary, $accent, $warn);
+        @include angular-material-theme($mat-theme);
+        @if mixin-exists(themed-stylesheets) {
+          @include themed-stylesheets($mat-theme);
+        }
+      }
+    }
+
+    // Dark-themes:
+    @if $light-or-dark == '' or $light-or-dark == 'dark' or $light-or-dark == 'd' or $light-or-dark == 'both' {
+      .#{$css-class}-dark {
+        $mat-theme: mat-dark-theme($primary, $accent, $warn);
+        @include angular-material-theme($mat-theme);
+        @if mixin-exists(themed-stylesheets) {
+          @include themed-stylesheets($mat-theme);
+        }
+      }
+    }
+
+    // Below stylesheets have been used in theme-switcher-tool (in the toolbar):
+    .theme-primary.#{$css-class} {
+      background-color: mat-color($primary);
+    }
+    .theme-accent.#{$css-class} {
+      background-color: mat-color($accent);
+    }
+    .theme-warn.#{$css-class} {
+      background-color: mat-color($warn);
+    }
+  }
+}

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "angular-material-dynamic-themes",
+  "version": "0.0.0",
+  "description": "A library to make it easier to add dynamic themes (changeable at run-time) to you Angular Material app",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mirismaili/AngularMaterialDynamicThemes.git"
+  },
+  "keywords": [
+    "angular",
+    "angular-material",
+    "angular-material-theme",
+    "angular-material-themes",
+    "theme",
+    "themes",
+    "dynamic-theme",
+    "dynamic-themes",
+    "runtime-theme-change",
+    "runtime-change-themes"
+  ],
+  "author": "S. M. Mir-Ismaili <s.m.mirismaili@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mirismaili/AngularMaterialDynamicThemes/issues"
+  },
+  "homepage": "https://github.com/mirismaili/AngularMaterialDynamicThemes#readme",
+  "devDependencies": {
+    "@angular/material": "^8.1.1"
+  },
+  "peerDependencies": {
+    "@angular/material": "^7.0.0 || ^8.0.0"
+  }
+}