in symbol example, add theme switch

examples/symbols/css/example.css

@@ -1,3 +1,7 @@
+#switch {
+    float: right;
+    margin: 4px;
+}
 .OxButtonGroup {
     margin: 4px;
 }
@@ -8,6 +12,11 @@
     float: left;
     width: 256px;
     height: 256px;
-    border: 1px solid rgb(208, 208, 208);
     margin: 8px;
 }
+.OxThemeClassic .symbol {
+    border: 1px solid rgb(208, 208, 208);
+}
+.OxThemeModern .symbol {
+    border: 1px solid rgb(48, 48, 48);
+}

examples/symbols/js/example.js

@@ -2,9 +2,9 @@
 ...
 */
 
-Ox.load('UI', function() {
+'use strict';
 
-    Ox.$body.css({margin: '8px', overflowY: 'scroll'});
+Ox.load('UI', function() {
 
     var groups = [
             ['add', 'remove', 'close', 'center', 'bracket'],
@@ -36,8 +36,20 @@ Ox.load('UI', function() {
             ['icon', 'clock', 'user']
         ],
         symbols = Ox.flatten(groups),
-        $buttons = $('<div>').addClass('buttons').appendTo(Ox.$body);
+        $menu = Ox.Bar({size: 24}),
-        $symbols = $('<div>').addClass('symbols').appendTo(Ox.$body);
+        $switch = Ox.Button({
+                title: 'Switch Theme'
+            })
+            .attr({id: 'switch'})
+            .bind({
+                click: function() {
+                    Ox.Theme(Ox.Theme() == 'classic' ? 'modern' : 'classic');
+                }
+            })
+            .appendTo($menu),
+        $main = Ox.Container(),
+        $buttons = $('<div>').addClass('buttons').appendTo($main),
+        $symbols = $('<div>').addClass('symbols').appendTo($main);
 
     groups.forEach(function(symbols) {
         Ox.ButtonGroup({
@@ -66,4 +78,13 @@ Ox.load('UI', function() {
             .appendTo($symbols);
     });
 
+    Ox.SplitPanel({
+            elements: [
+                {element: $menu, size: 24},
+                {element: $main}
+            ],
+            orientation: 'vertical'
+        })
+        .appendTo(Ox.$body);
+    
 });