-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
88 lines (70 loc) · 3.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title>angular-themer demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link themer-link>
<script src="src/themer.js"></script>
<script src="demo/demo.js"></script>
<!-- code syntax highlight -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/styles/github.min.css">
</head>
<body>
<div class="container">
<a href="https://github.com/fdomig/angular-themer">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
<div class="page-header">
<h1>angular-themer</h1>
<p>Angular module to switch css themes on the fly.</p>
</div>
<h2>Try it here</h2>
<div class="well">
<div class="themer-switcher" themer-switcher></div>
</div>
<h2>Installation</h2>
<pre><code class="shell">bower install angular-themer</code></pre>
<h2>Usage</h2>
<p>Configure <code>angular-themer</code> within a <code>config</code>-block for your (<code>app/demo-app.js</code>) application.</p>
<pre><code class="javascript">angular.module('demoApp', ['angular-themer'])
.config(['themerProvider', function (themerProvider) {
var styles = [
{ key: 'LIGHT', label: 'Light Theme', href: 'demo/light.css'},
{ key: 'DARK', label: 'Dark Theme', href: 'demo/dark.css'},
{ key: 'DRACULA', label: 'Dracula Theme', href: ['demo/dracula.css', 'demo/header-size.css']}
];
themerProvider.storeTheme(true);
themerProvider.setStyles(styles);
var selected = themerProvider.getStoredTheme() || styles[0].key;
themerProvider.setSelected(selected);
}])
;</pre></code>
<p>You can store in <code>localStorage</code> the selected theme with <code>themerProvider.storeTheme(true);</code> </p>
<p>In your <code>index.html</code> you have to include <code>themer.js</code> and add the
<code>themer-link</code> directive to a <code>link</code>-element in the html header. To change the
themes you may include the <code>theme-switcher</code>-directive anywhere in your document.</p>
<pre><code class="html"><html>
<head ng-app="demoApp">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-themer/dist/themer.min.js"></script>
<script src="app/demo-app.js"></script>
<link themer-link>
</head>
<body>
<div themer-switcher></div>
</body>
</html></code></pre>
<h2>Issues?</h2>
<p>Please report any issue at the project's <a href="https://github.com/fdomig/angular-themer/issues">Github Issue Page</a>.</p>
<footer>
<hr/>
<p>© 2013 - 2015 <a href="http://github.com/fdomig">Franziskus Domig</a></p>
<p> </p>
</footer>
</div>
</body>
</head>
</html>