diff --git a/src/html/graph/index.html b/src/html/graph/index.html
index 17cbd5fb..6e21cc22 100644
--- a/src/html/graph/index.html
+++ b/src/html/graph/index.html
@@ -7,7 +7,8 @@
 
 	<title>radare2</title>
 
-        <link rel="stylesheet" type="text/css" href="qrc:/graph/html/graph/lib/css/disasm.css" />
+        <link rel="stylesheet" type="text/css" href="qrc:/graph/html/graph/lib/css/graph_dark.css" id="dark_theme"/>
+        <link rel="stylesheet" type="text/css" href="qrc:/graph/html/graph/lib/css/graph_light.css" id="light_theme"/>
         <link rel="stylesheet" type="text/css" href="qrc:/graph/html/graph/lib/css/joint.min.css" />
         <link rel="stylesheet" type="text/css" href="qrc:/graph/html/graph/lib/css/main.css" />
 
@@ -29,11 +30,13 @@
                     return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
                 };
 
-                r2ui.load_colors();
+                // Load r2 settings (TODO: Do we need this?)
                 r2.load_settings();
-                r2ui.graph = new GraphPanel(); 
-                r2ui.graph.seek(location.hash.substring(1));
-                r2ui.graph.render();
+
+                // Initialize and render graph
+                r2ui.graph_panel = new GraphPanel(); 
+                r2ui.graph_panel.set_theme("dark");
+                r2ui.graph_panel.seek(location.hash.substring(1));
             });
         </script>
 </head>
