- Add option to select themes in your angular application
- Configurable via app configuration.
Check out angular-themer in action at the demo page.
You can install angular-themer with:
bower install angular-themer
Alternatively you could download the src folder manually and include it in your project.
<html>
<head>
<title>angular-themer demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
<script src="../src/themer.js"></script>
<!-- Include selected theme -->
<link themer-link>
</head>
<body>
...
<!-- include switcher element -->
<div themer-switcher></div>
...
</body>
</head>
</html>
In your module, add themer dependency and configure.
angular.module('yourModule', ['angular-themer'])
.config(['themerProvider', function (themerProvider) {
var styles = [
{ key: 'DARK', label: 'Dark Theme', href: 'dark.css'},
{ key: 'LIGHT', label: 'Light Theme', href: ['light.css', 'fonts.css']}
];
themerProvider.storeTheme(true);
themerProvider.setStyles(styles);
var selected = themerProvider.getStoredTheme() || styles[0].key;
themerProvider.setSelected(selected);
}])
;
The href property can be either a string for a single css file or an array of strings for
multiple css files.
- Add getter/setter for styles @AahmedOpeyemi
- Added ability to store the selected theme in
localStorage@Adrion
- Bugfix: fix not working ng-repeat in theme options (#5)
- Added ability to add a class to theme selector
- BREAKING CHANGE: Any css which assumes the
selectwill be a child element will probably break
- Added support for multiple css files per style
- Removed
setSelected(); addedsetSelected(key)instead - Added
keyto each style - Added watchers to watch internal changes
- First usable version
- Configuration at bootstrap