diff --git a/README.md b/README.md
index 1c7aa74..495114e 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,21 @@ Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht
 
 1. Benötigte Dateien einbinden
 ------------------------------
-* Binde folgende Javascript-Dateien im HTML-Dokument ein:
+* Binde folgende CSS-Datei im HTML-Dokument ein:
+	* uhr.css
+* Binde zusätzlich mindestens eine der folgenden CSS-Dateien im HTML ein, je nach dem, welche Farben deine Uhr unterstützen soll:
+	* uhr-black.css
+	* uhr-blue.css
+	* uhr-green.css
+	* uhr-red.css
+	* uhr-white.css
+	* uhr-pink.css
+
+Beim Einbinden muss das attribut `data-class` angegeben werden, welches die CSS-Klasse des Themes definiert. Optional kann mit `data-name` ein im Dropdown anzuzeigender Name angegeben werden. Beispiel:
+
+	<link rel="stylesheet" type="text/css" href="uhr-black.css" data-class="black" data-name="Schwarz" />
+
+* Binde nach den CSS-Dateien (wichtig!) folgende Javascript-Dateien im HTML-Dokument ein:
 	* jquery-2.1.0.min.js (Falls nicht bereits vorhanden)
 	* jquery-ui-1.10.4.custom.min.js (Falls nicht bereits vorhanden)
 		* Von jquery-ui werden die Komponenten 'core' und 'widget' benötigt.
@@ -15,14 +29,6 @@ Du willst Bärneruhr auf deiner Website verwenden? Dank des jQuery-Plugins geht
 	* uhr-de_CH.js
 	* uhr-de.js
 	* uhr-en.js
-* Binde folgende CSS-Dateien im HTML-Dokument ein:
-	* uhr.css
-	* uhr-black.css
-	* uhr-blue.css
-	* uhr-green.css
-	* uhr-red.css
-	* uhr-white.css
-* Die möglichen Themes (Farbschemata) sind im Moment noch hartcodiert, deshalb sollten alle Dateien eingebunden werden.
 
 2. Uhr-Element im HTML-Dokument einfügen
 ----------------------------------------
@@ -39,7 +45,7 @@ Initialisiere die Uhr mit einer einzigen Zeile Javascript:
 Damit wird eine Uhr in der Standardkonfiguration erzeugt. Das heisst:
 
 * Breite ist 100% des Eltenelements
-* Farbe ist Schwarz
+* Farbe ist diejenige des ersten eingebundenen Theme-Stylesheets.
 * Sprache ist Bärndütsch
 * Die Uhr ist eingeschaltet
 * Die Bedienelemente werden angezeigt
diff --git a/index.html b/index.html
index 5b95933..1019562 100644
--- a/index.html
+++ b/index.html
@@ -16,23 +16,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <html manifest="manifest.appcache">
 <head>
 	<title>Bärneruhr - Die Zeit im Wort</title>
-	<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
-	<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
-	<script type="text/javascript" src="jquery-cookie-1.4.0.js"></script>
-	<script type="text/javascript" src="uhr.js"></script>
-	<link rel="stylesheet" type="text/css" href="uhr.css" />
-	<link rel="stylesheet" type="text/css" href="uhr-black.css" />
-	<link rel="stylesheet" type="text/css" href="uhr-blue.css" />
-	<link rel="stylesheet" type="text/css" href="uhr-green.css" />
-	<link rel="stylesheet" type="text/css" href="uhr-red.css" />
-	<link rel="stylesheet" type="text/css" href="uhr-white.css" />
-	<link rel="shortcut icon" type="image/png" href="favicon.png" />
 	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-	<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
 	<meta name="apple-mobile-web-app-capable" content="yes" />
 	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
 	<meta name="apple-mobile-web-app-title" content="Bärneruhr" />
 	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1" />
+	<link rel="stylesheet" type="text/css" href="uhr.css" />
+	<link rel="stylesheet" type="text/css" href="uhr-black.css" data-class="black" data-name="Schwarz" />
+	<link rel="shortcut icon" type="image/png" href="favicon.png" />
+	<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
+	<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
+	<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
+	<script type="text/javascript" src="jquery-cookie-1.4.0.js"></script>
+	<script type="text/javascript" src="uhr.js"></script>
 </head>
 <body style="padding:0;margin:0;">
 	<div id="uhr"></div>
