diff --git a/app/app.js b/app/app.js
index 4f4ff19..b53aa72 100644
--- a/app/app.js
+++ b/app/app.js
@@ -13,6 +13,7 @@
app.bootstrap = function(rootViewElement) {
this.rootViewElement = rootViewElement;
+ this.set('rootView', rootViewElement)
this.initialize();
};
diff --git a/app/cmd/commands.js b/app/cmd/commands.js
index 6d3b405..6dc6ce6 100644
--- a/app/cmd/commands.js
+++ b/app/cmd/commands.js
@@ -3,6 +3,8 @@ 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() {
@@ -18,6 +20,12 @@ app.run(function() {
},
'em': function() {
cmdConfig.emphasizeBytes = !cmdConfig.emphasizeBytes;
+ },
+ 'dark': function() {
+ shell.setDarkTheme();
+ },
+ light: function () {
+ shell.setLightTheme();
}
});
diff --git a/app/controllers.js b/app/controllers.js
index 6c21849..bed0486 100644
--- a/app/controllers.js
+++ b/app/controllers.js
@@ -93,7 +93,6 @@ app.compose(function() {
}
}
});
-
});
diff --git a/app/services.js b/app/services.js
index 4973eae..eaea2ce 100644
--- a/app/services.js
+++ b/app/services.js
@@ -32,6 +32,20 @@
}
});
+ 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) {
diff --git a/components/controllersFeature.js b/components/controllersFeature.js
index 08a5ca7..c449f5b 100644
--- a/components/controllersFeature.js
+++ b/components/controllersFeature.js
@@ -19,7 +19,7 @@
};
app.run(function(){
- attachControllers(app.rootViewElement, app.di);
+ attachControllers(app.get('rootView'), app.di);
});
function addControllerMixin(ctrl) {
diff --git a/components/templatesFeature.js b/components/templatesFeature.js
index 07c2b5e..bccf5c5 100644
--- a/components/templatesFeature.js
+++ b/components/templatesFeature.js
@@ -19,7 +19,7 @@
}
app.run(function() {
- readTemplates(app.rootViewElement);
+ readTemplates(app.get('rootView'));
})
function readTemplates(containerEl) {
diff --git a/css/styles.css b/css/styles.css
index ef4eb03..85d79f0 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -13,12 +13,11 @@ code { font-size: 1.2em; font-weight: bold; }
.expression .label { font-weight: bold; padding-right: 5px; text-align: right; }
.expression .bin { letter-spacing: 3px; }
.expression .byte { margin: 0 3px; }
-.expression .one { color: black }
.expression .zero { color: #848586 }
.expression .result td { border-top: dotted 1px gray; }
.expression { font-size: 1.5em; font-family: monospace }
-.help { padding: 10px; background: #f8f8f8; }
+.help { padding: 10px; }
.help ul { list-style-type: none; margin: 0; padding: 0; }
.help p { margin-top: 0 }
@@ -27,4 +26,12 @@ code { font-size: 1.2em; font-weight: bold; }
.error { color: maroon; }
-#view { padding: 10px}
\ No newline at end of file
+#view { padding: 10px}
+
+/* Light */
+.light .one { color: black; }
+.light .help { background: #f8f8f8 }
+/* Dark */
+.dark { background: black; color: white;}
+.dark .help { background: #222 }
+.dark .expressionInput { background: black; color: white; }
\ No newline at end of file
diff --git a/index.html b/index.html
index 9ae4a8c..64b6709 100644
--- a/index.html
+++ b/index.html
@@ -34,7 +34,7 @@
-
+
BitwiseCmd
@@ -67,6 +67,8 @@
clear — clear output pane
help — display this help
em — Turn On/Off Emphasize Bytes
+ dark — Set Dark theme
+ light — Set Light theme