Added redux. Moved theme loading/setting to redux actions. Added automatic theme loading based on localStorage value.

client/src/store/actions/actionTypes.ts

@@ -0,0 +1 @@
+export const SET_THEME = 'SET_THEME';

client/src/store/actions/index.ts

@@ -0,0 +1,2 @@
+export * from './theme';
+export * from './actionTypes';

client/src/store/actions/theme.ts

@@ -0,0 +1,24 @@
+import { Dispatch } from 'redux';
+import { themes } from '../../components/Themer/themes.json';
+import { Theme } from '../../interfaces/Theme';
+import { SET_THEME } from './actionTypes';
+
+export const setTheme = (themeName: string) => (dispatch: Dispatch) => {
+  const theme = themes.find((theme: Theme) => theme.name === themeName);
+
+  if (theme) {
+    localStorage.setItem('theme', themeName);
+    loadTheme(theme);
+
+    dispatch({
+      type: SET_THEME,
+      payload: themeName
+    })
+  }
+}
+
+export const loadTheme = (theme: Theme) => {
+  for (const [key, value] of Object.entries(theme.colors)) {
+    document.body.style.setProperty(`--color-${key}`, value);
+  }
+}

client/src/store/reducers/index.ts

@@ -0,0 +1,9 @@
+import { combineReducers } from 'redux';
+
+import themeReducer from './theme';
+
+const rootReducer = combineReducers({
+  theme: themeReducer
+})
+
+export default rootReducer;

client/src/store/reducers/theme.ts

@@ -0,0 +1,18 @@
+import { SET_THEME } from '../actions/actionTypes';
+
+const initialState = {
+  theme: 'blues'
+}
+
+const themeReducer = (state = initialState, action: any) => {
+  switch (action.type) {
+    case SET_THEME:
+      return {
+        theme: action.payload
+      };
+    default:
+      return state;
+  }
+}
+
+export default themeReducer;

client/src/store/store.ts

@@ -0,0 +1,9 @@
+import { createStore, applyMiddleware } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension';
+import thunk from 'redux-thunk';
+import rootReducer from './reducers';
+const initialState = {};
+
+const store = createStore(rootReducer, initialState, composeWithDevTools(applyMiddleware(thunk)));
+
+export default store;