Website: Check stored theme by default + link both theme selectors to…

…gether. Close #1038

code.js

@@ -118,6 +118,9 @@ if (toc.children.length > 0) {
 	}
 })();
 
+// setTheme is intentionally global,
+// so it can be accessed from download.js
+var setTheme;
 (function() {
 var p = $u.element.create('p', {
 	properties: {
@@ -140,15 +143,15 @@ if (!(current in themes)) {
 if (current === undefined) {
 	var stored = localStorage.getItem('theme');
 
-	current = stored in themes? current = stored : 'prism';
+	current = stored in themes? stored : 'prism';
 }
 
-function setTheme(id) {
+setTheme = function (id) {
 	var link = $$('link[href^="themes/prism"]')[0];
 
 	link.href = themes.meta.path.replace(/\{id}/g, id);
 	localStorage.setItem('theme', id);
-}
+};
 
 for (var id in themes) {
 

download.js

@@ -59,6 +59,8 @@ if (qstr && !hstr) {
 	window.location.search = '';
 }
 
+var storedTheme = localStorage.getItem('theme');
+
 for (var category in components) {
 	var all = components[category];
 
@@ -102,7 +104,7 @@ for (var category in components) {
 			inside: all.meta.section
 		});
 	}
-	
+
 	for (var id in all) {
 		if(id === 'meta') {
 			continue;
@@ -115,6 +117,9 @@ for (var category in components) {
 			case 'mandatory': disabled = true; // fallthrough
 			case 'default': checked = true;
 		}
+		if (category === 'themes' && storedTheme) {
+			checked = id === storedTheme;
+		}
 
 		var filepath = all.meta.path.replace(/\{id}/g, id);
 
@@ -157,7 +162,7 @@ for (var category in components) {
 			info.files.dev.paths.push(cssFile);
 		}
 
-		$u.element.create('label', {
+		var label = $u.element.create('label', {
 			attributes: {
 				'data-id': id
 			},
@@ -222,6 +227,22 @@ for (var category in components) {
 			],
 			inside: all.meta.section
 		});
+
+		// Add click events on main theme selector too.
+		(function (label) {
+			if (category === 'themes') {
+				var themeInput = $('#theme input[value="' + id + '"]');
+				var input = $('input', label);
+				if (themeInput) {
+					var themeInputOnclick = themeInput.onclick;
+					themeInput.onclick = function () {
+						input.checked = true;
+						input.onclick();
+						themeInputOnclick && themeInputOnclick.call(themeInput);
+					};
+				}
+			}
+		}(label));
 	}
 }
 
@@ -338,6 +359,15 @@ function update(updatedCategory, updatedId){
 			if (id !== 'meta' && !info.enabled) {
 				allChecked = false;
 			}
+
+			// Select main theme
+			if (category === 'themes' && id === updatedId && info.enabled) {
+				var themeInput = $('#theme input[value="' + updatedId + '"]');
+				if (themeInput) {
+					themeInput.checked = true;
+				}
+				setTheme(updatedId);
+			}
 		}
 
 		if (all.meta.addCheckAll) {