diff --git a/bower.json b/bower.json
index 03efe1a4..9617424b 100644
--- a/bower.json
+++ b/bower.json
@@ -7,7 +7,7 @@
     "bower_components"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#1.5.0",
+    "polymer": "Polymer/polymer#^1.6.0",
     "iron-icons": "PolymerElements/iron-icons#^1.0.0",
     "iron-list": "loot/iron-list#patched-for-loot",
     "iron-pages": "PolymerElements/iron-pages#^1.0.0",
diff --git a/src/gui/html/css/style.css b/src/gui/html/css/style.css
index 418c6698..8a3800be 100644
--- a/src/gui/html/css/style.css
+++ b/src/gui/html/css/style.css
@@ -21,10 +21,34 @@
     along with LOOT.  If not, see
     <http://www.gnu.org/licenses/>.
 */
+/* CSS Custom Variables */
+:root {
+  --state-transition-time: 0.6s;
+
+  --primary-color: var(--paper-indigo-500);
+  --accent-color: var(--paper-blue-300);
+  --dark-accent-color: var(--paper-blue-500);
+
+  --primary-text-color: rgba(0, 0, 0, var(--dark-primary-opacity));
+  --secondary-text-color: rgba(0, 0, 0, var(--dark-secondary-opacity));
+  --disabled-text-color: rgba(0, 0, 0, var(--dark-disabled-opacity));
+  --divider-color: rgba(0, 0, 0, var(--dark-divider-opacity));
+
+  --dark-theme-text-color: white;
+  --dark-theme-secondary-color: rgba(255, 255, 255, var(--light-secondary-opacity));
+  --dark-theme-disabled-color: rgba(255, 255, 255, var(--light-disabled-opacity));
+  --dark-theme-divider-color: rgba(255, 255, 255, var(--light-divider-opacity));
+
+  --paper-icon-button-disabled-text: rgba(255, 255, 255, 0.30);
+  --paper-tabs-selection-bar-color: var(--accent-color);
+  --paper-tab-ink: var(--accent-color);
+
+  --paper-toolbar-height: 56px;
+}
 
 /* Misc */
 a {
-    color: #2196F3;
+    color: var(--dark-accent-color);
     text-decoration: none;
 }
 a:hover {
@@ -48,7 +72,7 @@ tt, code, kbd, samp {
   margin: 0 8px;
 }
 #applySortButton {
-    color: #2196F3;
+    color: var(--dark-accent-color);
     background-color: white;
 }
 
