diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..8806480
Binary files /dev/null and b/.DS_Store differ
diff --git a/assets/app.js b/assets/app.js
index 5e90e89..e616068 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -8,7 +8,14 @@ var getTemplateHtml = template => {
 	})
 	.then(function(html) {
 		document.getElementById('iframe').contentWindow.document.write(html);
-		console.log(document.getElementById('iframe').contentWindow.document)
+		// console.log(document.getElementById('iframe').contentWindow.document)
+
+		var elements = document.getElementById('iframe').contentWindow.document.querySelectorAll("body *");
+		var numElements = elements.length;
+		var i;
+		for (i = 0; i < numElements; i++) {
+			elements[i].addEventListener("click", addColorTrigger);
+		}
 	});
 }
 
@@ -18,6 +25,12 @@ var valueChange = value => {
 	iframehtml.innerHTML = val
 }
 
+var addColorTrigger = (e) => {
+	console.log("click");
+	console.log(e.currentTarget);
+
+}
+
 var downloadPage = () => {
 	var pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document)
 	pageContents = pageContents.replace("rep_DEVNAME", document.getElementById("devname").value)
diff --git a/index.html b/index.html
index 750cdc0..a29fedd 100644
--- a/index.html
+++ b/index.html
@@ -22,11 +22,11 @@
                 <button class="themebtn" id="material" onclick="getTemplateHtml('material')">Material</button>
             </div>
             <!-- Colour inputs -->
-            <!-- <div id="themeclrs">
+            <div id="themeclrs">
                 <h2>Colours</h2>
                 <input type="color" class="themeclr" id="primary">
                 <input type="color" class="themeclr" id="secondary">
-            </div> -->
+            </div>
             <div id="inputs">
                 <h2>Values</h2>
                 <label for="sitename">Site name</label>