Switch to dark mode for the Museum Experience!

src/actions/colorModes.js

@@ -0,0 +1,47 @@
+export function framingBackgroundColorFor(museumMode) {
+    return switchOn(
+        museumMode,
+        {backgroundColor: '#2D2D2D'},
+        {backgroundColor: '#ff4500'}
+    )
+}
+
+export function contentBackgroundColorFor(museumMode) {
+    return switchOn(
+        museumMode,
+        {backgroundColor: '#333333'},
+        {backgroundColor: 'white'}
+    )
+}
+
+export function separatorColorFor(museumMode) {
+    return switchOn(
+        museumMode,
+        {borderBottomColor: 'black'},
+        {borderBottomColor: '$borderGrey'}
+    )
+}
+
+export function helpTextColorFor(museumMode) {
+    return switchOn(
+        museumMode,
+        {color: '#addde0'},
+        {color: 'rgba(0,93,105,1)'}
+    )
+}
+
+export function textColorFor(museumMode) {
+    return switchOn(
+        museumMode,
+        '#addde0',
+        'black'
+    )
+}
+
+function switchOn(mode, withModeStyle, withoutModeStyle) {
+    if (mode) {
+        return withModeStyle
+    } else {
+        return withoutModeStyle
+    }
+}

src/actions/projects.js

@@ -5,6 +5,9 @@ import * as R from 'ramda'
 import * as ActionConstants from '../constants/actions'
 import {isValidMobileWorkflow} from '../utils/workflow-utils'
 
+import * as theme from '../theme'
+import * as colorModes from './colorModes';
+
 const productionParams = {
     mobile_friendly: true,
     launch_approved: true,

src/components/SideDrawer.js

@@ -1,51 +1,51 @@
-import React, { Component } from 'react'
+import React, {Component} from 'react'
 import Drawer from 'react-native-drawer'
 import SideDrawerContent from './SideDrawerContent'
 import {Actions, DefaultRenderer} from 'react-native-router-flux'
 import PropTypes from 'prop-types';
 
 class SideDrawer extends Component {
-  render () {
-    const state = this.props.navigationState
-    const children = state.children
+    render() {
+        const state = this.props.navigationState
+        const children = state.children
 
-    return (
-      <Drawer
-        ref="drawer"
-        open={state.open}
-        onOpen={()=>Actions.refresh({key:state.key, open: true})}
-        onClose={()=>Actions.refresh({key:state.key, open: false})}
-        type="overlay"
-        side="right"
-        content={<SideDrawerContent />}
-        tapToClose={true}
-        openDrawerOffset={0.3}
-        panCloseMask={0.2}
-        closedDrawerOffset={-3}
-        styles={drawerStyles}
-        tweenHandler={(ratio) => ({
-          main: { opacity:(2-ratio)/2 }
-        })}
-        >
-        <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
-      </Drawer>
-    )
-  }
+        return (
+            <Drawer
+                ref="drawer"
+                open={state.open}
+                onOpen={() => Actions.refresh({key: state.key, open: true})}
+                onClose={() => Actions.refresh({key: state.key, open: false})}
+                type="overlay"
+                side="right"
+                content={<SideDrawerContent/>}
+                tapToClose={true}
+                openDrawerOffset={0.3}
+                panCloseMask={0.2}
+                closedDrawerOffset={-3}
+                styles={drawerStyles}
+                tweenHandler={(ratio) => ({
+                    main: {opacity: (2 - ratio) / 2}
+                })}
+            >
+                <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate}/>
+            </Drawer>
+        )
+    }
 }
 
 const drawerStyles = {
-  drawer: {
-    backgroundColor: 'white',
-    shadowColor: 'black',
-    shadowOpacity: 0.8,
-    shadowRadius: 3,
-    elevation: 3,
-  }
+    drawer: {
+        backgroundColor: 'white',
+        shadowColor: 'black',
+        shadowOpacity: 0.8,
+        shadowRadius: 3,
+        elevation: 3,
+    }
 }
 
 SideDrawer.propTypes = {
-  onNavigate: PropTypes.func,
-  navigationState: PropTypes.object,
+    onNavigate: PropTypes.func,
+    navigationState: PropTypes.object,
 }
 
 export default SideDrawer

src/components/SideDrawerContent.js

@@ -87,7 +87,10 @@ export class SideDrawerContent extends Component {
           </TouchableOpacity>
         </View>
 
-        <Separator color="white" style={styles.separatorPadding} />
+        <Separator
+            color="white"
+            style={styles.separatorPadding}
+          />
 
         <MenuButton 
           onPress={this.goHome} 

src/components/classifier/ClassificationPanel.js

@@ -5,9 +5,11 @@ import {
 } from 'react-native';
 import DeviceInfo from 'react-native-device-info'
 import EStyleSheet from 'react-native-extended-stylesheet'
-import FontedText from '../common/FontedText'
 import PropTypes from 'prop-types';
 
+import FontedText from '../common/FontedText'
+import * as colorModes from '../../actions/colorModes'
+
 class ClassificationPanel extends Component {
   render() {
     const tabs =
@@ -29,7 +31,7 @@ class ClassificationPanel extends Component {
       </View>
 
     return (
-        <View style={[styles.panelContainer, this.props.containerStyle]}>
+        <View style={[styles.panelContainer, this.props.containerStyle, colorModes.contentBackgroundColorFor(this.props.inMuseumMode)]}>
           { this.props.hasTutorial ? tabs : null }
           { this.props.children }
         </View>
@@ -39,7 +41,6 @@ class ClassificationPanel extends Component {
 
 const styles = EStyleSheet.create({
   panelContainer: {
-    backgroundColor: 'white',
     marginTop: 15,
     marginBottom: 0,
     marginHorizontal: 25
@@ -71,5 +72,6 @@ ClassificationPanel.propTypes = {
   children: PropTypes.node,
   isQuestionVisible: PropTypes.bool,
   setQuestionVisibility: PropTypes.func,
+  inMuseumMode: PropTypes.bool,
 }
 export default ClassificationPanel