Add ability to define custom themes.

Fixes #352

config/ace.json

@@ -1,6 +1,7 @@
 {
   "themes": [
     { "name": "ambiance", "label": "Ambiance" },
+    { "name": "caret", "label": "Caret (custom)" },
     { "name": "chaos", "label": "Chaos" },
     { "name": "chrome", "label": "Chrome" },
     { "name": "clouds", "label": "Clouds" },

config/theme.json

@@ -0,0 +1,151 @@
+{
+  "dark": false,
+  "editor": {
+    "background-color": "#FFFFFF",
+    "color": "black"
+  },
+  "styles": {
+    //gutter
+    ".ace_gutter": {
+      "background": "#808",
+      "color": "#CCC",
+      "overflow": "hidden"
+    },
+    //print margin
+    ".ace_print-margin": {
+      "width": "1px",
+      "background": "#e8e8e8"
+    },
+    //cursor
+    ".ace_cursor": {
+      "color": "black"
+    },
+    //whitespace markers
+    ".ace_invisible": {
+      "color": "rgb(191, 191, 191)"
+    },
+    //built-in constants
+    ".ace_constant.ace_buildin": {
+      "color": "rgb(88, 72, 246)"
+    },
+    //language constants
+    ".ace_constant.ace_language": {
+      "color": "rgb(88, 92, 246)"
+    },
+    //library constants
+    ".ace_constant.ace_library": {
+      "color": "rgb(6, 150, 14)"
+    },
+    //numeric constant
+    ".ace_constant.ace_numeric": {
+      "color": "rgb(0, 0, 205)"
+    },
+    //invalid code
+    ".ace_invalid": {
+      "background-color": "rgb(153, 0, 0)",
+      "color": "white"
+    },
+    //folding markers
+    ".ace_fold": {
+    },
+    //functions
+    ".ace_support.ace_function": {
+      "color": "rgb(60, 76, 114)"
+    },
+    //constants
+    ".ace_support.ace_constant": {
+      "color": "rgb(6, 150, 14)"
+    },
+    //types and classes
+    ".ace_support.ace_type, .ace_support.ace_class .ace_support.ace_other": {
+      "color": "rgb(109, 121, 222)"
+    },
+    //paremeters
+    ".ace_variable.ace_parameter": {
+      "font-style": "italic",
+      "color": "#FD971F"
+    },
+    //operators
+    ".ace_keyword.ace_operator": {
+      "color": "rgb(104, 118, 135)"
+    },
+    //comments
+    ".ace_comment": {
+      "color": "#236e24"
+    },
+    //doc comments
+    ".ace_comment.ace_doc": {
+      "color": "#236e24"
+    },
+    //doc comment tags
+    ".ace_comment.ace_doc.ace_tag": {
+      "color": "#236e24"
+    },
+    //variable
+    ".ace_variable": {
+      "color": "rgb(49, 132, 149)"
+    },
+    //xml-pe
+    ".ace_xml-pe": {
+      "color": "rgb(104, 104, 91)"
+    },
+    //named function
+    ".ace_entity.ace_name.ace_function": {
+      "color": "#0000A2"
+    },
+    //heading
+    ".ace_heading": {
+      "color": "rgb(12, 7, 255)"
+    },
+    //list
+    ".ace_list": {
+      "color": "rgb(185, 6, 144)"
+    },
+    //selection
+    ".ace_marker-layer .ace_selection": {
+      "background": "rgb(181, 213, 255)"
+    },
+    //step
+    ".ace_marker-layer .ace_step": {
+      "background": "rgb(252, 255, 0)"
+    },
+    //stack
+    ".ace_marker-layer .ace_stack": {
+      "background": "rgb(164, 229, 101)"
+    },
+    //bracket
+    ".ace_marker-layer .ace_bracket": {
+      "margin": "-1px 0 0 -1px",
+      "border": "1px solid rgb(192, 192, 192)"
+    },
+    //active line
+    ".ace_marker-layer .ace_active-line": {
+      "background": "rgba(0, 0, 0, 0.07)"
+    },
+    //active line (gutter)
+    ".ace_gutter-active-line": {
+      "background-color": "#404"
+    },
+    //selected word
+    ".ace_marker-layer .ace_selected-word": {
+      "background": "rgb(250, 250, 255)",
+      "border": "1px solid rgb(200, 200, 250)"
+    },
+    //keywords
+    ".ace_storage, .ace_keyword, .ace_meta.ace_tag": {
+      "color": "rgb(147, 15, 128)"
+    },
+    //regex
+    ".ace_string.ace_regex": {
+      "color": "rgb(255, 0, 0)"
+    },
+    //string
+    ".ace_string": {
+      "color": "#1A1AA6"
+    },
+    //attribute name
+    ".ace_entity.ace_other.ace_attribute-name": {
+      "color": "#994409"
+    }
+  }
+}

js/editor.js

@@ -12,6 +12,8 @@ define([
   var aceConfig = Settings.get("ace");
 
   var editor = window.editor = ace.edit("editor");
+  //disable annoying debug message
+  editor.$blockScrolling = Infinity;
   
   var themes = document.querySelector(".theme");
   

js/main.js

@@ -14,6 +14,7 @@ require([
     "ui/menus",
     "ui/palette",
     "ui/cli",
+    "ui/theme",
     "api",
     "storage/syncfile"
   ], function(command, editor, Settings, dialog, sessions, M, i18n) {

js/ui/theme.js

@@ -0,0 +1,46 @@
+define([
+  "command",
+  "settings!theme",
+  "util/template!templates/theme.css",
+  "util/dom2"
+], function(command, Settings, inflate) {
+  
+  var element = document.querySelector("#caret-theme");
+  
+  var config = {
+    isDark: false,
+    cssText: "",
+    cssClass: "ace-caret"
+  };
+  
+  var updateTheme = function(c) {
+    var theme = Settings.get("theme");
+    config.isDark = theme.dark;
+    var data = { blocks: [] };
+    theme.styles[""] = theme.editor;
+    for (var selector in theme.styles) {
+      var block = {
+        selector: selector,
+        styles: []
+      };
+      var definition = theme.styles[selector];
+      for (var prop in definition) {
+        block.styles.push({
+          prop: prop,
+          value: definition[prop]
+        });
+      }
+      data.blocks.push(block);
+    }
+    var css = inflate.getHTML("templates/theme.css", data);
+    element.innerHTML = css;
+  }
+  
+  ace.define("ace/theme/caret", [], function() {
+    return config;
+  });
+  
+  updateTheme();
+  command.on("init:restart", updateTheme);
+  
+})

main.html

@@ -4,6 +4,7 @@
     <title>Caret</title>
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="css/caret.css" id="theme" charset="UTF-8">
+    <style id="caret-theme"></style>
   </head>
   <body>
   

templates/theme.css

@@ -0,0 +1,11 @@
+{{#blocks}}
+.ace-caret {{selector}} {
+  {{#styles}}
+  {{prop}}: {{value}};
+  {{/styles}}
+}
+{{/blocks}}
+
+.ace-cart .ace_indent-guide {
+  background: url("data:image/png,base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==") right repeat-y,
+}