diff --git a/tests/playground.html b/tests/playground.html
index d2f5d50a7..d50977df4 100644
--- a/tests/playground.html
+++ b/tests/playground.html
@@ -65,6 +65,10 @@
 <script src="../blocks/variables_dynamic.js"></script>
 <script src="../blocks/procedures.js"></script>
 <script src="blocks/test_blocks.js"></script>
+<script src="../style/highcontrast.js"></script>
+<script src="../style/classic.js"></script>
+<script src="../style/modern.js"></script>
+
 <script>
 'use strict';
 var workspace = null;
@@ -135,6 +139,19 @@ function start() {
     logEvents(false);
   }
   taChange();
+  changeStyle();
+
+}
+
+function changeStyle() {
+  var style = document.getElementById('styleChanger');
+  if (style.value === "modern"){
+    Blockly.setStyle(Blockly.Styles.Modern);
+  } else if (style.value === "high_contrast"){
+    Blockly.setStyle(Blockly.Styles.HighContrast);
+  } else {
+    Blockly.setStyle(Blockly.Styles.Classic);
+  }
 }
 
 function setBackgroundColour() {
@@ -328,7 +345,11 @@ h1 {
       <option value="bottom">Bottom</option>
     </select>
   </form>
-
+  <select id="styleChanger" name="style" onchange="changeStyle()">
+    <option value="classic">Classic</option>
+    <option value="modern">Modern</option>
+    <option value="high_contrast">High Contrast</option>
+  </select>
   <p>
     <input type="button" value="Export to XML" onclick="toXml()">
     &nbsp;