https://github.com/briancodes/ngx-theme-service
Configurable theme switching service for use with CSS variables
https://github.com/briancodes/ngx-theme-service
Last synced: 11 months ago
JSON representation
Configurable theme switching service for use with CSS variables
- Host: GitHub
- URL: https://github.com/briancodes/ngx-theme-service
- Owner: briancodes
- License: mit
- Created: 2019-09-04T19:14:55.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-04-05T01:43:55.000Z (over 6 years ago)
- Last Synced: 2025-08-08T13:59:13.070Z (12 months ago)
- Language: TypeScript
- Homepage: https://ngx-theme-service.web.app/
- Size: 462 KB
- Stars: 4
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## NgxThemeService
Default light theme with transition
View the [demo app](https://ngx-theme-service.web.app)
## Install
`npm install @bcodes/ngx-theme-service`
## Configure
Provide the `ThemeServiceConfig` in `AppModule`
```
import { ThemeServiceConfig, THEME_CONFIG } from '@bcodes/ngx-theme-service';
const themeServiceConfig: ThemeServiceConfig = {
themes: ['light', 'dark'],
defaultTheme: 'light',
transitionConfig: {
className: 'theme-transition',
duration: 1500
}
};
providers: [
{
provide: THEME_CONFIG,
useValue: themeServiceConfig
}
]
```
The `defaultTheme` will always be applied
- If you are using `:root {}` element for your default CSS variables, then set `defaultTheme` to an empty string
- If you prefer the explicit default theme approach, e.g `:root.light`, then set the `defaultTheme` to `'light'`
> Note: `ThemeService` will apply the default theme immediately upon instantiation, so there's no need to add it in `index.html`
By default the theme classes (and optional transition class) will be applied to the `` element. To use a different element add a CSS query selector (uses `document.querySelector` under the hood) to the config `targetElementSelector` property:
```
{
themes: ['light', 'dark'],
defaultTheme: 'light',
transitionConfig: {
className: 'theme-transition',
duration: 1500
},
targetElementSelector: 'body'
```
> Demo example: [common.constants.ts](https://github.com/briancodes/ngx-theme-service/blob/master/src/app/shared/common.constants.ts#L3), [app.module.ts](https://github.com/briancodes/ngx-theme-service/blob/master/src/app/app.module.ts#L13)
## Use
Inject `ThemeService` service in the constructor of a component:
```
constructor(private themeService: ThemeService) {}
```
Switch themes using the `switchTheme` method:
```
this.themeService.switchTheme(themeString);
```
Subscribe to theme changes:
```
// Component template
Light Theme
// Component
selected$ = this.themeService.selectedTheme$;
```
> Demo example: [navigation-container.component.ts](https://github.com/briancodes/ngx-theme-service/blob/master/src/app/features/nav/containers/navigation-container.component.ts#L60)
## Style
Example theme styling:
```
:root.light {
--theme-background: #fafafa;
}
:root.dark {
--theme-background: #1b1919;
}
:root.theme-transition,
:root.theme-transition * {
transition: background-color 1500ms !important;
transition-delay: 0s !important;
}
```
> Note: you could also use `transition: all 1500ms !important;`
> Demo example: [themes.scss](https://github.com/briancodes/ngx-theme-service/blob/master/src/styles/themes.scss)