{"id":24759098,"url":"https://github.com/rbalet/ngx-color-scheme","last_synced_at":"2025-03-23T10:27:41.573Z","repository":{"id":274199676,"uuid":"922206592","full_name":"rbalet/ngx-color-scheme","owner":"rbalet","description":"Add dark mode to your Angular applications with ease!","archived":false,"fork":false,"pushed_at":"2025-01-25T17:22:44.000Z","size":1174,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T14:44:07.416Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rbalet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2025-01-25T15:50:58.000Z","updated_at":"2025-01-25T17:21:58.000Z","dependencies_parsed_at":"2025-01-25T17:31:47.425Z","dependency_job_id":null,"html_url":"https://github.com/rbalet/ngx-color-scheme","commit_stats":null,"previous_names":["rbalet/ngx-color-scheme","rbalet/ngx-dark-mode"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-color-scheme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-color-scheme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-color-scheme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-color-scheme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rbalet","download_url":"https://codeload.github.com/rbalet/ngx-color-scheme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245088336,"owners_count":20558920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-28T16:50:50.336Z","updated_at":"2025-03-23T10:27:41.544Z","avatar_url":"https://github.com/rbalet.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Visual Effects"],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg width=\"600px\" src=\"https://raw.githubusercontent.com/talohana/angular-dark-mode/master/logo.svg\" /\u003e\n\u003c/p\u003e\n\n\u003chr /\u003e\n\n![GitHub](https://img.shields.io/github/license/rbalet/ngx-color-scheme)\n![Codecov](https://img.shields.io/codecov/c/github/rbalet/ngx-color-scheme)\n![Travis (.com)](https://img.shields.io/travis/com/rbalet/ngx-color-scheme)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n![npm bundle size](https://img.shields.io/bundlephobia/min/ngx-color-scheme)\n![npm](https://img.shields.io/npm/v/ngx-color-scheme)\n![npm](https://img.shields.io/npm/dw/ngx-color-scheme)\n\nngx-color-scheme is a zero-dependency library that helps you integrate dark mode into you Angular applications with ease!\n\n[👉🏻 Live Demo 👈🏻](https://stackblitz.com/edit/ngx-color-scheme-v3-example?file=src/app.component.ts)\n\nInspired by the awesome [use-dark-mode](https://github.com/donavon/use-dark-mode) library\n\nForked from the not more maintained [angular-dark-mode](https://github.com/talohana/angular-dark-mode) library\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"400px\" src=\"https://raw.githubusercontent.com/talohana/angular-dark-mode/master/example.gif\" /\u003e\n\u003c/p\u003e\n\n## Installation\n\nTo use ngx-color-scheme in your project install it via npm:\n\n```\n// npm npm i ngx-color-scheme\n```\n\nor provide it inside the `app.module.ts` file \n\n```typescript\nimport { ColorSchemeService } from 'ngx-color-scheme'\n\nexport function initColorScheme(colorSchemeService: ColorSchemeService) {\n  return () =\u003e colorSchemeService\n}\n\n@NgModule({\n// ...\nproviders: [\n    {\n      provide: APP_INITIALIZER, // If you wish to instantiate it before the App renders\n      useFactory: initColorScheme,\n      deps: [ColorSchemeService],\n      multi: true,\n    },\n]\n})\n```\n\n## SSR\nIn case you'd like to use it with Angular SSR.\nAs the library is using `document.body`, you need to instantiate it inside the `app.component.ts` file. \n\n```typescript\n// app.component.ts\nimport { afterRender } from '@angular/core'\nimport { ColorSchemeService } from 'ngx-color-scheme'\n\nexport class AppComponent {\n  constructor(\n    private _colorSchemeService: ColorSchemeService,\n  ) {\n    const singleRender = afterRender(() =\u003e {\n      this._colorSchemeService.init()\n      singleRender.destroy()\n    })\n  }\n}\n```\n\n\n## Usage\n\nIn order to use ngx-color-scheme you need to inject the service somewhere in your applications - presumably where you hold the dark mode toggle, and get the dark mode value from the exported `colorScheme$` Observable:\n\n```ts\n// color-scheme-toggle.component.ts\n\n@Component({\n  selector: 'app-color-scheme-toggle',\n  template: `\u003cinput\n    type=\"checkbox\"\n    [checked]=\"colorScheme$ | async\"\n    (change)=\"onToggle()\"\n  /\u003e`,\n})\nexport class ColorSchemeToggle {\n  colorScheme$ = this.colorSchemeService.colorScheme$.asReadonly();\n\n  constructor(private colorSchemeService: ColorSchemeService) {}\n\n  onToggle(): void {\n    this.colorSchemeService.toggle();\n  }\n}\n```\n\nNext, include global styles and some text to reflect the mode:\n\n```css\n/* styles.css */\n\nbody.dark-mode {\n  background-color: #2d3436;\n  color: #dfe6e9;\n}\n\nbody.light-mode {\n  background-color: #dfe6e9;\n  color: #2d3436;\n}\n```\n\n```ts\n// app.component.ts\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003ch1\u003engx-color-scheme\u003c/h1\u003e\n    \u003cp\u003eToggle to see magic happens!\u003c/p\u003e\n    \u003capp-color-scheme-toggle\u003e\u003c/app-color-scheme-toggle\u003e\n  `,\n})\nexport class AppComponent {}\n```\n\nYou're all set!  \nSave and run your application, play with the toggle button to change between modes.\n\n## Options\n\n`ngx-color-scheme` ships with the following options:\n\n| Option           |                         Description                          |               Default Value |\n| ---------------- | :----------------------------------------------------------: | --------------------------: |\n| colorSchemeClass |                   dark mode css class name                   |               `'dark-mode'` |\n| lightModeClass   |                  light mode css class name                   |              `'light-mode'` |\n| preloadingClass  | css class name to flag that `element` is in preloading state | `'color-scheme-preloading'` |\n| storageKey       |            localStorage key to persist dark mode             |               `'dark-mode'` |\n| element          |         target HTMLElement to set given css classes          |             `document.body` |\n\n\u003cbr /\u003e\n\nAll options are set to default and can be configured via the `COLOR_SCHEME_OPTIONS` InjectionToken:\n\n```ts\nimport { COLOR_SCHEME_OPTIONS } from 'ngx-color-scheme';\n\n@NgModule({\n    ...\n    providers: [\n        {\n            provide: COLOR_SCHEME_OPTIONS,\n            useValue: {\n                colorSchemeClass: 'my-dark-mode',\n                lightModeClass: 'my-light-mode'\n            }\n        }\n    ]\n    ...\n})\nexport class AppModule {}\n```\n\n### Transitioning\n\nIt is often useful to transition the changes between dark and light modes, and most of the time we would want to skip the initial transition, in order to achieve this use the `preloadingClass` option like so:\n\n```css\n/* styles.css */\n...\n\nbody:not(.color-scheme-preloading) {\n  transition: all 0.3s linear;\n}\n\n...\n```\n\n## Contributors\n\nThanks goes to these wonderful people:\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://talohana.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/24203431?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTal Ohana\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/TalOhana/ngx-color-scheme/commits?author=talohana\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/TalOhana/ngx-color-scheme/commits?author=talohana\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#maintenance-talohana\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Guysh9\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/75510227?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGuy Shemesh\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#design-Guysh9\" title=\"Design\"\u003e🎨\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/rbalet\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/44493964?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRaphaël Balet\n\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#maintenance-talohana\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbalet%2Fngx-color-scheme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frbalet%2Fngx-color-scheme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbalet%2Fngx-color-scheme/lists"}