diff --git a/client/package-lock.json b/client/package-lock.json
index f5ec4b09fa..ebdc05a379 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -12112,6 +12112,11 @@
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
"integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
},
+ "store": {
+ "version": "2.0.12",
+ "resolved": "https://registry.npmjs.org/store/-/store-2.0.12.tgz",
+ "integrity": "sha1-jFNOKguDH3K3X8XxEZhXxE711ZM="
+ },
"stream-browserify": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz",
diff --git a/client/package.json b/client/package.json
index 6e34b3b498..bdb7979190 100644
--- a/client/package.json
+++ b/client/package.json
@@ -33,6 +33,7 @@
"redux-actions": "^2.6.1",
"redux-saga": "^0.16.0",
"reselect": "^3.0.1",
+ "store": "^2.0.12",
"validator": "^10.7.0"
},
"keywords": [
diff --git a/client/src/html.js b/client/src/html.js
index 0296765be7..ea8c63f04d 100644
--- a/client/src/html.js
+++ b/client/src/html.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
export default class HTML extends React.Component {
render() {
return (
-
+
diff --git a/client/src/redux/index.js b/client/src/redux/index.js
index f7c18f58a9..2945b82687 100644
--- a/client/src/redux/index.js
+++ b/client/src/redux/index.js
@@ -7,6 +7,7 @@ import { createAppMountSaga } from './app-mount-saga';
import { createReportUserSaga } from './report-user-saga';
import { createShowCertSaga } from './show-cert-saga';
import { createUpdateMyEmailSaga } from './update-email-saga';
+import { createNightModeSaga } from './night-mode-saga';
import { types as settingsTypes } from './settings';
@@ -49,7 +50,8 @@ export const sagas = [
...createFetchUserSaga(types),
...createUpdateMyEmailSaga(types),
...createShowCertSaga(types),
- ...createReportUserSaga(types)
+ ...createReportUserSaga(types),
+ ...createNightModeSaga({ ...types, ...settingsTypes })
];
export const appMount = createAction(types.appMount);
diff --git a/client/src/redux/night-mode-saga.js b/client/src/redux/night-mode-saga.js
new file mode 100644
index 0000000000..634c927e2a
--- /dev/null
+++ b/client/src/redux/night-mode-saga.js
@@ -0,0 +1,36 @@
+/* eslint-disable require-yield */
+
+import { takeEvery } from 'redux-saga/effects';
+import store from 'store';
+
+const themeKey = 'fcc-theme';
+const defaultTheme = 'default';
+const nightTheme = 'night';
+
+function setTheme(currentTheme = defaultTheme, theme) {
+ if (currentTheme !== theme) {
+ store.set(themeKey, theme);
+ }
+ const html = document.getElementById('__fcc-html');
+ html.classList.remove(theme === nightTheme ? defaultTheme : nightTheme);
+ html.classList.add(theme);
+}
+
+function* updateLocalThemeSaga({ payload }) {
+ const currentTheme = store.get(themeKey);
+ if ('user' in payload) {
+ const { theme = defaultTheme } = payload.user;
+ return setTheme(currentTheme, theme);
+ }
+ if ('theme' in payload) {
+ return setTheme(currentTheme, payload.theme);
+ }
+ return setTheme(currentTheme);
+}
+
+export function createNightModeSaga(types) {
+ return [
+ takeEvery(types.fetchUserComplete, updateLocalThemeSaga),
+ takeEvery(types.updateUserFlagComplete, updateLocalThemeSaga)
+ ];
+}