diff --git a/info/index.html b/info/index.html
index 0348a73..e52adcf 100644
--- a/info/index.html
+++ b/info/index.html
@@ -16,23 +16,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 <html manifest="../manifest.appcache">
 <head>
 	<title>Die Zeit im Wort - Informationen</title>
+	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+	<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1" />
+	<link rel="stylesheet" type="text/css" href="../uhr.css" />
+	<link rel="stylesheet" type="text/css" href="../uhr-black.css" data-class="black" />
+	<link rel="stylesheet" type="text/css" href="info.css" />
+	<link rel="shortcut icon" type="image/png" href="../favicon.png" />
 	<script type="text/javascript" src="../jquery-2.1.0.min.js"></script>
 	<script type="text/javascript" src="../jquery-ui-1.10.4.custom.min.js"></script>
 	<script type="text/javascript" src="../jquery-cookie-1.4.0.js"></script>
 	<script type="text/javascript" src="../uhr.js"></script>
 	<script type="text/javascript" src="../uhr-de_CH.js"></script>
-	<script type="text/javascript" src="../uhr-de.js"></script>
-	<script type="text/javascript" src="../uhr-en.js"></script>
-	<link rel="stylesheet" type="text/css" href="../uhr.css" />
-	<link rel="stylesheet" type="text/css" href="../uhr-black.css" />
-	<link rel="stylesheet" type="text/css" href="../uhr-blue.css" />
-	<link rel="stylesheet" type="text/css" href="../uhr-green.css" />
-	<link rel="stylesheet" type="text/css" href="../uhr-red.css" />
-	<link rel="stylesheet" type="text/css" href="../uhr-white.css" />
-	<link rel="stylesheet" type="text/css" href="info.css" />
-	<link rel="shortcut icon" type="image/png" href="../favicon.png" />
-	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-	<meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1" />
 </head>
 <body>
 	<h1 id="main-title">Die Zeit im Wort</h1>
@@ -81,21 +75,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 	</ul>
 	<h3 id="include-in-html">Einbinden in HTML</h3>
 	<h4 id="js-and-css-in-head">Javascript- und CSS-Dateien im <code>&lt;head&gt;</code></h4>
-	<p>Füge folgende Zeilen im <code>&lt;head&gt;</code>-Tag deines HTML-Dokumentes ein:<br/>
-		<code>&lt;script type="text/javascript" src="jquery-2.1.0.min.js"&gt;&lt;/script&gt;
+	<p>Füge folgende Zeilen im <code>&lt;head&gt;</code>-Tag deines HTML-Dokumentes ein. <strong>Beachte dabei, dass die CSS-Dateien <em>vor</em> den Javascript eingebunden werden</strong>.<br/>
+		<code>&lt;link rel="stylesheet" type="text/css" href="uhr.css" /&gt;
+&lt;link rel="stylesheet" type="text/css" href="uhr-black.css" data-class="black" data-name="Schwarz" /&gt;
+&lt;link rel="stylesheet" type="text/css" href="uhr-blue.css" data-class="blue" data-name="Blau" /&gt;
+&lt;link rel="stylesheet" type="text/css" href="uhr-green.css" data-class="green" data-name="Grün" /&gt;
+&lt;link rel="stylesheet" type="text/css" href="uhr-red.css" data-class="red" data-name="Rot" /&gt;
+&lt;link rel="stylesheet" type="text/css" href="uhr-white.css" data-class="white" data-name="Weiss" /&gt;
+&lt;link rel="stylesheet" type="text/css" href="uhr-pink.css" data-class="pink" data-name="Pink" /&gt;
+&lt;script type="text/javascript" src="jquery-2.1.0.min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="jquery-cookie-1.4.0.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="uhr.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="uhr-de_CH.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="uhr-de.js"&gt;&lt;/script&gt;
-&lt;script type="text/javascript" src="uhr-en.js"&gt;&lt;/script&gt;
-&lt;link rel="stylesheet" type="text/css" href="uhr.css" /&gt;
-&lt;link rel="stylesheet" type="text/css" href="uhr-black.css" /&gt;
-&lt;link rel="stylesheet" type="text/css" href="uhr-blue.css" /&gt;
-&lt;link rel="stylesheet" type="text/css" href="uhr-green.css" /&gt;
-&lt;link rel="stylesheet" type="text/css" href="uhr-red.css" /&gt;
-&lt;link rel="stylesheet" type="text/css" href="uhr-white.css" /&gt;</code>
+&lt;script type="text/javascript" src="uhr-en.js"&gt;&lt;/script&gt;</code>
 	</p>
