├── .gitignore ├── .gitmodules ├── .npmignore ├── .releaserc.json ├── .travis.yml ├── LICENSE ├── README.md ├── _themes-core.scss ├── markdown-toc.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | .vscode/ 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "Demo"] 2 | path = Demo 3 | url = https://github.com/mirismaili/AngularMaterialDynamicThemes.git 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | * 2 | !/LICENSE 3 | !/*.scss 4 | -------------------------------------------------------------------------------- /.releaserc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "@semantic-release/commit-analyzer", 4 | "@semantic-release/release-notes-generator", 5 | "@semantic-release/github" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | cache: npm 4 | 5 | # `XX` means "false", "forbidden", "disabled", etc 6 | # `YY` means "yes", "true", "force", etc 7 | 8 | jobs: 9 | include: 10 | - stage: "Release" 11 | 12 | name: "Build and Release" 13 | node_js: --lts 14 | 15 | if: tag !~ ^(v|typedoc-)\d+\.\d+\.\d+ && ( 16 | env(SEMANTIC_RELEASE) == YY || 17 | env(SEMANTIC_RELEASE) != XX && type == push && branch == master && 18 | commit_message =~ /^(?:feat|fix|refactor|pref|build|revert)/) 19 | 20 | deploy: 21 | provider: script 22 | skip_cleanup: true 23 | 24 | # `bash -c ...` is required for the script in `deploy` section. Also, quotes around env-vars even in `if [[ ]]`. 25 | script: bash -c ' 26 | npx semantic-release@$SEMANTIC_RELEASE_VERSION; 27 | ' 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Mir-Ismaili 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | npm (scoped) 4 | 5 | 6 | Dependencies Status 7 | 8 | 9 | Known Vulnerabilities 10 | 11 | 12 | install size 13 | 14 |
15 | 16 | Commitizen friendly 17 | 18 |
19 | 20 | GitHub 21 | 22 |

