{"_id":"ngx-themes-plus","_rev":"4-cd9e3a7d7df81c95e59467773c1dd83f","name":"ngx-themes-plus","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0-rc1":{"name":"ngx-themes-plus","version":"1.0.0-rc1","description":"Perfect Angular theme support in two lines of code.","keywords":["themes","styles","dark-mode","color-scheme","theme-switcher"],"author":"Fabian Zankl","license":"MIT","homepage":"https://github.com/fzankl/ngx-themes-plus#readme","repository":{"type":"git","url":"git+https://github.com/fzankl/ngx-themes-plus.git"},"bugs":{"url":"https://github.com/fzankl/ngx-themes-plus/issues"},"peerDependencies":{"@angular/core":">=15.0.3","rxjs":"^6.6.7 || ^7.8.0"},"dependencies":{"tslib":"^2.5.0"},"module":"fesm2015/ngx-themes-plus.mjs","es2020":"fesm2020/ngx-themes-plus.mjs","esm2020":"esm2020/ngx-themes-plus.mjs","fesm2020":"fesm2020/ngx-themes-plus.mjs","fesm2015":"fesm2015/ngx-themes-plus.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/ngx-themes-plus.mjs","es2020":"./fesm2020/ngx-themes-plus.mjs","es2015":"./fesm2015/ngx-themes-plus.mjs","node":"./fesm2015/ngx-themes-plus.mjs","default":"./fesm2020/ngx-themes-plus.mjs"}},"sideEffects":false,"_id":"ngx-themes-plus@1.0.0-rc1","_integrity":"sha512-09dabvsdhzP1ZVoe8ZKA8Pd5QV+/LeEoWnVRGzpJPQMVZ7Pk3cpEuYSRupu1W2Ir4V8B23a67+OsdAsFqONFfA==","_resolved":"C:\\Daten\\Develop\\ngx-themes-plus\\dist\\ngx-themes-plus\\ngx-themes-plus-1.0.0-rc1.tgz","_from":"file:ngx-themes-plus-1.0.0-rc1.tgz","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-09dabvsdhzP1ZVoe8ZKA8Pd5QV+/LeEoWnVRGzpJPQMVZ7Pk3cpEuYSRupu1W2Ir4V8B23a67+OsdAsFqONFfA==","shasum":"b564c0f5e7847a002ab38a36cc15181771b77388","tarball":"https://registry.npmjs.org/ngx-themes-plus/-/ngx-themes-plus-1.0.0-rc1.tgz","fileCount":27,"unpackedSize":170591,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC42+VEMwrpK178uXH6NsEJi1ICX7GJnqc0xkE+qY3HoAiEA7B39Jqxmdsue3fm31dTwdyHdaglecKJhKxBd7HyqCTo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj+6CZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7bA/9HKMrSaF/ixEZ9YjHideHE89HPLh71PoT8lzyVPT4Py4GigOT\r\nCgXdW1gNqz3PPFkP/xw1nX29zQi9wPSXWY8UKZN16vSnT5+ina+Sog6PuRx7\r\nwzGKRjwPxW7gyBxSI0gSjaTlMRCGBf6ljBDCnqD+rVr8pnj2RXnOXGEKJn0D\r\nDwbVy8IEM8JobhCu6qqXeNNgloF+6rzeat/UBDw+z2L0C+YORksonmkE4aEx\r\nQCxgNRgHvqtdnHs8ogPQfLbaX1/eRLklJe13sJOQlznHQTtMcN1UBObkz8P6\r\nn+mEdDwEx7oO9rGML3i/0FHb0ymNcs2f4WreYgpwb4psYrAPeT1YeAWMIjIX\r\nQbcskMfeQdqiLwPhhgXcgwO13AaHXOhT/hxJoTdrJeODeqkKxfXty9Ji13p0\r\n5w4Isd4odLixtBgHR3H/RRs3KEsZLJX+Bqz6WAGmIUxqD21MbjCOcDZfG/ZS\r\nJikVTq7LI7HC4WN8xHP3zvaDjoHtAnkKEMwdpxSK0uRRmyAgTf8mNpu+N8Il\r\nJaT1JH/PRBXGWsJ1nA+QSYLa9RpxFDm613dIcdwvaOi9OtOsMr4LYWZM61Z3\r\nS3diANs5JdCHOUfPPTab9BPLWRaB0mnbRRrkq06b56sXlW2bsMTeZqlNoOZX\r\nBzLc+/i4tUozvBGrVv5urBajL6fh6pjM8Lg=\r\n=m52a\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"zanfab","email":"fabian.zankl@gmail.com"},"directories":{},"maintainers":[{"name":"zanfab","email":"fabian.zankl@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-themes-plus_1.0.0-rc1_1677435033653_0.32718085029107535"},"_hasShrinkwrap":false},"1.0.0-rc2":{"name":"ngx-themes-plus","version":"1.0.0-rc2","description":"Perfect Angular theme support in two lines of code.","keywords":["themes","styles","dark-mode","color-scheme","theme-switcher"],"author":"Fabian Zankl","license":"MIT","homepage":"https://github.com/fzankl/ngx-themes-plus#readme","repository":{"type":"git","url":"git+https://github.com/fzankl/ngx-themes-plus.git"},"bugs":{"url":"https://github.com/fzankl/ngx-themes-plus/issues"},"peerDependencies":{"@angular/core":">=15.0.3","rxjs":"^6.6.7 || ^7.8.0"},"dependencies":{"tslib":"^2.5.0"},"module":"fesm2015/ngx-themes-plus.mjs","es2020":"fesm2020/ngx-themes-plus.mjs","esm2020":"esm2020/ngx-themes-plus.mjs","fesm2020":"fesm2020/ngx-themes-plus.mjs","fesm2015":"fesm2015/ngx-themes-plus.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/ngx-themes-plus.mjs","es2020":"./fesm2020/ngx-themes-plus.mjs","es2015":"./fesm2015/ngx-themes-plus.mjs","node":"./fesm2015/ngx-themes-plus.mjs","default":"./fesm2020/ngx-themes-plus.mjs"}},"sideEffects":false,"_id":"ngx-themes-plus@1.0.0-rc2","_integrity":"sha512-VH8zwe+uKXJZmtpYtsYANugr9fqQMcIWqXVOiwk3LbRFe94TLJiDddVu+25eR4/f0j+QlILmiV7KCTdU7EdZZA==","_resolved":"C:\\Daten\\Develop\\ngx-themes-plus\\dist\\ngx-themes-plus\\ngx-themes-plus-1.0.0-rc2.tgz","_from":"file:ngx-themes-plus-1.0.0-rc2.tgz","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-VH8zwe+uKXJZmtpYtsYANugr9fqQMcIWqXVOiwk3LbRFe94TLJiDddVu+25eR4/f0j+QlILmiV7KCTdU7EdZZA==","shasum":"520ba7321a6a3d9c106222ed8f789167be86935f","tarball":"https://registry.npmjs.org/ngx-themes-plus/-/ngx-themes-plus-1.0.0-rc2.tgz","fileCount":28,"unpackedSize":178061,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICN45O9eq6yUOrhl1QkbpXjYKvKSjnWzUHzHD6Rr3RBbAiAX6BYIUsiYEAexB08tX0aiw4A+aXYYirjWfmmIi2OUPg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/PkqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonQg//WB2n2F0oZEbb0nifBIGf1PuCl3Qn5YKt6YRkRFikk3yQTjtY\r\nuixjZL9uqnFtz5J74n6X3Nwbltet+2az2FTaTwton3itzQIPKyJTWm12wmbr\r\ncMQoCfCK95BKtW0Bez86OKs/9tE1Aov/Poqwjt9I8QQ09g0dmkpZlld/mBvc\r\nWHRnzfwmY3kUzOboP6k+tpt3BNNptg4wF+gf+1nNiWE2YAGmOtRB+kSJZdfA\r\nOJJ9r4N/U4K/TA9sP1A957f9n2SITN++R6XLYwdBnGG+bcV5gk6IvQH5+lBf\r\nhuOV8n98vZM/ihiTd1j2JX7KrQfKgpgijJv8cVTN0ur3kJoiw+aC8253+TJg\r\nlmVt8FI7ySeW61DCUoRmqneMAfL8l8Glqx2J/STZ9Z9RTjwKu9+j97BF8lly\r\nJln8JoXKD/Gzf/93AyZk90IL0wh8CG0U4XcJ/mI/eTwySVo/Zp3FhNvzqI7/\r\nAy5t/r/ywfnxqyp7jm/fkllXGVFMFZ+stjoy8z/ioD9EUeiZPCOskeLDF4Gt\r\nsPWq5BC/9HISGJXZQnZX/jNx0Aube71nT6rZKHE7DRZA3hQTI172fBilHbMS\r\nJg2kZdIYNg/zILra5m9Xf0Ji5V1ojGpTvj1Zg4fEOpgVF1UkqJsKuu+JnZrC\r\nkSg0d0f+VP7IoNC+SLStzHb8pjI3/orsPUw=\r\n=dsoT\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"zanfab","email":"fabian.zankl@gmail.com"},"directories":{},"maintainers":[{"name":"zanfab","email":"fabian.zankl@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-themes-plus_1.0.0-rc2_1677523242533_0.2604464231967878"},"_hasShrinkwrap":false},"1.0.0-rc3":{"name":"ngx-themes-plus","version":"1.0.0-rc3","description":"Perfect Angular theme support in two lines of code.","keywords":["themes","styles","dark-mode","color-scheme","theme-switcher"],"author":"Fabian Zankl","license":"MIT","homepage":"https://github.com/fzankl/ngx-themes-plus#readme","repository":{"type":"git","url":"git+https://github.com/fzankl/ngx-themes-plus.git"},"bugs":{"url":"https://github.com/fzankl/ngx-themes-plus/issues"},"peerDependencies":{"@angular/core":">=15.0.3","rxjs":"^6.6.7 || ^7.8.0"},"dependencies":{"tslib":"^2.5.0"},"module":"fesm2015/ngx-themes-plus.mjs","es2020":"fesm2020/ngx-themes-plus.mjs","esm2020":"esm2020/ngx-themes-plus.mjs","fesm2020":"fesm2020/ngx-themes-plus.mjs","fesm2015":"fesm2015/ngx-themes-plus.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/ngx-themes-plus.mjs","es2020":"./fesm2020/ngx-themes-plus.mjs","es2015":"./fesm2015/ngx-themes-plus.mjs","node":"./fesm2015/ngx-themes-plus.mjs","default":"./fesm2020/ngx-themes-plus.mjs"}},"sideEffects":false,"_id":"ngx-themes-plus@1.0.0-rc3","_integrity":"sha512-Vw8La6DvgBbjPPhvzb44zRdvm5BnxPKS8HEfRwsOlJfM7211y6Cn/C9cuJ1uEqYT5LH5c4KH0i5vC5Bn4gVQmA==","_resolved":"C:\\Daten\\Develop\\ngx-themes-plus\\dist\\ngx-themes-plus\\ngx-themes-plus-1.0.0-rc3.tgz","_from":"file:ngx-themes-plus-1.0.0-rc3.tgz","_nodeVersion":"16.13.1","_npmVersion":"8.1.2","dist":{"integrity":"sha512-Vw8La6DvgBbjPPhvzb44zRdvm5BnxPKS8HEfRwsOlJfM7211y6Cn/C9cuJ1uEqYT5LH5c4KH0i5vC5Bn4gVQmA==","shasum":"c3c46253248822ba6c8585e4f82f8db6683e6459","tarball":"https://registry.npmjs.org/ngx-themes-plus/-/ngx-themes-plus-1.0.0-rc3.tgz","fileCount":28,"unpackedSize":177839,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDptTA2Y5XFdoXlZTTnB7pvSJlIg4G4Ru0h1Tnpi5mZagIgcJsKxj+7HVU31no6G5qPE1y8OQOmprQW6CyEUqSZt8E="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/P5/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPzw//QIPPJ6oT5beZGtjIs6paJZjjjBqa6/BgfyQMIwaozvslPu7n\r\nd/ii8iM4+N75mja6BI5CWpN0v6+iz7+BHXMFpfyHBkCwdhjltUO0mvEDkXl9\r\ngc//KFnvpjaoie1mQuzSk1c1THmq5qTjMyKMSIu0nEL6tBSs9e7V8KjL6kTw\r\nFieUud1J2HF9PSE8wpPnwAljOCy5qqnBNyl3NSsz5ZXayxuhaZv8BgOnOE68\r\na1kb+VGAcy5R820cBauBO0ka+Vi3+MomsDZIbG1ak1LizoycKalnSHt+DCLS\r\nakcKZRXW33ULMTfv6h/ubJqHlBeX1RsycUlIAyLu2dvvX2BKKeVT5dmHtCWR\r\nnb+ZAGpxN7SezFzHygKGN2Ygnjjm+TmMnKgbYrhip0eTbubwmATW4CiuZGHF\r\nvfUAXfPzay9mtHelG2W3blMNTaJuSy+ayL4fvab53dUIW/H/pNSNu9S2J6vi\r\nQCc9Oh76g7x4CoOO1o8tiapQt8oe1cgD77a2zGrZOS3O/8CEdg5KQPkmnOsd\r\nttXH0ok+knuboZ9vtocU/3BblIkhr2oWEW0QJsBRDIr8aJPqwpjkiMd0neey\r\nYfUV5HzajLX/Z94uUthc3ivmCrS1mOH73EHIA4vt/EjqDPBLBwVByPiJRpEy\r\nZrpBy1ERAdBlv7x/iW3josym511GVVGUjoI=\r\n=vG6P\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"zanfab","email":"fabian.zankl@gmail.com"},"directories":{},"maintainers":[{"name":"zanfab","email":"fabian.zankl@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-themes-plus_1.0.0-rc3_1677524606876_0.27044231299724575"},"_hasShrinkwrap":false},"1.0.0":{"name":"ngx-themes-plus","version":"1.0.0","description":"Perfect Angular theme support in two lines of code.","keywords":["themes","styles","dark-mode","color-mode","color-scheme","theme-switcher"],"author":{"name":"Fabian Zankl"},"license":"MIT","homepage":"https://github.com/fzankl/ngx-themes-plus#readme","repository":{"type":"git","url":"git+https://github.com/fzankl/ngx-themes-plus.git"},"bugs":{"url":"https://github.com/fzankl/ngx-themes-plus/issues"},"peerDependencies":{"@angular/core":">=15.0.3","rxjs":"^6.6.7 || ^7.8.0"},"dependencies":{"tslib":"^2.5.0"},"module":"fesm2015/ngx-themes-plus.mjs","es2020":"fesm2020/ngx-themes-plus.mjs","esm2020":"esm2020/ngx-themes-plus.mjs","fesm2020":"fesm2020/ngx-themes-plus.mjs","fesm2015":"fesm2015/ngx-themes-plus.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/ngx-themes-plus.mjs","es2020":"./fesm2020/ngx-themes-plus.mjs","es2015":"./fesm2015/ngx-themes-plus.mjs","node":"./fesm2015/ngx-themes-plus.mjs","default":"./fesm2020/ngx-themes-plus.mjs"}},"sideEffects":false,"gitHead":"c3624cad834e7bd8d987331177f59edb5aac86a4","_id":"ngx-themes-plus@1.0.0","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-SEUz2Z8yxDdcvyLqimBFOvWYJzix73ARCTWYXFduP6wGLP1KP2Ofyj5MGok09BQPpwu0zzOoITKrwiPC4rkO8w==","shasum":"37f7e6964b33de69490ed8d3d510d6e7600dd37b","tarball":"https://registry.npmjs.org/ngx-themes-plus/-/ngx-themes-plus-1.0.0.tgz","fileCount":28,"unpackedSize":174617,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEH759oRvHHp7BETJHnK/2u2Dfu0Qp+TxBUi27P0tVS1AiEAjBgRXGlT4nExnGCbI6o3er2lFdpLTWt/gIL/0lHbk3M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkA4W6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq57g//T1DVBkhCTrvrEQHV9vO/y0BH+2dty4pkjeOnt3HSf5UXGKen\r\nQuwrsdmKeTeaE2nrB+SdMPF8xmgAYs1oMTefd63Rc91szyNZBTGy3Qu1Eypv\r\nYtSUtdSI1FA6LJnx9Iiph629Noo8ujVRea0DyKKNmagUI/i2SCGGjltjZ2++\r\nDuhOwhWHPzOs3aZ2+Wxqrl4ZWtU7ygjvyzs15v4TJm9KR3gMPQewxyyzx4s9\r\nWW+aQX8B2xTBw5Lun1/dIw4qAfLYHRxt2LnXCYadZtTNd+7abWd45n9iGjnE\r\nILU84KwulyG4Upbi9FGlcERNnRWYDYMvgR7N6r3XWKK43Gcau6FirJt3shmt\r\nUYvnezdY3RNXnxajlugIlm1/0B/EifdtAWOt4MsoJagO7iMbShbQTxhpFO+k\r\nAXPMPdWzgP7ysOH9858u8BAWijMJoexJhgdV9jpf2z3w3VFPaZNB4p2o3PN7\r\nXBL6WJzOjEIYQxZiCXq/iRjZbM2jc1H6JFEIkumayuXxNCa/3faxbI9TXwgJ\r\ntgDgCEOOY8s0wuNM+o5+F05lf1vXRJau20uieR15PqcaRcJzWQoGJMNfSzZO\r\nco4nVuaZqsW2/VtZZJvvEO1FmyLvextcf1j9RmBXSPR8G8hpa6oma/hgErW5\r\nUMpvXxrCB5SHKHz5ppCwyS+ozf9c7o1sFyA=\r\n=eUVH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"zanfab","email":"fabian.zankl@gmail.com"},"directories":{},"maintainers":[{"name":"zanfab","email":"fabian.zankl@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-themes-plus_1.0.0_1677952442420_0.26595664282897036"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-26T18:10:33.652Z","1.0.0-rc1":"2023-02-26T18:10:33.842Z","modified":"2023-03-04T18:01:02.093Z","1.0.0-rc2":"2023-02-27T18:40:42.718Z","1.0.0-rc3":"2023-02-27T19:03:27.093Z","1.0.0":"2023-03-04T17:54:02.581Z"},"maintainers":[{"name":"zanfab","email":"fabian.zankl@gmail.com"}],"description":"Perfect Angular theme support in two lines of code.","homepage":"https://github.com/fzankl/ngx-themes-plus#readme","keywords":["themes","styles","dark-mode","color-mode","color-scheme","theme-switcher"],"repository":{"type":"git","url":"git+https://github.com/fzankl/ngx-themes-plus.git"},"author":{"name":"Fabian Zankl"},"bugs":{"url":"https://github.com/fzankl/ngx-themes-plus/issues"},"license":"MIT","readme":"<div align=\"center\">\n  <img alt=\"Shows the ngx-themes-plus logo.\" title=\"ngx-themes-plus\" src=\"./assets/logo_light.svg\" style=\"max-height: 175px;\">\n  <p>Perfect Angular theme support in two lines of code.<br/>Support system preferences and any other themes. Integrated theme switcher.</p>\n</div>\n\n<div align=\"center\">\n\n[![Build Status](https://github.com/fzankl/ngx-themes-plus/actions/workflows/main.yml/badge.svg)](https://github.com/fzankl/ngx-themes-plus)\n![Version](https://img.shields.io/npm/v/ngx-themes-plus.svg?colorB=green)\n[![npm Downloads](https://img.shields.io/npm/dt/ngx-themes-plus.svg)](https://www.npmjs.com/package/ngx-themes-plus)\n\n**⭐ Star the project on GitHub — it motivates a lot!**\n\n</div>\n\n## Features\n\n*   ✅ Perfect theme/dark mode support in two lines of code\n*   ✅ Support for additional customized themes\n*   ✅ System setting with prefers-color-scheme\n*   ✅ Supports [Bootstrap color modes](https://getbootstrap.com/docs/5.3/customize/color-modes/) via custom data attribute\n*   ✅ Themed browser UI with color-scheme\n*   ✅ Integrated theme switcher (considers custom themes as well)\n*   ✅ Sync theme across tabs and windows\n*   ✅ Force pages to specific themes\n*   ✅ Class or data attribute selector\n*   ✅ Toggle element visibility based on a selected theme\n\nCheck out the [Live Example](https://fzankl.github.io/ngx-themes-plus/) to try it for yourself.\n\n## Install\n\n```bash\n$ npm install ngx-themes-plus\n```\n\n## Use\n\nYou have to add the module to the root module definition. The simplest `AppModule` looks like this:\n\n```js\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    ThemesModule.forRoot()\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nAdding theme support takes 2 lines of code:\n\n```html\n<tp-theme-provider>\n  <router-outlet></router-outlet>\n</tp-theme-provider>\n```\n\nThat's it, your Angular app fully supports themes, including System preference with `prefers-color-scheme`. The theme is also immediately synced between tabs. By default, ngx-themes-plus modifies the `data-theme` attribute on the `html` element, which you can easily use to style your app:\n\n```css\n:root {\n  /* Your default theme */\n  --background: #FFF;\n  --foreground: #000;\n}\n\n[data-theme='dark'] {\n  --background: #000;\n  --foreground: #FFF;\n}\n```\n\n### Integrate with Bootstrap\n\nAs of version 5.3.0, Bootstrap supports different [color modes](https://getbootstrap.com/docs/5.3/customize/color-modes/). By default, a light and a dark mode are integrated. You can use all features of `ngx-themes-plus` by setting a custom `attribute` via the theme options. The next code snippet shows an example how to configure the plugin for use with Boostrap color modes.\n\n```js\nconst themeOptions = new ThemeOptions();\nthemeOptions.attribute = 'data-bs-theme';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    ThemesModule.forRoot(themeOptions)\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n### Switch themes\n\nngx-themes-plus supports switching themes using the integrated `theme-switcher` component. You can use it as easily as the parent component with an additional line of code.\n\n<img alt=\"Shows an example of the integrated theme switcher.\" title=\"Integrated theme switcher\" src=\"https://user-images.githubusercontent.com/44210522/221420926-d86537a6-7428-4f42-a407-4455135b0102.png\">\n\nWhen using the two default themes `light` and `dark` the `theme-switcher` uses some default icons. The following snippet shows the simplest implementation when using the default themes:\n\n```html\n<tp-theme-provider>\n  <tp-theme-switcher></tp-theme-switcher>\n</tp-theme-provider>\n```\n\nWhen your application requires additional colors you can extend the themes via the options during bootstrapping.\n\n```js\nconst options = new ThemeOptions();\noptions.themes = [...options.themes, 'yellow'];\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    ThemesModule.forRoot(options)\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nFor the theme to be displayed correctly, the styles need to be extended.\n**Take care about adding the color definition `--theme` for each theme since that color is used by the `theme-switcher` to render its selection.**\n\n```css\n:root {\n  /* Your default theme */\n  --background: #FFF;\n  --foreground: #000;\n}\n\n[data-theme=\"light\"] {\n  --theme: #f6f4e6;\n}\n\n[data-theme=\"dark\"] {\n  --theme: #27272A;\n\n  --background: #27272A;\n  --foreground: #f6f4e6;\n}\n\n[data-theme=\"yellow\"] {\n  --theme: #FACC15;\n\n  --background: #E4E4E7;\n  --foreground: #18181B;\n}\n```\n\n### Force theme\n\nA forced theme is the right option if you like to present a page using a specific theme only. Switching themes does not have an effect.\n\nTo force a theme on your Angular pages, simply inject the `ThemeProviderComponent` via the constructor and set the theme you like. Integrated `theme-switcher` is disabled in this case.\n\n```js\n@Component({\n  selector: 'app-page-forced'\n})\nexport class ForcedPageComponent implements OnDestroy {\n  constructor(private readonly themeProvider: ThemeProviderComponent) {\n    this.themeProvider.forcedTheme = 'dark';\n  }\n\n  public ngOnDestroy(): void {\n    this.themeProvider.forcedTheme = '';\n  }\n}\n```\n\nA second possibility is to set the value of the property `forcedTheme` via template binding.\n\n```html\n<tp-theme-provider [forcedTheme]=\"forcedTheme\">\n  <!-- Content -->\n</tp-theme-provider>\n```\n\n```js\n/*\n * The way how you enforce a specific theme depends upon \n * the possibilities of your application.\n * The `AppConfigService` is just a kind of placeholder \n * for any application specific logic. \n */\n@Injectable({ providedIn: 'root' })\nexport class AppConfigService {\n  private _forcedTheme$ = new BehaviorSubject<string | undefined>(undefined);\n  public forcedTheme$ = this._forcedTheme$.asObservable();\n\n  public forceTheme(theme?: string): void {\n    this._forcedTheme$.next(theme);\n  }\n}\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n  public forcedTheme: string | undefined;\n\n  constructor(private readonly appConfigService: AppConfigService) {\n    // Set the forced theme using any application specific logic.\n    this.appConfigService.forcedTheme$.subscribe({\n      next: (theme) => this.forcedTheme = theme\n    });\n  }\n}\n\n@Component({\n  selector: 'app-page-forced'\n})\nexport class ForcedPageComponent implements OnDestroy {\n  constructor(private readonly appConfigService: AppConfigService) {\n    this.appConfigService.forceTheme('dark');\n  }\n\n  public ngOnDestroy(): void {\n    this.appConfigService.forceTheme();\n  }\n}\n```\n\n### Theme-specific elements\n\nIt may be possible to show or hide elements depending on the selected theme, e.g. a specific logo. The library exposes the directives `tpThemesOnly` and `tpThemesExcept` that can show/hide elements of your application based on the selected theme.\n\nThe directive accepts several attributes:\n\n| Attribute               | Value                   | Description|\n| :---------------------- | :---------------------- | :---------------------- |\n| `tpThemesOnly` | `[String \\| String[]]` | Single or multiple themes for which the associated element should be shown |\n| `tpThemesExcept` | `[String \\| String[]]` | Single or multiple themes for which the associated element should not be shown |\n\nThe logo within the showcase is changed using both directives shown in the following snippet:\n\n```html\n<div class=\"logo\">\n  <img *tpThemesOnly=\"'dark'\" src=\"path-to-the-image\" />\n  <img *tpThemesExcept=\"'dark'\" src=\"path-to-the-image\" />\n</div>\n```\n\n## Troubleshooting\n\nIf theme support does not work as expected, check that your application configuration is valid according to this documentation. If that doesn't help, please feel free to open an issue.\n\n## Changelog\n\n03/04/2023\n\n*   Initial release.\n","readmeFilename":"README.md"}