https://github.com/rbalet/ngx-color-scheme
Add dark mode to your Angular applications with ease!
https://github.com/rbalet/ngx-color-scheme
Last synced: 7 months ago
JSON representation
Add dark mode to your Angular applications with ease!
- Host: GitHub
- URL: https://github.com/rbalet/ngx-color-scheme
- Owner: rbalet
- License: mit
- Created: 2025-01-25T15:50:58.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-01-25T17:22:44.000Z (9 months ago)
- Last Synced: 2025-03-02T14:44:07.416Z (8 months ago)
- Language: TypeScript
- Size: 1.12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-color-scheme - Add dark mode to your Angular applications with ease. (Third Party Components / Visual Effects)
- awesome-angular - ngx-color-scheme - Add dark mode to your Angular applications with ease. (Third Party Components / Visual Effects)
README
[](https://github.com/semantic-release/semantic-release)
ngx-color-scheme is a zero-dependency library that helps you integrate dark mode into you Angular applications with ease!
[👉🏻 Live Demo 👈🏻](https://stackblitz.com/edit/ngx-color-scheme-v3-example?file=src/app.component.ts)
Inspired by the awesome [use-dark-mode](https://github.com/donavon/use-dark-mode) library
Forked from the not more maintained [angular-dark-mode](https://github.com/talohana/angular-dark-mode) library
## Installation
To use ngx-color-scheme in your project install it via npm:
```
// npm npm i ngx-color-scheme
```
or provide it inside the `app.module.ts` file
```typescript
import { ColorSchemeService } from 'ngx-color-scheme'
export function initColorScheme(colorSchemeService: ColorSchemeService) {
return () => colorSchemeService
}
@NgModule({
// ...
providers: [
{
provide: APP_INITIALIZER, // If you wish to instantiate it before the App renders
useFactory: initColorScheme,
deps: [ColorSchemeService],
multi: true,
},
]
})
```
## SSR
In case you'd like to use it with Angular SSR.
As the library is using `document.body`, you need to instantiate it inside the `app.component.ts` file.
```typescript
// app.component.ts
import { afterRender } from '@angular/core'
import { ColorSchemeService } from 'ngx-color-scheme'
export class AppComponent {
constructor(
private _colorSchemeService: ColorSchemeService,
) {
const singleRender = afterRender(() => {
this._colorSchemeService.init()
singleRender.destroy()
})
}
}
```
## Usage
In 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:
```ts
// color-scheme-toggle.component.ts
@Component({
selector: 'app-color-scheme-toggle',
template: ``,
})
export class ColorSchemeToggle {
colorScheme$ = this.colorSchemeService.colorScheme$.asReadonly();
constructor(private colorSchemeService: ColorSchemeService) {}
onToggle(): void {
this.colorSchemeService.toggle();
}
}
```
Next, include global styles and some text to reflect the mode:
```css
/* styles.css */
body.dark-mode {
background-color: #2d3436;
color: #dfe6e9;
}
body.light-mode {
background-color: #dfe6e9;
color: #2d3436;
}
```
```ts
// app.component.ts
@Component({
selector: 'app-root',
template: `
ngx-color-scheme
Toggle to see magic happens!
`,
})
export class AppComponent {}
```
You're all set!
Save and run your application, play with the toggle button to change between modes.
## Options
`ngx-color-scheme` ships with the following options:
| Option | Description | Default Value |
| ---------------- | :----------------------------------------------------------: | --------------------------: |
| colorSchemeClass | dark mode css class name | `'dark-mode'` |
| lightModeClass | light mode css class name | `'light-mode'` |
| preloadingClass | css class name to flag that `element` is in preloading state | `'color-scheme-preloading'` |
| storageKey | localStorage key to persist dark mode | `'dark-mode'` |
| element | target HTMLElement to set given css classes | `document.body` |
All options are set to default and can be configured via the `COLOR_SCHEME_OPTIONS` InjectionToken:
```ts
import { COLOR_SCHEME_OPTIONS } from 'ngx-color-scheme';
@NgModule({
...
providers: [
{
provide: COLOR_SCHEME_OPTIONS,
useValue: {
colorSchemeClass: 'my-dark-mode',
lightModeClass: 'my-light-mode'
}
}
]
...
})
export class AppModule {}
```
### Transitioning
It 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:
```css
/* styles.css */
...
body:not(.color-scheme-preloading) {
transition: all 0.3s linear;
}
...
```
## Contributors
Thanks goes to these wonderful people:
