diff --git a/src/Tinter.js b/src/Tinter.js
index c18d3068a7..4a5e4e453c 100644
--- a/src/Tinter.js
+++ b/src/Tinter.js
@@ -174,7 +174,7 @@ module.exports = {
         tintables.push(tintable);
     },
 
-    tint: function(primaryColor, secondaryColor, tertiaryColor, whiteColor) {
+    tint: function(primaryColor, secondaryColor, tertiaryColor) {
 
         if (!cached) {
             calcCssFixups();
@@ -205,19 +205,16 @@ module.exports = {
             tertiaryColor = rgbToHex(rgb1);
         }
 
-        if (!whiteColor) {
-            whiteColor = colors[3];
-        }
-
         if (colors[0] === primaryColor &&
             colors[1] === secondaryColor &&
-            colors[2] === tertiaryColor &&
-            colors[3] === whiteColor)
+            colors[2] === tertiaryColor)
         {
             return;
         }
 
-        colors = [primaryColor, secondaryColor, tertiaryColor, whiteColor];
+        colors[0] = primaryColor;
+        colors[1] = secondaryColor;
+        colors[2] = tertiaryColor;
 
         if (DEBUG) console.log("Tinter.tint");
 
@@ -231,6 +228,19 @@ module.exports = {
         });
     },
 
+    tintSvgWhite: function(whiteColor) {
+        if (!whiteColor) {
+            whiteColor = colors[3];
+        }
+        if (colors[3] === whiteColor) {
+            return;
+        }
+        colors[3] = whiteColor;
+        tintables.forEach(function(tintable) {
+            tintable();
+        });
+    },
+
     // XXX: we could just move this all into TintableSvg, but as it's so similar
     // to the CSS fixup stuff in Tinter (just that the fixups are stored in TintableSvg)
     // keeping it here for now.
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 7d74e2ee02..8917f0535e 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -608,8 +608,9 @@ module.exports = React.createClass({
         var i, a;
         for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
             var href = a.getAttribute("href");
-            if (href.startsWith("theme-")) {
-                if (href.startsWith("theme-" + theme + ".")) {
+            var match = href.match(/^bundles\/.*\/theme-(.*)\.css$/);
+            if (match) {
+                if (match[1] === theme) {
                     a.disabled = false;
                 }
                 else {
@@ -621,10 +622,10 @@ module.exports = React.createClass({
         if (theme === 'dark') {
             // abuse the tinter to change all the SVG's #fff to #2d2d2d
             // XXX: obviously this shouldn't be hardcoded here.
-            Tinter.tint(undefined, undefined, undefined, '#2d2d2d');
+            Tinter.tintSvgWhite('#2d2d2d');
         }
         else {
-            Tinter.tint(undefined, undefined, undefined, '#ffffff');
+            Tinter.tintSvgWhite('#ffffff');
         }
     },
 
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index ebfd6dc0a7..a120d365d1 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -32,6 +32,47 @@ var AddThreepid = require('../../AddThreepid');
 const REACT_SDK_VERSION =
       'dist' in package_json ? package_json.version : package_json.gitHead || "<local>";
 
+
+// Enumerate some simple 'flip a bit' UI settings (if any)
+const SETTINGS_LABELS = [
+/*
+    {
+        id: 'alwaysShowTimestamps',
+        label: 'Always show message timestamps',
+    },
+    {
+        id: 'showTwelveHourTimestamps',
+        label: 'Show timestamps in 12 hour format (e.g. 2:30pm)',
+    },
+    {
+        id: 'useCompactLayout',
+        label: 'Use compact timeline layout',
+    },
+    {
+        id: 'useFixedWidthFont',
+        label: 'Use fixed width font',
+    },
+*/
+];
+
+// Enumerate the available themes, with a nice human text label.
+// XXX: Ideally we would have a theme manifest or something and they'd be nicely
+// packaged up in a single directory, and/or located at the application layer.
+// But for now for expedience we just hardcode them here.
+const THEMES = [
+    {
+        id: 'theme',
+        label: 'Light theme',
+        value: 'light',
+    },
+    {
+        id: 'theme',
+        label: 'Dark theme',
+        value: 'dark',
+    }
+];
+
+
 module.exports = React.createClass({
     displayName: 'UserSettings',
 
@@ -93,6 +134,12 @@ module.exports = React.createClass({
             middleOpacity: 0.3,
         });
         this._refreshFromServer();
+
+        var syncedSettings = UserSettingsStore.getSyncedSettings();
+        if (!syncedSettings.theme) {
+            syncedSettings.theme = 'light';
+        }
+        this._syncedSettings = syncedSettings;
     },
 
     componentDidMount: function() {
@@ -342,99 +389,68 @@ module.exports = React.createClass({
     _renderUserInterfaceSettings: function() {
         var client = MatrixClientPeg.get();
 
-        var settingsLabels = [
-        /*
-            {
-                id: 'alwaysShowTimestamps',
-                label: 'Always show message timestamps',
-            },
-            {
-                id: 'showTwelveHourTimestamps',
-                label: 'Show timestamps in 12 hour format (e.g. 2:30pm)',
-            },
-            {
-                id: 'useCompactLayout',
-                label: 'Use compact timeline layout',
-            },
-            {
-                id: 'useFixedWidthFont',
-                label: 'Use fixed width font',
-            },
-        */
-        ];
-
-        var themes = [
-            {
-                id: 'theme',
-                label: 'Light theme',
-                value: 'light',
-            },
-            {
-                id: 'theme',
-                label: 'Dark theme',
-                value: 'dark',
-            }
-        ];
-
-        var syncedSettings = UserSettingsStore.getSyncedSettings();
-        if (!syncedSettings.theme) {
-            syncedSettings.theme = 'light';
-        }
-
         return (
             <div>
                 <h3>User Interface</h3>
                 <div className="mx_UserSettings_section">
-                    <div className="mx_UserSettings_toggle">
-                        <input id="urlPreviewsDisabled"
-                               type="checkbox"
-                               defaultChecked={ UserSettingsStore.getUrlPreviewsDisabled() }
-                               onChange={ e => UserSettingsStore.setUrlPreviewsDisabled(e.target.checked) }
-                        />
-                        <label htmlFor="urlPreviewsDisabled">
-                            Disable inline URL previews by default
-                        </label>
-                    </div>
-                    { settingsLabels.map( setting => {
-                        return <div className="mx_UserSettings_toggle" key={ setting.id }>
-                            <input id={ setting.id }
-                                   type="checkbox"
-                                   defaultChecked={ syncedSettings[setting.id] }
-                                   onChange={ e => UserSettingsStore.setSyncedSetting(setting.id, e.target.checked) }
-                            />
-                            <label htmlFor={ setting.id }>
-                                { setting.label }
-                            </label>
-                        </div>
-                    })}
-                    { themes.map( setting => {
-                        return <div className="mx_UserSettings_toggle" key={ setting.id + "_" + setting.value }>
-                            <input id={ setting.id + "_" + setting.value }
-                                   type="radio"
-                                   name={ setting.id }
-                                   value={ setting.value }
-                                   defaultChecked={ syncedSettings[setting.id] === setting.value }
-                                   onChange={ e => {
-                                            if (e.target.checked) {
-                                                UserSettingsStore.setSyncedSetting(setting.id, setting.value)
-                                            }
-                                            dis.dispatch({
-                                                action: 'set_theme',
-                                                value: setting.value,
-                                            });
-                                        }
-                                   }
-                            />
-                            <label htmlFor={ setting.id + "_" + setting.value }>
-                                { setting.label }
-                            </label>
-                        </div>
-                    })}
+                    { this._renderUrlPreviewSelector() }
+                    { SETTINGS_LABELS.map( this._renderSyncedSetting ) }
+                    { THEMES.map( this._renderThemeSelector ) }
                 </div>
             </div>
         );
     },
 
+    _renderUrlPreviewSelector: function() {
+        return <div className="mx_UserSettings_toggle">
+            <input id="urlPreviewsDisabled"
+                   type="checkbox"
+                   defaultChecked={ UserSettingsStore.getUrlPreviewsDisabled() }
+                   onChange={ e => UserSettingsStore.setUrlPreviewsDisabled(e.target.checked) }
+            />
+            <label htmlFor="urlPreviewsDisabled">
+                Disable inline URL previews by default
+            </label>
+        </div>
+    },
+
+    _renderSyncedSetting: function(setting) {
+        return <div className="mx_UserSettings_toggle" key={ setting.id }>
+            <input id={ setting.id }
+                   type="checkbox"
+                   defaultChecked={ this._syncedSettings[setting.id] }
+                   onChange={ e => UserSettingsStore.setSyncedSetting(setting.id, e.target.checked) }
+            />
+            <label htmlFor={ setting.id }>
+                { setting.label }
+            </label>
+        </div>
+    },
+
+    _renderThemeSelector: function(setting) {
+        return <div className="mx_UserSettings_toggle" key={ setting.id + "_" + setting.value }>
+            <input id={ setting.id + "_" + setting.value }
+                   type="radio"
+                   name={ setting.id }
+                   value={ setting.value }
+                   defaultChecked={ this._syncedSettings[setting.id] === setting.value }
+                   onChange={ e => {
+                            if (e.target.checked) {
+                                UserSettingsStore.setSyncedSetting(setting.id, setting.value)
+                            }
+                            dis.dispatch({
+                                action: 'set_theme',
+                                value: setting.value,
+                            });
+                        }
+                   }
+            />
+            <label htmlFor={ setting.id + "_" + setting.value }>
+                { setting.label }
+            </label>
+        </div>
+    },
+
     _renderCryptoInfo: function() {
         const client = MatrixClientPeg.get();
         const deviceId = client.deviceId;