ng-theme v0.1.2

ng-theme

Angular theming libary.

• Collection of defualt themes
• Injectable custom themes
• Auto theming based on HTML element
• Toggle and dropdown components
• Theme service and directive

Install

npm install ng-time-from-pipe

ng-theme-service

Varibles

Methods

ng-theme-directive

inputs

ng-theme-preview

inputs

<ng-theme-preview [theme]="theme"></ng-theme-preview>

Usage

import { NgThemeModule, NgThemeDirectiveModule, NgThemeComponentsModule } from 'projects/ng-theme/src/public-api';

@NgModule( { 
  declarations: [ ... ], 
  imports: [ ..., NgThemeModule, NgThemeDirectiveModule, NgThemeComponentsModule, ... ]
});

	imports: [ ..., NgThemeModule.forRoot({
		background: {
        backgroundOn: true,
        backgroundElement: 'body'
      },
      themes: [{
      	...
      }, {
      	...
      }]
	}), ... ]

Add NgTheme directive too any element you want to theme. the directive will auto theme based on the element. (not all elements are implemented).

  <h1 NgTheme>Hello World</h1>
  <h3 NgTheme>Hello World</h3>
  <a NgTheme>Hello World</a>
	<p NgTheme>Hello World</p>
	<i NgTheme>Hello World</i>
	<button NgTheme>Hello World</button>

You can also specify the theme variable you want to use.

	<div NgTheme="background-color:accent"></div> // css attr : theme variable

Theme

export class Theme
{
	public name: string;

	public primary: string;
	public primaryText: string;

	public secondary: string;
	public secondaryText?: string;

	public background: string;

	public linkText: string;

	public buttonText?: string;
	public buttonBorder?: string;
	public buttonBackground?: string;

	public jumbo: string;
  public jumboText: string;
    
 	public hr: string;
	
	public shadow: string;

	public isDark: boolean;
	public accent: string;

}

<ng-theme-dropdown></ng-theme-dropdown>

<ng-theme-toggle></ng-theme-toggle>