{"_id":"@a11y-ngx/color-scheme","_rev":"15-ef3b5624a78716fa98250d5689ba5e86","name":"@a11y-ngx/color-scheme","dist-tags":{"latest":"1.0.10"},"versions":{"1.0.3":{"name":"@a11y-ngx/color-scheme","version":"1.0.3","keywords":["color","scheme","schemes","theme","light","dark","component"],"author":{"url":"https://github.com/LDV2k3/","name":"Luciano Del Vacchio","email":"lucho.development@gmail.com"},"license":"MIT","_id":"@a11y-ngx/color-scheme@1.0.3","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/color-scheme#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"dist":{"shasum":"d2beda300869cca36989b5007dc4b8a40c3c7305","tarball":"https://registry.npmjs.org/@a11y-ngx/color-scheme/-/color-scheme-1.0.3.tgz","fileCount":24,"integrity":"sha512-9w9RGOKiGYNOTj1y7avdIqanbUltqXZjOYxGqf9ys093gnbB6+22yqg1vVayh34LFiQ2w6VGMT4tiSiMjHMFdA==","signatures":[{"sig":"MEUCIQD4unN9RG0qG4ovXbzqhzfghDQsKO0FRNZypck7GyldQAIgThu4CgbUhx+NA6SNnWG2tjjlRRt1h18CaQTfsGBuJD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":515366},"main":"bundles/a11y-ngx-color-scheme.umd.js","es2015":"fesm2015/a11y-ngx-color-scheme.js","module":"fesm2015/a11y-ngx-color-scheme.js","esm2015":"esm2015/a11y-ngx-color-scheme.js","gitHead":"fd4c7b35a5124c0aa72c4b6dcd8cb45695c93a9b","typings":"a11y-ngx-color-scheme.d.ts","_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"fesm2015":"fesm2015/a11y-ngx-color-scheme.js","deprecated":"Version no longer supported due an issue with the rootConfig() and setColorScheme()","_npmVersion":"8.19.4","description":"An easy way to manage the defaults and custom Color Schemes for your components, libraries and web sites","directories":{},"sideEffects":false,"_nodeVersion":"16.20.2","dependencies":{"tslib":"^1.10.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=12.2.0","@angular/common":">=12.2.0"},"_npmOperationalInternal":{"tmp":"tmp/color-scheme_1.0.3_1724165736336_0.04523363687150628","host":"s3://npm-registry-packages"}},"1.0.4":{"name":"@a11y-ngx/color-scheme","version":"1.0.4","keywords":["color","scheme","schemes","theme","light","dark","component","service","angular"],"author":{"url":"https://github.com/LDV2k3/","name":"Luciano Del Vacchio","email":"lucho.development@gmail.com"},"license":"MIT","_id":"@a11y-ngx/color-scheme@1.0.4","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/color-scheme#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"dist":{"shasum":"3bb8efc7c2bd8e0e9d1d8dd74b0ac2b239a32a2c","tarball":"https://registry.npmjs.org/@a11y-ngx/color-scheme/-/color-scheme-1.0.4.tgz","fileCount":26,"integrity":"sha512-7VkGHqcOla/R5Ihh/LvE4TpVElV+JLkeJhZWZW9UQMJeR6KzkgZ+TElLJsQAp992OrwSa6aUL4p1RFaTn3ixLQ==","signatures":[{"sig":"MEUCIBE/UIzkCZ74nb4KSJHfPs+7mmXRH/2hb1qlwJEwA+niAiEA4mbYjM1vgxLP6VEVQP6ApYRPW/taIYTgqa3OMka+4WQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":529819},"main":"bundles/a11y-ngx-color-scheme.umd.js","es2015":"fesm2015/a11y-ngx-color-scheme.js","module":"fesm2015/a11y-ngx-color-scheme.js","esm2015":"esm2015/a11y-ngx-color-scheme.js","gitHead":"0c8a6e8b3984b605a52cf1a5181642860f5e00ee","typings":"a11y-ngx-color-scheme.d.ts","_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"fesm2015":"fesm2015/a11y-ngx-color-scheme.js","_npmVersion":"8.19.4","description":"An easy way to manage the defaults and custom Color Schemes for your components, libraries and web sites","directories":{},"sideEffects":false,"_nodeVersion":"16.20.2","dependencies":{"tslib":"^1.10.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=12.2.0","@angular/common":">=12.2.0"},"_npmOperationalInternal":{"tmp":"tmp/color-scheme_1.0.4_1729427527508_0.16791478377645297","host":"s3://npm-registry-packages"}},"1.0.5":{"name":"@a11y-ngx/color-scheme","version":"1.0.5","keywords":["color","scheme","schemes","theme","light","dark","custom","component","service","angular"],"author":{"url":"https://github.com/LDV2k3/","name":"Luciano Del Vacchio","email":"lucho.development@gmail.com"},"license":"MIT","_id":"@a11y-ngx/color-scheme@1.0.5","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/color-scheme#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"dist":{"shasum":"735461a22efd32eb8fbbfa5cfeb57e466663dd05","tarball":"https://registry.npmjs.org/@a11y-ngx/color-scheme/-/color-scheme-1.0.5.tgz","fileCount":26,"integrity":"sha512-hUexe55Rd5MnasvPooPkxHYFH4W4yIhKuACGtsYSw/IQs8j0ORAcQ5arm6NzjTuc8vwqpqSHSjehp5iySpyF8Q==","signatures":[{"sig":"MEYCIQCfs+LcwUKyeeKdB4aJOKQBhVf9oaUUJHujKSbMNTv5BwIhAPjiGcj9aYYZpNSAv4qTh1tOOdczC/Zs0trTKfPkKkt1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":659764},"main":"bundles/a11y-ngx-color-scheme.umd.js","es2015":"fesm2015/a11y-ngx-color-scheme.js","module":"fesm2015/a11y-ngx-color-scheme.js","esm2015":"esm2015/a11y-ngx-color-scheme.js","gitHead":"5b45a65a0f24fb56536aaf0b109fcb8237eceb70","typings":"a11y-ngx-color-scheme.d.ts","_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"fesm2015":"fesm2015/a11y-ngx-color-scheme.js","_npmVersion":"8.19.4","description":"An easy way to manage the defaults and custom Color Schemes for your components, libraries and web sites","directories":{},"sideEffects":false,"_nodeVersion":"16.20.2","dependencies":{"tslib":"^1.10.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=12.2.0","@angular/common":">=12.2.0"},"_npmOperationalInternal":{"tmp":"tmp/color-scheme_1.0.5_1737385722737_0.05469633556382658","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@a11y-ngx/color-scheme","version":"1.0.6","keywords":["color","scheme","schemes","theme","light","dark","custom","component","service","angular"],"author":{"url":"https://github.com/LDV2k3/","name":"Luciano Del Vacchio","email":"lucho.development@gmail.com"},"license":"MPL-2.0","_id":"@a11y-ngx/color-scheme@1.0.6","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/color-scheme#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"dist":{"shasum":"643612f746b2331d2ada4e258bd445c7d65b7591","tarball":"https://registry.npmjs.org/@a11y-ngx/color-scheme/-/color-scheme-1.0.6.tgz","fileCount":26,"integrity":"sha512-kNS96SyY0UKeR1fFgZ9sbiXOV9Q+jz2xMN+VzX2qy+7LfdM+bvEoxRJcCBl3jgxlqo8vdfyxbSmNZ2lEvfMREA==","signatures":[{"sig":"MEYCIQCSQbKaqRRDDecBMHVQGRKp5JWzJFUXRUrQ1T3CGFpiuwIhAOB/D5u+a1+hQ76cj4WxS2CZMmDYDCPo3aa5ZXVkT/kz","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":664219},"main":"bundles/a11y-ngx-color-scheme.umd.js","es2015":"fesm2015/a11y-ngx-color-scheme.js","module":"fesm2015/a11y-ngx-color-scheme.js","esm2015":"esm2015/a11y-ngx-color-scheme.js","gitHead":"c06ab9cb273cd02dc8bde276d0c8759ca9e724d7","typings":"a11y-ngx-color-scheme.d.ts","_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"fesm2015":"fesm2015/a11y-ngx-color-scheme.js","_npmVersion":"8.19.4","description":"An easy way to manage the defaults and custom Color Schemes for your components, libraries and web sites","directories":{},"sideEffects":false,"_nodeVersion":"16.20.2","dependencies":{"tslib":"^1.10.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=12.2.0","@angular/common":">=12.2.0"},"_npmOperationalInternal":{"tmp":"tmp/color-scheme_1.0.6_1759275323802_0.8341846534836379","host":"s3://npm-registry-packages-npm-production"}},"1.0.7":{"name":"@a11y-ngx/color-scheme","version":"1.0.7","keywords":["color","scheme","schemes","theme","light","dark","custom","component","service","angular"],"author":{"url":"https://github.com/LDV2k3/","name":"Luciano Del Vacchio","email":"lucho.development@gmail.com"},"license":"MPL-2.0","_id":"@a11y-ngx/color-scheme@1.0.7","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/color-scheme#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"dist":{"shasum":"75ec0ba508073781e8a97cd6949fab3818344f73","tarball":"https://registry.npmjs.org/@a11y-ngx/color-scheme/-/color-scheme-1.0.7.tgz","fileCount":26,"integrity":"sha512-0yh3+lS973XM1DISQIBuz6ahvY2VE+oqHVUDWwACnxQ9Kzzdk4ds1/dMzJtxUOXCNidRyOGddjDAnkKwfEk+nQ==","signatures":[{"sig":"MEUCIGyTM0CMfEKCn7nwerJTFHIZhtIp7V4exewHrAFRb8NCAiEA8aDW4xtSmKVaNDKt8rNaPxfhRqMGE6p/JtVpi9TC1rk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":664235},"main":"bundles/a11y-ngx-color-scheme.umd.js","es2015":"fesm2015/a11y-ngx-color-scheme.js","module":"fesm2015/a11y-ngx-color-scheme.js","esm2015":"esm2015/a11y-ngx-color-scheme.js","gitHead":"0943b42a1333a74cbda740380ef033e73c182dd5","typings":"a11y-ngx-color-scheme.d.ts","_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"fesm2015":"fesm2015/a11y-ngx-color-scheme.js","_npmVersion":"8.19.4","description":"An easy way to manage the defaults and custom Color Schemes for your components, libraries and web sites","directories":{},"sideEffects":false,"_nodeVersion":"16.20.2","dependencies":{"tslib":"^1.10.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=12.2.0 <21.0.0","@angular/common":">=12.2.0 <21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/color-scheme_1.0.7_1761915351160_0.6716746937383664","host":"s3://npm-registry-packages-npm-production"}},"1.0.8":{"name":"@a11y-ngx/color-scheme","version":"1.0.8","keywords":["color","scheme","schemes","theme","light","dark","custom","component","service","angular"],"author":{"url":"https://github.com/LDV2k3/","name":"Luciano Del Vacchio","email":"lucho.development@gmail.com"},"license":"MPL-2.0","_id":"@a11y-ngx/color-scheme@1.0.8","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/color-scheme#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"dist":{"shasum":"e1cb3ca2c35ab4278d69b9a3ea18f76608e9e05f","tarball":"https://registry.npmjs.org/@a11y-ngx/color-scheme/-/color-scheme-1.0.8.tgz","fileCount":28,"integrity":"sha512-i8XVx6jvz62+8XV8DneGoNEuUR84eih37kMW3r6NLsS8CmMEBV6gRBsCLpvTuKCIQADrQo6rEe/r0y4SG/KzDA==","signatures":[{"sig":"MEYCIQCKnyhAHkjzm0M+wUHSp/XMXUO8T967mJkobFaioqOSBAIhANYnHnyemq8E6S09Ax2q2dGlpuSABoKItQ4IrwasgsMG","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":677043},"main":"bundles/a11y-ngx-color-scheme.umd.js","es2015":"fesm2015/a11y-ngx-color-scheme.js","module":"fesm2015/a11y-ngx-color-scheme.js","esm2015":"esm2015/a11y-ngx-color-scheme.js","gitHead":"8ea9af22b8d28030df2d6e987d99523003218dd1","typings":"a11y-ngx-color-scheme.d.ts","_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"fesm2015":"fesm2015/a11y-ngx-color-scheme.js","_npmVersion":"8.19.4","description":"An easy way to manage the defaults and custom Color Schemes for your components, libraries and web sites","directories":{},"sideEffects":false,"_nodeVersion":"16.20.2","dependencies":{"tslib":"^1.10.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=12.2.0 <21.0.0","@angular/common":">=12.2.0 <21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/color-scheme_1.0.8_1764078032998_0.7807196478383698","host":"s3://npm-registry-packages-npm-production"}},"1.0.9":{"name":"@a11y-ngx/color-scheme","version":"1.0.9","keywords":["color","scheme","schemes","theme","light","dark","custom","component","service","angular"],"author":{"url":"https://github.com/LDV2k3/","name":"Luciano Del Vacchio","email":"lucho.development@gmail.com"},"license":"MPL-2.0","_id":"@a11y-ngx/color-scheme@1.0.9","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/color-scheme#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"dist":{"shasum":"d83a33beb81377db406b08ae53210db257a25e37","tarball":"https://registry.npmjs.org/@a11y-ngx/color-scheme/-/color-scheme-1.0.9.tgz","fileCount":30,"integrity":"sha512-N3Y4Gw5OxSV7Ai+2+nGJBdUAxS+I91HtH4TOyladtvZzVcWUuWwQUSO5UWyoNpSLdW98PTjqSkXXLlNNQXWbjw==","signatures":[{"sig":"MEUCIGmRfVwHK7uDoqrtAKuy14f4W0fmHSdvlixptRyilMy0AiEA/erOwucSVx6uL+6uQC9VV3DyNMDuGXNZD2jnTbEgafU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":718939},"main":"bundles/a11y-ngx-color-scheme.umd.js","es2015":"fesm2015/a11y-ngx-color-scheme.js","module":"fesm2015/a11y-ngx-color-scheme.js","esm2015":"esm2015/a11y-ngx-color-scheme.js","gitHead":"7bda61354a4ff471a3017e2c2ddb50f5ad0319b8","typings":"a11y-ngx-color-scheme.d.ts","_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"fesm2015":"fesm2015/a11y-ngx-color-scheme.js","_npmVersion":"8.19.4","description":"An easy way to manage the defaults and custom Color Schemes for your components, libraries and web sites","directories":{},"sideEffects":false,"_nodeVersion":"16.20.2","dependencies":{"tslib":"^1.10.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=12.2.0 <21.0.0","@angular/common":">=12.2.0 <21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/color-scheme_1.0.9_1767619158780_0.5576888401639113","host":"s3://npm-registry-packages-npm-production"}},"1.0.10":{"name":"@a11y-ngx/color-scheme","version":"1.0.10","description":"An easy way to manage the defaults and custom Color Schemes for your components, libraries and web sites","keywords":["color","scheme","schemes","theme","light","dark","custom","component","service","angular"],"homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/color-scheme#readme","bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"license":"MPL-2.0","author":{"name":"Luciano Del Vacchio","email":"lucho.development@gmail.com","url":"https://github.com/LDV2k3/"},"peerDependencies":{"@angular/common":">=12.2.0 <21.0.0","@angular/core":">=12.2.0 <21.0.0"},"dependencies":{"tslib":"^1.10.0"},"main":"bundles/a11y-ngx-color-scheme.umd.js","module":"fesm2015/a11y-ngx-color-scheme.js","es2015":"fesm2015/a11y-ngx-color-scheme.js","esm2015":"esm2015/a11y-ngx-color-scheme.js","fesm2015":"fesm2015/a11y-ngx-color-scheme.js","typings":"a11y-ngx-color-scheme.d.ts","sideEffects":false,"gitHead":"c5dc3046bd37a2077fac655ef6bb2fc721381065","_id":"@a11y-ngx/color-scheme@1.0.10","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-ZZZf1KBAwsg4ITVz+TuA+jkCGhWOPiHL4d5KNTlNPic5j0O9U5T7bQt5vL2NK8eMto2Y4qAcAXKJdAikBc581Q==","shasum":"9604bfc2e4bd5de6728e11e207e3d1fbfbbc42d7","tarball":"https://registry.npmjs.org/@a11y-ngx/color-scheme/-/color-scheme-1.0.10.tgz","fileCount":30,"unpackedSize":724419,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDlRF/7cUf0GmyzMfIBAktHdcqhEuJxfb2mOOOanUOLSAIgAllhYugP9VUDrtaZgKXg3Yji/kbMmon9JeoUk6lAsug="}]},"_npmUser":{"name":"ldv","email":"lucho.development@gmail.com"},"directories":{},"maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/color-scheme_1.0.10_1770992834780_0.5466766686701003"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-17T19:35:41.533Z","modified":"2026-02-13T14:27:15.152Z","1.0.0":"2024-08-17T19:35:41.870Z","1.0.1":"2024-08-19T15:00:53.408Z","1.0.2":"2024-08-19T15:14:18.036Z","1.0.3":"2024-08-20T14:55:36.513Z","1.0.4":"2024-10-20T12:32:07.754Z","1.0.5":"2025-01-20T15:08:42.943Z","1.0.6":"2025-09-30T23:35:24.052Z","1.0.7":"2025-10-31T12:55:51.386Z","1.0.8":"2025-11-25T13:40:33.232Z","1.0.9":"2026-01-05T13:19:18.990Z","1.0.10":"2026-02-13T14:27:15.017Z"},"bugs":{"url":"https://github.com/LDV2k3/a11y-libraries/issues","email":"lucho.development@gmail.com"},"author":{"name":"Luciano Del Vacchio","email":"lucho.development@gmail.com","url":"https://github.com/LDV2k3/"},"license":"MPL-2.0","homepage":"https://github.com/LDV2k3/a11y-libraries/tree/master/projects/a11y-ngx/color-scheme#readme","keywords":["color","scheme","schemes","theme","light","dark","custom","component","service","angular"],"description":"An easy way to manage the defaults and custom Color Schemes for your components, libraries and web sites","maintainers":[{"name":"ldv","email":"lucho.development@gmail.com"}],"readme":"# Color Scheme\r\n\r\nAn easy way to manage the defaults and custom Color Schemes for your components, libraries and web sites.\r\n\r\nThe purpose of this library is to allow your own components/libraries to implement the use of color schemes, so you can give the users the option to choose or update them as needed.\r\n\r\n- All given Color Schemes will be added as new `<style>` tags within the `<head>` element.\r\n- The default (system's) or given Color Scheme will be established in the `<html>` tag.\r\n\r\n![Angular support from version 12 up to version 20](https://img.shields.io/badge/Angular-v12_to_v20-darkgreen?logo=angular)\r\n\r\nThis library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0 to ensure compatibility with a wide range of Angular versions. It has been tested up to v20.\r\n\r\n## Index\r\n\r\n- [Installation](#installation)\r\n- [The use within the App or a Custom Library](#the-use-within-the-app-or-a-custom-library)\r\n- [The Types](#the-types)\r\n  - [The Color Scheme](#the-color-scheme)\r\n  - [The Global Config](#the-global-config)\r\n    - [Use Scheme](#the-global-config-use-scheme)\r\n    - [Allow User to Change Scheme](#the-global-config-allow-user-to-change-scheme)\r\n    - [New Schemes](#the-global-config-new-schemes)\r\n      - [New Scheme Item](#the-global-config-new-scheme-item)\r\n    - [Append Styles Map](#the-global-config-append-styles-map)\r\n    - [Attribute Selector Match](#the-global-config-attribute-selector-match)\r\n  - [The Color Scheme Config](#the-color-scheme-config)\r\n    - [The Selector](#the-color-scheme-config-selector)\r\n    - [The Styles Object](#the-color-scheme-config-styles-object)\r\n    - [The Styles Map Object](#the-color-scheme-config-styles-map-object)\r\n    - [The CSS Tag ID](#the-color-scheme-config-css-tag-id)\r\n  - [The Color Scheme Styles Config](#the-color-scheme-config-styles-config)\r\n    - [Force Scheme](#the-color-scheme-config-force-scheme)\r\n\r\n- [The Service](#the-service)\r\n  - [Public Methods, Properties, Getters and Setters](#the-service-public-methods-properties-getters-and-setters)\r\n    - [Color Scheme Change](#the-service-color-scheme-change)\r\n    - [User Chosen](#the-service-user-chosen)\r\n    - [The `getCurrentScheme()` Method](#the-service-getcurrentscheme-method)\r\n    - [The `getConfig()` Method](#the-service-getconfig-method)\r\n    - [The `setConfig()` Method](#the-service-setconfig-method)\r\n    - [The `updateConfig()` Method](#the-service-updateconfig-method)\r\n    - [The `getCustomStyles()` Method](#the-service-getcustomstyles-method)\r\n    - [The `getAttributeSelector()` Method](#the-service-getattributeselector-method)\r\n\r\n- [The Components](#the-components)\r\n  - [Dropdown Selector](#the-component-dropdown-selector)\r\n  - [Checkbox](#the-component-checkbox)\r\n\r\n- [Examples for your App](#examples-for-your-app)\r\n  - [The Attribute Selector Match Example](#the-attribute-selector-match-example)\r\n  - [The New Schemes Example](#the-new-schemes-example)\r\n  - [Updating the Defaults Example](#updating-the-defaults-example)\r\n    - [Changing the Names Example](#changing-the-default-names-example)\r\n    - [Changing the Values Example](#changing-the-default-values-example)\r\n    - [Adding Generic Styles Example](#add-generic-styles-example)\r\n  - [Appending New Styles Example](#appending-new-styles-example)\r\n- [Examples for your Custom Library](#examples-for-your-custom-library)\r\n  - [The Color Scheme Config Example](#the-color-scheme-config-example)\r\n  - [Get Custom Styles Example](#get-custom-styles-example)\r\n\r\n## Installation\r\n\r\n1. Install npm package:\r\n\r\n   `npm install @a11y-ngx/color-scheme --save`\r\n\r\n2. Import `A11yColorSchemeModule` into your module or standalone component:\r\n\r\n```typescript\r\nimport { A11yColorSchemeModule } from '@a11y-ngx/color-scheme';\r\n\r\n@NgModule({\r\n    declarations: [...],\r\n    imports: [\r\n        ...\r\n        A11yColorSchemeModule,\r\n    ],\r\n})\r\nexport class AppModule { }\r\n```\r\n\r\n> **CHECK ALSO:** The [rootConfig()](#the-rootconfig-method) and [setColorScheme()](#the-setcolorscheme-method) methods.\r\n\r\n### The `rootConfig()` Method\r\n\r\nServes the purpose of configuring the basics for the entire Color Scheme system within your website.\r\n\r\n> ⚠️ **IMPORTANT:** It's not meant to be used within a component/library. For that, please use [the `setColorScheme()` method](#the-setcolorscheme-method).\r\n\r\nAccepts a single parameter `config` of type [`ColorScheme`](#the-color-scheme) or the [`ColorSchemeGlobalConfig`](#the-global-config) object.\r\n\r\n**On Angular v12 - v14:**\r\n\r\n```typescript\r\nA11yColorSchemeModule.rootConfig('dark'),\r\n// or...\r\nA11yColorSchemeModule.rootConfig({\r\n    useScheme: 'dark',\r\n    ...\r\n}),\r\n```\r\n\r\n**On Angular v15+:**\r\n\r\n```typescript\r\nprovideA11yColorScheme({\r\n    useScheme: 'dark',\r\n    ...\r\n}),\r\n```\r\n\r\n### The `setColorScheme()` Method\r\n\r\nServes to establish one or more sub level configurations based on a given `selector`.\r\n\r\nThis comes handy when you need to add a custom set of properties and styles for the Color Scheme on a particular component or library.\r\n\r\nAccepts a single parameter `config` of type [`ColorSchemeConfig`](#the-color-scheme-config) or an array of them, so you can provide multiple selectors.\r\n\r\n**On Angular v12 - v14:**\r\n\r\n```typescript\r\nA11yColorSchemeModule.setColorScheme({\r\n    selector: 'my-custom-library',\r\n    ...\r\n}),\r\n// or...\r\nA11yColorSchemeModule.setColorScheme([\r\n    {\r\n        selector: 'my-custom-library-1',\r\n        ...\r\n    },\r\n    {\r\n        selector: 'my-custom-library-2',\r\n        ...\r\n    },\r\n]),\r\n```\r\n\r\n**On Angular v15+:**\r\n\r\n```typescript\r\nprovideA11yColorSchemeFeature({\r\n    selector: 'my-custom-library',\r\n    ...\r\n}),\r\n```\r\n\r\n## The use within the App or a Custom Library\r\n\r\nWhether you have to use Color Schemes in your app or a custom library, it will depend on which methods you have to use.\r\n\r\n**For your app:**\r\n\r\nWill allow you to create custom styles and/or add new schemes into the two generic ones already provided (`light` & `dark`). All the styles will live under the `:root` selector so your app can have full access.\r\n\r\n1. Init the config by using [the `rootConfig()` method](#the-rootconfig-method) and provide:\r\n   - [Which scheme to use by default](#the-global-config-use-scheme).\r\n   - [Change the default values](#the-global-config-defaults).\r\n   - [Provide new Schemes](#the-global-config-new-schemes).\r\n   - ... and more.\r\n2. You can make use of any of the components to allow the user to change the schemes:\r\n   - [Dropdown Selector](#the-component-dropdown-selector):\r\n     - It will show all the available schemes, plus the \"auto\" option to use the system's current configuration.\r\n   - [Checkbox](#the-component-checkbox):\r\n     - It will allow to change between `light` and `dark` schemes.\r\n3. You can also subscribe to [the `colorSchemeChanged` Behavior Subject](#the-service-color-scheme-change) in order to make any updates when the color scheme changes.\r\n\r\nPlease [check the examples for your app](#examples-for-your-app).\r\n\r\n**For a custom library/component:**\r\n\r\nSame as above, but for a custom selector, allowing you to have any of your components with custom color schemes.\r\n\r\n1. Init the config (or configs) by using [the `setColorScheme()` method](#the-setcolorscheme-method) and provide:\r\n   - [The selector of your main component](#the-color-scheme-config-selector).\r\n   - [The list of styles for the schemes](#the-color-scheme-config-styles-object).\r\n   - [The map of properties](#the-color-scheme-config-styles-map-object).\r\n   - ... and more.\r\n2. The above will initialize the styles for your custom library/component.\r\n3. Now, you can make use of any of the available properties and/or methods to get or update your config:\r\n   - [Get the current scheme](#the-service-getcurrentscheme-method).\r\n   - [Get your config](#the-service-getconfig-method).\r\n   - [Update your config](#the-service-updateconfig-method).\r\n   - [Get the specific custom styles](#the-service-getcustomstyles-method).\r\n   - ... and more.\r\n\r\nPlease [check the examples for your library](#examples-for-your-custom-library).\r\n\r\n## The Types\r\n\r\n### The Color Scheme\r\n\r\n- **Type:** `ColorScheme`.\r\n- **Of type:** `string`, it accepts the values:\r\n  - **Generics:** `'light'`, `'dark'` or `'auto'` (defined by the system).\r\n  - **Custom:** Any given code-name from the new custom Color Scheme.\r\n\r\n### The Global Config\r\n\r\n- Type: `ColorSchemeGlobalConfig`.\r\n- Properties:\r\n  - [`useScheme`](#the-global-config-use-scheme).\r\n  - [`allowUserToChangeScheme`](#the-global-config-allow-user-to-change-scheme).\r\n  - [`defaults`](#the-global-config-defaults).\r\n  - [`newSchemes`](#the-global-config-new-schemes).\r\n  - [`appendStylesMap`](#the-global-config-append-styles-map).\r\n  - [`attributeSelectorMatch`](#the-global-config-attribute-selector-match).\r\n\r\n<a name=\"global-config-pre-established-properties\"></a>\r\nThe global configuration comes with a set of pre-established properties of CSS variables ready to be used:\r\n\r\n| Property | CSS Variable | Light | Dark |\r\n| :------- | :----------- | :---- | :--- |\r\n| `a11yBackgroundColor` | `--a11y-bg-color` | `'rgb(255 255 255 / 98%)'` | `'rgb(31 31 31 / 98%)'` |\r\n| `a11yTextColor` | `--a11y-text-color` | `'#222'` | `'#FFF'` |\r\n| `a11yBorderColor` | `--a11y-border-color` | `'#656565'` | `'#666'` |\r\n| `a11yShadow` | `--a11y-shadow` | `'5px 5px 10px -5px'` | `'5px 5px 10px -5px'` |\r\n| `a11yShadowColor` | `--a11y-shadow-color` | `'#444'` | `'#444'` |\r\n| `a11yFocusVisible` | `--a11y-focus-visible` | `'0 0 0 2px #FFF, 0 0 0 4px #444'` | `'0 0 0 2px #666, 0 0 0 4px #FFF'` |\r\n\r\n> **NOTE:** All these properties (or new ones, provided via [the `appendStylesMap` in the config](#the-global-config-append-styles-map)) will be added as CSS in two ways:\r\n>\r\n> 1. Under the `:root` selector (\"root\" level):\r\n>    - In here, the variables will be differentiated by the scheme's code-name as suffix, so they can always be available and accessed, if needed.\r\n>\r\n>      ```css\r\n>      :root {\r\n>          --a11y-bg-color-light: rgb(255 255 255 / 98%);\r\n>          --a11y-text-color-light: #222;\r\n>          ...\r\n>          --a11y-bg-color-dark: rgb(31 31 31 / 98%);\r\n>          --a11y-text-color-dark: #FFF;\r\n>          ...\r\n>          --a11y-bg-color-red-velvet: #FFEEEE;\r\n>          --a11y-text-color-red-velvet: #590811;\r\n>          ...\r\n>      }\r\n>      ```\r\n>\r\n> 2. Under the `[color-scheme=\"<CODE_NAME>\"]` selector (\"scheme\" level):\r\n>    - These rules will allow you to use the original variable name within your CSS in order for your elements to take the value from the current selected Color Scheme.\r\n>\r\n>      ```css\r\n>      [color-scheme=\"light\"] {\r\n>          --a11y-bg-color: var(--a11y-bg-color-light);\r\n>          --a11y-text-color: var(--a11y-text-color-light);\r\n>          ...\r\n>      }\r\n>      [color-scheme=\"dark\"] {\r\n>          --a11y-bg-color: var(--a11y-bg-color-dark);\r\n>          --a11y-text-color: var(--a11y-text-color-dark);\r\n>          ...\r\n>      }\r\n>      [color-scheme=\"red-velvet\"] {\r\n>          --a11y-bg-color: var(--a11y-bg-color-red-velvet);\r\n>          --a11y-text-color: var(--a11y-text-color-red-velvet);\r\n>          ...\r\n>      }\r\n>      ```\r\n>\r\n> The whole idea is for you to use, for instance, `background-color: var(--a11y-bg-color);` and the right color will be retrieved according to the currently selected scheme.\r\n>\r\n> If, at any time, you want to force an element to have the `red-velvet` text color, even while you are in another selected scheme, you can use `color: var(--a11y-text-color-red-velvet);`.\r\n>\r\n> Check also the [Appending New Styles Example](#appending-new-styles-example).\r\n\r\n#### The Global Config: Use Scheme\r\n\r\nTo set which Color Scheme to be used by default.\r\n\r\n- **Config Property:** `useScheme` (_optional_).\r\n- **Type:** [`ColorScheme`](#the-color-scheme).\r\n- **Default:** `'auto'` (system's current).\r\n\r\n#### The Global Config: Allow User to Change Scheme\r\n\r\nTo allow the user to change the Color Scheme.\r\n\r\n- **Config Property:** `allowUserToChangeScheme` (_optional_).\r\n- **Type:** `boolean`.\r\n- **Default:** `true`.\r\n\r\n#### The Global Config: Defaults\r\n\r\nTo set some generic styles and the default names and/or values for the basic Color Schemes properties: `light`, `dark` or `auto`.\r\n\r\n- **Config Property:** `defaults` (_optional_).\r\n- **Type:** `ColorSchemeDefaults`.\r\n- **Default:** `{}` (_unset_).\r\n\r\n> **NOTE:** The `ColorSchemeDefaults` type accepts the properties:\r\n>\r\n> - `generics` of type `ColorSchemeProperties`:\r\n>   - It's just an object containing a set of properties with their values. They can be used as variables (which will be used _as is_ within the root styles) or can be also mapped against the styles map.\r\n>   - Since these are considered \"generics\", the idea is for you to set a variable, so all of the properties that don't start with \"--\" will be ignored, i.e.:\r\n>     - `{ '--app-header-animation-ms': '200ms' }` // valid\r\n>     - `{ background: '#000' }` // not valid, it'll be ignored (unless \"background\" is being used as a key in the styles map)\r\n> - `light` and `dark`:\r\n>   - Accepts all the [pre-established properties](#global-config-pre-established-properties).\r\n>   - All properties you [may have set in `appendStylesMap`](#the-global-config-append-styles-map).\r\n>   - `name` of type `string`: To set the default name.\r\n> - `auto`:\r\n>   - `name` of type `string`: To set the default name.\r\n\r\nSee [how to Update the Defaults Example](#updating-the-defaults-example).\r\n\r\n#### The Global Config: New Schemes\r\n\r\nTo provide new Color Schemes.\r\n\r\n- **Config Property:** `newSchemes` (_optional_).\r\n- **Type:** [`ColorSchemeItemNew[]`](#the-global-config-new-scheme-item).\r\n- **Default:** `[]`.\r\n\r\n##### The Global Config: New Scheme Item\r\n\r\nThe new Scheme item.\r\n\r\n- **Type:** `ColorSchemeItemNew`.\r\n- **Properties:**\r\n  - `value` of type [`ColorScheme`](#the-color-scheme): The unique code-name (hyphen separated) of the Color Scheme.\r\n  - `name` of type `string`: The readable name of the Color Scheme.\r\n  - `scheme` of type [`ColorSchemeProperties`](#color-scheme-properties-type): The properties for the Color Scheme.\r\n  - `useMissingPropsFrom` of type [`ColorScheme`](#the-color-scheme) (_optional_): To indicate where to get the missing properties from if they are not present within this new scheme.\r\n    - The default value will be `'light'` if none was provided.\r\n    - ⚠️ **IMPORTANT:** Be aware that, in case you had added new properties by using [the `appendStylesMap`](#the-global-config-append-styles-map), and those properties were **not** provided in both, the new scheme and the `light` scheme (or whatever value you choose for `useMissingPropsFrom`), you will get an `undefined` value.\r\n\r\nCheck [the New Schemes example](#the-new-schemes-example).\r\n\r\n#### The Global Config: Append Styles Map\r\n\r\nTo provide new properties to the current styles map. See [the pre-established properties within the styles map](#global-config-pre-established-properties).\r\n\r\n> **IMPORTANT:** The current properties values are not going to be override, since they are being used by other libraries.\r\n\r\n- **Config Property:** `appendStylesMap` (_optional_).\r\n- **Type:** [`ColorSchemeCSSMap`](#the-color-scheme-config-styles-map-object).\r\n\r\n#### The Global Config: Attribute Selector Match\r\n\r\nThe CSS attribute's name to match the Color Scheme.\r\n\r\n- **Config Property:** `attributeSelectorMatch` (_optional_).\r\n- **Type:** `string`.\r\n- **Default:** `'color-scheme'`.\r\n\r\nAs mentioned above, the default is set to `'color-scheme'`, which will result on `color-scheme=\"...\"` applied to the `<html>` element.\r\n\r\nCheck [the Attribute Selector Match example](#the-attribute-selector-match-example).\r\n\r\n### The Color Scheme Config\r\n\r\nUsed inside [the `setColorScheme()` method](#the-setcolorscheme-method), it serves the purpose of configuring the Color Scheme for a new component or library based on a given `selector`.\r\n\r\n- Type: `ColorSchemeConfig`.\r\n- Properties:\r\n  - [`selector`](#the-color-scheme-config-selector).\r\n  - [`styles`](#the-color-scheme-config-styles-object).\r\n  - [`stylesMap`](#the-color-scheme-config-styles-map-object).\r\n  - [`cssTagID`](#the-color-scheme-config-css-tag-id).\r\n  - It also implements the properties from [the Styles Config type](#the-color-scheme-config-styles-config).\r\n    - [`forceScheme`](#the-color-scheme-config-force-scheme).\r\n\r\nCheck [the Color Scheme Config example](#the-color-scheme-config-example).\r\n\r\n#### The Color Scheme Config: Selector\r\n\r\nThe element's selector to apply the Color Scheme config to.\r\n\r\n- **Config Property:** `selector`.\r\n- **Type:** `string`.\r\n\r\n#### The Color Scheme Config: Styles Object\r\n\r\nAn object with the properties and values for each style your component/library needs.\r\n\r\n- **Config Property:** `styles`.\r\n- **Type:** `ColorSchemeProperties` or `ColorSchemesObject`.\r\n\r\n<a name=\"color-scheme-properties-type\"></a>\r\nThe `ColorSchemeProperties` is a basic group of properties, it won't contain individual schemes. It will serve the sole purpose of create a _root_ set of CSS properties.\r\n\r\n```typescript\r\nconst STYLES: ColorSchemeProperties = {\r\n    backgroundColor: '#DDD',\r\n    textColor: '#999',\r\n    borderSize: 1,\r\n    fadeMs: 200,\r\n};\r\n```\r\n\r\n<a name=\"color-scheme-object-type\"></a>\r\nThe `ColorSchemesObject` is a more complex group of properties, which will contain generic items as well as individual schemes.\r\n\r\n**Properties:**\r\n\r\n- `generics` of type `ColorSchemeProperties`:\r\n  - In here we can add those properties that are generic (not color related).\r\n- `schemes` of type `ColorSchemes`:\r\n  - In here we have to specify each color scheme by its code-name and, within, the properties (of type `ColorSchemeProperties`):\r\n    - `light` is mandatory, as it will be used as the default scheme.\r\n    - `dark` is optional.\r\n    - _'code-name'_ also optional, you can add as many custom color schemes as you need.\r\n\r\n```typescript\r\nconst STYLES: ColorSchemesObject = {\r\n    generics: {\r\n        borderSize: 1,\r\n        fadeMs: 200,\r\n    },\r\n    schemes: {\r\n        light: { // mandatory\r\n            backgroundColor: '#DDD',\r\n            textColor: '#999',\r\n        },\r\n        dark: {}, // optional\r\n        red: {}, // being 'red' the code-name\r\n        blue: {}, // being 'blue' the code-name\r\n    },\r\n};\r\n```\r\n\r\n#### The Color Scheme Config: Styles Map Object\r\n\r\nThe properties to map within each config.\r\n\r\n- **Config Property:** `stylesMap`.\r\n- **Type:** `ColorSchemeCSSMap`.\r\n  - The **property** will be a string of your choosing, which will be used later to map the value inside the scheme.\r\n  - The **value** could be:\r\n    - `string`: The CSS variable name to use.\r\n    - `ColorSchemeCSSProperty`: It's an object that could contain:\r\n      - `property` of type `string`: The CSS variable name to use.\r\n      - `suffix` (_optional_) of type `string`: The _suffix_ to apply to the CSS property.\r\n\r\n- The map will be conformed by a list of properties (a name of your choosing) and their values (the CSS variable), meaning that you **can not** use `'background-color'` as the value, but `'--bg-color'` instead.\r\n- Those values will be applied as the final CSS property.\r\n- For those values that you need to be numeric, for internal calculation purposes within your library, but applied as \"px\" or \"ms\" in the final CSS, you can make use of the `suffix`. See the use of `borderSize` and `fadeMs` in [the Color Scheme Config Example](#the-color-scheme-config-example).\r\n\r\n#### The Color Scheme Config: CSS Tag ID\r\n\r\nThe ID to apply to the `<style>` tag.\r\n\r\n> **NOTE:** If no value is passed, a generic one will be assigned based on the provided selector.\r\n\r\n- **Config Property:** `cssTagID` (_optional_).\r\n- **Type:** `string`.\r\n\r\n### The Color Scheme Config: Styles Config\r\n\r\nThis type is meant to be implemented within a custom library, so you can give the user the power to choose among two more options.\r\n\r\n- **Type:** `ColorSchemeStylesConfig`.\r\n- **Properties:**\r\n  - [`forceScheme`](#the-color-scheme-config-force-scheme).\r\n\r\n#### The Color Scheme Config: Force Scheme\r\n\r\nTo force the use of the given Color Scheme.\r\n\r\n- **Config Property:** `forceScheme`.\r\n- **Type:** [`ColorScheme`](#the-color-scheme).\r\n- **Default:** _unset_.\r\n\r\n## The Service\r\n\r\n### The Service: Public Methods, Properties, Getters and Setters\r\n\r\n| Name | Type | Of Type | Description |\r\n| :--- | :--- | :------ | :---------- |\r\n| `colorSchemeChanged` | `property` | `BehaviorSubject<ColorSchemeChange>` | See [the Color Scheme Change](#the-service-color-scheme-change) |\r\n| `isSystemThemeDark` | `get` | `boolean` | The know if the current scheme from the system is set to `dark` |\r\n| `colorSchemes` | `get` | [`ColorSchemeItem[]`](#the-global-config-new-scheme-item) | The saved color schemes |\r\n| `userChosen` | `get`/`set` | [`ColorScheme`](#the-color-scheme) | See [the Service: User Chosen](#the-service-user-chosen) |\r\n| `allowUserToChangeScheme` | `get` | `boolean` | See [the Config: Allow User to Change Scheme](#the-global-config-allow-user-to-change-scheme) |\r\n| `rootConfig` | `get` | [`ColorSchemeConfig`](#the-color-scheme-config) | The root (global) configuration |\r\n| `getCurrentScheme()` | `method` | [`ColorSchemeProperties`](#color-scheme-properties-type) | See [the Get Current Scheme method](#the-service-getcurrentscheme-method) |\r\n| `getConfig()` | `method` | [`ColorSchemeConfig`](#the-color-scheme-config) | See [the Get Config method](#the-service-getconfig-method) |\r\n| `setConfig()` | `method` | `void` | See [the Set Config method](#the-service-setconfig-method) |\r\n| `updateConfig()` | `method` | `void` | See [the Update Config method](#the-service-updateconfig-method) |\r\n| `getCustomStyles()` | `method` | `CSSStyleDeclaration` | See [the Get Custom Styles method](#the-service-getcustomstyles-method) |\r\n\r\n#### The Service: Color Scheme Change\r\n\r\nTo subscribe and get notified when the color scheme has changed, either by the user or the system.\r\n\r\n- **Property:** `colorSchemeChanged`.\r\n- **Type:** `ColorSchemeChange`.\r\n- **Properties:**\r\n  - `colorSchemePrevious` of type [`ColorScheme`](#the-color-scheme): The previous scheme.\r\n  - `colorSchemeCurrent` of type [`ColorScheme`](#the-color-scheme): The current scheme.\r\n  - `changedBy` of type `'user'` or `'system'`: _Who_ changed the scheme.\r\n\r\n#### The Service: User Chosen\r\n\r\nThe color scheme the user has chosen.\r\n\r\n- **Property:** `userChosen`.\r\n- **Type:** `ColorScheme`.\r\n  - **Get:** Either the code-name of the chosen color scheme or `auto`, which means that will use the system's.\r\n  - **Set:** To set what the user has chosen.\r\n    - If `'auto'` is set (as by default):\r\n      - The current system scheme will be applied.\r\n      - An event listener will start listening for changes from the system to apply it as soon as it gets triggered.\r\n    - If a _code-name_ is set:\r\n      - The event listener will be stopped.\r\n\r\n#### The Service: `getCurrentScheme()` Method\r\n\r\nTo get the current Color Scheme values for a given selector.\r\n\r\nAccepts a single parameter `selector` of type `string` and returns an object with all the properties of the scheme of type [`ColorSchemeProperties`](#color-scheme-properties-type).\r\n\r\n#### The Service: `getConfig()` Method\r\n\r\nTo get the config from a given selector.\r\n\r\nAccepts a single parameter `selector` of type `string` and returns the config object of type [`ColorSchemeConfig`](#the-color-scheme-config).\r\n\r\n#### The Service: `setConfig()` Method\r\n\r\nTo set a new config.\r\n\r\nAccepts a single parameter `config` of type [`ColorSchemeConfig`](#the-color-scheme-config).\r\n\r\n#### The Service: `updateConfig()` Method\r\n\r\nTo update a config with new values from a given selector.\r\n\r\nIf you are creating your own component/library with custom color schemes, you can use this method to update it whenever you need.\r\n\r\nAccepts three parameters:\r\n\r\n- `selector` of type `string`.\r\n- `config` of type `any`, [`ColorSchemeProperties`](#color-scheme-properties-type) or [`ColorSchemesObject`](#color-scheme-object-type).\r\n- `colorSchemesProperty` (_optional_) of type `string`:\r\n  - To specify a custom property within the given `config` (if type `any` was provided) to search for the properties to update.\r\n\r\n#### The Service: `getCustomStyles()` Method\r\n\r\nCompares the given config against the saved Scheme (based on the given selector) and returns a string with all the CSS properties and values that are different, ready to be inserted as inline `style` of an element of your choosing.\r\n\r\nThe method accepts three parameters:\r\n\r\n- `selector` of type `string`.\r\n- `customConfig` of type [`ColorSchemeProperties`](#color-scheme-properties-type):\r\n  - The custom properties to compare against the ones already saved.\r\n- `fromScheme` of type `ColorScheme` (_optional_):\r\n  - To get the properties from this specific scheme, if it doesn't exist, `'light'` value will be used instead.\r\n\r\nThis serves the purpose to allow the user to customize a single instance of that selector, while the rest will use the global values set for it.\r\n\r\n> **NOTE:** If, within the `customConfig`, one or more of the values are equal to the global's, they will be ignored and won't be returned, since they are already set in the `<style>` tag created when [the `setColorScheme()` method](#the-setcolorscheme-method) was invoked the first time.\r\n\r\nCheck [the Get Custom Styles example](#get-custom-styles-example).\r\n\r\n#### The Service: `getAttributeSelector()` Method\r\n\r\nReturns an object with the current (or given) Color Scheme value and attribute selector to implement locally on any of your elements.\r\n\r\nThe method accepts a single parameter `forceScheme` (_optional_) of type `ColorScheme` and returns an object with the `attribute` and its `value`.\r\n\r\n> **NOTE:** The `attribute` will be the result of what you had configured when using [the Attribute Selector Match](#the-global-config-attribute-selector-match).\r\n>\r\n> - Assuming the current Color Scheme is `dark`:\r\n>\r\n>   ```typescript\r\n>   const { attribute, value } = this.colorSchemeService.getAttributeSelector();\r\n>   // attribute => 'color-scheme'\r\n>   // value => 'dark'\r\n>   ```\r\n>\r\n>   Then you can add the attribute to your element and the result will be `[color-scheme=\"dark\"]`.\r\n>\r\n> - When we provide a value to the `forceScheme` parameter:\r\n>\r\n>   ```typescript\r\n>   const { attribute, value } = this.colorSchemeService.getAttributeSelector('red-velvet');\r\n>   // attribute => 'color-scheme'\r\n>   // value => 'red-velvet'\r\n>   ```\r\n\r\n## The Components\r\n\r\nTwo basic components to allow the user to change the Color Scheme on the page.\r\n\r\n> **NOTE:** For both components:\r\n>\r\n> - The `disabled` state will depend not only on the `@Input()` but also on the [`allowUserToChangeScheme`](#the-global-config-allow-user-to-change-scheme) property set on the global config.\r\n\r\n### The Component: Dropdown Selector\r\n\r\nA simple dropdown selector to allow the user to choose between any of the basic, custom or auto (system's) schemes.\r\n\r\n- **Selector:** `'a11y-color-scheme-select'`.\r\n- **Inputs:**\r\n\r\n  | Name | Type | Default |\r\n  | :--- | :--- | :------ |\r\n  | `label` | `string` | `'Color Scheme'` |\r\n  | `disabled` | `boolean` | `false` |\r\n\r\n#### Dropdown Selector - Default Use\r\n\r\n```html\r\n<a11y-color-scheme-select>\r\n</a11y-color-scheme-select>\r\n```\r\n\r\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/color-scheme/src/lib/images/example-select-default-light.jpg)\r\n\r\n#### Dropdown Selector - Custom Label\r\n\r\nFor this example, two new Color Schemes were added using [the Global Config New Schemes](#the-global-config-new-schemes) (see also [the New Schemes Example](#the-new-schemes-example)).\r\n\r\n```html\r\n<a11y-color-scheme-select label=\"Pick a Scheme\">\r\n</a11y-color-scheme-select>\r\n```\r\n\r\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/color-scheme/src/lib/images/example-select-custom-light.jpg)\r\n\r\n### The Component: Checkbox\r\n\r\nA simple checkbox to allow the user to choose between `light` or `dark` schemes.\r\n\r\n- **Selector:** `'a11y-color-scheme-checkbox'`.\r\n- **Inputs:**\r\n\r\n  | Name | Type | Default |\r\n  | :--- | :--- | :------ |\r\n  | `label` | `string` | `'Dark Mode'` |\r\n  | `disabled` | `boolean` | `false` |\r\n\r\n#### Checkbox - Default Use\r\n\r\n```html\r\n<a11y-color-scheme-checkbox>\r\n</a11y-color-scheme-checkbox>\r\n```\r\n\r\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/color-scheme/src/lib/images/example-checkbox-default-light.jpg)\r\n\r\n```html\r\n<a11y-color-scheme-checkbox [disabled]=\"true\">\r\n</a11y-color-scheme-checkbox>\r\n```\r\n\r\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/color-scheme/src/lib/images/example-checkbox-default-disabled-light.jpg)\r\n\r\n## Examples for your App\r\n\r\n### The Attribute Selector Match Example\r\n\r\n> **NOTE:** If you are using Bootstrap 5.3 (or above), they make use of `'data-bs-theme'` attribute selector, so you can change it to that value.\r\n\r\nLet's say you want to define the default scheme to `'dark'`:\r\n\r\n```typescript\r\nA11yColorSchemeModule.rootConfig('dark'),\r\n```\r\n\r\nWill result on:\r\n\r\n```html\r\n<html lang=\"en\" color-scheme=\"dark\">\r\n    ...\r\n</html>\r\n```\r\n\r\nNow, you want to implement your own custom CSS selector for your themes called `'current-theme'` and set the default scheme as `'red-velvet'`:\r\n\r\n```typescript\r\nA11yColorSchemeModule.rootConfig({\r\n    useScheme: 'red-velvet',\r\n    attributeSelectorMatch: 'current-theme'\r\n}),\r\n```\r\n\r\nWill result on:\r\n\r\n```html\r\n<html lang=\"en\" current-theme=\"red-velvet\">\r\n    ...\r\n</html>\r\n```\r\n\r\n### The New Schemes Example\r\n\r\nNow you want to define a new color scheme \"Red Velvet\" for your project and use it as default:\r\n\r\n```typescript\r\nA11yColorSchemeModule.rootConfig({\r\n    useScheme: 'red-velvet', // to use it as default\r\n    newSchemes: [\r\n        {\r\n            value: 'red-velvet',\r\n            name: 'Red Velvet',\r\n            scheme: {\r\n                a11yBackgroundColor: '#FFEEEE',\r\n                a11yTextColor: '#590811',\r\n                ...\r\n            },\r\n        }\r\n    ],\r\n}),\r\n```\r\n\r\n### Updating the Defaults Example\r\n\r\nIn the next couple of examples you'll see how to update the name and/or values for the default color schemes.\r\n\r\n> **NOTE:** This applies to use the library within your main app through the [`defaults` property](#the-global-config-defaults) inside the `rootConfig()` static method.\r\n\r\nYou can:\r\n\r\n- [Change the names of the Schemes](#changing-the-default-names-example).\r\n- [Change the default values of the Schemes](#changing-the-default-values-example).\r\n- [Add generic styles](#add-generic-styles-example), usually for all the non color related styles.\r\n\r\n#### Changing the Default Names Example\r\n\r\nLets say your website is in spanish, so you want to provide the right translation for the generic names for when you use [the Dropdown Selector component](#the-component-dropdown-selector) or at any moment you want to consume the configured color schemes list of items by using the `colorSchemes` getter from [the service](#the-service-public-methods-properties-getters-and-setters).\r\n\r\n```typescript\r\nA11yColorSchemeModule.rootConfig({\r\n    defaults: {\r\n        light: { name: 'Claro' },\r\n        dark: { name: 'Oscuro' },\r\n        auto: { name: 'Igual al Sistema' },\r\n    },\r\n}),\r\n```\r\n\r\n```html\r\n<a11y-color-scheme-select label=\"Esquema de Color\">\r\n</a11y-color-scheme-select>\r\n```\r\n\r\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/color-scheme/src/lib/images/example-select-spanish-light.jpg)\r\n\r\n#### Changing the Default Values Example\r\n\r\nYou might not like one or more of the default values already set for the schemes `light` or `dark`. See [the pre-established properties and values within the styles map](#global-config-pre-established-properties).\r\n\r\nNow you want to change the value for the text color, which comes with a default value of `'#222'` for the `light` scheme.\r\n\r\nThe property to update within the object would be `a11yTextColor`.\r\n\r\n```typescript\r\nA11yColorSchemeModule.rootConfig({\r\n    defaults: {\r\n        light: { a11yTextColor: '#111' },\r\n    },\r\n}),\r\n```\r\n\r\nWhich will result on:\r\n\r\n```css\r\n:root {\r\n    --a11y-text-color-light: #111;\r\n    ...\r\n}\r\n```\r\n\r\n#### Add Generic Styles Example\r\n\r\nIn here you can set anything that it's not color related, like a border width or a timeout for an animation.\r\n\r\nAs explained in [setting the defaults config](#the-global-config-defaults), you have to set variables only, i.e.:\r\n\r\nSo, for instance:\r\n\r\n```typescript\r\nA11yColorSchemeModule.rootConfig({\r\n    defaults: {\r\n        generics: {\r\n            '--app-header-animation-ms': '200ms',\r\n            '--app-header-txt-size': '16px',\r\n        },\r\n    },\r\n}),\r\n```\r\n\r\nWill result on:\r\n\r\n```css\r\n:root {\r\n    --app-header-animation-ms: 200ms;\r\n    --app-header-txt-size: 16px;\r\n    ...\r\n}\r\n```\r\n\r\nAnd you can use it like:\r\n\r\n```css\r\nheader {\r\n    transition: background-color var(--app-header-animation-ms) ease-in-out;\r\n    font-size: var(--app-header-txt-size);\r\n}\r\n```\r\n\r\n### Appending New Styles Example\r\n\r\nTo provide more versatility to the [6 pre-established styles](#global-config-pre-established-properties) the library provides, you can add as many as you need for your project.\r\n\r\nLets say you want to provide styles for your header.\r\n\r\n> **IMPORTANT:** Since you are actually adding new properties to the main map, these are not known by the library, so you **will** have to provide them for all the available schemes (defaults and new).\r\n>\r\n> **NOTE:** In the following example we'll making use of the variable `'--app-header-animation-ms'` within the map. The `light` scheme will have a value and the `dark` another, just to play a bit with our options and you can see the results.\r\n\r\n```typescript\r\nA11yColorSchemeModule.rootConfig({\r\n    // The new map of properties to append to the current one\r\n    appendStylesMap: {\r\n        appHeaderTextColor: '--app-header-txt-color',\r\n        appHeaderBackgroundColor: '--app-header-bg-color',\r\n        appHeaderAnimationTimeout: {\r\n            property: '--app-header-animation-ms',\r\n            suffix: 'ms',\r\n        },\r\n    },\r\n    // The pre-established Color Schemes\r\n    defaults: {\r\n        light: {\r\n            appHeaderTextColor: '#333',\r\n            appHeaderBackgroundColor: '#DDD',\r\n            appHeaderAnimationTimeout: 150,\r\n        },\r\n        dark: {\r\n            appHeaderTextColor: '#DDD',\r\n            appHeaderBackgroundColor: '#333',\r\n            appHeaderAnimationTimeout: 250,\r\n        },\r\n    },\r\n    // Continuing the new 'red-velvet' Color Scheme\r\n    newSchemes: [\r\n        {\r\n            value: 'red-velvet',\r\n            name: 'Red Velvet',\r\n            useMissingPropsFrom: 'dark',\r\n            scheme: {\r\n                ..., // To set the pre-established properties, if needed\r\n                appHeaderTextColor: '#F9BBBB',\r\n                appHeaderBackgroundColor: '#590811',\r\n            },\r\n        }\r\n    ],\r\n}),\r\n```\r\n\r\n> **NOTE:** As you can see, in the new addition of the 'red-velvet' scheme, we never defined the `appHeaderAnimationTimeout` property, and we established `useMissingPropsFrom: 'dark'`, which will tell the library to look and use for that _missing_ property within the `'dark'` theme.\r\n\r\nThe CSS will result on:\r\n\r\n```css\r\n:root {\r\n    --app-header-animation-ms-light: 150ms;\r\n    --app-header-bg-color-light: #DDD;\r\n    --app-header-txt-color-light: #333;\r\n    ...\r\n    --app-header-animation-ms-dark: 250ms;\r\n    --app-header-bg-color-dark: #333;\r\n    --app-header-txt-color-dark: #DDD;\r\n    ...\r\n    /*\r\n        As explained above, since the property \"appHeaderAnimationTimeout\" was\r\n        not provided for \"red-velvet\" Scheme and \"useMissingPropsFrom\" was set\r\n        to \"dark\", the value will be using dark's theme value.\r\n    */\r\n    --app-header-animation-ms-red-velvet: var(--app-header-animation-ms-dark);\r\n    --app-header-bg-color-red-velvet: #590811;\r\n    --app-header-txt-color-red-velvet: #F9BBBB;\r\n    ...\r\n}\r\n\r\n[color-scheme=\"light\"] {\r\n    --app-header-animation-ms: var(--app-header-animation-ms-light);\r\n    --app-header-bg-color: var(--app-header-bg-color-light);\r\n    --app-header-txt-color: var(--app-header-txt-color-light);\r\n    ...\r\n}\r\n[color-scheme=\"dark\"] {\r\n    /* This variable will retrieve the dark's theme value, as configured. */\r\n    --app-header-animation-ms: var(--app-header-animation-ms-dark);\r\n    --app-header-bg-color: var(--app-header-bg-color-dark);\r\n    --app-header-txt-color: var(--app-header-txt-color-dark);\r\n    ...\r\n}\r\n[color-scheme=\"red-velvet\"] {\r\n    --app-header-animation-ms: var(--app-header-animation-ms-red-velvet, var(--app-header-animation-ms-light));\r\n    --app-header-bg-color: var(--app-header-bg-color-red-velvet, var(--app-header-bg-color-light));\r\n    --app-header-txt-color: var(--app-header-txt-color-red-velvet, var(--app-header-txt-color-light));\r\n    ...\r\n}\r\n```\r\n\r\nAnd now you can easily use those variables inside your CSS without worrying on establishing any crazy rules for each color scheme:\r\n\r\n```css\r\n.header {\r\n    background-color: var(--app-header-bg-color);\r\n    transition: background-color var(--app-header-animation-ms) ease-in-out;\r\n\r\n    a {\r\n        color: var(--app-header-txt-color);\r\n    }\r\n}\r\n```\r\n\r\nThe results for `'light'` Color Scheme:\r\n\r\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/color-scheme/src/lib/images/example-custom-properties-header-light.jpg)\r\n\r\nThe results for `'dark'` Color Scheme:\r\n\r\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/color-scheme/src/lib/images/example-custom-properties-header-dark.jpg)\r\n\r\nThe results for `'red-velvet'` Color Scheme:\r\n\r\n![\"\"](https://raw.githubusercontent.com/LDV2k3/a11y-libraries/refs/heads/master/projects/a11y-ngx/color-scheme/src/lib/images/example-custom-properties-header-red-velvet.jpg)\r\n\r\n## Examples for your Custom Library\r\n\r\n### The Color Scheme Config Example\r\n\r\nLet's say you want to create a library with custom background color, text color, fade timeout and border size for each of your schemes (`light`, `dark` and `red-velvet`), you should create the styles and map objects as follows:\r\n\r\n**The Styles Map Object:**\r\n\r\nIn here you will configure the property (to map inside the `styles` object) and the CSS variable name of what you need.\r\n\r\n> **IMPORTANT:** If you use the value as a normal CSS property like `border-width`, it will be ignored. Please use only variables, like `--border-width`.\r\n\r\n```typescript\r\nconst STYLES_MAP: ColorSchemeCSSMap = {\r\n    backgroundColor: '--bg-color',\r\n    textColor: '--txt-color',\r\n    borderStyle: 'border-style', // it'll be ignored!\r\n    borderSize: {\r\n        property: '--border-width',\r\n        suffix: 'px',\r\n    },\r\n    fadeMs: {\r\n        property: '--fade-ms',\r\n        suffix: 'ms',\r\n    },\r\n};\r\n```\r\n\r\n**The Styles Object:**\r\n\r\n> **NOTE:** Remember that, in this case, the _border size_ and _fade timeout_ are generic to your styles, you can set them into the `generics` group and the rest, since they are color related, into the `schemes` group. See the [`ColorSchemesObject`](#color-scheme-object-type).\r\n\r\n```typescript\r\nconst STYLES: ColorSchemesObject = {\r\n    generics: {\r\n        borderStyle: 'dashed', // it'll be ignored!\r\n        borderSize: 1,\r\n        fadeMs: 200,\r\n    },\r\n    schemes: {\r\n        light: {\r\n            backgroundColor: '#DDD',\r\n            textColor: '#999',\r\n        },\r\n        dark: {\r\n            backgroundColor: '#999',\r\n            textColor: '#DDD',\r\n        },\r\n        'red-velvet': {\r\n            backgroundColor: '#BE1F31',\r\n            textColor: '#FFD9A1',\r\n        },\r\n    },\r\n};\r\n```\r\n\r\n**The Import of the Color Scheme Module in your Library:**\r\n\r\n```typescript\r\n@ngModule({\r\n    imports: [\r\n        A11yColorSchemeModule.setColorScheme({\r\n            selector: 'my-custom-component', // your component's selector\r\n            styles: STYLES,\r\n            stylesMap: STYLES_MAP,\r\n            cssTagID: 'my-custom-component-styles',\r\n        }),\r\n    ],\r\n    ...\r\n})\r\n```\r\n\r\n**The Styles Results:**\r\n\r\n```html\r\n<style id=\"my-custom-component-styles\">\r\n/* Generics */\r\nmy-custom-component {\r\n    --fade-ms: 200ms;\r\n    --border-width: 1px;\r\n}\r\n/* Light Color Scheme */\r\nmy-custom-component,\r\n[color-scheme=\"light\"] my-custom-component:not([color-scheme]),\r\nmy-custom-component[color-scheme=\"light\"] {\r\n    color-scheme: light;\r\n    --bg-color: #DDD;\r\n    --txt-color: #202020;\r\n}\r\n/* Dark Color Scheme */\r\n[color-scheme=\"dark\"] my-custom-component:not([color-scheme]),\r\nmy-custom-component[color-scheme=\"dark\"] {\r\n    color-scheme: dark;\r\n    --bg-color: #202020;\r\n    --txt-color: #DDD;\r\n}\r\n/* Red Velvet Color Scheme */\r\n[color-scheme=\"red-velvet\"] my-custom-component:not([color-scheme]),\r\nmy-custom-component[color-scheme=\"red-velvet\"] {\r\n    color-scheme: normal;\r\n    --bg-color: #BE1F31;\r\n    --txt-color: #FFD9A1;\r\n}\r\n</style>\r\n```\r\n\r\n### Get Custom Styles Example\r\n\r\nLets continue with [the Color Scheme Config example](#the-color-scheme-config-example).\r\n\r\nIn your component, let's say you are allowing three inputs:\r\n\r\n```typescript\r\n@Input() bgColor: string;\r\n@Input() textColor: string;\r\n@Input() fadeMs: number;\r\n```\r\n\r\nNow, when the view inits, you can establish those custom styles to your main element:\r\n\r\n```typescript\r\n@HostBinding('style') private customVariables: CSSStyleDeclaration;\r\n\r\nconstructor(private colorSchemeService: ColorSchemeService) {}\r\n\r\nngAfterViewInit(): void {\r\n    const config = {\r\n        // remember that the config's property needs to match the one\r\n        // from the styles map you established when using setColorScheme()\r\n        backgroundColor: this.bgColor,\r\n        textColor: this.textColor,\r\n        fadeMs: this.fadeMs,\r\n    } as ColorSchemeProperties;\r\n\r\n    this.customVariables = this.colorSchemeService.getCustomStyles(\r\n        'my-custom-component',\r\n        config\r\n    );\r\n}\r\n```\r\n\r\nThis way, when the user sets the values for each input as:\r\n\r\n```html\r\n<my-custom-component\r\n    bgColor=\"#000\"\r\n    textColor=\"white\"\r\n    fadeMs=\"300\">\r\n</my-custom-component>\r\n```\r\n\r\nYour main component will be rendered as follows:\r\n\r\n```html\r\n<my-custom-component style=\"\r\n    --bg-color: #000;\r\n    --txt-color: white;\r\n    --fade-ms: 300ms;\">\r\n</my-custom-component>\r\n```\r\n\r\n...and your stylesheet will do the rest, since you are using CSS variables and will take those from this specific instance of the component.\r\n","readmeFilename":"README.md"}