themes.html

---
layout: basic
---

<div class="container">
  <div class="row">
  <form class="form-horizontal" action="#">
      <div class="form-group">
        <label for="select" class="col-lg-2 control-label">Themes</label>
        <div class="col-lg-10">
          <select class="form-control" id="select">
          </select>
        </div>
      </div>
      <div class="form-group">
        <label for="textArea" class="col-lg-2 control-label">Textarea</label>
        <div class="col-lg-10">
           <div id="summernote"></div>
        </div>
      </div>
  </form>
  </div>
</div><!-- /.container -->
<script>
  var themes = {
    "default": "//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css",
    "cerulean" : "//bootswatch.com/3/cerulean/bootstrap.css",
    "cosmo" : "//bootswatch.com/3/cosmo/bootstrap.css",
    "cyborg" : "//bootswatch.com/3/cyborg/bootstrap.css",
    "darkly" : "//bootswatch.com/3/darkly/bootstrap.css",
    "flatly" : "//bootswatch.com/3/flatly/bootstrap.css",
    "lumen" : "//bootswatch.com/3/lumen/bootstrap.css",
    "paper" : "//bootswatch.com/3/paper/bootstrap.css",
    "journal" : "//bootswatch.com/3/journal/bootstrap.css",
    "readable" : "//bootswatch.com/3/readable/bootstrap.css",
    "sandstone" : "//bootswatch.com/3/sandstone/bootstrap.css",
    "simplex" : "//bootswatch.com/3/simplex/bootstrap.css",
    "slate" : "//bootswatch.com/3/slate/bootstrap.css",
    "spacelab" : "//bootswatch.com/3/spacelab/bootstrap.css",
    "superhero" : "//bootswatch.com/3/superhero/bootstrap.css",
    "united" : "//bootswatch.com/3/united/bootstrap.css",
    "yeti" : "//bootswatch.com/3/yeti/bootstrap.css",
  }
  $(function () {
    var $themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />')
    $themesheet.appendTo('head');
    var options = $.map(themes, function (url, theme) {
      return '<option value="' + theme + '">' + theme + '</option>';
    }).join('');
    $('#select').html(options).on('change', function(){
      $themesheet.attr('href', themes[$(this).val()]);
    });
    $('#summernote').summernote({
      tabsize: 2,
      height: 100
    });
  });
</script>