diff --git a/README.md b/README.md
index 1a310db..c87354c 100644
--- a/README.md
+++ b/README.md
@@ -14,20 +14,31 @@ You can register any key. To trigger, it will bind an event with your specified
## Installation
From CDN
```
-
+
```
From NPM
```
npm i floodlightjs
-import floodlight from 'floodlightjs';
```
## Demo + Documentation
[Live instance of Floodlight](https://rajnandan1.github.io/floodlightjs/index.html)
+
+## Instantiation
+#### ES5
+```
+let fl = new FloodLight();
+```
+#### ES6
+```
+import floodlight from 'floodlightjs'
+if (typeof window !== 'undefined') {
+ let fl = floodlight();
+}
+```
## Basic Usage - Implement a quick google search `g`
The below code implements a google search using floodgate. It will listen for the `g` key. When someone presses `g` it will show a search box.
```
-//import floodlight from 'floodlightjs'
let fl = new FloodLight();
//this takes to parameters. first parameter is the `key`, second is the description
@@ -97,6 +108,21 @@ fl.run();
## Customizations
Floodlightjs gives you control over how the UI elements look. You can pass a class for advanced handling or use simple colors.
+#### Separator
+```
+let config = {
+ paramSeparator: " " //search box will break multiple inputs using space. Default is ','
+}
+let fl = new FloodLight(config);
+```
+#### Simple theme set
+By default it will autodetect browser theme
+```
+let config = {
+ theme: "dark" //or light
+}
+let fl = new FloodLight(config);
+```
#### Simple Colors light or dark theme
```
let config = {
diff --git a/dist/floodlight.min.js b/dist/floodlight.min.js
index 20e4ad6..fc8db04 100644
--- a/dist/floodlight.min.js
+++ b/dist/floodlight.min.js
@@ -1,22 +1,22 @@
-var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.arrayIteratorImpl=function(a){var d=0;return function(){return db&&(b=Math.max(b+h,0));b"+g[d]+"");c.classList.add(r);c.innerHTML=a;c.style.cursor="pointer";c.style.padding="15px 10px";c.style.color=m;c.style.backgroundColor=k;c.addEventListener("mouseover",function(a){a=a.target||a.srcElement;a.style.backgroundColor=l;a.setAttribute("selected",!0)},!1);c.addEventListener("mouseout",function(a){a=a.target||a.srcElement;a.style.backgroundColor=
-k;a.removeAttribute("selected")},!1);c.addEventListener("click",y,!1);return c}function b(a){if(0<(a.target||a.srcElement).value.length){a=document.getElementById(n);if(null===document.getElementById(t)){var g=document.createElement("div");g.setAttribute("id",t);g.style.width="100%";g.style.maxHeight="400px";g.style.position="absolute";g.style.top="50px";g.style.borderRadius="8px";g.style.overflowY="auto";g.style.backgroundColor=k;g.style.border="2px solid "+l;a.parentNode.appendChild(g)}a=document.getElementById(t);
-document.getElementById(t).innerHTML="";g=w();var c=v().parameters;if(0!=g.length&&0!=c.length){document.addEventListener("keydown",z,!1);for(var b=0;bg.length)){var e=document.createElement("div");e.setAttribute("id",F+b);e.setAttribute("ix",b);e=d(e,f);b!=c.length-1&&(e.style.borderBottom="1px solid "+l);a.appendChild(e)}}A(0)}}else a=document.getElementById(t),a.parentNode.removeChild(a)}function e(a){var c=document.createElement("input");c.setAttribute("id",
-n);c.style.width="100%";c.style.height="45px";c.style.padding="10px 5px";c.style.fontSize="16px";c.style.color=m;c.style.borderRadius="8px";c.style.boxSizing="border-box";c.style.outline="none";c.style.backgroundColor=k;c.style.border="2px solid "+l;c.setAttribute("placeholder",v().name);c.value="";a.appendChild(c);setTimeout(function(){document.getElementById(n).focus()},10);document.getElementById(n).addEventListener("input",b);document.getElementById(n).addEventListener("keydown",function(a){40!=
-a.keyCode&&38!=a.keyCode||a.preventDefault()},!1)}function h(a){if(null===document.getElementById(u)){var c=document.createElement("div");c.setAttribute("id",u);c.style.position="fixed";c.style.zIndex=1E7;c.style.left="0%";c.style.top="0%";c.style.width="100vw";c.style.height="100vh";c.style.background="rgba(0,0,0, .3)";c.setAttribute("ix",a);document.body.appendChild(c);a=document.getElementById(u);c=document.createElement("div");c.setAttribute("id",B);c.style.left="50%";c.style.width="40%";c.style.top=
-"30%";c.style.position="absolute";c.style.transform="translate(-50%,-50%)";a.appendChild(c);e(document.getElementById(B))}}function q(){var a=document.getElementById(u);null!==a&&(a.parentNode.removeChild(a),document.removeEventListener("keydown",z,!1))}function C(a){for(var c=document.getElementsByClassName(r),b=-1,d=0;db&&(b=c.length-1)):"down"==a&&(b+=1,b>=c.length&&
-(b=0));A(b)}function y(a){a?(a=a.target||a.srcElement,a=D(parseInt(a.getAttribute("ix")))):a=D();for(var c=w(),b={},d=0;dc&&(c=Math.max(c+h,0));c"+g[d]+"");a.classList.add(r);a.innerHTML=b;a.style.cursor="pointer";a.style.padding="15px 10px";a.style.color=m;a.style.backgroundColor=k;a.addEventListener("mouseover",function(a){a=a.target||a.srcElement;a.style.backgroundColor=l;a.setAttribute("selected",!0)},!1);a.addEventListener("mouseout",function(a){a=a.target||a.srcElement;a.style.backgroundColor=
+k;a.removeAttribute("selected")},!1);a.addEventListener("click",y,!1);return a}function c(a){if(0<(a.target||a.srcElement).value.length){a=document.getElementById(n);if(null===document.getElementById(t)){var b=document.createElement("div");b.setAttribute("id",t);b.style.width="100%";b.style.maxHeight="400px";b.style.position="absolute";b.style.top="50px";b.style.borderRadius="8px";b.style.overflowY="auto";b.style.backgroundColor=k;b.style.border="2px solid "+l;a.parentNode.appendChild(b)}a=document.getElementById(t);
+document.getElementById(t).innerHTML="";b=w();var g=v().parameters;if(0!=b.length&&0!=g.length){document.addEventListener("keydown",z,!1);for(var c=0;cb.length)){var e=document.createElement("div");e.setAttribute("id",G+c);e.setAttribute("ix",c);e=d(e,f);c!=g.length-1&&(e.style.borderBottom="1px solid "+l);a.appendChild(e)}}A(0)}}else a=document.getElementById(t),a.parentNode.removeChild(a)}function e(a){var b=document.createElement("input");b.setAttribute("id",
+n);b.style.width="100%";b.style.height="45px";b.style.padding="10px 5px";b.style.fontSize="16px";b.style.color=m;b.style.borderRadius="8px";b.style.boxSizing="border-box";b.style.outline="none";b.style.backgroundColor=k;b.style.border="2px solid "+l;b.setAttribute("placeholder",v().name);b.value="";a.appendChild(b);setTimeout(function(){document.getElementById(n).focus()},10);document.getElementById(n).addEventListener("input",c);document.getElementById(n).addEventListener("keydown",function(a){40!=
+a.keyCode&&38!=a.keyCode||a.preventDefault()},!1)}function h(a){if(null===document.getElementById(u)){var b=document.createElement("div");b.setAttribute("id",u);b.style.position="fixed";b.style.zIndex=1E7;b.style.left="0%";b.style.top="0%";b.style.width="100vw";b.style.height="100vh";b.style.background="rgba(0,0,0, .3)";b.setAttribute("ix",a);document.body.appendChild(b);a=document.getElementById(u);b=document.createElement("div");b.setAttribute("id",B);b.style.left="50%";b.style.width="40%";b.style.top=
+"30%";b.style.position="absolute";b.style.transform="translate(-50%,-50%)";a.appendChild(b);e(document.getElementById(B))}}function q(){var a=document.getElementById(u);null!==a&&(a.parentNode.removeChild(a),document.removeEventListener("keydown",z,!1))}function C(a){for(var b=document.getElementsByClassName(r),g=-1,c=0;cg&&(g=b.length-1)):"down"==a&&(g+=1,g>=b.length&&
+(g=0));A(g)}function y(a){a?(a=a.target||a.srcElement,a=D(parseInt(a.getAttribute("ix")))):a=D();for(var b=w(),g={},c=0;c {
return x.trim();
});
diff --git a/index.html b/index.html
index 20d7440..15b4849 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,9 @@
-