{"_id":"@aniondev/ngx-darkmode-toggle-button","_rev":"4-8a89c10f55a1d5b6823fb85a8b4a5be3","name":"@aniondev/ngx-darkmode-toggle-button","dist-tags":{"latest":"2.0.3"},"versions":{"0.0.1":{"name":"@aniondev/ngx-darkmode-toggle-button","version":"0.0.1","_id":"@aniondev/ngx-darkmode-toggle-button@0.0.1","maintainers":[{"name":"aniondev","email":"marius.goecke@gmail.com"}],"dist":{"shasum":"5933481af0774471d7029722676344bf5aeac9ad","tarball":"https://registry.npmjs.org/@aniondev/ngx-darkmode-toggle-button/-/ngx-darkmode-toggle-button-0.0.1.tgz","fileCount":23,"integrity":"sha512-FqSMwcGAkXxBZ5g5vWNeT1nu0YKflSEwKL7Z2HEaZPs79JiWLKBX9CkRcb8gougzWZ8uMrHhwTN3LdVxjTT59g==","signatures":[{"sig":"MEQCID4r1EEwJWPD3eJqOQSzymWcdMNq+mlJnzZiPzMuPj4jAiBqEV+GMmCjs6kpVh9dMJTIwzIMmeRwdUpIAT98Niewng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":129229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivDECACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6zA/8DczN8KpH1FzlSHUjK2fvvCYQCV3BuI4rbJgDLIdc0IOxkw9b\r\n8Tifnt8xhrevtMLiHqE5DgVKA/sVQdfnhV2WYtElbbecTuERg6JzCUHJ+KGE\r\noeQU1M6gEmPzd/7O1cCrl10Jq0W7ANN+MVDEWTPuhW6YqrQD8Iqb4RMo/rIJ\r\nB9wtB9DHkhGcxUiDhqvaPuzbIAiK77IhakyfysAYDyLb8/P8VTKVPmb4oLVQ\r\nyqek+Wn0p65BNaMX0KBjStErc+jFjaxTAmhxkoT7YiSSwKdOUV7bRS3RD/QK\r\nU+9nzAF8oBzq+A2SAt+7P5Gseu0qLgCWWn/c8mawYytr46JI9AJ7aQrj7b1M\r\nVaQmbZ28BJBWzFzvT6+E6KgPIQR75Ixmnpu0DSq87pgZTQm4OVBF66Dlc7gU\r\nODVI72GKo6mM90bdI51lepz/esHia+HkeB7vRtF9wxeK+RHe7PjRD/lkKCEF\r\n8Q0ROlxhvD3JneDzRLcqpSwanyDo5H1U5OOtN/oupLsJPaXQXslQd1EGHR22\r\n4TdMwp87NAjh7st4BXXCHQ9myJ5yWEcd7iO4HVbb/wTUP7HAIT2HtggUdnDG\r\nholA54blh3hoCCDqH6jMjv/jrpFNadzvXPRMmyJ/d4dGias88LDAz1c39kGC\r\nPx6EbHCW4trW0eO/IW1g3s4fa56dH0DyP+s=\r\n=kQN+\r\n-----END PGP SIGNATURE-----\r\n"},"es2020":"fesm2020/aniondev-ngx-darkmode-toggle-button.mjs","module":"fesm2015/aniondev-ngx-darkmode-toggle-button.mjs","esm2020":"esm2020/aniondev-ngx-darkmode-toggle-button.mjs","exports":{".":{"node":"./fesm2015/aniondev-ngx-darkmode-toggle-button.mjs","types":"./index.d.ts","es2015":"./fesm2015/aniondev-ngx-darkmode-toggle-button.mjs","es2020":"./fesm2020/aniondev-ngx-darkmode-toggle-button.mjs","default":"./fesm2020/aniondev-ngx-darkmode-toggle-button.mjs","esm2020":"./esm2020/aniondev-ngx-darkmode-toggle-button.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"a8d3bd3bc97a73f120bf54ff148739fab2df0b75","typings":"index.d.ts","_npmUser":{"name":"aniondev","email":"marius.goecke@gmail.com"},"fesm2015":"fesm2015/aniondev-ngx-darkmode-toggle-button.mjs","fesm2020":"fesm2020/aniondev-ngx-darkmode-toggle-button.mjs","_npmVersion":"8.13.1","description":"This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.0.","directories":{},"sideEffects":false,"_nodeVersion":"16.13.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"~7.5.0","zone.js":"~0.11.4","@angular/core":"^14.0.0","@angular/forms":"^14.0.0","@angular/common":"^14.0.0","@angular/router":"^14.0.0","@angular/compiler":"^14.0.0","@angular/material":"^14.0.0","@angular/animations":"^14.0.0","@angular/platform-browser":"^14.0.0","@angular/platform-browser-dynamic":"^14.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-darkmode-toggle-button_0.0.1_1656500482385_0.6462895777752484","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@aniondev/ngx-darkmode-toggle-button","version":"2.0.1","keywords":["angular","material","dark","darkmode","theme","color-scheme","design","ui"],"author":{"name":"Marius Göcke","email":"marius.goecke@gmail.com"},"license":"ISC","_id":"@aniondev/ngx-darkmode-toggle-button@2.0.1","maintainers":[{"name":"aniondev","email":"marius.goecke@gmail.com"}],"homepage":"https://github.com/anionDev/NgxDarkmodeToggleButton#readme","bugs":{"url":"https://github.com/anionDev/NgxDarkmodeToggleButton/issues"},"dist":{"shasum":"2ac93cba771e92b07afa4911ee2c048fee5eb496","tarball":"https://registry.npmjs.org/@aniondev/ngx-darkmode-toggle-button/-/ngx-darkmode-toggle-button-2.0.1.tgz","fileCount":9,"integrity":"sha512-H/OJNibGEbyl7eVdndKR94I3RMQFx/gZWte0H8svRt5cumMl13fSEli6FFomPvz+t7H3ZCKBP3gZFXTMLdycQA==","signatures":[{"sig":"MEUCIAoHmFVV3RWDYLhN6hxwWJC9gL7VZDK/dBEATgyEn+9OAiEAnrctwY+5nuxQ/8J5QiBvsrl3BrXSLWUjRyDuzf/gnmI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31642},"module":"fesm2022/aniondev-ngx-darkmode-toggle-button.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/aniondev-ngx-darkmode-toggle-button.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"21283f8314a0a5f5bfc3c8cdefad8730b0d48ad6","private":false,"typings":"index.d.ts","_npmUser":{"name":"aniondev","email":"marius.goecke@gmail.com"},"repository":{"url":"git+https://github.com/anionDev/NgxDarkmodeToggleButton.git","type":"git"},"_npmVersion":"10.8.2","description":"An angular-component which lets the user choose between the color-schemes system, light and dark.","directories":{},"sideEffects":false,"_nodeVersion":"22.5.1","dependencies":{"tslib":"2.8.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/cdk":"19.2.0","@angular/core":"19.2.0","@angular/forms":"19.2.0","@angular/common":"19.2.0","@angular/material":"19.2.0"},"_npmOperationalInternal":{"tmp":"tmp/ngx-darkmode-toggle-button_2.0.1_1786548438392_0.14615373143733112","host":"s3://npm-registry-packages-npm-production"}},"2.0.2":{"name":"@aniondev/ngx-darkmode-toggle-button","version":"2.0.2","keywords":["angular","material","dark","darkmode","theme","color-scheme","design","ui"],"author":{"name":"Marius Göcke","email":"marius.goecke@gmail.com"},"license":"ISC","_id":"@aniondev/ngx-darkmode-toggle-button@2.0.2","maintainers":[{"name":"aniondev","email":"marius.goecke@gmail.com"}],"homepage":"https://github.com/anionDev/NgxDarkmodeToggleButton#readme","bugs":{"url":"https://github.com/anionDev/NgxDarkmodeToggleButton/issues"},"dist":{"shasum":"04c8b787f759c5761e350b4817ce99b07b044928","tarball":"https://registry.npmjs.org/@aniondev/ngx-darkmode-toggle-button/-/ngx-darkmode-toggle-button-2.0.2.tgz","fileCount":6,"integrity":"sha512-lHQJeZJclY15aXrX8KxOzk5Bk7leO5pBrZQ10OiHL8NMAWpU5j226ji1LndeOzJHmjXrwhaHzAimv4CPvc0M6g==","signatures":[{"sig":"MEUCIQDijUMBNpIQe2nKzFl3sClFRa4nrT4I7V4efNAEu1OLRAIgVYm2P7AGHY2SRSfveOr76l8BXOG9/5lT66tw1tS56sw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32558},"type":"module","module":"fesm2022/aniondev-ngx-darkmode-toggle-button.mjs","exports":{".":{"types":"./types/aniondev-ngx-darkmode-toggle-button.d.ts","default":"./fesm2022/aniondev-ngx-darkmode-toggle-button.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"b323d95eb099161c2dca4e1fe65f2b4be4feb491","private":false,"typings":"types/aniondev-ngx-darkmode-toggle-button.d.ts","_npmUser":{"name":"aniondev","email":"marius.goecke@gmail.com"},"repository":{"url":"git+https://github.com/anionDev/NgxDarkmodeToggleButton.git","type":"git"},"_npmVersion":"11.17.0","description":"An angular-component which lets the user choose between the color-schemes system, light and dark.","directories":{},"sideEffects":false,"_nodeVersion":"24.19.0","dependencies":{"tslib":"2.8.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/cdk":"^22.1.1","@angular/core":"^22.1.1","@angular/forms":"^22.1.1","@angular/common":"^22.1.1","@angular/material":"^22.1.1"},"_npmOperationalInternal":{"tmp":"tmp/ngx-darkmode-toggle-button_2.0.2_1786566718545_0.0427410047600747","host":"s3://npm-registry-packages-npm-production"}},"2.0.3":{"name":"@aniondev/ngx-darkmode-toggle-button","version":"2.0.3","description":"An angular-component which lets the user choose between the color-schemes system, light and dark.","repository":{"type":"git","url":"git+https://github.com/anionDev/NgxDarkmodeToggleButton.git"},"homepage":"https://github.com/anionDev/NgxDarkmodeToggleButton#readme","bugs":{"url":"https://github.com/anionDev/NgxDarkmodeToggleButton/issues"},"keywords":["angular","material","dark","darkmode","theme","color-scheme","design","ui"],"author":{"name":"Marius Göcke","email":"marius.goecke@gmail.com"},"license":"ISC","private":false,"publishConfig":{"access":"public"},"sideEffects":false,"peerDependencies":{"@angular/cdk":"^22.1.1","@angular/common":"^22.1.1","@angular/core":"^22.1.1","@angular/forms":"^22.1.1","@angular/material":"^22.1.1"},"dependencies":{"tslib":"2.8.1"},"module":"fesm2022/aniondev-ngx-darkmode-toggle-button.mjs","typings":"types/aniondev-ngx-darkmode-toggle-button.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/aniondev-ngx-darkmode-toggle-button.d.ts","default":"./fesm2022/aniondev-ngx-darkmode-toggle-button.mjs"}},"type":"module","gitHead":"dd1bc745d851d2ac0a356cda2dd693d8a88546d9","_id":"@aniondev/ngx-darkmode-toggle-button@2.0.3","_nodeVersion":"24.19.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-yPl8Fh+Ssp2EgzL86VsoiErhdhu8mqkVgJAXxP31VEgAt5zcPgQ5x3zHV1gKnhRiCZw89JPZ6XrMloA476czXw==","shasum":"ecc52453cbccee38937870cec63ab876e402f7d0","tarball":"https://registry.npmjs.org/@aniondev/ngx-darkmode-toggle-button/-/ngx-darkmode-toggle-button-2.0.3.tgz","fileCount":6,"unpackedSize":32384,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDh5Zu5//dQAAVjHOznCaUVCBskH8VSnpCA74oZR39t5QIgP/6RfJ5Zpwzfn/Riks4CjleoRT/jNmPt8aAETCRes48="}]},"_npmUser":{"name":"aniondev","email":"marius.goecke@gmail.com"},"directories":{},"maintainers":[{"name":"aniondev","email":"marius.goecke@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-darkmode-toggle-button_2.0.3_1786567698992_0.7685218254159083"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-29T11:01:22.314Z","modified":"2026-08-12T20:48:19.407Z","0.0.1":"2022-06-29T11:01:22.544Z","2.0.1":"2026-08-12T15:27:18.555Z","2.0.2":"2026-08-12T20:31:58.700Z","2.0.3":"2026-08-12T20:48:19.120Z"},"bugs":{"url":"https://github.com/anionDev/NgxDarkmodeToggleButton/issues"},"author":{"name":"Marius Göcke","email":"marius.goecke@gmail.com"},"license":"ISC","homepage":"https://github.com/anionDev/NgxDarkmodeToggleButton#readme","keywords":["angular","material","dark","darkmode","theme","color-scheme","design","ui"],"repository":{"type":"git","url":"git+https://github.com/anionDev/NgxDarkmodeToggleButton.git"},"description":"An angular-component which lets the user choose between the color-schemes system, light and dark.","maintainers":[{"name":"aniondev","email":"marius.goecke@gmail.com"}],"readme":"# NgxDarkmodeToggleButton\n\n## Purpose\n\n`ngx-darkmode-toggle-button` is an angular-component which lets the user choose the color-scheme of a web-application between the three modes `system`, `light` and `dark`. The choice is kept over reloads and sessions.\n\n## Idea\n\nApps, web-sites and web-applications usually have a light- and a dark-appearance, and the operating-systems have that setting as well. Most users want the application to simply follow their operating-system, but they also want to be able to overrule that for one application.\n\nA two-state toggle can not express that: it only knows \"light\" and \"dark\" and therefore loses exactly the mode which most users want. This component therefore offers all three modes at the same time, each of them reachable with one click.\n\n## Example\n\n\n\nThe three modes are visible at the same time and the active one is highlighted. In the mode `dark` the same page is dark and the third button is the highlighted one.\n\n## Requirements\n\n- Angular 22\n- Angular Material 22 (the component uses the Material-3-theming-API and the system-tokens `--mat-sys-*`)\n- An icon-font which is provided by the application, see step 3 of the usage. This package deliberately does not bring one: which icon-font an application uses is its own decision, and a second one would only add weight.\n\n## Installation\n\nThe package is published at [npmjs.com/package/@aniondev/ngx-darkmode-toggle-button](https://www.npmjs.com/package/@aniondev/ngx-darkmode-toggle-button).\n\n```\nnpm install @aniondev/ngx-darkmode-toggle-button\n```\n\n## Usage\n\n### 1. Include the theme once\n\nThe component does not bring its own theme and does not exchange stylesheets at runtime. It only switches the css-property `color-scheme`, which Material-3 evaluates by itself. Include `mat.theme()` exactly once in your `styles.scss`:\n\n```scss\n@use '@angular/material' as mat;\n\nhtml {\n color-scheme: light dark; // this is the mode \"system\"\n @include mat.theme((color: mat.$azure-palette, typography: Roboto, density: 0));\n\n &[data-theme='light'] { color-scheme: light; }\n &[data-theme='dark'] { color-scheme: dark; }\n}\n\nbody {\n background: var(--mat-sys-background);\n color: var(--mat-sys-on-background);\n}\n```\n\nOwn components must take their colors from the system-tokens (`var(--mat-sys-on-surface)` and so on). A hard-coded color stays as it is when the scheme changes.\n\n### 2. Set the attribute before the first frame\n\nWithout this the page is drawn in the wrong scheme for a moment after a reload. Put this blocking script into the `` of your `index.html`, before all stylesheets:\n\n```html\n\n```\n\nThe duplication of that logic is intended: the attribute has to be set before the application is bootstrapped.\n\n### 3. Provide an icon-font\n\nThe component shows its three modes as icons of the font `Material Icons` (`light_mode`, `computer` and `dark_mode`). The font is provided by the application, not by this package.\n\nIf the font is loaded from a font-provider then its stylesheet usually already assigns the font to the elements. If it is delivered with the application (which makes the appearance independent of an external service) then the assignment has to be made once, because the font-package only contains the font itself:\n\n```scss\nmat-icon {\n font-family: 'Material Icons';\n font-size: 24px;\n line-height: 1;\n font-feature-settings: 'liga';\n}\n```\n\nWithout this an icon is displayed as the text of its name instead of as a symbol.\n\n### 4. Use the component\n\nThe component is standalone, so it is imported directly by the component which shows it:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { NgxDarkmodeToggleButtonComponent } from '@aniondev/ngx-darkmode-toggle-button';\n\n@Component({\n selector: 'app-toolbar',\n imports: [NgxDarkmodeToggleButtonComponent],\n template: ``,\n})\nexport class ToolbarComponent { }\n```\n\nThe labels can be replaced, for example by translated texts:\n\n```html\n\n```\n\n### 5. Read or set the mode from code\n\nThe chosen mode is available as a signal, so it can be read and written from anywhere - for example to store it in the profile of the user:\n\n```typescript\nimport { Component, effect, inject } from '@angular/core';\nimport { NgxDarkmodeService, ThemeMode } from '@aniondev/ngx-darkmode-toggle-button';\n\n@Component({ /* ... */ })\nexport class SettingsComponent {\n\n private readonly darkmodeService = inject(NgxDarkmodeService);\n\n public constructor() {\n effect(() => {\n const mode: ThemeMode = this.darkmodeService.mode();\n // for example: send the mode to the backend of your application\n });\n }\n\n public applyModeOfUserProfile(mode: ThemeMode): void {\n this.darkmodeService.mode.set(mode);\n }\n}\n```\n\n## Behavior\n\n| Mode | Attribute `data-theme` | `color-scheme` | Result |\n| --- | --- | --- | --- |\n| `system` | not set | `light dark` | follows the operating-system, also while the application is running |\n| `light` | `light` | `light` | always light, the operating-system is ignored |\n| `dark` | `dark` | `dark` | always dark, the operating-system is ignored |\n\nThe mode is stored in the `localStorage` under the key `theme`. A missing or an invalid value is treated as `system`, which is also the default for a user who did not choose anything yet.\n\nWith server-side-rendering or prerendering neither `localStorage` nor `window` is touched while the service is constructed: the stored value is read in `afterNextRender`.\n\n## Development\n\nThis repository implements the common project structure. The whole pipeline (build, linting, testcases) runs with:\n\n```\ntask bb\n```\n\nThe repository contains a small demo-application which shows the component (it is not part of the published package). It is started with `task rd` and it is also what the visual-regression-tests take their screenshots of. After an intended change of the appearance the baseline-screenshots are regenerated with `task uvrb`.\n\n## License\n\nSee `License.txt`.\n","readmeFilename":"README.md"}