use redux to store the theme

embark-ui/src/actions/index.js

@@ -23,6 +23,13 @@ export const authenticate = {
   failure: (error) => action(AUTHENTICATE[FAILURE], {error})
 };
 
+export const CHANGE_THEME = createRequestTypes('CHANGE_THEME');
+export const changeTheme = {
+  request: (theme) => action(CHANGE_THEME[REQUEST], {theme}),
+  success: () => action(CHANGE_THEME[SUCCESS]),
+  failure: (error) => action(CHANGE_THEME[FAILURE], {error})
+};
+
 export const FETCH_CREDENTIALS = createRequestTypes('FETCH_CREDENTIALS');
 export const fetchCredentials = {
   request: () => action(FETCH_CREDENTIALS[REQUEST]),

embark-ui/src/containers/AppContainer.js

@@ -10,10 +10,11 @@ import {
   authenticate, fetchCredentials, logout,
   processes as processesAction,
   versions as versionsAction,
-  plugins as pluginsAction
+  plugins as pluginsAction,
+  changeTheme
 } from '../actions';
 
-import { getCredentials, getAuthenticationError, getVersions } from '../reducers/selectors';
+import { getCredentials, getAuthenticationError, getVersions, getTheme } from '../reducers/selectors';
 
 const qs = require('qs');
 
@@ -22,10 +23,6 @@ class AppContainer extends Component {
     super(props);
 
     this.queryStringAuthenticate();
-
-    this.state = {
-      theme: 'dark'
-    };
   }
 
   queryStringAuthenticate() {
@@ -64,12 +61,12 @@ class AppContainer extends Component {
   }
 
   changeTheme(theme) {
-    this.setState({theme});
+    this.props.changeTheme(theme);
   }
 
   render() {
     return (
-      <div className={this.state.theme + "-theme"}>
+      <div className={(this.props.theme || 'dark') + "-theme"}>
         {this.shouldRenderLogin() ?
           <Login credentials={this.props.credentials} authenticate={this.props.authenticate} error={this.props.authenticationError} />
           :
@@ -93,14 +90,17 @@ AppContainer.propTypes = {
   fetchProcesses: PropTypes.func,
   fetchPlugins: PropTypes.func,
   fetchVersions: PropTypes.func,
-  location: PropTypes.object
+  location: PropTypes.object,
+  theme: PropTypes.string,
+  changeTheme: PropTypes.func
 };
 
 function mapStateToProps(state) {
   return {
     initialized: getVersions(state).length > 0,
     credentials: getCredentials(state),
-    authenticationError: getAuthenticationError(state)
+    authenticationError: getAuthenticationError(state),
+    theme: getTheme(state)
   };
 }
 
@@ -112,6 +112,7 @@ export default withRouter(connect(
     fetchCredentials: fetchCredentials.request,
     fetchProcesses: processesAction.request,
     fetchVersions: versionsAction.request,
-    fetchPlugins: pluginsAction.request
+    fetchPlugins: pluginsAction.request,
+    changeTheme: changeTheme.request
   },
 )(AppContainer));

embark-ui/src/reducers/index.js

@@ -1,6 +1,6 @@
 import {combineReducers} from 'redux';
 import {REQUEST, SUCCESS, FAILURE, CONTRACT_COMPILE, FILES, LOGOUT, AUTHENTICATE,
-        FETCH_CREDENTIALS, UPDATE_BASE_ETHER} from "../actions";
+        FETCH_CREDENTIALS, UPDATE_BASE_ETHER, CHANGE_THEME} from "../actions";
 import {EMBARK_PROCESS_NAME} from '../constants';
 
 const BN_FACTOR = 10000;
@@ -223,6 +223,13 @@ function baseEther(state = '1', action) {
   return state;
 }
 
+function theme(state='dark', action) {
+  if (action.type === CHANGE_THEME[REQUEST]) {
+    return action.theme;
+  }
+  return state;
+}
+
 const rootReducer = combineReducers({
   entities,
   loading,
@@ -230,7 +237,8 @@ const rootReducer = combineReducers({
   errorMessage,
   errorEntities,
   credentials,
-  baseEther
+  baseEther,
+  theme
 });
 
 export default rootReducer;

embark-ui/src/reducers/selectors.js

@@ -8,6 +8,10 @@ export function getAuthenticationError(state) {
   return state.credentials.error;
 }
 
+export function getTheme(state) {
+  return state.theme;
+}
+
 export function getAccounts(state) {
   return state.entities.accounts;
 }