+	<p>Von den Stylesheets zwingend ist <code>uhr.css</code> und mindestens eines der Farbschema-Stylesheets. Die Attribute <code>data-class</code> bzw. <code>data-name</code> definieren dabei die im Stylesheet deklarierte Klasse bzw. den im Auswahlmenu anzuzeigenden Namen. Der Name kann frei gewählt werden, die Style-Klasse muss mit der im Stylesheet definierten übereinstimmen.</p>
 	<h4 id="clock-element">Uhr-Element auf der Seite</h4>
 	<p>Definiere an der Stelle, wo die Uhr angezeigt werden soll, ein leeres <code>&lt;div&gt;</code>-Element:<br/>
 		<code>&lt;div id="meine-uhr"&gt;&lt;/div&gt;</code>
@@ -108,7 +104,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 	});
 &lt;/script&gt;</code>
 	</p>
-	<p>Die Uhr wird so in der Standardkonfiguration angezeigt, das heisst: Berndeutsche Sprache, schwarzer Hintergrund, eingeschaltet, Breite 100% des Elternelementes. Wenn dies nicht deinen Bedürfnissen entspricht, lässt sich die Uhr wie im folgenden Abschnitt beschrieben konfigurieren. Die Konfiguration wird der <code>.uhr()</code>-Methode als JSON-Objekt übergeben, beispielsweise so:<br/>
+	<p>Die Uhr wird so in der Standardkonfiguration angezeigt, das heisst: Berndeutsche Sprache, in der Farbe der ersten eingebundenen CSS-Datei (im Beispiel also Schwarz), eingeschaltet, Breite 100% des Elternelementes. Wenn dies nicht deinen Bedürfnissen entspricht, lässt sich die Uhr wie im folgenden Abschnitt beschrieben konfigurieren. Die Konfiguration wird der <code>.uhr()</code>-Methode als JSON-Objekt übergeben, beispielsweise so:<br/>
 		<code>jQuery('#uhr').uhr({
 	width: '200px',
 	theme: 'red'
@@ -130,9 +126,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 		<br/>Typ: String
 		<br/>Default: <code>'de_CH'</code></dd>
 		<dt><code>theme</code></dt>
-		<dd>Die anfänglich ausgewählte Farbe der Uhr. Unterstütze Werte sind zur Zeit <code>'black'</code> (schwarz), <code>'red'</code> (rot), <code>'blue'</code> (blau), <code>'green'</code> (grün) und <code>'white'</code> (weiss).
+		<dd>Die anfänglich ausgewählte Farbe der Uhr. Welche Farben unterstützt werden, hängt davon ab, welche CSS-Dateien eingebunden werden. Bis anhin unterstützte Farben sind zur Zeit <code>'black'</code> (schwarz), <code>'red'</code> (rot), <code>'blue'</code> (blau), <code>'green'</code> (grün), <code>'white'</code> (weiss) und <code>'pink'</code> (pink).
 		<br/>Typ: String
-		<br/>Default: <code>'black'</code></dd>
+		<br/>Default: Farbe der ersten eingebundenen CSS-Datei</dd>
 		<dt><code>force</code></dt>
 		<dd>Legt fest, ob die in der Konfiguration angegebenen Werte allfällig in einem Browser-Cookie gespeicherte Einstellungen überschreiben sollen oder nicht. Mögliche Werte sind <code>true</code> (Konfiguration überschreibt Cookie-Werte) oder <code>false</code> (Cookie-Werte haben Vorrang).
 		<br/>Typ: boolean
@@ -144,12 +140,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 	</dl>
 	<script type="text/javascript">
 		(function($) {
-			var width = $(window).width();
-			var height = $(window).height();
-			var size = (width < height ? width : height) + 'px';
 			$('#uhr1').uhr({
-				width: '150px',
-				controls: false
+				width: '200px',
+				language: 'de_CH',
+				theme: 'black',
+				controls: false,
+				force: true
 			});
 		})(jQuery);
 	</script>
diff --git a/manifest.appcache b/manifest.appcache
index ded0731..90703e1 100644
--- a/manifest.appcache
+++ b/manifest.appcache
@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 5.0
+# 5.1
 
 COPYING
 README.md
@@ -15,6 +15,7 @@ uhr-de.js
 uhr-de_CH.js
 uhr-en.js
 uhr-green.css
+uhr-pink.css
 uhr-red.css
 uhr-white.css
 uhr.css
diff --git a/uhr-pink.css b/uhr-pink.css
new file mode 100644
index 0000000..bc38351
--- /dev/null
+++ b/uhr-pink.css
@@ -0,0 +1,36 @@
+/*
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+.uhr.pink {
+	background-color: #f0a;
+}
+.uhr.pink .dot.active{
+	border-color: #fff;
+	box-shadow: 0 0 0.1em #fff;
+}
+.uhr.pink .letter.active{
+	color: #fff;
+	text-shadow: 0 0 0.1em #fff;
+}
+.pink .onoffswitch-inner:before {
+	background-color: #f0a;
+}
+.uhr.pink .dot:not(.active) {
+	border-color: rgba(255,255,255,0.1);
+	box-shadow: 0 0 0.1em rgba(255,255,255,0.1);
+}
+.uhr.pink .letter:not(.active) {
+	color: rgba(255,255,255,0.1);
+	text-shadow: 0 0 0.1em rgba(255,255,255,0.1);
+}
diff --git a/uhr.js b/uhr.js
index 74f0213..a2e4e46 100644
--- a/uhr.js
+++ b/uhr.js
@@ -21,14 +21,32 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 	window._uhr = {
 		id: 0,
-		languages: []
+		languages: [],
+		themes: []
 	};
+	// auto-detect themes
+	var styleSheets = $('head link[rel=stylesheet]');
+	for (var i = 0; i < styleSheets.length; i++) {
+		var styleSheet = $(styleSheets[i]);
+		var styleClass = styleSheet.attr('data-class');
+		if (styleClass !== undefined) {
+			var name = styleSheet.attr('data-name');
+			if (name === undefined) {
+				name = styleClass;
+			}
+			window._uhr.themes.push({'class': styleClass, 'name': name});
+		}
+	}
+	// fall-back if no theme was included
+	if (window._uhr.themes.length == 0) {
+		window._uhr.themes.push({});
+	}
 	$.widget("fritteli.uhr", {
 		options: {
 			width: '100%',
 			status: 'on',
 			language: 'de_CH',
-			theme: 'black',
+			theme: window._uhr.themes[0].class,
 			force: false,
 			controls: true
 		},
@@ -211,23 +229,30 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 				e.after(toggleSwitch);
 
 				// language chooser
-				var languageChooser = $('<select id="uhr-languagechooser' + this._id + '"></select>');
+				var options = [];
 				for (var code in window._uhr.languages) {
 					if (window._uhr.languages.hasOwnProperty(code)) {
 						var language = window._uhr.languages[code];
-						languageChooser.append('<option value="' + code + '">' + language.language + '</option>');
+						options.push('<option value="' + code + '">' + language.language + '</option>');
 					}
 				}
-				e.after(languageChooser);
+				if (options.length > 1) {
+					var languageChooser = $('<select id="uhr-languagechooser' + this._id + '"></select>');
+					for (var i = 0; i < options.length; i++) {
+						languageChooser.append(options[i]);
+					}
+					e.after(languageChooser);
+				}
 
 				// theme chooser
-				var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>');
-				themeChooser.append('<option value="black">Schwarz</option>');
-				themeChooser.append('<option value="red">Rot</option>');
-				themeChooser.append('<option value="blue">Blau</option>');
-				themeChooser.append('<option value="green">Grün</option>');
-				themeChooser.append('<option value="white">Weiss</option>');
-				e.after(themeChooser);
+				if (window._uhr.themes.length > 1) {
+					var themeChooser = $('<select id="uhr-themechooser' + this._id + '"></select>');
+					for (var i = 0; i < window._uhr.themes.length; i++) {
+						var theme = window._uhr.themes[i];
+						themeChooser.append('<option value="' + theme.class + '">' + theme.name + '</option>');
+					}
+					e.after(themeChooser);
+				}
 			}
 		},
 		_wireFunctionality: function() {
@@ -271,6 +296,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 			if (selectedTheme == undefined || this.options.force) {
 				selectedTheme = this.options.theme;
 			}
+			var found = false;
+			for (var i = 0; i < window._uhr.themes.length; i++) {
+				var styleClass = window._uhr.themes[i].class;
+				if (selectedTheme == styleClass) {
+					found = true;
+					break;
+				}
+			}
+			if (!found) {
+				var fallback = window._uhr.themes[0].class;
+				console.warn("Theme " + selectedTheme + " not found! Using fallback: " + fallback);
+				selectedTheme = fallback;
+			}
 			themeChooser.val(selectedTheme);
 			this.options.theme = "";
 			this.theme(selectedTheme);