Switch style immediately with JS.

static/main.css

@@ -199,7 +199,7 @@ footer ul li:not(:last-child):after {
 #character-options {
     position: absolute;
     margin-top: 1em;
-    margin-left: -10px;
+    margin-left: -5px;
     padding: 0.5em;
     background-color: rgba(0, 0, 0, 0.8);
     border-width: 1px;
@@ -240,7 +240,7 @@ footer ul li:not(:last-child):after {
     margin-left: 0.25em;
 }
 
-#style-options input[type=submit] {
+#style-options input[type="submit"] {
     display: inline-block;
     height: 24px;
     width: 24px;

static/main.js

@@ -30,4 +30,11 @@ $(function() {
             });
         }
     }).css("cursor", "pointer");
+
+    // Switch style immediately without reloading the page:
+    $("#style-options form").submit(function() {
+        var style = $(this).find('input[type="submit"]').prop("value");
+        var stylesheet = "/static/styles/" + style + ".css";
+        $("#user-style").prop("href", stylesheet);
+    });
 });

templates/_base.mako

@@ -14,7 +14,7 @@
         %>
         % if style:
             <% stylesheet = "styles/{}.css".format(style) %>
-            <link rel="stylesheet" type="text/css" href="${url_for('staticv', filename=stylesheet)}"/>
+            <link id="user-style" rel="stylesheet" type="text/css" href="${url_for('staticv', filename=stylesheet)}"/>
         % endif
         % for size in g.eve.image.corp_widths:
             <link rel="icon" type="image/png" sizes="${size}x${size}" href="${g.eve.image.corp(g.config.get('corp.id'), size)}"/>