@@ -57,7 +81,7 @@ div[drawer] {
     background: white;
 }
 div[drawer] > * {
-    border-right: 1px rgba(0, 0, 0, 0.12) solid;
+    border-right: 1px var(--divider-color) solid;
 }
 div[drawer] > iron-pages {
   overflow: auto;
@@ -173,7 +197,7 @@ li.warn {
 /* For Material Design generic dividers. */
 .divider {
     height: 1px;
-    background: rgba(0, 0, 0, 0.12);
+    background: var(--divider-color);
     margin-top: -1px;
 }
 
@@ -185,5 +209,5 @@ paper-icon-item iron-icon {
 
 /* Set icons to use Material Design colouring. */
 iron-icon {
-    color: rgba(0, 0, 0, 0.54);
+    color: var(--secondary-text-color);
 }
diff --git a/src/gui/html/css/typography.css b/src/gui/html/css/typography.css
index 63bba52b..c676e945 100644
--- a/src/gui/html/css/typography.css
+++ b/src/gui/html/css/typography.css
@@ -121,7 +121,7 @@ html {
        characters. If Noto isn't present, they're better than the sans-serif
        defaults. */
     font:13px/1.429 Roboto, Noto, 'Microsoft Yahei', 'Malgun Gothic', sans-serif;
-    color: rgba(0, 0, 0, 0.87);
+    color: var(--primary-text-color);
     font-weight: 400;
     text-rendering: optimizeLegibility;
 }
diff --git a/src/gui/html/elements/editable-table.html b/src/gui/html/elements/editable-table.html
index e3321bcb..13bcb100 100644
--- a/src/gui/html/elements/editable-table.html
+++ b/src/gui/html/elements/editable-table.html
@@ -156,14 +156,14 @@
         height: 48px;
       }
       ::content th {
-          color: var(--loot-secondary-text-color);
-          border-bottom: 1px solid var(--loot-divider-color);
+          color: var(--secondary-text-color);
+          border-bottom: 1px solid var(--divider-color);
       }
       ::content paper-icon-button {
-          color: var(--loot-secondary-text-color);
+          color: var(--secondary-text-color);
       }
       ::content paper-icon-button[disabled] {
-          color: var(--loot-disabled-text-color);
+          color: var(--disabled-text-color);
       }
       ::content paper-icon-button[icon=delete]:hover {
           color: red;
diff --git a/src/gui/html/elements/loot-dropdown-menu.html b/src/gui/html/elements/loot-dropdown-menu.html
index 2cc5370a..9047f6f6 100644
--- a/src/gui/html/elements/loot-dropdown-menu.html
+++ b/src/gui/html/elements/loot-dropdown-menu.html
@@ -17,22 +17,25 @@ it a <select>-like API. This means:
     <style>
       paper-dropdown-menu {
         --paper-input-container: {
-          transition: opacity 0.6s;
+          transition: opacity var(--state-transition-time);
         };
         --paper-dropdown-menu-icon: {
-          color: var(--loot-secondary-text-color);
+          color: var(--secondary-text-color);
         };
       }
       :host(.dark) paper-dropdown-menu {
         --paper-input-container-underline: {
-          background-color: var(--loot-dark-theme-divider-color);
+          background-color: var(--dark-theme-divider-color);
+        };
+        --paper-input-container-underline-disabled: {
+          border-color: var(--dark-theme-divider-color);
         };
         --paper-input-container-input-color: white;
         --paper-dropdown-menu-input: {
-          color: var(--loot-dark-theme-primary-text-color);
+          color: var(--dark-theme-text-color);
         };
         --paper-dropdown-menu-icon: {
-          color: var(--loot-dark-theme-secondary-text-color);
+          color: var(--dark-theme-secondary-color);
         };
       }
     </style>
diff --git a/src/gui/html/elements/loot-plugin-card.html b/src/gui/html/elements/loot-plugin-card.html
index 401ae858..676f5f86 100644
--- a/src/gui/html/elements/loot-plugin-card.html
+++ b/src/gui/html/elements/loot-plugin-card.html
@@ -26,15 +26,15 @@
         position: relative;
       }
       :host(.highlight) #wrapper {
-        outline: 4px solid var(--loot-accent-color);
+        outline: 4px solid var(--accent-color);
       }
       :host(.search-result) #wrapper > * {
-        box-shadow: inset 4px 0 var(--loot-primary-color);
+        box-shadow: inset 4px 0 var(--primary-color);
       }
 
       /* Icon styling. */
       iron-icon {
-        color: var(--loot-secondary-text-color);
+        color: var(--secondary-text-color);
         padding: 8px;
       }
       #activeTick {
@@ -71,8 +71,8 @@
 
       /* Misc Styling. */
       paper-toolbar {
-        --paper-toolbar-color: var(--loot-primary-text-color);
-        --paper-toolbar-background: inherit;
+        --paper-toolbar-color: var(--primary-text-color);
+        --paper-toolbar-background: white;
       }
       #content {
         overflow: hidden;
diff --git a/src/gui/html/elements/loot-plugin-editor.html b/src/gui/html/elements/loot-plugin-editor.html
index 0117a63d..5a86d782 100644
--- a/src/gui/html/elements/loot-plugin-editor.html
+++ b/src/gui/html/elements/loot-plugin-editor.html
@@ -32,7 +32,7 @@ loot-editor-close
         height: 264px;
         min-height: 56px;
         max-height: calc(100% - 56px);
-        transition: height 0.6s, min-height 0.6s;
+        transition: height var(--state-transition-time), min-height var(--state-transition-time);
       }
       :host(.hidden) {
         height: 0;
@@ -44,7 +44,7 @@ loot-editor-close
 
       /* Material Design for non-button icons. */
       iron-icon {
-        color: var(--loot-secondary-text-color);
+        color: var(--secondary-text-color);
         padding: 8px;
       }
 
@@ -53,7 +53,7 @@ loot-editor-close
         display: none;
       }
       #accept {
-        color: var(--loot-dark-accent-color);
+        color: var(--dark-accent-color);
       }
       #cancel {
         color: red;
@@ -86,7 +86,7 @@ loot-editor-close
       /* Misc Styling. */
       paper-toolbar.medium-tall {
         --paper-toolbar-background: var(--paper-blue-50);
-        --paper-toolbar-color: var(--loot-primary-text-color);
+        --paper-toolbar-color: var(--primary-text-color);
         height: 104px;
       }
       #main {
