SoapboxConfig: add a default themeMode toggle

app/soapbox/components/sidebar_menu.js

@@ -15,7 +15,7 @@ import { shortNumberFormat } from '../utils/numbers';
 import { isStaff } from '../utils/accounts';
 import { makeGetAccount } from '../selectors';
 import { logOut } from 'soapbox/actions/auth';
-import ThemeToggle from '../features/ui/components/theme_toggle';
+import ThemeToggle from '../features/ui/components/theme_toggle_container';
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },

app/soapbox/features/soapbox_config/index.js

@@ -24,6 +24,8 @@ import { isMobile } from 'soapbox/is_mobile';
 import detectPassiveEvents from 'detect-passive-events';
 import Accordion from '../ui/components/accordion';
 import SitePreview from './components/site_preview';
+import ThemeToggle from 'soapbox/features/ui/components/theme_toggle';
+import { defaultSettings } from 'soapbox/actions/settings';
 
 const messages = defineMessages({
   heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
@@ -186,6 +188,7 @@ class SoapboxConfig extends ImmutablePureComponent {
   render() {
     const { intl } = this.props;
     const soapbox = this.getSoapboxConfig();
+    const settings = defaultSettings.mergeDeep(soapbox.get('defaultSettings'));
 
     return (
       <Column icon='cog' heading={intl.formatMessage(messages.heading)} backBtnSlim>
@@ -201,6 +204,10 @@ class SoapboxConfig extends ImmutablePureComponent {
                     value={soapbox.get('brandColor')}
                     onChange={this.handleChange(['brandColor'], (e) => e.hex)}
                   />
+                  <ThemeToggle
+                    onToggle={this.handleChange(['defaultSettings', 'themeMode'], value => value)}
+                    settings={settings}
+                  />
                 </div>
                 <div className='fields-row__column fields-group fields-row__column-6'>
                   <FileChooserLogo

app/soapbox/features/ui/components/tabs_bar.js

@@ -14,7 +14,7 @@ import ActionBar from 'soapbox/features/compose/components/action_bar';
 import { openModal } from '../../../actions/modal';
 import { openSidebar } from '../../../actions/sidebar';
 import Icon from '../../../components/icon';
-import ThemeToggle from '../../ui/components/theme_toggle';
+import ThemeToggle from '../../ui/components/theme_toggle_container';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { isStaff } from 'soapbox/utils/accounts';
 

app/soapbox/features/ui/components/theme_toggle.js

@@ -1,10 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import { injectIntl, defineMessages } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Icon from '../../../components/icon';
-import { changeSetting, getSettings } from 'soapbox/actions/settings';
 import SettingToggle from '../../notifications/components/setting_toggle';
 
 const messages = defineMessages({
@@ -12,31 +10,18 @@ const messages = defineMessages({
   switchToDark: { id: 'tabs_bar.theme_toggle_dark', defaultMessage: 'Switch to dark theme' },
 });
 
-const mapStateToProps = state => {
+export default @injectIntl
-  return {
-    settings: getSettings(state),
-  };
-};
-
-const mapDispatchToProps = (dispatch) => ({
-  toggleTheme(setting) {
-    dispatch(changeSetting(['themeMode'], setting));
-  },
-});
-
-export default @connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
 class ThemeToggle extends React.PureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
     settings: ImmutablePropTypes.map.isRequired,
-    toggleTheme: PropTypes.func,
+    onToggle: PropTypes.func.isRequired,
     showLabel: PropTypes.bool,
   };
 
   handleToggleTheme = () => {
-    this.props.toggleTheme(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
+    this.props.onToggle(this.props.settings.get('themeMode') === 'light' ? 'dark' : 'light');
   }
 
   render() {

app/soapbox/features/ui/components/theme_toggle_container.js

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import { changeSetting, getSettings } from 'soapbox/actions/settings';
+import ThemeToggle from './theme_toggle';
+
+const mapStateToProps = state => {
+  return {
+    settings: getSettings(state),
+  };
+};
+
+const mapDispatchToProps = (dispatch) => ({
+  onToggle(setting) {
+    dispatch(changeSetting(['themeMode'], setting));
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ThemeToggle);