23 | 24 | **Angular-Material-Dynamic-Themes** 25 | 26 | Making able the app to switch between material themes at run-time 27 | 28 | [![Video](https://raw.githubusercontent.com/mirismaili/AngularMaterialDynamicThemes/a979c0284577993c3f3b1c6acccbb7d6e6994003/res/preview0.gif "Video")](https://github.com/mirismaili/AngularMaterialDynamicThemes) 29 | 30 | *** 31 | 32 | **Table of Contents** 33 | 34 | * [Installation](#installation) 35 | * [Basic Usage](#basic-usage) 36 | * [Advanced Usage](#advanced-usage) 37 | * [Possible configurations](#possible-configurations) 38 | * [Use material themes for other elements (non\-material elements)](#use-material-themes-for-other-elements-non-material-elements) 39 | * [Demo](#demo) 40 | 41 | # Installation 42 | 43 | In your **Angular Material project**: 44 | 45 | ```bash 46 | npm install angular-material-dynamic-themes 47 | ``` 48 | 49 | > NOTE: This solution is only compatible with **SASS/SCSS** preprocessor. 50 | 51 | # Basic Usage 52 | 53 | In your `styles.scss` (or `themes.scss` if you have): 54 | 55 | ```scss 56 | // Below codes should only be included ONCE in your application. 57 | 58 | @import '~@angular/material/theming'; 59 | 60 | @include mat-core(); 61 | 62 | // Add your desired themes to this map. 63 | $themes-map: ( 64 | indigo-pink: ( 65 | primary-base: $mat-indigo, 66 | accent-base: $mat-pink, 67 | ), 68 | 69 | deeppurple-amber: ( 70 | primary-base: $mat-deep-purple, 71 | accent-base: $mat-amber, 72 | ), 73 | 74 | pink-bluegrey: ( 75 | primary-base: $mat-pink, 76 | accent-base: $mat-blue-gray, 77 | ), 78 | 79 | purple-green: ( 80 | primary-base: $mat-purple, 81 | accent-base: $mat-green, 82 | ), 83 | ); 84 | 85 | // Import the module and do the job: 86 | @import '~angular-material-dynamic-themes/themes-core'; 87 | @include make-stylesheets($themes-map); 88 | ``` 89 | 90 | For more information about `$themes-map` and adding more customizations to your themes, see [Advanced Usage](#advanced-usage). 91 | 92 | In your main component: 93 | 94 | ```typescript 95 | import {Component, HostBinding} from '@angular/core' 96 | import {OverlayContainer} from '@angular/cdk/overlay' 97 | 98 | const THEME_DARKNESS_SUFFIX = `-dark` 99 | 100 | export class AppComponent { 101 | @HostBinding('class') activeThemeCssClass: string 102 | isThemeDark = false 103 | activeTheme: string 104 | 105 | constructor(private overlayContainer: OverlayContainer) { 106 | // Set default theme here: 107 | this.setActiveTheme('deeppurple-amber', /* darkness: */ false) 108 | } 109 | 110 | setActiveTheme(theme: string, darkness: boolean = null) { 111 | if (darkness === null) 112 | darkness = this.isThemeDark 113 | else if (this.isThemeDark === darkness) { 114 | if (this.activeTheme === theme) return 115 | } else 116 | this.isThemeDark = darkness 117 | 118 | this.activeTheme = theme 119 | 120 | const cssClass = darkness === true ? theme + THEME_DARKNESS_SUFFIX : theme 121 | 122 | const classList = this.overlayContainer.getContainerElement().classList 123 | if (classList.contains(this.activeThemeCssClass)) 124 | classList.replace(this.activeThemeCssClass, cssClass) 125 | else 126 | classList.add(cssClass) 127 | 128 | this.activeThemeCssClass = cssClass 129 | } 130 | 131 | toggleDarkness() { 132 | this.setActiveTheme(this.activeTheme, !this.isThemeDark) 133 | } 134 | } 135 | ``` 136 | 137 | And change the theme using `setActiveTheme()` (or `toggleDarkness()`) whenever you want. ✓ 138 | 139 | > **A more detailed instruction can be found here:** 140 | > 141 | > **[https://medium.com/@s.m.mirismaili/angular-material-dynamic-themes-compatible-with-angular-7-8-e642ad3c09f4](https://medium.com/@s.m.mirismaili/angular-material-dynamic-themes-compatible-with-angular-7-8-e642ad3c09f4)** 142 | 143 | # Advanced Usage 144 | 145 | ## Possible configurations 146 | 147 | `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 the map): 148 | 149 | ``` 150 | css-class-name: ( 151 | primary-base: base-palette, // example: $mat-purple // will be ignored if you set corresponding mat-palette (primary). Set it to `null` in this case. 152 | accent-base: base-palette, // example: $mat-green // will be ignored if you set corresponding mat-palette (accent). Set it to `null` in this case. 153 | warn-base?: base-palette, // DEFAULT: $mat-red // will be ignored if you set corresponding mat-palette (warn). Set it to `null` in this case. 154 | primary?: mat-palette, // DEFAULT: mat-palette(primary-base) 155 | accent?: mat-palette, // DEFAULT: mat-palette(accent-base) 156 | warn?: mat-palette, // DEFAULT: mat-palette(warn-base) 157 | light-or-dark?: {'light' | 'dark' | ''}, // DEFAULT: '' => "Both light & dark" 158 | ), 159 | ``` 160 | 161 | ## Use material themes for other elements (non-material elements) 162 | 163 | Define `themed-stylesheets()` mixin before invoking `make-stylesheets()` with one important input: `$mat-theme` (that would be what you want): 164 | 165 | ```scss 166 | /** 167 | * // IMPORTANT NOTE: This mixin is just for other elements (non-material elements) that you want use material themes 168 | * // for them. If you don't have such elements, simply remove this mixin. 169 | * 170 | * This is a *callback-mixin* and will be called in `make-stylesheets` with a argument ($mat-theme). The schema of this 171 | * only argument would be: 172 | * { 173 | * primary: mat-palette, 174 | * accent: mat-palette, 175 | * warn: mat-palette, 176 | * background: mat-theme-background, 177 | * foreground: mat-theme-foreground, 178 | * is-dark: boolean, 179 | * } 180 | */ 181 | @mixin themed-stylesheets($mat-theme) { 182 | // We only need "primary-color" and "accent-color" in this example. So commented out other (not-necessary) 183 | // things. Uncomment each you need. 184 | 185 | $primary: map-get($mat-theme, primary); 186 | $accent: map-get($mat-theme, accent); 187 | //$warn: map-get($mat-theme, warn); 188 | //$background: map-get($mat-theme, background); 189 | //$foreground: map-get($mat-theme, foreground); 190 | 191 | $primary-color: mat-color($primary); 192 | $accent-color: mat-color($accent); 193 | //$warn-color: mat-color($warn); 194 | 195 | //// Background colors: 196 | //$status-bar-color: map-get($background, 'status-bar' ); 197 | //$app-bar-color: map-get($background, 'app-bar' ); 198 | //$background-color: map-get($background, 'background' ); 199 | //$hover-color: map-get($background, 'hover' ); 200 | //$card-color: map-get($background, 'card' ); 201 | //$dialog-color: map-get($background, 'dialog' ); 202 | //$disabled-button-color: map-get($background, 'disabled-button' ); 203 | //$raised-button-color: map-get($background, 'raised-button' ); 204 | //$focused-button-color: map-get($background, 'focused-button' ); 205 | //$selected-button-color: map-get($background, 'selected-button' ); 206 | //$selected-disabled-button-color: map-get($background, 'selected-disabled-button'); 207 | //$disabled-button-toggle-color: map-get($background, 'disabled-button-toggle' ); 208 | //$unselected-chip-color: map-get($background, 'unselected-chip' ); 209 | //$disabled-list-option-color: map-get($background, 'disabled-list-option' ); 210 | 211 | //// Foreground colors: 212 | //$base-color: map-get($foreground, 'base' ); 213 | //$divider-color: map-get($foreground, 'divider' ); 214 | //$dividers-color: map-get($foreground, 'dividers' ); 215 | //$disabled-color: map-get($foreground, 'disabled' ); 216 | //$disabled-button-color: map-get($foreground, 'disabled-button' ); 217 | //$disabled-text-color: map-get($foreground, 'disabled-text' ); 218 | //$elevation-color: map-get($foreground, 'elevation' ); 219 | //$hint-text-color: map-get($foreground, 'hint-text' ); 220 | //$secondary-text-color: map-get($foreground, 'secondary-text' ); 221 | //$icon-color: map-get($foreground, 'icon' ); 222 | //$icons-color: map-get($foreground, 'icons' ); 223 | //$text-color: map-get($foreground, 'text' ); 224 | //$slider-min-color: map-get($foreground, 'slider-min' ); 225 | //$slider-off-color: map-get($foreground, 'slider-off' ); 226 | //$slider-off-active-color: map-get($foreground, 'slider-off-active'); 227 | 228 | //$is-dark: map-get($mat-theme, is-dark); 229 | 230 | // Define themed-stylesheets here: 231 | 232 | // Example themed-stylesheet: 233 | .themed-element { 234 | background: $primary-color; 235 | color: $accent-color; 236 | } 237 | } 238 | ``` 239 | 240 | # Demo 241 | 242 | https://github.com/mirismaili/AngularMaterialDynamicThemes 243 | 244 | [![Video](https://raw.githubusercontent.com/mirismaili/AngularMaterialDynamicThemes/572b07011fd8f00c9444ada23be3f6105ea66901/res/preview.gif "Demo application video")](https://github.com/mirismaili/AngularMaterialDynamicThemes) 245 | -------------------------------------------------------------------------------- /_themes-core.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Created at 1398/4/27 (2019/7/18). 3 | * @author {@link https://mirismaili.github.io S. Mahdi Mir-Ismaili} 4 | */ 5 | 6 | /** 7 | * @param $themes-map - Custom themes should be passed via this argument. 8 | * The "key" of each member is "the name of CSS class for that theme". 9 | * 10 | * Full schema of each member: 11 | * css-class-name: ( 12 | * primary-base: base-palette, // example: $mat-purple // will be ignored if you set corresponding mat-palette (primary). Set it to `null` in this case. 13 | * accent-base: base-palette, // example: $mat-green // will be ignored if you set corresponding mat-palette (accent). Set it to `null` in this case. 14 | * warn-base?: base-palette, // DEFAULT: $mat-red // will be ignored if you set corresponding mat-palette (warn). Set it to `null` in this case. 15 | * primary?: mat-palette, // DEFAULT: mat-palette(primary-base) 16 | * accent?: mat-palette, // DEFAULT: mat-palette(accent-base) 17 | * warn?: mat-palette, // DEFAULT: mat-palette(warn-base) 18 | * light-or-dark?: {'light' | 'dark' | ''}, // DEFAULT: '' => "Both light & dark" 19 | * ), 20 | * 21 | * @see `mat-palette()`: https://github.com/angular/components/blob/dcde115980a2e94fae8e667d1dfa300fc82a77cb/src/material/core/theming/_theming.scss#L12-L37 22 | * @see https://material.angular.io/guide/theming 23 | */ 24 | //noinspection SassScssUnresolvedMixin, SassScssResolvedByNameOnly 25 | @mixin make-stylesheets($themes-map) { 26 | @each $css-class, $theme in $themes-map { 27 | $primary-base: map-get($theme, primary-base); 28 | $accent-base: map-get($theme, accent-base); 29 | $warn-base: if(map-has-key($theme, warn-base), map-get($theme, warn-base), $mat-red); 30 | 31 | $primary: if(map-has-key($theme, primary), map-get($theme, primary), mat-palette($primary-base)); 32 | $accent: if(map-has-key($theme, accent), map-get($theme, accent), mat-palette($accent-base)); 33 | $warn: if(map-has-key($theme, warn), map-get($theme, warn), mat-palette($warn-base)); 34 | 35 | $light-or-dark: if(map-has-key($theme, light-or-dark), map-get($theme, light-or-dark), ''); 36 | 37 | // Light-themes: 38 | @if $light-or-dark == '' or $light-or-dark == 'light' or $light-or-dark == 'l' or $light-or-dark == 'both' { 39 | .#{$css-class} { 40 | $mat-theme: mat-light-theme($primary, $accent, $warn); 41 | @include angular-material-theme($mat-theme); 42 | @if mixin-exists(themed-stylesheets) { 43 | @include themed-stylesheets($mat-theme); 44 | } 45 | } 46 | } 47 | 48 | // Dark-themes: 49 | @if $light-or-dark == '' or $light-or-dark == 'dark' or $light-or-dark == 'd' or $light-or-dark == 'both' { 50 | .#{$css-class}-dark { 51 | $mat-theme: mat-dark-theme($primary, $accent, $warn); 52 | @include angular-material-theme($mat-theme); 53 | @if mixin-exists(themed-stylesheets) { 54 | @include themed-stylesheets($mat-theme); 55 | } 56 | } 57 | } 58 | 59 | // Below stylesheets have been used in theme-switcher-tool (in the toolbar): 60 | .theme-primary.#{$css-class} { 61 | background-color: mat-color($primary); 62 | } 63 | .theme-accent.#{$css-class} { 64 | background-color: mat-color($accent); 65 | } 66 | .theme-warn.#{$css-class} { 67 | background-color: mat-color($warn); 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /markdown-toc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Markdown-TOC (Table of Contents) 3 | * 4 | * @author {@link https://mirismaili.github.io S. Mahdi Mir-Ismaili} 5 | * Created at 1398/3/22 (2019/6/12). 6 | */ 7 | 'use strict' 8 | 9 | const yargs = require('yargs'); 10 | 11 | const argv = yargs.strict(true) 12 | .version('0.0.0') 13 | .usage(`Usage: $0 [options]`) 14 | .example(`$0 -f README.md`, 'Will update TOC of README.md.') 15 | .option('f', { 16 | alias: ['file', 'markdown-file'], 17 | describe: 'Target file', 18 | type: 'string', 19 | demand: true, 20 | }) 21 | .help() 22 | .alias('h', 'help') 23 | .argv; 24 | 25 | const path = require('path') 26 | 27 | const filePath = path.normalize(argv['markdownFile']) 28 | //******************************************************************************/ 29 | 30 | const fs = require('fs') 31 | const {execSync} = require('child_process') 32 | 33 | let data 34 | 35 | try { 36 | data = execSync( 37 | `gh-md-toc ${filePath}`, 38 | {encoding: 'utf8', maxBuffer: 100 * 1024} 39 | ).toString() 40 | } catch (error) { 41 | console.error('\nHave you installed "gh-md-toc" executable in your path? Get it from\nhttps://github.com/ekalinin/github-markdown-toc.') 42 | process.exit(1) 43 | } 44 | //console.log(data) 45 | 46 | const toc = getRegExpBasedOnLineBreakChar(data).exec(data)[2] 47 | 48 | const md = fs.readFileSync(filePath, 'utf8') 49 | 50 | fs.writeFileSync(filePath, 51 | md.replace(getRegExpBasedOnLineBreakChar(md), (match, pre, toc0, suf) => pre + toc + suf) 52 | ) 53 | 54 | console.log(`TOC is written to the file. TOC:\n${toc}`) 55 | 56 | //******************************************************************************/ 57 | 58 | function getRegExpBasedOnLineBreakChar(input) { 59 | const lineBreakChar = getLineBreakChar(input) 60 | const lb = lineBreakChar === '\n' ? '\\n' : lineBreakChar === '\r' ? '\\r' : '\\r\\n' 61 | 62 | // https://regex101.com/r/SFJMgH/1 63 | return new RegExp(`(Table of Contents[^\\w${lb}]*?${lb}(?:={10,}${lb})?[^\\S${lb}]*?${lb})([\\s\\S]*?)([^\\S${lb}]*?${lb}[^\\S${lb}]*?${lb})`) 64 | } 65 | 66 | /** 67 | * https://stackoverflow.com/a/55661801/5318303 68 | */ 69 | function getLineBreakChar(str) { 70 | const indexOfLF = str.indexOf('\n', 1); // No need to check first-character 71 | 72 | if (indexOfLF === -1) { 73 | if (str.indexOf('\r') !== -1) return '\r'; 74 | 75 | return '\n'; 76 | } 77 | 78 | if (str[indexOfLF - 1] === '\r') return '\r\n'; 79 | 80 | return '\n'; 81 | } 82 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-material-dynamic-themes", 3 | "version": "1.0.4", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@angular/material": { 8 | "version": "8.1.1", 9 | "resolved": "https://registry.npmjs.org/@angular/material/-/material-8.1.1.tgz", 10 | "integrity": "sha512-45aaxKuLTrthzhAhG2+OY86wafuRBteZcRjDG7rKZ3Cc3KteUp5QwAi+QbhHzs4O3WXLWTAmuLYJelRqRqqw7g==", 11 | "dev": true, 12 | "requires": { 13 | "tslib": "^1.7.1" 14 | } 15 | }, 16 | "ansi-regex": { 17 | "version": "4.1.0", 18 | "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", 19 | "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", 20 | "dev": true 21 | }, 22 | "ansi-styles": { 23 | "version": "3.2.1", 24 | "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", 25 | "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", 26 | "dev": true, 27 | "requires": { 28 | "color-convert": "^1.9.0" 29 | } 30 | }, 31 | "camelcase": { 32 | "version": "5.3.1", 33 | "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", 34 | "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", 35 | "dev": true 36 | }, 37 | "cliui": { 38 | "version": "5.0.0", 39 | "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz", 40 | "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==", 41 | "dev": true, 42 | "requires": { 43 | "string-width": "^3.1.0", 44 | "strip-ansi": "^5.2.0", 45 | "wrap-ansi": "^5.1.0" 46 | } 47 | }, 48 | "color-convert": { 49 | "version": "1.9.3", 50 | "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", 51 | "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", 52 | "dev": true, 53 | "requires": { 54 | "color-name": "1.1.3" 55 | } 56 | }, 57 | "color-name": { 58 | "version": "1.1.3", 59 | "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", 60 | "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", 61 | "dev": true 62 | }, 63 | "conventional-commit-types": { 64 | "version": "2.1.1", 65 | "resolved": "https://registry.npmjs.org/conventional-commit-types/-/conventional-commit-types-2.1.1.tgz", 66 | "integrity": "sha512-0Ts+fEdmjqYDOQ1yZ+LNgdSPO335XZw9qC10M7CxtLP3nIMGmeMhmkM8Taffa4+MXN13bRPlp0CtH+QfOzKTzw==", 67 | "dev": true 68 | }, 69 | "cz-conventional-changelog": { 70 | "version": "2.1.0", 71 | "resolved": "https://registry.npmjs.org/cz-conventional-changelog/-/cz-conventional-changelog-2.1.0.tgz", 72 | "integrity": "sha1-L0vHOQ4yROTfKT5ro1Hkx0Cnx2Q=", 73 | "dev": true, 74 | "requires": { 75 | "conventional-commit-types": "^2.0.0", 76 | "lodash.map": "^4.5.1", 77 | "longest": "^1.0.1", 78 | "right-pad": "^1.0.1", 79 | "word-wrap": "^1.0.3" 80 | } 81 | }, 82 | "decamelize": { 83 | "version": "1.2.0", 84 | "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", 85 | "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=", 86 | "dev": true 87 | }, 88 | "emoji-regex": { 89 | "version": "7.0.3", 90 | "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", 91 | "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==", 92 | "dev": true 93 | }, 94 | "find-up": { 95 | "version": "3.0.0", 96 | "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", 97 | "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", 98 | "dev": true, 99 | "requires": { 100 | "locate-path": "^3.0.0" 101 | } 102 | }, 103 | "get-caller-file": { 104 | "version": "2.0.5", 105 | "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", 106 | "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", 107 | "dev": true 108 | }, 109 | "is-fullwidth-code-point": { 110 | "version": "2.0.0", 111 | "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", 112 | "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", 113 | "dev": true 114 | }, 115 | "locate-path": { 116 | "version": "3.0.0", 117 | "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", 118 | "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", 119 | "dev": true, 120 | "requires": { 121 | "p-locate": "^3.0.0", 122 | "path-exists": "^3.0.0" 123 | } 124 | }, 125 | "lodash.map": { 126 | "version": "4.6.0", 127 | "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz", 128 | "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=", 129 | "dev": true 130 | }, 131 | "longest": { 132 | "version": "1.0.1", 133 | "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", 134 | "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", 135 | "dev": true 136 | }, 137 | "p-limit": { 138 | "version": "2.2.0", 139 | "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz", 140 | "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==", 141 | "dev": true, 142 | "requires": { 143 | "p-try": "^2.0.0" 144 | } 145 | }, 146 | "p-locate": { 147 | "version": "3.0.0", 148 | "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", 149 | "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", 150 | "dev": true, 151 | "requires": { 152 | "p-limit": "^2.0.0" 153 | } 154 | }, 155 | "p-try": { 156 | "version": "2.2.0", 157 | "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", 158 | "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", 159 | "dev": true 160 | }, 161 | "path-exists": { 162 | "version": "3.0.0", 163 | "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", 164 | "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", 165 | "dev": true 166 | }, 167 | "require-directory": { 168 | "version": "2.1.1", 169 | "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", 170 | "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", 171 | "dev": true 172 | }, 173 | "require-main-filename": { 174 | "version": "2.0.0", 175 | "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", 176 | "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", 177 | "dev": true 178 | }, 179 | "right-pad": { 180 | "version": "1.0.1", 181 | "resolved": "https://registry.npmjs.org/right-pad/-/right-pad-1.0.1.tgz", 182 | "integrity": "sha1-jKCMLLtbVedNr6lr9/0aJ9VoyNA=", 183 | "dev": true 184 | }, 185 | "set-blocking": { 186 | "version": "2.0.0", 187 | "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", 188 | "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", 189 | "dev": true 190 | }, 191 | "string-width": { 192 | "version": "3.1.0", 193 | "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", 194 | "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", 195 | "dev": true, 196 | "requires": { 197 | "emoji-regex": "^7.0.1", 198 | "is-fullwidth-code-point": "^2.0.0", 199 | "strip-ansi": "^5.1.0" 200 | } 201 | }, 202 | "strip-ansi": { 203 | "version": "5.2.0", 204 | "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", 205 | "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", 206 | "dev": true, 207 | "requires": { 208 | "ansi-regex": "^4.1.0" 209 | } 210 | }, 211 | "tslib": { 212 | "version": "1.10.0", 213 | "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz", 214 | "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==", 215 | "dev": true 216 | }, 217 | "which-module": { 218 | "version": "2.0.0", 219 | "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", 220 | "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=", 221 | "dev": true 222 | }, 223 | "word-wrap": { 224 | "version": "1.2.3", 225 | "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", 226 | "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", 227 | "dev": true 228 | }, 229 | "wrap-ansi": { 230 | "version": "5.1.0", 231 | "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz", 232 | "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==", 233 | "dev": true, 234 | "requires": { 235 | "ansi-styles": "^3.2.0", 236 | "string-width": "^3.0.0", 237 | "strip-ansi": "^5.0.0" 238 | } 239 | }, 240 | "y18n": { 241 | "version": "4.0.0", 242 | "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", 243 | "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==", 244 | "dev": true 245 | }, 246 | "yargs": { 247 | "version": "13.3.0", 248 | "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.0.tgz", 249 | "integrity": "sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==", 250 | "dev": true, 251 | "requires": { 252 | "cliui": "^5.0.0", 253 | "find-up": "^3.0.0", 254 | "get-caller-file": "^2.0.1", 255 | "require-directory": "^2.1.1", 256 | "require-main-filename": "^2.0.0", 257 | "set-blocking": "^2.0.0", 258 | "string-width": "^3.0.0", 259 | "which-module": "^2.0.0", 260 | "y18n": "^4.0.0", 261 | "yargs-parser": "^13.1.1" 262 | } 263 | }, 264 | "yargs-parser": { 265 | "version": "13.1.1", 266 | "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.1.tgz", 267 | "integrity": "sha512-oVAVsHz6uFrg3XQheFII8ESO2ssAf9luWuAd6Wexsu4F3OtIW0o8IribPXYrD4WC24LWtPrJlGy87y5udK+dxQ==", 268 | "dev": true, 269 | "requires": { 270 | "camelcase": "^5.0.0", 271 | "decamelize": "^1.2.0" 272 | } 273 | } 274 | } 275 | } 276 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-material-dynamic-themes", 3 | "version": "1.0.4", 4 | "description": "Making able the app to switch between material themes at run-time", 5 | "scripts": { 6 | "README.md-TOC": "node markdown-toc.js -f README.md", 7 | "commit": "git-cz", 8 | "semantic-release": "npx semantic-release" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/mirismaili/angular-material-dynamic-themes.git" 13 | }, 14 | "keywords": [ 15 | "angular", 16 | "angular-material", 17 | "angular-material-theme", 18 | "angular-material-themes", 19 | "theme", 20 | "themes", 21 | "dynamic-theme", 22 | "dynamic-themes", 23 | "runtime-theme-change", 24 | "runtime-change-themes", 25 | "sass", 26 | "scss" 27 | ], 28 | "author": "S. M. Mir-Ismaili ", 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/mirismaili/angular-material-dynamic-themes/issues" 32 | }, 33 | "homepage": "https://github.com/mirismaili/angular-material-dynamic-themes#readme", 34 | "devDependencies": { 35 | "@angular/material": "^8.1.1", 36 | "cz-conventional-changelog": "^2.1.0", 37 | "yargs": "^13.3.0" 38 | }, 39 | "peerDependencies": { 40 | "@angular/material": "^7.0.0 || ^8.0.0" 41 | }, 42 | "config": { 43 | "commitizen": { 44 | "path": "./node_modules/cz-conventional-changelog" 45 | } 46 | } 47 | } 48 | --------------------------------------------------------------------------------