--- a/playground/index.html Mon Oct 21 16:16:36 2013 -0400
+++ b/playground/index.html Tue Oct 22 10:44:59 2013 -0400
@@ -14,16 +14,18 @@
<!-- Meta Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-
+
+
<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap/font-awesome.css">
- <link rel="stylesheet" href="../common/prettify.css" type="text/css" />
+ <link rel="stylesheet" type="text/css" href="../common/prettify.css">
<!-- CodeMirror -->
- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.css">
- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/addon/lint/lint.css">
+ <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/codemirror.css">
+ <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/addon/lint/lint.css">
+ <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/theme/elegant.css" id="theme-stylesheet">
<link rel="shortcut icon" href="../favicon.ico" />
</head>
@@ -103,6 +105,44 @@
<button id="btn-recipe" class="btn button"><span>Recipe</span></button>
<button id="btn-library" class="btn button"><span>Library</span></button>
</div>
+
+ <div class="pull-right">
+ <div class="dropdown">
+ <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+ <i class="icon-eye-open"></i> <b id="theme-name">elegant</b> <b class="caret"></b>
+ </button>
+ <ul id="theme-select" class="dropdown-menu">
+ <li><a>3024-day</a></li>
+ <li><a>3024-night</a></li>
+ <li><a>ambiance</a></li>
+ <li><a>base16-dark</a></li>
+ <li><a>base16-light</a></li>
+ <li><a>blackboard</a></li>
+ <li><a>cobalt</a></li>
+ <li><a>eclipse</a></li>
+ <li><a>elegant</a></li>
+ <li><a>erlang-dark</a></li>
+ <li><a>lesser-dark</a></li>
+ <li><a>mbo</a></li>
+ <li><a>midnight</a></li>
+ <li><a>monokai</a></li>
+ <li><a>neat</a></li>
+ <li><a>night</a></li>
+ <li><a>paraiso-dark</a></li>
+ <li><a>paraiso-light</a></li>
+ <li><a>rubyblue</a></li>
+ <li><a>solarized dark</a></li>
+ <li><a>solarized light</a></li>
+ <li><a>the-matrix</a></li>
+ <li><a>tomorrow-night-eighties</a></li>
+ <li><a>twilight</a></li>
+ <li><a>vibrant-ink</a></li>
+ <li><a>xq-dark</a></li>
+ <li><a>xq-light</a></li>
+ </ul>
+ </div>
+ </div>
+
<br/><br/>
<div id="markup-container">
<div class="row">
--- a/playground/playground.js Mon Oct 21 16:16:36 2013 -0400
+++ b/playground/playground.js Tue Oct 22 10:44:59 2013 -0400
@@ -176,6 +176,7 @@
lineWrapping: true,
mode: "application/json",
gutters: ["CodeMirror-lint-markers"],
+ theme: "elegant",
lint: true
});
@@ -532,10 +533,24 @@
});
});
-
$('#use-context-map').change(function() {
playground.process();
});
+
+ $('#theme-select a').click(function(evt){
+ var theme = evt.currentTarget.text;
+
+ $("#theme-name").text(theme);
+
+ $('#theme-stylesheet').prop("href",
+ "//cdnjs.cloudflare.com/ajax/libs/codemirror/3.16.0/theme/" +
+ theme + ".css"
+ );
+
+ for(var key in playground.editors){
+ playground.editors[key].setOption("theme", theme);
+ }
+ });
});
})(jQuery);