Color scheme

src/css/main.css

@@ -22,6 +22,19 @@ html, body {
   bottom: 0;
   top: 0;
   position: absolute;
+  background-color: rgb(255, 250, 233);
+}
+
+.scheme-red {
+  background-color: #ff7373;
+}
+
+.scheme-green {
+  background-color: #65E17B;
+}
+
+.scheme-blue {
+  background-color: #6899d3;
 }
 
 .jiggly {

src/css/page-help.css

@@ -12,7 +12,6 @@
   overflow-y: auto;
   overflow-x: none;
   font-family: Trebuchet MS, Helvetica, sans-serif;
-  background-color: rgb(255, 250, 233);
 }
 
 #help-header {

src/css/page-main.css

@@ -23,7 +23,6 @@
 }
 
 #page-main {
-  background-color: rgb(255, 250, 233); /*(240, 100%, 99%);*/
   overflow: auto;
   top: 0;
   bottom: 0;

src/css/page-options.css

@@ -16,7 +16,6 @@ a, .tabbar a {
   overflow-y: auto;
   overflow-x: none;
   font-family: Trebuchet MS, Helvetica, sans-serif;
-  background-color: rgb(255, 250, 233);
 }
 
 #options-header {
@@ -157,3 +156,24 @@ a, .tabbar a {
     width: auto;
     height: 30px;
 }
+
+.color-item {
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+}
+
+.color-scheme #color-scheme-red {
+  background-color: #ff7373;
+  border: 1px solid #ff4040;
+}
+
+.color-scheme #color-scheme-green {
+  background-color: #65E17B;
+  border: 1px solid #38E156;
+}
+
+.color-scheme #color-scheme-blue {
+  background-color: #6899d3;
+  border: 1px solid #4284d3;
+}

src/js/templates.js

@@ -137,6 +137,13 @@ __p+='<textarea class="searchbar" placeholder="Search">'+
 }
 return __p;
 };
+ListIt.templates['options/color-scheme'] = function(obj){
+var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'')};
+with(obj||{}){
+__p+='<h3>Change Your Color Scheme</h3>\n<ul class="color-scheme hlist">\n  <li class="color-item" id="color-scheme-red"></li>\n  <li class="color-item" id="color-scheme-green"></li>\n  <li class="color-item" id="color-scheme-blue"></li>\n</ul>';
+}
+return __p;
+};
 ListIt.templates['options/importexport'] = function(obj){
 var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'')};
 with(obj||{}){

src/js/views/color-scheme.js

@@ -0,0 +1,37 @@
+(function(L) {
+  'use strict';
+
+  L.views.ColorSchemeView = Backbone.View.extend({
+    id: 'options-color-scheme',
+    className: 'options-item', 
+    render: function() {
+      this.$el.html(L.templates["options/color-scheme"]());
+      return this;
+    },
+
+    events: {
+      'click #color-scheme-red': 'red',
+      'click #color-scheme-blue': 'blue',
+      'click #color-scheme-green': 'green'
+    },
+
+    red: function(event){
+      L.pages['options'].change_color("scheme-red");
+      // L.pages['help'].change_color("scheme-red");
+      // L.pages['main'].change_color("scheme-red");
+    },
+
+    blue: function(event){
+      L.pages['options'].change_color("scheme-blue");
+      // L.pages['help'].change_color("scheme-blue");
+      // L.pages['main'].change_color("scheme-blue");
+    },
+
+    green: function(event){
+      L.pages['options'].change_color("scheme-green");
+      // L.pages['help'].change_color("scheme-green");
+      // L.pages['main'].change_color("scheme-green");
+    }
+
+  });
+})(ListIt);

src/js/views/help.js

@@ -19,6 +19,10 @@
       }
 
       return this;
+    },
+    change_color: function(new_scheme){
+      this.$el.attr("class", "page");
+      this.$el.addClass(new_scheme);
     }
   });
 })(ListIt);

src/js/views/main.js

@@ -34,6 +34,10 @@
         view.render();
       });
       return this;
+    },
+    change_color: function(new_scheme){
+      this.$el.attr("class", "page");
+      this.$el.addClass(new_scheme);
     }
   });
 })(ListIt);

src/js/views/options.js

@@ -17,7 +17,8 @@
           new L.views.ServerView({model: L.server}),
           new L.views.InfoView(),
           new L.views.PreferencesView({model: L.preferences}),
-          new L.views.ImportExportView()
+          new L.views.ImportExportView(),
+          new L.views.ColorSchemeView()
         ];
       }
     },
@@ -29,6 +30,10 @@
         body.append(panel.render().el);
       });
       return this;
+    },
+    change_color: function(new_scheme){
+      this.$el.attr("class", "page");
+      this.$el.addClass(new_scheme);
     }
   });
 

src/templates/options/color-scheme.html

@@ -0,0 +1,6 @@
+<h3>Change Your Color Scheme</h3>
+<ul class="color-scheme hlist">
+  <li class="color-item" id="color-scheme-red"></li>
+  <li class="color-item" id="color-scheme-green"></li>
+  <li class="color-item" id="color-scheme-blue"></li>
+</ul>