ng-theme

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

Attribute	Type
currentTheme	Theme
themes	Theme []

Methods

Attribute	Description
setTheme ( themeName:string )	will set current theme to theme supplied
toggleTheme ( firstThemeName: string, secondThemeName: string )	toggles between two themes
listen : Observable	observable, sends message when the theme updates
nextTheme	sets current theme to the next theme in the themes array

ng-theme-directive

inputs

Attribute	Description
NgTheme : string	"style:theme variable"

ng-theme-preview

inputs

Attribute	Description
theme	theme to preview

<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>