Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/clashsoft/ng-bootstrap-darkmode
An Angular wrapper for bootstrap-darkmode.
https://github.com/clashsoft/ng-bootstrap-darkmode
angular bootstrap bootstrap-theme dark-mode dark-theme
Last synced: 16 days ago
JSON representation
An Angular wrapper for bootstrap-darkmode.
- Host: GitHub
- URL: https://github.com/clashsoft/ng-bootstrap-darkmode
- Owner: Clashsoft
- License: bsd-3-clause
- Archived: true
- Created: 2020-09-05T12:54:53.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-04-14T13:40:46.000Z (almost 2 years ago)
- Last Synced: 2024-12-16T17:51:40.665Z (about 2 months ago)
- Topics: angular, bootstrap, bootstrap-theme, dark-mode, dark-theme
- Language: TypeScript
- Homepage:
- Size: 623 KB
- Stars: 2
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# NgBootstrapDarkmode - moved to [ngbx](https://github.com/Clashsoft/meanstream/tree/master/libs/ngbx#readme)
[](https://badge.fury.io/js/ng-bootstrap-darkmode)
[](https://github.com/Clashsoft/ng-bootstrap-darkmode/actions?query=workflow%3A%22Node.js+CI%22)
An Angular wrapper for [bootstrap-darkmode](https://github.com/Clashsoft/bootstrap-darkmode).
## Installation
Install the module:
```sh
$ npm install ng-bootstrap-darkmode bootstrap-darkmode
```
Include darkmode css (in `styles.scss`):
```scss
@import "~bootstrap-darkmode/scss/darktheme";
```
Alternatively, if you are not using SCSS, add the following in `angular.json` under `projects..architect.build.options.styles`:
```json5
"styles": [
// ...
"../node_modules/bootstrap-darkmode/dist/darktheme.css"
]
```
## Usage
### Module Import
```typescript
import {NgBootstrapDarkmodeModule} from 'ng-bootstrap-darkmode';
@NgModule({
imports: [
// ...
NgBootstrapDarkmodeModule,
],
// ...
})
export class AppModule {
}
```
### Theme Switcher
To include the theme switcher, which allows selections between light, dark and automatic (user agent preference) mode:
```html
```
The theme switcher can be customized with the optional `[size]` and `[style]` attributes:
```html
```
An outdated alternative is the dark mode switch, which does not support automatic mode:
```html
```
### Subscribing to the Theme
```typescript
import {ThemeService} from 'ng-bootstrap-darkmode';
@Injectable()
export class MyService {
constructor(
themeService: ThemeService,
) {
themeService.theme$.subscribe(theme => console.log(theme));
}
}
```
### Configuring Persistence
By default, this library persists the currently selected theme using the key `theme` in `localStorage`.
You can customize how this behaviour using dependency injection.
Just provide the `THEME_SAVER` and `THEME_LOADER` functions in your module:
```typescript
import {of} from 'rxjs';
import {NgBootstrapDarkmodeModule, THEME_LOADER, THEME_SAVER} from 'ng-bootstrap-darkmode';
@NgModule({
imports: [
// ...
NgBootstrapDarkmodeModule,
],
providers: [
{
provide: THEME_LOADER,
useValue: () => of('light'),
},
{
provide: THEME_SAVER,
useValue: (theme) => console.log('saving', theme),
},
],
// ...
})
export class AppModule {
}
```