fix(theme): add night mode to learn

packages/learn/src/layouts/index.js

@@ -8,12 +8,13 @@ import ga from '../analytics';
 
 import Header from '../components/Header';
 import DonationModal from '../components/Donation';
-import { fetchUser } from '../redux/app';
+import { fetchUser, userSelector } from '../redux/app';
 
 import 'prismjs/themes/prism.css';
 import 'react-reflex/styles.css';
 import './global.css';
 import './layout.css';
+import { createSelector } from 'reselect';
 
 const metaKeywords = [
   'javascript',
@@ -39,13 +40,17 @@ const metaKeywords = [
   'programming'
 ];
 
-const mapStateToProps = () => ({});
+const mapStateToProps = createSelector(
+  userSelector,
+  ({ theme = 'default' }) => ({ theme })
+);
 const mapDispatchToProps = dispatch =>
   bindActionCreators({ fetchUser }, dispatch);
 
 const propTypes = {
   children: PropTypes.func,
-  fetchUser: PropTypes.func.isRequired
+  fetchUser: PropTypes.func.isRequired,
+  theme: PropTypes.string
 };
 
 class Layout extends PureComponent {
@@ -76,7 +81,7 @@ class Layout extends PureComponent {
     }
   }
   render() {
-    const { children } = this.props;
+    const { children, theme } = this.props;
     return (
       <Fragment>
         <Helmet
@@ -91,7 +96,7 @@ class Layout extends PureComponent {
           ]}
         />
         <Header />
-        <div className='app-wrapper'>
+        <div className={'app-wrapper ' + theme}>
           <main>{children()}</main>
         </div>
         <DonationModal />