feat(theme): add theme dropdown in settings view

app/app.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment } from 'react';
+import React, { Component, Fragment } from 'react';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router';
 import { ThemeProvider } from 'styled-components';
@@ -8,18 +8,43 @@ import { ThemeProvider } from 'styled-components';
 import { configureStore, history } from './redux/create';
 import { Router } from './router/container';
 import theme, { GlobalStyle } from './theme';
+import electronStore from '../config/electron-store';
+import { DARK } from './constants/themes';
 
 const store = configureStore({});
 
-export const App = () => (
-  <ThemeProvider theme={theme}>
-    <Fragment>
-      <GlobalStyle />
-      <Provider store={store}>
-        <ConnectedRouter history={history}>
-          <Router />
-        </ConnectedRouter>
-      </Provider>
-    </Fragment>
-  </ThemeProvider>
-);
+type Props = {};
+type State = {
+  themeMode: string,
+};
+
+export class App extends Component<Props, State> {
+  state = {
+    themeMode: electronStore.get('THEME_MODE') || DARK,
+  };
+
+  componentDidMount() {
+    if (!electronStore.has('THEME_MODE')) {
+      electronStore.set('THEME_MODE', DARK);
+    }
+
+    electronStore.onDidChange('THEME_MODE', newValue => this.setState({ themeMode: newValue }));
+  }
+
+  render() {
+    const { themeMode } = this.state;
+
+    return (
+      <ThemeProvider theme={{ ...theme, mode: themeMode }}>
+        <Fragment>
+          <GlobalStyle />
+          <Provider store={store}>
+            <ConnectedRouter history={history}>
+              <Router />
+            </ConnectedRouter>
+          </Provider>
+        </Fragment>
+      </ThemeProvider>
+    );
+  }
+}

app/views/settings.js

@@ -17,8 +17,11 @@ import { InputComponent } from '../components/input';
 import { InputLabelComponent } from '../components/input-label';
 import { RowComponent } from '../components/row';
 import { Clipboard } from '../components/clipboard';
+import { SelectComponent } from '../components/select';
 
 import rpc from '../../services/api';
+import { DARK, LIGHT } from '../constants/themes';
+import electronStore from '../../config/electron-store';
 
 const HOME_DIR = electron.remote.app.getPath('home');
 
@@ -67,6 +70,10 @@ const SettingsContent = styled(TextComponent)`
   margin-top: 10px;
 `;
 
+const ThemeSelectWrapper = styled.div`
+  margin-bottom: 20px;
+`;
+
 type Key = {
   zAddress: string,
   key: string,
@@ -210,6 +217,23 @@ export class SettingsView extends PureComponent<Props, State> {
 
     return (
       <Wrapper>
+        <ThemeSelectWrapper>
+          <SettingsTitle value='Theme' />
+          <SelectComponent
+            onChange={newMode => electronStore.set('THEME_MODE', newMode)}
+            options={[
+              {
+                label: 'Dark',
+                value: DARK,
+              },
+              {
+                label: 'Light',
+                value: LIGHT,
+              },
+            ]}
+            value={electronStore.get('THEME_MODE')}
+          />
+        </ThemeSelectWrapper>
         <ConfirmDialogComponent
           title='Export view keys'
           renderTrigger={toggleVisibility => (

flow-custom-typedefs/electron-store.js

@@ -1,4 +1,6 @@
 declare module 'electron-store' {
+  declare function callback(string, string): void;
+
   declare class ElectronStore {
     constructor({
       defaults?: Object,
@@ -14,6 +16,7 @@ declare module 'electron-store' {
     has(key: string): boolean;
     delete(key: string): void;
     clear(): void;
+    onDidChange(key: string, cb: typeof callback): void;
     size: number;
     store: Object;
     path: string;