JavaScriptCollection
diff --git a/‎README.md‎
Lines changed: 16 additions & 1 deletion b/‎README.md‎
Lines changed: 16 additions & 1 deletion
diff --git a/‎pace.coffee‎
Lines changed: 12 additions & 4 deletions b/‎pace.coffee‎
Lines changed: 12 additions & 4 deletions
@@ -20,7 +20,9 @@ You can set `Pace.options` before bringing in the file:
 Pace = {
   options: {
     // Disable the 'elements' source
-    elements: false
+    elements: false,
+
+    theme: 'barber-shop'
   }
 }
 ```
@@ -41,6 +43,19 @@ define(['pace'], function(pace){
 });
 ```
 
+Themes
+------
+
+Pace includes a bunch of themes to get you started.  Specify the theme of your choice as
+an option, and include the appropriate css file.
+
+You can specify the theme as an option, but to keep things simple, we also support
+specifying it as a seperate data attribute:
+
+```html
+<script data-pace-theme='barber-shop' src='pace.js'></script>
+```
+
 Collectors
 ----------
 
 
@@ -78,10 +78,15 @@ extend = (out, sources...) ->
         out[key] = val
   out
 
-getOptionsFromDOM = ->
-  el = document.querySelector '[data-pace-options]'
-  data = el.getAttribute 'data-pace-options'
+getFromDOM = (key='options', json=true) ->
+  el = document.querySelector "[data-pace-#{ key }]"
+
+  return unless el
+
+  data = el.getAttribute "data-pace-#{ key }"
 
+  return data if not json
+
   try
     return JSON.parse data
   catch e
@@ -90,7 +95,10 @@ getOptionsFromDOM = ->
 window.Pace ?= {}
 Pace.options ?= {}
 
-options = extend Pace?.options, getOptionsFromDOM(), defaultOptions
+options = extend Pace?.options, getFromDOM(), defaultOptions
+
+if domTheme = getFromDOM('theme', false)
+  options.theme = domTheme
 
 class Bar
   constructor: ->