@doesrobbiedream/ngx-themify

NgxThemify is a library made for create a customizable color theme either with plain scss or with direct Angular Services integration, working directly with native CSS variables.

It exposes a simple API for configure an extendable theme and allows you to customize it dynamically with Angular Services.

Getting Started

npm i @doesrobbiedream/ngx-themify

Generate a SCSS only Theme

On your main styles.scss file, load the configuration to override defaults and run the theme generator.

// styles.scss
@use '@doesrobbiedream/ngx-themify/scss/config' with (
  // any reference name and color can be set here
  $colors: (primary: #1D9A6C, accent: #E91E63), 
  $extras: (myExtraColor: #6788ff)
);
@use '@doesrobbiedream/ngx-themify/scss/theme';

Any theme is composed by palettes that has different types of shades.

Shades Available

// Base shades
'base', 'light-1', 'light-2', 'shadow-1', 'shadow-2'

// Above shades are contrastable, so you also get out-of-the-box
'base__contrast', 'light-1__contrast'

// Each color comes with a gradient with 9 shades
'100', '200', ..., '800', '900'

Use colors in Angular Components

// my-app.component.scss
@use '@doesrobbiedream/ngx-themify/scss/colors';

h1 {
  background: color('primary'); // var(--primary-base)
  color: contrast('primary', "light-1"); // var(--primary-light-1__contrast) 
  border-bottom: color('primary', 'light-1') // var(--primary-light-1)
}

h2 {
  border: 1px solid color('accent', '700');
}

Generate Theme with Angular Module

import {NgxThemifyModule, NgxThemifyColorDefinition} from '@doesrobbiedream/ngx-themify';

@NgModule({
  imports: [
    NgxThemifyModule.forRoot({
      colors: [
        NgxThemifyColorDefinition.schema('primary', '#1D9A6C'),
        NgxThemifyColorDefinition.schema('accent', '#e9c46a'),
        NgxThemifyColorDefinition.extra('myExtraColor', '#6788ff')
      ]
    })
  ],
  // ... 
})
export class AppModule {
}

Using colors in my component's TS files

@Component({
  selector: 'doesrobbiedream-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(protected themify: NgxThemifyService) {}

  ngOnInit(){
    const color = this.themify.color('primary')
  }
}