New indicator style. It's also clickable

src/css/styles.css

@@ -20,9 +20,7 @@ code { font-size: 1.2em; font-weight: bold; }
 .help ul { list-style-type: none; margin: 0; padding: 0;  }
 .help p { margin-top: 0 }
 
-.configPnl .indicator { font-size: 0.7em; background: gray; color: white; padding: 2px 5px; }
+.indicator { font-size: 0.7em; padding: 2px 5px;  font-family: monospace; font-size: 1.3em; background: transparent; border: none; cursor: pointer }
-.configPnl .on { background: darkblue; }
-
 .error { color: maroon; }
 
 #view { padding: 10px}
@@ -31,9 +29,14 @@ code { font-size: 1.2em; font-weight: bold; }
 .light { background: rgb(250, 250, 250); }
 .light .one { color: black; }
 .light .zero { color: rgb(105, 106, 107); }
+.light .indicator { color: #ddd; }
+.light .on { color: #121212; }
 
 /* Dark */
 .dark { background: #121212; color: white;}
 .dark .expressionInput { background: black; color: white; }
 .dark a, .dark a:visited { color: white; }
+.dark .indicator { color: #555; }
+.dark .on { color: white; }
+
 

src/index.html

@@ -55,7 +55,7 @@
         <input id="in" type="text" class="expressionInput mono" data-controller="expressionInputCtrl" placeholder="type expression like '1>>2' or 'help' "/>
 
         <span data-controller="configPanelCtrl" class="configPnl">
-             <span id="emphasizeBytes" class="indicator on"><strong>em:</strong> Emphasize Bytes</span>
+             <span id="emphasizeBytes" data-cmd="em" class="indicator on" title="Emphasize Bytes">[em]</span>
         </span>
     </div>
 </header>
@@ -154,7 +154,7 @@
 
     var app = window.app;
     app.bootstrap(document.getElementById('rootView'));
-    
+
     var cmd = app.get('cmd');
 
     cmd.execute('help');

src/js/app/controllers.js

@@ -53,6 +53,7 @@ app.compose(function() {
 
     app.controller('cmdController', function() {
         var html = app.get('html');
+        var rootView = app.get('rootView');
 
         return {
             clear: function () {

src/js/app/run.js

@@ -41,3 +41,13 @@ app.run(function() {
         }
     }
 });
+
+// Cmd controls
+app.run(function () {
+    var controls = app.get('rootView').querySelectorAll('[data-cmd]');
+    Array.prototype.forEach.call(controls, function(el) {
+        el.addEventListener('click', function(e) {
+            app.get('cmd').execute(e.target.getAttribute('data-cmd'));
+        });
+    });
+});