{"id":15019382,"url":"https://github.com/rb-mwindh/ngx-theme-manager","last_synced_at":"2026-02-24T00:43:26.378Z","repository":{"id":65715375,"uuid":"594103586","full_name":"rb-mwindh/ngx-theme-manager","owner":"rb-mwindh","description":"Angular component to switch between different theming stylesheets","archived":false,"fork":false,"pushed_at":"2024-09-01T19:41:27.000Z","size":1863,"stargazers_count":0,"open_issues_count":27,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-31T01:07:16.882Z","etag":null,"topics":["angular","theme","theme-management","theme-manager","theme-switcher","themes"],"latest_commit_sha":null,"homepage":"https://ngx-theme-manager.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rb-mwindh.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-27T15:57:10.000Z","updated_at":"2024-06-04T09:04:18.000Z","dependencies_parsed_at":"2024-05-01T20:52:28.521Z","dependency_job_id":"38d206c5-27cc-47b7-b43f-b68f07b1a97d","html_url":"https://github.com/rb-mwindh/ngx-theme-manager","commit_stats":{"total_commits":82,"total_committers":3,"mean_commits":"27.333333333333332","dds":"0.14634146341463417","last_synced_commit":"6de4b8257f1e85d81f23b252b6a4372b54213085"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rb-mwindh%2Fngx-theme-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rb-mwindh%2Fngx-theme-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rb-mwindh%2Fngx-theme-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rb-mwindh%2Fngx-theme-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rb-mwindh","download_url":"https://codeload.github.com/rb-mwindh/ngx-theme-manager/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237964421,"owners_count":19394391,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","theme","theme-management","theme-manager","theme-switcher","themes"],"created_at":"2024-09-24T19:53:24.617Z","updated_at":"2025-10-06T04:06:25.883Z","avatar_url":"https://github.com/rb-mwindh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-theme-manager\n\n`@rb-mwindh/ngx-theme-manager` provides the basics tools for a robust theme-switcher implementation.\n\nThis package does not provide ready-made visual components,\nbut only supports their implementation by providing the necessary services and tools.\n\n---\n![sponsors](https://img.shields.io/github/sponsors/rb-mwindh)\n![License](https://img.shields.io/github/license/rb-mwindh/ngx-theme-manager?color=blue)\n![latest release](https://img.shields.io/github/v/release/rb-mwindh/ngx-theme-manager?color=brightgreen)\n\n![open issues](https://img.shields.io/github/issues/rb-mwindh/ngx-theme-manager?color=red)\n![open pr](https://img.shields.io/github/issues-pr/rb-mwindh/ngx-theme-manager?color=orange)\n\n![nodejs](https://img.shields.io/node/v/@rb-mwindh/ngx-theme-manager?color=lightgray\u0026logo=nodedotjs)\n![angular](https://img.shields.io/npm/dependency-version/@rb-mwindh/ngx-theme-manager/peer/@angular/core?color=lightgray\u0026logo=angular)\n\n* [API Docs](https://rb-mwindh.github.io/ngx-theme-manager)\n* [Demo](https://ngx-theme-manager.vercel.app/)\n\n---\n\n## Table of Contents \u003c!-- omit in toc --\u003e\n\n- [How it works](#how-it-works)\n- [Getting Started](#getting-started)\n- [Building and Testing](#building-and-testing)\n- [Contribution Guidelines](#contribution-guidelines)\n- [Get help](#get-help)\n- [About](#about)\n  - [Maintainers](#maintainers)\n  - [Contributors](#contributors)\n  - [3rd Party Licenses](#3rd-party-licenses)\n  - [Used Encryption](#used-encryption)\n  - [License](#license)\n\n## How it works\n\nThis implementation is based on the regular way Angular loads styles for components.\nSince theme styles are usually global styles, theme components will normally use `ViewEncapsulation.None`.\n\nSince Angular does not provide a direct way to access the `\u003cstyle\u003e` element associated with a component,\nthe `@rb-mwindh/ngx-theme-manager` applies a little trick:\nStyle elements provided as themes should carry annotations in the form of [predefined CSS comments](#known-annotations).\nThese annotations are searched throughout all `\u003cstyle\u003e` elements of the application using regular expressions\nand are registered in the theme registry. Also, an additional attribute (`data-theme=\"\u003cid\u003e\"`) is added to the\ncorresponding style elements, which is used as a query selector.\n\nHereafter, the ThemeService leverages the [`media` attribute][selfhtml:media] to enable or disable the styles of a theme.\nFor inactive themes, the `media=\"none\"` attribute is added to the associated `\u003cstyle\u003e` element. For active themes,\nthe `media` attribute of the associated `\u003cstyle\u003e` element is simply removed again.\n\n## Getting Started\n\n### Install the package\n\n```shell\nnpm install ngx-theme-manager --save\n```\n\n### Implement your theme stylesheets\n\n`@rb-mwindh/ngx-theme-manager` identifies your stylesheets (css/scss/...) as themes through annotations\nin css comments. To prevent your annotations from being disposed at build time\nby minification, you should use the css comment format `/*! ... */`.\n\n\u003e ... By default, multi-line comments be stripped from the compiled CSS\n\u003e in compressed mode. **If a comment begins with /*!, though, it will\n\u003e always be included in the CSS output.** ...\n\u003e \n\u003e _from https://sass-lang.com/documentation/syntax/comments_\n\nKnown annotations are:\n- `@@id` - required, any character until end-of-line\n- `@@displayName` - optional, defaults to `\u003c@@id\u003e`, any character until end-of-line\n- `@@description` - optional, any character until end-of-line\n- `@@default` - optional, no value, value is `true` when given, or `false` when omitted\n\n```scss\n/*!\n * @@id my-theme-id\n * @@displayName My Fantastic Theme\n * @@description This is my fantastic theme with magic colors\n * @@default\n */\n\n// add all your theme styles below this line, e.g.\n@import \"@angular/material/prebuilt-themes/indigo-pink.css\";\n@import \"some-other-library/theme.css\";\n```\n\n### Loading your theme stylesheets\n\nBy using an Angular component to load your stylesheets, you make the\nAngular compiler pick up and compile your stylesheets automatically.\n\n```typescript\n@Component({\n  selector: 'app-themes',\n  template: '', // no template needed\n  styleUrls: [\n    'assets/themes/theme-a.scss',\n    'assets/themes/theme-b.scss',\n    'assets/themes/theme-c.scss',\n  ], // load all theme stylesheets here\n  encapsulation: ViewEncapsulation.None, // make the styles global\n})\nexport class AppThemesComponent { /* no implementation needed */ }\n```\n\nThis way, loading the theme stylesheets is easily done by using\nyour AppThemesComponent, preferably at the top of your AppComponent.\n\n```typescript\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003capp-themes\u003e\u003c/app-themes\u003e\n    \n    \u003c!-- you app template here --\u003e\n  `,\n})\nexport class AppComponent() { ... }\n```\n\n### Implement your theme-picker component\n\nThe desired look-and-feel of your visual theme-picker component usually is very\nspecific for the respective project. Thus, I've decided not to implement any\nvisual stuff, but instead provide you with the required data.\n\nAssuming, you've implemented a theme picker component named `app-theme-picker`,\nyou would provide it with the available themes, the current theme and a\ntheme selection callback like this:\n\n```typescript\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003capp-theme-picker\n      [themes]=\"themeService.themes$ | async\"\n      [currentTheme]=\"themeService.currentTheme$ | async\"\n      (select)=\"themeService.selectTheme($event)\"\n    \u003e\u003c/app-theme-picker\u003e\n    \n    \u003c!-- you app template here --\u003e\n  `,\n  styleUrls: ['./app.component.scss'],\n})\nexport class AppComponent {\n  constructor(public readonly themeService: ThemeService) {\n  }\n}\n```\n\n## Building and Testing\n\n1. Clone the repository\n\n```shell\ngit clone https://github.com/rb-mwindh/ngx-theme-manager.git \u003cworkspace\u003e\ncd \u003cworkspace\u003e\n```\n\n2. Initialize the workspace\n\nThe `init` script installs all dependencies and sets up the pre-commit hooks.\n\n**This is mandatory to guarantee the code style and quality!**\n\n```shell\nnpm run init\n```\n\n3. Run the demo app\n\n```shell\nnpm run start\n```\n\n4. Build the library\n\n```shell\nnpm run build\n```\n\n5. Run the unit tests\n\n```shell\nnpm run test\n```\n\n## Contribution Guidelines\n\nThank you for your interest in contributing to this library.\n\nPlease read the [Contribution Guidelines](CONTRIBUTING.md)\n\n## Get help\n\nPlease check my [wiki::faq] and [wiki::troubleshooting] wiki page first.\n\nIf this doesn't answer your question, you may [post a question][issue::question] to the issue tracker.\n\n## About\n\n### Maintainers\n\n- [Markus Windhager](https://github.com/rb-mwindh)\n\n### Contributors\n\n\u003c!--\nConsider listing contributors in this section to give explicit credit.\nYou could also ask contributors to add themselves in this file on their own.\n--\u003e\n\n- none ;(\n\n### 3rd Party Licenses\n\n\u003c!--\nThe `\u003cbom\u003e\u003c/bom\u003e` tags will be processed by `tools/oss-bom.ts` as a pre-commit hook.\n--\u003e\n\n\u003cbom\u003e\n\n| Name | License | Type |\n| --- | --- | --- |\n| [@angular/animations](https://github.com/angular/angular) | [MIT](http://opensource.org/licenses/MIT) | Dependency |\n| [@angular/cdk](https://github.com/angular/components) | [MIT](http://opensource.org/licenses/MIT) | Dependency |\n| [@angular/common](https://github.com/angular/angular) | [MIT](http://opensource.org/licenses/MIT) | Dependency |\n| [@angular/compiler](https://github.com/angular/angular) | [MIT](http://opensource.org/licenses/MIT) | Dependency |\n| [@angular/core](https://github.com/angular/angular) | [MIT](http://opensource.org/licenses/MIT) | Dependency |\n| [@angular/forms](https://github.com/angular/angular) | [MIT](http://opensource.org/licenses/MIT) | Dependency |\n| [@angular/platform-browser-dynamic](https://github.com/angular/angular) | [MIT](http://opensource.org/licenses/MIT) | Dependency |\n| [@angular/platform-browser](https://github.com/angular/angular) | [MIT](http://opensource.org/licenses/MIT) | Dependency |\n| [@angular/router](https://github.com/angular/angular) | [MIT](http://opensource.org/licenses/MIT) | Dependency |\n| [entities](https://github.com/fb55/entities) | [BSD-2-Clause](http://opensource.org/licenses/BSD-2-Clause) | Dependency |\n| [material-icons](https://github.com/marella/material-icons) | [Apache-2.0](http://opensource.org/licenses/Apache-2.0) | Dependency |\n| [ngx-theme-manager](https://github.com/rb-mwindh/ngx-theme-manager) | [MIT](http://opensource.org/licenses/MIT) | Dependency |\n| [parse5](https://github.com/inikulin/parse5) | [MIT](http://opensource.org/licenses/MIT) | Dependency |\n| [rxjs](https://github.com/reactivex/rxjs) | [Apache-2.0](http://opensource.org/licenses/Apache-2.0) | Dependency |\n| [tslib](https://github.com/Microsoft/tslib) | 0BSD | Dependency |\n| [zone.js](https://github.com/angular/angular) | [MIT](http://opensource.org/licenses/MIT) | Dependency |\n\n\u003c/bom\u003e\n\n### License\n\n![License](https://badgen.net/github/license/rb-mwindh/ngx-theme-manager)\n\n\n[wiki::faq]: https://github.com/rb-mwindh/ngx-theme-manager/wiki/FAQ\n\n[wiki::troubleshooting]: https://github.com/rb-mwindh/ngx-theme-manager/wiki/Troubleshooting\n\n[issue::question]: https://github.com/rb-mwindh/ngx-theme-manager/issues/new?template=question.md\u0026title=❓%20\n\n[license]: https://badgen.net/github/license/rb-mwindh/ngx-theme-manager\n\n\n\n[selfhtml:media]: https://wiki.selfhtml.org/wiki/HTML/Attribute/media\n\n[known-annotations]: #known-annotations\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frb-mwindh%2Fngx-theme-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frb-mwindh%2Fngx-theme-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frb-mwindh%2Fngx-theme-manager/lists"}