diff --git a/framework/core/js/src/admin/components/AppearancePage.js b/framework/core/js/src/admin/components/AppearancePage.js
index 9b130ef23..7196c55f8 100644
--- a/framework/core/js/src/admin/components/AppearancePage.js
+++ b/framework/core/js/src/admin/components/AppearancePage.js
@@ -13,8 +13,8 @@ export default class AppearancePage extends Page {
 
     this.primaryColor = m.prop(app.data.settings.theme_primary_color);
     this.secondaryColor = m.prop(app.data.settings.theme_secondary_color);
-    this.darkMode = m.prop(app.data.settings.theme_dark_mode === '1');
-    this.coloredHeader = m.prop(app.data.settings.theme_colored_header === '1');
+    this.darkMode = m.prop(app.data.settings.theme_dark_mode);
+    this.coloredHeader = m.prop(app.data.settings.theme_colored_header);
   }
 
   view() {
diff --git a/framework/core/js/src/common/components/Checkbox.js b/framework/core/js/src/common/components/Checkbox.js
index f9c29789b..9ef46125e 100644
--- a/framework/core/js/src/common/components/Checkbox.js
+++ b/framework/core/js/src/common/components/Checkbox.js
@@ -16,6 +16,9 @@ import icon from '../helpers/icon';
  */
 export default class Checkbox extends Component {
   view() {
+    // Sometimes, false is stored in the DB as '0'. This is a temporary
+    // conversion layer until a more robust settings encoding is introduced
+    if (this.props.state === '0') this.props.state = false;
     let className = 'Checkbox ' + (this.props.state ? 'on' : 'off') + ' ' + (this.props.className || '');
     if (this.props.loading) className += ' loading';
     if (this.props.disabled) className += ' disabled';