Dynamic style and layout switching using Angular
<head>
<link href="/light.css" ng-theme="light" default />
<link href="/dark.css" ng-theme="dark" />
</head>Attributes:
ng-theme- Tells angular-theme about the style, and gives it a name for future referencedefault- Specifies the style to show on load
setInitialTheme(themeName)- Sets the initial theme
angular.module('my.app', ['angular.theme']).config(function ($themeProvider) {
// will override default theme
$themeProvider.setInitialTheme('dark');
});themes- Array of available theme namesactiveTheme- Name of active themesetTheme(themeName)- Sets the active theme
angular.module('my.app').controller('MyController', function ($scope, $theme) {
$scope.theme = $theme.activeTheme;
$scope.$watch('theme', $theme.setTheme);
});MIT