@@ -97,12 +97,6 @@ loot-editor-close
         overflow: hidden;
         white-space: nowrap;
       }
-      #tableTabs {
-        --paper-tabs-selection-bar-color: var(--loot-accent-color);
-      }
-      paper-tab {
-        --paper-tab-ink: var(--loot-accent-color);
-      }
       #splitter {
         width: 100%;
         height: 10px;
diff --git a/src/gui/html/elements/loot-plugin-item.html b/src/gui/html/elements/loot-plugin-item.html
index cd36053b..93e9fc5a 100644
--- a/src/gui/html/elements/loot-plugin-item.html
+++ b/src/gui/html/elements/loot-plugin-item.html
@@ -14,7 +14,7 @@
       /* Flip effect for user metadata / editor open icons. */
       #flipper {
         transform-style: preserve-3d;
-        transition: 0.6s;
+        transition: var(--state-transition-time);
         overflow: visible;
       }
       #flipper.flipped {
@@ -45,7 +45,7 @@
 
         --paper-item-focused-before: {
           opacity: 0;
-        }
+        };
       }
       paper-item-body[two-line] {
         min-height: 32px;
@@ -57,14 +57,14 @@
       #primary,
       #secondary,
       #secondary iron-icon {
-        transition: height 0.6s;
+        transition: height var(--state-transition-time);
       }
       :host-context(body[data-editors]) #primary {
           line-height: normal;
       }
       #priority {
           font-size: 0.857rem;
-          color: var(--loot-secondary-text-color);
+          color: var(--secondary-text-color);
           height: 13px;
           overflow: visible;
       }
@@ -72,7 +72,7 @@
           height: 13px;
       }
       iron-icon {
-          color: var(--loot-secondary-text-color);
+          color: var(--secondary-text-color);
       }
       /* When not in edit mode, hide secondary text. */
       :host-context(body:not([data-editors])) #secondary {
@@ -91,7 +91,7 @@
         cursor: pointer;
       }
       paper-ripple {
-        color: var(--loot-accent-color);
+        color: var(--accent-color);
       }
     </style>
     <paper-item>
diff --git a/src/gui/html/elements/loot-search-toolbar.html b/src/gui/html/elements/loot-search-toolbar.html
index e4f73713..db3d3d71 100644
--- a/src/gui/html/elements/loot-search-toolbar.html
+++ b/src/gui/html/elements/loot-search-toolbar.html
@@ -18,24 +18,21 @@ loot-search-end: Fired when the close button is clicked.
 <dom-module id="loot-search-toolbar">
   <template>
     <style>
-      paper-input {
-        @apply(--layout-horizontal);
+      #search {
         @apply(--layout-flex);
-        --paper-input-container: {
-          @apply(--layout-flex);
-        };
-        --paper-input-container-input-color: var(--loot-dark-theme-text-color);
-        --paper-input-container-label: {
-          color: var(--loot-dark-theme-disabled-color);
-        }
+
+        --paper-input-container-input-color: var(--dark-theme-text-color);
+        --paper-input-container-color: var(--dark-theme-secondary-color);
         --paper-input-container-underline: {
-          background-color: var(--loot-dark-theme-divider-color);
+          background-color: var(--dark-theme-divider-color);
         };
+
+        display: block;
       }
       #count {
         font-weight: 400;
         font-size: 0.857rem;
-        color: var(--loot-dark-theme-secondary-color);
+        color: var(--dark-theme-secondary-color);
       }
     </style>
     <paper-toolbar>
diff --git a/src/gui/html/index.html b/src/gui/html/index.html
index fa724982..dbf293f7 100644
--- a/src/gui/html/index.html
+++ b/src/gui/html/index.html
@@ -5,7 +5,7 @@
   <link rel="stylesheet" href="css/typography.css" />
   <link rel="stylesheet" href="css/style.css" />
 
-  <link rel="import" href="native-shadow-dom.html">
+  <link rel="import" href="polymer-settings.html">
 
   <link rel="import" href="../../../bower_components/polymer/polymer.html">
 
@@ -46,8 +46,12 @@
   <link rel="import" href="../../../bower_components/paper-toggle-button/paper-toggle-button.html">
   <link rel="import" href="../../../bower_components/paper-toolbar/paper-toolbar.html">
   <link rel="import" href="../../../bower_components/paper-tooltip/paper-tooltip.html">
