diff --git a/js/config.js b/js/config.js
index d080ad65..a69f3092 100644
--- a/js/config.js
+++ b/js/config.js
@@ -43,3 +43,8 @@ if(location.hostname.indexOf("benweet.github.io") === 0) {
GATEKEEPER_URL = "http://stackedit-gatekeeper.herokuapp.com/";
TUMBLR_PROXY_URL = "http://stackedit-tumblr-proxy.herokuapp.com/";
}
+
+var THEME_LIST = {
+ "": "Default",
+ "blue-gray": "Blue-Gray"
+};
diff --git a/js/core.js b/js/core.js
index a73f1caa..5f95cdc3 100644
--- a/js/core.js
+++ b/js/core.js
@@ -241,6 +241,8 @@ define(
+ core.settings.layoutOrientation + "]").prop("checked", true);
// Scroll Link
$("#input-settings-scroll-link").prop("checked", core.settings.scrollLink);
+ // Theme
+ $("#input-settings-theme").val(localStorage.theme);
// Converter type
$("#input-settings-converter-type").val(core.settings.converterType);
// MathJax
@@ -265,6 +267,8 @@ define(
// Layout orientation
newSettings.layoutOrientation = $(
"input:radio[name=radio-layout-orientation]:checked").prop("value");
+ // Theme
+ var theme = $("#input-settings-theme").val();
// Converter type
newSettings.converterType = $("#input-settings-converter-type").val();
// MathJax
@@ -287,6 +291,7 @@ define(
if(!event.isPropagationStopped()) {
$.extend(core.settings, newSettings);
localStorage.settings = JSON.stringify(newSettings);
+ localStorage.theme = theme;
}
};
@@ -796,6 +801,11 @@ define(
$.jGrowl.defaults.closeTemplate = '';
$.jGrowl.defaults.position = 'bottom-right';
+ // Load theme list
+ _.each(THEME_LIST, function(name, value) {
+ $("#input-settings-theme").append($(''));
+ });
+
// listen to online/offline events
$(window).on('offline', core.setOffline);
$(window).on('online', core.setOnline);
diff --git a/themes/blue-gray/ajax-loader-blue-gray.gif b/themes/blue-gray/ajax-loader-blue-gray.gif
new file mode 100644
index 00000000..4ed29d0b
Binary files /dev/null and b/themes/blue-gray/ajax-loader-blue-gray.gif differ
diff --git a/themes/blue-gray/blue-gray.css b/themes/blue-gray/blue-gray.css
new file mode 100644
index 00000000..12e19fae
--- /dev/null
+++ b/themes/blue-gray/blue-gray.css
@@ -0,0 +1,65 @@
+body,
+.btn,
+.well,
+.modal-footer,
+pre,
+input[disabled],
+select[disabled],
+textarea[disabled],
+.input-prepend .add-on {
+ background-color: #f1f2f7;
+}
+
+.navbar-inner {
+ background-color: #ced5de !important;
+}
+
+.navbar-inner .btn {
+ background-color: #ced5de;
+}
+
+.btn:hover,
+.navbar-inner .btn:hover,
+.navbar-inner .btn:focus,
+.navbar-inner .btn:active,
+.navbar-inner .btn.active,
+.btn-group.open .btn.dropdown-toggle {
+ background-color: #e1e6ed;
+}
+
+.btn-primary {
+ background-color: #80838a;
+}
+
+.btn-primary:hover {
+ background-color: #8e929a;
+}
+
+.navbar-inner .btn.disabled,
+.navbar-inner .btn[disabled] {
+ background-color: #ced5de;
+}
+
+.navbar .nav > li > a {
+ color: #64656b;
+}
+
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus,
+.dropdown-submenu:hover > a,
+.dropdown-submenu:focus > a,
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus,
+div.jGrowl div.jGrowl-notification {
+ background-color: #80838a;
+}
+
+.working-indicator.show {
+ background-image: url("ajax-loader-blue-gray.gif");
+}
+
+.viewer .navbar-inner {
+ background-color:rgba(195,203,214,0.75) !important;
+}
+
diff --git a/viewer.html b/viewer.html
index 080b9c10..9b12ac4b 100644
--- a/viewer.html
+++ b/viewer.html
@@ -11,15 +11,17 @@