Remember theme choice

src/index.html

@@ -33,6 +33,8 @@
     <script type="text/javascript" src="js/app/services.js"></script>
     <script type="text/javascript" src="js/app/controllers.js"></script>
     <script type="text/javascript" src="js/app/cmd/commands.js"></script>
+
+    <script type="text/javascript" src="js/app/run.js"></script>
     <!-- /build -->
 
     <!-- build:js js/analytics.js -->

src/js/app.js

@@ -6,7 +6,8 @@
     var app = new core.AppShell(di);
 
     app.set('cmdConfig', core.ObservableObject.create({
-        emphasizeBytes: true
+        emphasizeBytes: true,
+        theme: 'dark'
     }));
 
     app.debugMode = false;

src/js/app/cmd/commands.js

@@ -4,7 +4,6 @@ app.run(function() {
     var cmd = app.get('cmd');
     var cmdConfig = app.get('cmdConfig');
     var rootView = app.get('rootView');
-    var shell = app.get('shell');
 
     cmd.commands({
         'help': function() {
@@ -22,10 +21,10 @@ app.run(function() {
             cmdConfig.emphasizeBytes = !cmdConfig.emphasizeBytes;
         },
         'dark': function() {
-            shell.setDarkTheme();
+            cmdConfig.theme = 'dark';
         },
         light: function () {
-            shell.setLightTheme();
+            cmdConfig.theme = 'light';
         },
         about: function() {
             var aboutResult = document.querySelector('.result .aboutTpl');

src/js/app/run.js

@@ -0,0 +1,43 @@
+// Theme change
+app.run(function(){
+    var rootView = app.get('rootView');
+    var cmdConfig = app.get('cmdConfig');
+
+    cmdConfig.observe('theme', function (theme) {
+        console.log('changed theme');
+        var theOther = theme == 'dark' ? 'light' : 'dark';
+
+        if(rootView.classList.contains(theme)) {
+            return;
+        }
+
+        rootView.classList.remove(theOther);
+        rootView.classList.add(theme);
+    });
+});
+
+// Save config in local store
+app.run(function() {
+    var cfg = app.get('cmdConfig');
+    var storeKey = 'cmdConfig';
+
+    load();
+
+    cfg.observe(function(property, value){
+        save();
+    });
+
+    function save() {
+        localStorage.setItem(storeKey,  JSON.stringify(cfg.store()));
+    }
+
+    function load() {
+        var json = localStorage.getItem(storeKey), stored;
+        if(core.is.string(json)) {
+            stored = JSON.parse(json);
+            for(var key in stored) {
+                cfg[key] = stored[key];
+            }
+        }
+    }
+});

src/js/app/services.js

@@ -6,46 +6,6 @@
     app.set('should', core.should);
     app.set('bindr', core.bindr);
 
-    // Save config in local store
-    app.run(function() {
-        var cfg = app.get('cmdConfig');
-        var storeKey = 'cmdConfig';
-
-        load();
-
-        cfg.observe(function(property, value){
-            save();
-        });
-
-        function save() {
-            localStorage.setItem(storeKey,  JSON.stringify(cfg.store()));
-        }
-
-        function load() {
-            var json = localStorage.getItem(storeKey), stored;
-            if(core.is.string(json)) {
-                stored = JSON.parse(json);
-                for(var key in stored) {
-                    cfg[key] = stored[key];
-                }
-            }
-        }
-    });
-
-    app.set('shell', function(){
-        var rootView = app.get('rootView');
-
-        return {
-            setDarkTheme: function() {
-                rootView.classList.remove('light');
-                rootView.classList.add('dark');
-            },
-            setLightTheme: function() {
-                rootView.classList.remove('dark');
-                rootView.classList.add('light');
-            }
-        }
-    });
 /*
     var template = {
         compile: function (template) {

src/js/core/observable.js

@@ -47,7 +47,7 @@
         else if(is.string(property) && is.aFunction(handler)) {
             func = function (p, v) {
                 if(p === property) {
-                    handler(p, v)
+                    handler(v)
                 }
             }
         }