Merge pull request #13229 from Bouncey/fix/nightModeOnPageLoad

Persist night mode on page load

client/sagas/night-mode-saga.js

@@ -1,4 +1,6 @@
 import { Observable } from 'rx';
+import store from 'store';
+
 import { postJSON$ } from '../../common/utils/ajax-stream';
 import types from '../../common/app/redux/types';
 import {
@@ -7,6 +9,10 @@ import {
   createErrorObservable
 } from '../../common/app/redux/actions';
 
+function persistTheme(theme) {
+  store.set('fcc-theme', theme);
+}
+
 export default function nightModeSaga(
   actions,
   getState,
@@ -17,6 +23,8 @@ export default function nightModeSaga(
     .doOnNext(({ payload: theme }) => {
       if (theme === 'night') {
         body.classList.add('night');
+        // catch existing night mode users
+        persistTheme(theme);
       } else {
         body.classList.remove('night');
       }
@@ -29,6 +37,7 @@ export default function nightModeSaga(
     .flatMap(() => {
       const { app: { theme } } = getState();
       const newTheme = !theme || theme === 'default' ? 'night' : 'default';
+      persistTheme(newTheme);
       return Observable.of(
         updateTheme(newTheme),
         addThemeToBody(newTheme)

server/views/layout-react.jade

@@ -11,5 +11,17 @@ html(lang='en')
     script!= state
     script.
       window.webpackManifest = !{JSON.stringify(chunkManifest || {})};
+      (function setTheme() {
+        let fccTheme;
+        try {
+          fccTheme = JSON.parse(localStorage.getItem('fcc-theme'));
+          if (fccTheme && fccTheme === 'night') {
+            document.body.classList.add('night');
+          }
+        }
+        catch(e) {
+          fccTheme = null;
+        }
+      })();
     script(src=rev('/js', 'vendor-challenges.js'))
     script(src=rev('/js', 'bundle.js'))