diff --git a/src/html/graph/lib/css/graph_dark.css b/src/html/graph/lib/css/graph_dark.css
new file mode 100644
index 00000000..165da945
--- /dev/null
+++ b/src/html/graph/lib/css/graph_dark.css
@@ -0,0 +1,176 @@
+.bbcanvas { float: left; }
+
+.flatcanvas { float: left; }
+
+.insaddr {
+  min-width: 7em;
+  display: inline-block;
+}
+
+#outergbox {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.instruction {
+  font-family: monospace;
+  white-space: nowrap;
+}
+
+.instructiondesc {
+  display: inline-block;
+}
+
+.data {
+  text-align: right;
+  min-width: 18px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.instructionbox {
+  position: absolute;
+}
+
+#gbox {
+  position: relative;
+  /*margin: 10px;*/
+}
+
+.bytes {
+  display: inline-block;
+  width: 170px;
+}
+
+input:focus {outline: none; }
+
+.ec_fline {color: rgb(0,127,127);}
+.ec_help {color: rgb(0,127,127);}
+.ec_args {color: rgb(0,127,127);}
+.ec_label {color: rgb(0,127,127);}
+.ec_flow {color: rgb(0,127,127);}
+.ec_prompt {color: rgb(0,127,127);}
+.ec_input {color: rgb(0,127,127);}
+.ec_btext {color: rgb(0,127,127);}
+.ec_swi {color: rgb(0,127,127);}
+.ec_comment {color: rgb(0,127,127);}
+.ec_fname {color: rgb(127,0,0);}
+.ec_flag {color: rgb(0,127,127);}
+.ec_offset {color: #0661FF;}
+.ec_other {color: rgb(127,127,127);} /* byte color bu default */
+.ec_b0x00 {color: rgb(0,127,0);}
+.ec_b0x7f {color: rgb(0,127,127);}
+.ec_b0xff {color: rgb(127,0,0);}
+.ec_math {color: rgb(127,127,0);}
+.ec_bin {color: rgb(127,127,0);}
+.ec_push {color: rgb(127,0,127);}
+.ec_pop {color: rgb(255,0,255);}
+.ec_jmp {color: rgb(0,127,0);}
+.ec_cjmp {color: rgb(0,127,0);}
+.ec_call {color: #EC0000;}
+.ec_nop {color: rgb(0,0,127);}
+.ec_ret {color: rgb(127,0,0);}
+.ec_trap {color: rgb(255,0,0);}
+.ec_invalid {color: rgb(255,0,0);}
+.ec_cmp {color: rgb(0,127,127);}
+.ec_reg {color: rgb(0,127,127);} /* (also applies to qword, brackets, etc) */
+.ec_creg {color: rgb(0,127,127);}
+.ec_mov {color: #5C5C5C;}
+.ec_num {color: #7B03B0;}
+
+.ec_gui_cflow {color: rgb(255,255,0);}
+.ec_gui_dataoffset {color: rgb(127,127,0);}
+.ec_gui_background {background-color: rgb(255,255,255); }
+.ec_gui_alt_background {background-color: rgb(50, 50, 50); }
+.ec_gui_border {border-color: rgb(234, 249, 255); }
+
+.autohighlight { background-color: #8AFF77 !important; }
+.autohighlighti { background-color: #8AFF77; }
+
+.hidden {display:none;}
+
+.lines {margin-left: 100px;}
+
+.basicblock {
+  border: 1px solid;
+  padding: 5px;
+  position: absolute;
+  pointer-events: none;
+  -webkit-user-select: none;
+  box-sizing: border-box;
+  z-index: 2;
+}
+
+.basicblock .instruction,
+.basicblock input {
+   pointer-events: auto;
+}
+
+#canvas {
+  position: relative;
+  display: inline-block;
+  background: transparent;
+  width:100%;
+  height:100%;
+  margin:10px;
+}
+
+#canvas svg,
+#minimap svg {
+  background: transparent;
+}
+
+#minimap svg .link,
+#canvas svg .link {
+  pointer-events: none;
+}
+
+#minimap svg .connection {
+  stroke-width: 5;
+}
+
+#minimap  {
+  border: 1px solid black;
+  position:absolute;
+  width:200px;
+  height:200px;
+  z-index: -10;
+  background: #EAF9FF;
+  opacity: 0.8;
+  filter: alpha(opacity=80); /* For IE8 and earlier */
+}
+
+#minimap .basicblock {
+  display: none;
+}
+
+#canvas #minimap_area {
+  display: none;
+  z-index: 0;
+}
+
+#canvas #minimap_area svg {
+  stroke: transparent;
+}
+
+#minimap_area {
+  border: 1px solid black;
+  position:absolute;
+  background: black;
+  opacity: 0.2;
+  filter: alpha(opacity=20); /* For IE8 and earlier */
+}
+
+#radareApp_mp_panels_pageDisassembler {
+  padding: 0px;
+}
+
+#main_panel {
+  overflow: auto;
+}
+
+.right_label {
+  float: right;
+}
+
diff --git a/src/html/graph/lib/css/disasm.css b/src/html/graph/lib/css/graph_light.css
similarity index 100%
rename from src/html/graph/lib/css/disasm.css
rename to src/html/graph/lib/css/graph_light.css
diff --git a/src/html/graph/lib/js/disasm.js b/src/html/graph/lib/js/disasm.js
index ed110da4..f4b18112 100644
--- a/src/html/graph/lib/js/disasm.js
+++ b/src/html/graph/lib/js/disasm.js
@@ -146,7 +146,7 @@ BBGraph.prototype.render = function() {
   // render graph
   joint.layout.DirectedGraph.layout(graph);
 
-  r2ui.graph = graph;
+  r2ui.graph_panel.graph = graph;
 
   // reposition graph
   reposition_graph();
@@ -193,7 +193,7 @@ BBGraph.prototype.render = function() {
     }
   });
 
