{"id":25440271,"url":"https://github.com/livresaber/darkmode-angular","last_synced_at":"2026-02-03T01:27:36.938Z","repository":{"id":155660612,"uuid":"559109530","full_name":"livresaber/darkmode-angular","owner":"livresaber","description":"Componente DarkMode com Angular","archived":false,"fork":false,"pushed_at":"2024-08-29T16:01:17.000Z","size":1009,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-08-30T01:25:58.013Z","etag":null,"topics":["angular","darkmode","lightmode"],"latest_commit_sha":null,"homepage":"https://darkmode-angular.web.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/livresaber.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-29T04:49:34.000Z","updated_at":"2024-08-29T18:24:44.000Z","dependencies_parsed_at":"2024-02-14T21:48:10.584Z","dependency_job_id":"950c5e8e-c05b-4f3c-9a0e-9002a195a179","html_url":"https://github.com/livresaber/darkmode-angular","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/livresaber/darkmode-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livresaber%2Fdarkmode-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livresaber%2Fdarkmode-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livresaber%2Fdarkmode-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livresaber%2Fdarkmode-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/livresaber","download_url":"https://codeload.github.com/livresaber/darkmode-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/livresaber%2Fdarkmode-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28681010,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T04:33:33.518Z","status":"ssl_error","status_checked_at":"2026-01-23T04:33:30.433Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","darkmode","lightmode"],"created_at":"2025-02-17T11:30:12.049Z","updated_at":"2026-01-23T05:37:00.434Z","avatar_url":"https://github.com/livresaber.png","language":"TypeScript","readme":"# Darkmode Angular Component\n\nThe `darkmode-angular` component allows you to easily toggle between light and dark mode in your Angular application. It saves the user's mode preference in `localStorage` and applies the corresponding theme (`lightmode` or `darkmode`) to the `body` tag.\n\n## Installation\n\nTo install the component, use npm:\n\n```bash\nnpm install darkmode-angular\n```\n\n## Usage\n\n1. Import the `DarkmodeComponent` into your Angular module or component where you want to use it.\n\n   ```typescript\n   import { DarkmodeComponent } from 'darkmode-angular';\n   ```\n\n2. Add the `DarkmodeComponent` to your template.\n\n   ```html\n   \u003cdarkmode-angular [hiddenLabel]=\"true\"\u003e\u003c/darkmode-angular\u003e\n   ```\n\n   **Inputs:**\n   - `hiddenLabel`: (optional) A `boolean` input that determines if the mode label (e.g., \"DarkMode\" or \"LightMode\") should be hidden. Set to `true` to hide the label.\n\n## Example\n\nHere’s an example of how you can integrate the `darkmode-angular` component into your Angular app:\n\n1. Import the `DarkmodeComponent` into your module or component.\n\n   ```typescript\n   import { DarkmodeComponent } from 'darkmode-angular';\n\n   @NgModule({\n     declarations: [...],\n     imports: [DarkmodeComponent],\n   })\n   export class AppModule {}\n   ```\n\n2. Use the component in your HTML file.\n\n   ```html\n   \u003cdarkmode-angular [hiddenLabel]=\"false\"\u003e\u003c/darkmode-angular\u003e\n   ```\n\n3. Customize the button by toggling between dark mode and light mode when clicked. The mode is saved in `localStorage` and persists across sessions.\n\n## Styling\n\nThe component applies the following classes to the `body` based on the selected mode:\n\n- `darkmode`: Applied when dark mode is active.\n- `lightmode`: Applied when light mode is active.\n\nYou can customize the styles for dark and light mode by adding the necessary CSS rules in your global styles file:\n\n```scss\nbody.darkmode {\n  background-color: #000;\n  color: #fff;\n}\n\nbody.lightmode {\n  background-color: #fff;\n  color: #000;\n}\n```\n\n## API\n\n- `toggleMode()`: Method to toggle between dark and light mode.\n- `setMode(value: boolean)`: Method to set the mode manually. Pass `true` for dark mode and `false` for light mode.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flivresaber%2Fdarkmode-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flivresaber%2Fdarkmode-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flivresaber%2Fdarkmode-angular/lists"}