-
-  <style is="custom-style">
+</head>
+<!-- oncontextmenu attribute disables the right-click menu. -->
+<body oncontextmenu="return false" unresolved>
+  <!-- This style element needs to be here so that it loads after the Vulcanized
+       imports, which are placed in a div that is the first child of body. -->
+  <style is="custom-style" include="paper-item-shared-styles">
     div[drawer],
     div[main] {
       @apply(--layout-vertical);
@@ -86,53 +90,37 @@
     #conflictsFilter {
       --paper-dropdown-menu: {
         display: block;
-      }
+      };
+    }
+    .paper-item {
+      display: flex;
+      align-items: center;
     }
 
     /* Paper element styling.
        Colour variables are from Polymer's paper-styles element. */
     :root {
-      --loot-primary-color: var(--paper-indigo-500);
-      --loot-accent-color: var(--paper-blue-300);
-      --loot-dark-accent-color: var(--paper-blue-500);
-
-      --loot-primary-text-color: rgba(0, 0, 0, var(--dark-primary-opacity));
-      --loot-secondary-text-color: rgba(0, 0, 0, var(--dark-secondary-opacity));
-      --loot-disabled-text-color: rgba(0, 0, 0, var(--dark-disabled-opacity));
-      --loot-divider-color: rgba(0, 0, 0, var(--dark-divider-opacity));
-
-      --loot-dark-theme-text-color: white;
-      --loot-dark-theme-secondary-color: rgba(255, 255, 255, var(--light-secondary-opacity));
-      --loot-dark-theme-disabled-color: rgba(255, 255, 255, var(--light-disabled-opacity));
-      --loot-dark-theme-divider-color: rgba(255, 255, 255, var(--light-divider-opacity));
-
-      a,
-      #applySortButton {
-        color: var(--loot-dark-accent-color);
-      }
-
       --paper-button: {
         font-weight: 500;
         font-size: 1rem;
-      }
+      };
 
-      --paper-icon-button-disabled-text: rgba(255, 255, 255, 0.30);
       --paper-icon-button-disabled: {
-        transition: color 0.6s;
-      }
+        transition: color var(--state-transition-time);
+      };
 
       --paper-icon-item: {
         white-space: nowrap;
-      }
+      };
 
       --paper-input-container-input: {
         text-overflow: ellipsis;
-      }
+      };
       --paper-input-container-underline: {
-        background-color: var(--loot-divider-color);
+        background-color: var(--divider-color);
       };
       --paper-input-container-underline-focus: {
-        background-color: var(--loot-accent-color);
+        background-color: var(--accent-color);
       };
 
       paper-menu-button {
@@ -140,35 +128,18 @@
           font-weight: 500;
           font-size: 1rem;
           white-space: nowrap;
-        }
+        };
       }
 
-      --paper-tabs-selection-bar-color: var(--loot-accent-color);
-      --paper-tab-ink: var(--loot-accent-color);
       --paper-tab-content: {
         text-transform: uppercase;
-      }
+      };
 
       /* Prevents pop-in for the toggle button when a dropdown containing it is
          opened. */
       --paper-toggle-button-unchecked-button: {
         will-change: initial;
-      }
-
-      --paper-toolbar-background: var(--loot-primary-color);
-      /*--paper-toolbar-color: var(--loot-primary-text-color);*/
-      --paper-toolbar-height: 56px;
-    }
-  </style>
-</head>
-<!-- oncontextmenu attribute disables the right-click menu. -->
-<body oncontextmenu="return false" unresolved>
-  <!-- This style element needs to be here so that it loads after the Vulcanized
-       imports, which are placed in a div that is the first child of body. -->
-  <style is="custom-style" include="paper-item-shared-styles">
-    .paper-item {
-      display: flex;
-      align-items: center;
+      };
     }
   </style>
   <paper-drawer-panel id="container" drawer-width="33%">
diff --git a/src/gui/html/native-shadow-dom.html b/src/gui/html/native-shadow-dom.html
deleted file mode 100644
index 8eca2b43..00000000
--- a/src/gui/html/native-shadow-dom.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-  'use strict';
-  window.Polymer = window.Polymer || {};
-  window.Polymer.dom = 'shadow';
-</script>
diff --git a/src/gui/html/polymer-settings.html b/src/gui/html/polymer-settings.html
new file mode 100644
index 00000000..02261054
--- /dev/null
+++ b/src/gui/html/polymer-settings.html
@@ -0,0 +1,8 @@
+<script>
+  'use strict';
+  window.Polymer = {
+    dom: 'shadow',
+    lazyRegister: true,
+    useNativeCSSProperties: true,
+  };
+</script>