-  if (r2ui.graph.minimap) {
+  if (r2ui.graph_panel.minimap) {
     update_minimap();
     $("#minimap_area").draggable({
       containment: "parent",
@@ -222,19 +222,19 @@ BBGraph.prototype.render = function() {
 // Functions
 
 function toggle_minimap() {
-  if (r2ui.graph.minimap) {
-    r2ui.graph.minimap = false;
-    r2ui.seek(r2ui.graph.selected_offset, false);
+  if (r2ui.graph_panel.minimap) {
+    r2ui.graph_panel.minimap = false;
+    r2ui.seek(r2ui.graph_panel.selected_offset, false);
     $('#minimap').hide();
   } else {
-    r2ui.graph.minimap = true;
-    r2ui.seek(r2ui.graph.selected_offset, false);
+    r2ui.graph_panel.minimap = true;
+    r2ui.seek(r2ui.graph_panel.selected_offset, false);
     $('#minimap').show();
   }
 }
 
 function update_minimap() {
-  if (r2ui.graph.minimap && $('#canvas svg').length) {
+  if (r2ui.graph_panel.minimap && $('#canvas svg').length) {
     var minimap_width = 200;
     var minimap_height = 200;
     var svg_width = $('#canvas svg')[0].getBBox().width;
@@ -263,7 +263,7 @@ function update_minimap() {
 }
 
 function reposition_graph() {
-  var bbs = r2ui.graph.getElements();
+  var bbs = r2ui.graph_panel.graph.getElements();
   var blocks = r2ui.get_fcn_BBs(r2ui.current_fcn_offset);
   var bb_offsets = Object.keys(blocks);
   for (var i in bbs) {
@@ -282,7 +282,9 @@ function reposition_graph() {
     }
   }
 }
+
 var flag = 0;
+
 function render_graph(x) {
   var obj;
   try {
@@ -292,7 +294,7 @@ function render_graph(x) {
   }
   if (obj[0] === undefined) return false;
   if (obj[0].blocks === undefined) return false;
-  var graph = new BBGraph();
+  var bbgraph = new BBGraph();
   r2ui.current_fcn_offset = obj[0].blocks[0].ops[0].offset;
 
   for (var bn = 0; bn < obj[0].blocks.length; bn++) {
@@ -325,17 +327,17 @@ function render_graph(x) {
     dom.id = "bb_" + addr;
     dom.className = "basicblock eny0-selectable ec_gui_background ec_gui_border";
     dom.innerHTML = idump;
-    graph.addVertex(addr, cnt, dom);
+    bbgraph.addVertex(addr, cnt, dom);
     if (bb.fail > 0) {
-      graph.addEdge(addr, bb.fail, "red");
+      bbgraph.addEdge(addr, bb.fail, "red");
       if (bb.jump > 0) {
-        graph.addEdge(addr, bb.jump, "green");
+        bbgraph.addEdge(addr, bb.jump, "green");
       }
     } else if (bb.jump > 0) {
-      graph.addEdge(addr, bb.jump, "blue");
+      bbgraph.addEdge(addr, bb.jump, "blue");
     }
   }
-  graph.render();
+  bbgraph.render();
 
   var element = $("#canvas svg g .element");
   element.on("mousedown", function(event){
@@ -854,7 +856,7 @@ function has_scrollbar(divnode) {
 }
 
 function on_scroll(event) {
-  if (!r2ui.graph.scrolling) {
+  if (!r2ui.graph_panel.scrolling) {
     var panel_disas = $("#main_panel").tabs("option", "active") === 0 ? true : false;
     event.preventDefault();
   }
@@ -864,15 +866,15 @@ function scroll_to_element(element) {
   if (element === undefined || element === null) return;
   var top = Math.max(0,element.documentOffsetTop() - ( window.innerHeight / 2 ));
   $('#center_panel').scrollTo(top, {axis: 'y'});
-  r2ui.graph.scroll_offset = top;
+  r2ui.graph_panel.scroll_offset = top;
 }
 
 function store_scroll_offset() {
-  r2ui.graph.scroll_offset = $('#center_panel').scrollTop();
+  r2ui.graph_panel.scroll_offset = $('#center_panel').scrollTop();
 }
 
 function scroll_to_last_offset() {
-  if (r2ui.graph.scroll_offset !== null) $('#center_panel').scrollTo(r2ui.graph.scroll_offset, {axis: 'y'});
+  if (r2ui.graph_panel.scroll_offset !== null) $('#center_panel').scrollTo(r2ui.graph_panel.scroll_offset, {axis: 'y'});
 }
 
 function rename(offset, old_value, new_value, space) {
@@ -923,11 +925,11 @@ function contains(a, obj) {
 }
 
 function handleInputTextChange() {
-  r2ui.graph.handleInputTextChange();
+  r2ui.graph_panel.handleInputTextChange();
 }
 
 function show_contextMenu(x,y) {
-  r2ui.graph.showContextMenu(x,y);
+  r2ui.graph_panel.showContextMenu(x,y);
 }
 
 function get_offset_flag(offset) {
@@ -987,14 +989,5 @@ function get_reloc_flag(reloc) {
   return full_name;
 }
 
-function do_randomcolors(element, inEvent) {
-  r2.cmd ('ecr;ec gui.background rgb:000', function() {
-    r2ui.load_colors ();
-  });
-}
-
-function inColor(x) {
-  return "e scr.color=true;"+x+";e scr.color=false";
-}
 
 
diff --git a/src/html/graph/lib/js/graph_panel.js b/src/html/graph/lib/js/graph_panel.js
index b669de15..253fb439 100644
--- a/src/html/graph/lib/js/graph_panel.js
+++ b/src/html/graph/lib/js/graph_panel.js
@@ -1,6 +1,7 @@
 
 // Graph Panel
 var GraphPanel = function () {
+  this.graph = null;
   this.min = 0;
   this.max = 0;
   this.block = 512;
@@ -174,6 +175,17 @@ GraphPanel.prototype.render = function(mode) {
     scroll_to_address(addr);
 };
 
+GraphPanel.prototype.set_theme = function(theme) {
+    if (theme === "dark") {
+        document.getElementById('dark_theme').disabled  = false;
+        document.getElementById('light_theme').disabled = true;
+    } else if (theme === "light") {
+        document.getElementById('dark_theme').disabled  = true;
+        document.getElementById('light_theme').disabled = false;
+    }
+    r2ui.load_colors();
+}
+
 GraphPanel.prototype.seek = function(addr, scroll) {
     var panel = this.panel;
     var error = false;
@@ -211,26 +223,26 @@ GraphPanel.prototype.goToAddress = function() {
 GraphPanel.prototype.handleInputTextChange = function() {
   if (this.renaming !== null && this.rbox.value.length > 0) {
     if ($(this.selected).hasClass('insaddr')) {
-      var old_value = get_offset_flag(r2ui.graph.selected_offset);
+      var old_value = get_offset_flag(r2ui.graph_panel.selected_offset);
       var type = "offsets";
-      r2.cmdj("afij @ " + r2ui.graph.selected_offset, function(x) {
+      r2.cmdj("afij @ " + r2ui.graph_panel.selected_offset, function(x) {
         if (x !== null && x !== undefined) {
-          if ("0x" + x[0].offset.toString(16) === r2ui.graph.selected_offset) {
+          if ("0x" + x[0].offset.toString(16) === r2ui.graph_panel.selected_offset) {
             type = "functions";
           }
         }
       });
-      rename(r2ui.graph.selected_offset, old_value, this.rbox.value, type);
+      rename(r2ui.graph_panel.selected_offset, old_value, this.rbox.value, type);
     } else if ($(this.selected).hasClass('faddr')) {
       if ($(this.selected).hasClass('fvar'))
-        r2.cmd("afvn " + r2ui.graph.renameOldValue + " " + r2ui.graph.rbox.value + " @ " + r2ui.graph.selected_offset, function(x){});
+        r2.cmd("afvn " + r2ui.graph_panel.renameOldValue + " " + r2ui.graph_panel.rbox.value + " @ " + r2ui.graph_panel.selected_offset, function(x){});
       else if ($(this.selected).hasClass('farg'))
-        r2.cmd("afan " + r2ui.graph.renameOldValue + " " + r2ui.graph.rbox.value + " @ " + r2ui.graph.selected_offset, function(x){});
+        r2.cmd("afan " + r2ui.graph_panel.renameOldValue + " " + r2ui.graph_panel.rbox.value + " @ " + r2ui.graph_panel.selected_offset, function(x){});
     } else {
       // TODO, try to recognize other spaces
-      var old_value = r2ui.graph.renameOldValue;
+      var old_value = r2ui.graph_panel.renameOldValue;
       if (old_value.indexOf("0x") === 0) old_value = "";
-      rename(r2ui.graph.selected_offset, old_value, r2ui.graph.rbox.value, "*");
+      rename(r2ui.graph_panel.selected_offset, old_value, r2ui.graph_panel.rbox.value, "*");
     }
     var instruction;
     instruction = $(this.selected).closest(".instruction").find('.insaddr')[0];
@@ -254,7 +266,7 @@ function scroll_to_address(address, pos) {
   var top = elements[0].documentOffsetTop() - offset;
   top = Math.max(0,top);
   $('#center_panel').scrollTo(top, {axis: 'y'});
-  r2ui.graph.scroll_offset = top;
+  r2ui.graph_panel.scroll_offset = top;
 }
 
 function handleClick(inEvent) {
@@ -269,8 +281,8 @@ function handleClick(inEvent) {
       // If instruction address, add address to history
       else if ($(inEvent.target).hasClass('insaddr')) {
         var address = get_address_from_class(inEvent.target);
-        r2ui.graph.selected = inEvent.target;
-        r2ui.graph.selected_offset = address;
+        r2ui.graph_panel.selected = inEvent.target;
+        r2ui.graph_panel.selected_offset = address;
         rehighlight_iaddress(address);
 
         r2ui.history_push(address);
@@ -278,13 +290,13 @@ function handleClick(inEvent) {
         var next_instruction;
         var prev_instruction;
 
-        next_instruction = $(r2ui.graph.selected).closest(".instruction").next().find('.insaddr')[0];
+        next_instruction = $(r2ui.graph_panel.selected).closest(".instruction").next().find('.insaddr')[0];
         if (next_instruction === undefined || next_instruction === null) {
-        next_instruction = $(r2ui.graph.selected).closest(".basicblock").next().find('.insaddr')[0];
+        next_instruction = $(r2ui.graph_panel.selected).closest(".basicblock").next().find('.insaddr')[0];
         }
-        prev_instruction = $(r2ui.graph.selected).closest(".instruction").prev().find('.insaddr')[0];
+        prev_instruction = $(r2ui.graph_panel.selected).closest(".instruction").prev().find('.insaddr')[0];
         if (prev_instruction === undefined || prev_instruction === null) {
-        prev_instruction = $(r2ui.graph.selected).closest(".basicblock").prev().find('.insaddr').last()[0];
+        prev_instruction = $(r2ui.graph_panel.selected).closest(".basicblock").prev().find('.insaddr').last()[0];
         }
 
         if (get_more_instructions) {
@@ -296,8 +308,8 @@ function handleClick(inEvent) {
   } else if ($(inEvent.target).hasClass('fvar') || $(inEvent.target).hasClass('farg')) {
     var eid = null;
     address = get_address_from_class(inEvent.target, "faddr");
-    r2ui.graph.selected = inEvent.target;
-    r2ui.graph.selected_offset = address;
+    r2ui.graph_panel.selected = inEvent.target;
+    r2ui.graph_panel.selected_offset = address;
     var classes = inEvent.target.className.split(' ');
     for (var j in classes) {
       var klass = classes[j];
@@ -322,13 +334,7 @@ function handleKeypress(inEvent) {
   if (inEvent.ctrlKey||inEvent.metaKey) return;
   if ($(inEvent.target).prop("tagName") === "INPUT" || $(inEvent.target).prop("tagName") === "TEXTAREA") return;
 
-  if (r2ui.graph.renaming !== null) return;
-
-  // Spacebar Switch flat and graph views
-  // if (key === ' ') {
-  //   do_switchview();
-  //   inEvent.preventDefault();
-  // }
+  if (r2ui.graph_panel.renaming !== null) return;
 
   if (key === 'm') toggle_minimap();
 
@@ -341,12 +347,12 @@ function handleKeypress(inEvent) {
   // j Seek to next Instruction
   if (key === 'j') {
     var get_more_instructions = false;
-    if ($(r2ui.graph.selected).hasClass("insaddr")) {
+    if ($(r2ui.graph_panel.selected).hasClass("insaddr")) {
       var next_instruction;
       
-      next_instruction = $(r2ui.graph.selected).closest(".instruction").next().find('.insaddr')[0];
+      next_instruction = $(r2ui.graph_panel.selected).closest(".instruction").next().find('.insaddr')[0];
       if (next_instruction === undefined || next_instruction === null) {
-        next_instruction = $(r2ui.graph.selected).closest(".basicblock").next().find('.insaddr')[0];
+        next_instruction = $(r2ui.graph_panel.selected).closest(".basicblock").next().find('.insaddr')[0];
       }
 
       var address = get_address_from_class(next_instruction);
@@ -354,8 +360,8 @@ function handleKeypress(inEvent) {
         r2ui.seek(address, false);
       } else {
         r2ui.history_push(address);
-        r2ui.graph.selected = next_instruction;
-        r2ui.graph.selected_offset = address;
+        r2ui.graph_panel.selected = next_instruction;
+        r2ui.graph_panel.selected_offset = address;
       }
       rehighlight_iaddress(address);
       scroll_to_address(address);
@@ -364,12 +370,12 @@ function handleKeypress(inEvent) {
   // k Seek to previous instruction
   if (key === 'k') {
     var get_more_instructions = false;
-    if ($(r2ui.graph.selected).hasClass("insaddr")) {
+    if ($(r2ui.graph_panel.selected).hasClass("insaddr")) {
       var prev_instruction;
 
-      var prev_instruction = $(r2ui.graph.selected).closest(".instruction").prev().find('.insaddr')[0];
+      var prev_instruction = $(r2ui.graph_panel.selected).closest(".instruction").prev().find('.insaddr')[0];
       if (prev_instruction === undefined || prev_instruction === null) {
-        prev_instruction = $(r2ui.graph.selected).closest(".basicblock").prev().find('.insaddr').last()[0];
+        prev_instruction = $(r2ui.graph_panel.selected).closest(".basicblock").prev().find('.insaddr').last()[0];
       }
 
       var address = get_address_from_class(prev_instruction);
@@ -377,18 +383,18 @@ function handleKeypress(inEvent) {
         r2ui.seek(address, false);
       } else {
         r2ui.history_push(address);
-        r2ui.graph.selected = prev_instruction;
-        r2ui.graph.selected_offset = address;
+        r2ui.graph_panel.selected = prev_instruction;
+        r2ui.graph_panel.selected_offset = address;
       }
       rehighlight_iaddress(address);
       scroll_to_address(address);
     }
   }
   // c Define function
-  if (key === 'c') do_define(r2ui.graph.selected);
+  if (key === 'c') do_define(r2ui.graph_panel.selected);
 
   // u Clear function metadata
-  if (key === 'u') do_undefine(r2ui.graph.selected);
+  if (key === 'u') do_undefine(r2ui.graph_panel.selected);
 
   // g Go to address
   if (key === 'g') {
@@ -397,19 +403,19 @@ function handleKeypress(inEvent) {
   }
 
   // ; Add comment
-  if (key === ';') do_comment(r2ui.graph.selected);
+  if (key === ';') do_comment(r2ui.graph_panel.selected);
 
   // n Rename
-  if (key === 'n') do_rename(r2ui.graph.selected, inEvent);
+  if (key === 'n') do_rename(r2ui.graph_panel.selected, inEvent);
 
   if (key === 'R') do_randomcolors();
 
   // esc
   if (keynum === 27) {
     // Esc belongs to renaming
-    if(r2ui.graph.renaming !== null) {
-      r2ui.graph.renaming.innerHTML = r2ui.graph.renameOldValue;
-      r2ui.graph.renaming = null;
+    if(r2ui.graph_panel.renaming !== null) {
+      r2ui.graph_panel.renaming.innerHTML = r2ui.graph_panel.renameOldValue;
+      r2ui.graph_panel.renaming = null;
     } else {
       // go back in history
       var addr = r2ui.history_prev();
@@ -419,7 +425,7 @@ function handleKeypress(inEvent) {
   }
   // enter
   if (keynum === 13) {
-    r2ui.graph.goToAddress();
+    r2ui.graph_panel.goToAddress();
   }
 }
 
@@ -427,8 +433,8 @@ function do_jumpto(address) {
   var element = $('.insaddr.addr_' + address);
   if (element.length > 0) {
     r2ui.history_push(address);
-    r2ui.graph.selected = element[0];
-    r2ui.graph.selected_offset = address;
+    r2ui.graph_panel.selected = element[0];
+    r2ui.graph_panel.selected_offset = address;
   } else {
     r2ui.seek(address, true);
   }
@@ -454,45 +460,45 @@ function do_rename(element, inEvent) {
        r2ui.seek("$$", false);
        scroll_to_last_offset();
      }
-  } else if (r2ui.graph.renaming === null && element !== null && $(element).hasClass("addr")) {
-    r2ui.graph.selected = element;
-    r2ui.graph.selected_offset = address;
-    r2ui.graph.renaming = element;
-    r2ui.graph.renameOldValue = element.innerHTML;
-    r2ui.graph.rbox = document.createElement('input');
-    r2ui.graph.rbox.setAttribute("type", "text");
-    r2ui.graph.rbox.setAttribute("id", "rename");
-    r2ui.graph.rbox.setAttribute("style", "border-width: 0;padding: 0;");
-    r2ui.graph.rbox.setAttribute("onChange", "handleInputTextChange()");
+  } else if (r2ui.graph_panel.renaming === null && element !== null && $(element).hasClass("addr")) {
+    r2ui.graph_panel.selected = element;
+    r2ui.graph_panel.selected_offset = address;
+    r2ui.graph_panel.renaming = element;
+    r2ui.graph_panel.renameOldValue = element.innerHTML;
+    r2ui.graph_panel.rbox = document.createElement('input');
+    r2ui.graph_panel.rbox.setAttribute("type", "text");
+    r2ui.graph_panel.rbox.setAttribute("id", "rename");
+    r2ui.graph_panel.rbox.setAttribute("style", "border-width: 0;padding: 0;");
+    r2ui.graph_panel.rbox.setAttribute("onChange", "handleInputTextChange()");
     if ($(element).hasClass('insaddr')) {
       var value = get_offset_flag(address);
-      r2ui.graph.rbox.setAttribute("value",value);
-      r2ui.graph.rbox.setSelectionRange(value.length, value.length);
+      r2ui.graph_panel.rbox.setAttribute("value",value);
+      r2ui.graph_panel.rbox.setSelectionRange(value.length, value.length);
     } else {
-      r2ui.graph.rbox.setAttribute("value", r2ui.graph.renameOldValue);
-      r2ui.graph.rbox.setSelectionRange(r2ui.graph.renameOldValue.length, r2ui.graph.renameOldValue.length);
+      r2ui.graph_panel.rbox.setAttribute("value", r2ui.graph_panel.renameOldValue);
+      r2ui.graph_panel.rbox.setSelectionRange(r2ui.graph_panel.renameOldValue.length, r2ui.graph_panel.renameOldValue.length);
     }
-    r2ui.graph.renaming.innerHTML = "";
-    r2ui.graph.renaming.appendChild(r2ui.graph.rbox);
-    setTimeout('r2ui.graph.rbox.focus();', 200);
+    r2ui.graph_panel.renaming.innerHTML = "";
+    r2ui.graph_panel.renaming.appendChild(r2ui.graph_panel.rbox);
+    setTimeout('r2ui.graph_panel.rbox.focus();', 200);
     inEvent.returnValue=false;
     inEvent.preventDefault();
-  } else if (r2ui.graph.renaming === null && element !== null && $(element).hasClass("faddr")) {
+  } else if (r2ui.graph_panel.renaming === null && element !== null && $(element).hasClass("faddr")) {
     address = get_address_from_class(element, "faddr");
-    r2ui.graph.selected = element;
-    r2ui.graph.selected_offset = address;
-    r2ui.graph.renaming = element;
-    r2ui.graph.renameOldValue = element.innerText;
-    r2ui.graph.rbox = document.createElement('input');
-    r2ui.graph.rbox.setAttribute("type", "text");
-    r2ui.graph.rbox.setAttribute("id", "rename");
-    r2ui.graph.rbox.setAttribute("style", "border-width: 0;padding: 0;");
-    r2ui.graph.rbox.setAttribute("onChange", "handleInputTextChange()");
-    r2ui.graph.rbox.setAttribute("value", r2ui.graph.renameOldValue);
-    r2ui.graph.rbox.setSelectionRange(r2ui.graph.renameOldValue.length, r2ui.graph.renameOldValue.length);
-    r2ui.graph.renaming.innerHTML = "";
-    r2ui.graph.renaming.appendChild(r2ui.graph.rbox);
-    setTimeout('r2ui.graph.rbox.focus();', 200);
+    r2ui.graph_panel.selected = element;
+    r2ui.graph_panel.selected_offset = address;
+    r2ui.graph_panel.renaming = element;
+    r2ui.graph_panel.renameOldValue = element.innerText;
+    r2ui.graph_panel.rbox = document.createElement('input');
+    r2ui.graph_panel.rbox.setAttribute("type", "text");
+    r2ui.graph_panel.rbox.setAttribute("id", "rename");
+    r2ui.graph_panel.rbox.setAttribute("style", "border-width: 0;padding: 0;");
+    r2ui.graph_panel.rbox.setAttribute("onChange", "handleInputTextChange()");
+    r2ui.graph_panel.rbox.setAttribute("value", r2ui.graph_panel.renameOldValue);
+    r2ui.graph_panel.rbox.setSelectionRange(r2ui.graph_panel.renameOldValue.length, r2ui.graph_panel.renameOldValue.length);
+    r2ui.graph_panel.renaming.innerHTML = "";
+    r2ui.graph_panel.renaming.appendChild(r2ui.graph_panel.rbox);
+    setTimeout('r2ui.graph_panel.rbox.focus();', 200);
     inEvent.returnValue=false;
     inEvent.preventDefault();
   }
diff --git a/src/html/graph/lib/js/r2ui.js b/src/html/graph/lib/js/r2ui.js
index 4d0a3793..727f99af 100644
--- a/src/html/graph/lib/js/r2ui.js
+++ b/src/html/graph/lib/js/r2ui.js
@@ -23,6 +23,8 @@ r2ui.load_colors = function () {
 };
 
 // Basic Blocks
+r2ui.current_fcn_offset = null;
+r2ui.graph_panel = null;
 r2ui.basic_blocks = {};
 r2ui.use_sdb = false;
 r2ui.get_fcn_BB = function(fcn_offset, bb_offset) {
@@ -85,8 +87,6 @@ r2ui.update_fcn_BB = function(fcn_offset, bb_offset, bbinfo) {
   }
 };
 
-r2ui.current_fcn_offset = null;
-r2ui.graph = null;
 
 // History
 r2ui.history = [];
@@ -167,7 +167,7 @@ r2ui.seek = function (addr, push, scroll) {
   if (push) r2ui.history_push(addr);
 
   r2.cmd ("ss " + addr, function () {
-    r2ui.graph.seek(addr, scroll);
+    r2ui.graph_panel.seek(addr, scroll);
   });
 };
 
@@ -182,8 +182,8 @@ r2ui.seek_in_graph = function (addr, push) {
 r2ui.seek_prev = function () {
   var addr = r2ui.history.pop ();
   r2.cmd("ss "+addr, function () {
-    r2ui.graph.seek(addr);
-    r2ui.graph.scrollTo(0, 0);
+    r2ui.graph_panel.seek(addr);
+    r2ui.graph_panel.scrollTo(0, 0);
   });
 };
 
diff --git a/src/resources.qrc b/src/resources.qrc
index 3a9cba82..8c4d7f28 100644
--- a/src/resources.qrc
+++ b/src/resources.qrc
@@ -73,7 +73,8 @@
     </qresource>
     <qresource prefix="/graph">
         <file>html/graph/index.html</file>
-        <file>html/graph/lib/css/disasm.css</file>
+        <file>html/graph/lib/css/graph_light.css</file>
+        <file>html/graph/lib/css/graph_dark.css</file>
         <file>html/graph/lib/css/joint.min.css</file>
         <file>html/graph/lib/css/main.css</file>
         <file>html/graph/lib/js/graph_panel.js</file>