Angular Theme

Dynamic style and layout switching, powered by Angular.

Loading styles

<head>
  <link href="/light.css" ng-theme="light" default />
  <link href="/dark.css" ng-theme="dark" />
</head>

Attributes

ng-theme="theme-name" - name used to switch themes
default - sets the default theme

Programmatic Usage

$themeProvider

angular.module('my.app', ['angular.theme']).config(function ($themeProvider) {
  // optionally set the initial theme, will override default theme
  $themeProvider.setInitialTheme('light');
});

$theme

angular.module('my.app').controller('MyController', function ($scope, $theme) {
  $scope.theme = $theme.activeTheme;
  $scope.$watch('theme', $theme.setTheme);
});

Change themes by calling $theme.setTheme('theme-name');.

Welcome to my site!

Fake contents:

About
Blog

Change the theme: