diff --git a/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6
index 4c5d920fbac..d49a6ffd6c0 100644
--- a/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6
+++ b/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6
@@ -1,6 +1,6 @@
 import PreferencesTabController from "discourse/mixins/preferences-tab-controller";
 import { default as computed, observes } from "ember-addons/ember-computed-decorators";
-import { listThemes, previewTheme, setLocalTheme } from 'discourse/lib/theme-selector';
+import { currentThemeKey, listThemes, previewTheme, setLocalTheme } from 'discourse/lib/theme-selector';
 import { popupAjaxError } from 'discourse/lib/ajax-error';
 
 export default Ember.Controller.extend(PreferencesTabController, {
@@ -31,6 +31,11 @@ export default Ember.Controller.extend(PreferencesTabController, {
     return this.siteSettings.available_locales.split('|').map(s => ({ name: s, value: s }));
   },
 
+  @computed()
+  themeKey() {
+    return currentThemeKey();
+  },
+
   userSelectableThemes: function(){
     return listThemes(this.site);
   }.property(),
@@ -40,9 +45,9 @@ export default Ember.Controller.extend(PreferencesTabController, {
     return themes && themes.length > 1;
   },
 
-  @observes("model.user_option.theme_key")
+  @observes("themeKey")
   themeKeyChanged() {
-    let key = this.get("model.user_option.theme_key");
+    let key = this.get("themeKey");
     previewTheme(key);
   },
 
@@ -50,12 +55,15 @@ export default Ember.Controller.extend(PreferencesTabController, {
     save() {
       this.set('saved', false);
       const makeThemeDefault = this.get("makeThemeDefault");
+      if (makeThemeDefault) {
+        this.set('model.user_option.theme_key', this.get('themeKey'));
+      }
 
       return this.get('model').save(this.get('saveAttrNames')).then(() => {
         this.set('saved', true);
 
         if (!makeThemeDefault) {
-          setLocalTheme(this.get('model.user_option.theme_key'), this.get('model.user_option.theme_key_seq'));
+          setLocalTheme(this.get('themeKey'), this.get('model.user_option.theme_key_seq'));
         }
 
       }).catch(popupAjaxError);
diff --git a/app/assets/javascripts/discourse/templates/preferences/interface.hbs b/app/assets/javascripts/discourse/templates/preferences/interface.hbs
index ba9e1a90d59..f4b0b1e484c 100644
--- a/app/assets/javascripts/discourse/templates/preferences/interface.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/interface.hbs
@@ -2,7 +2,7 @@
 <div class="control-group theme">
   <label class="control-label">{{i18n 'user.theme'}}</label>
   <div class="controls">
-    {{combo-box content=userSelectableThemes value=model.user_option.theme_key}}
+    {{combo-box content=userSelectableThemes value=themeKey}}
   </div>
   <div class="controls">
     {{preference-checkbox labelKey="user.theme_default_on_all_devices" checked=makeThemeDefault}}