From 0f39643a5675239637b6cfc2a25ea8fa116e7a0c Mon Sep 17 00:00:00 2001 From: Aryan Shridhar <53977614+aryanshridhar@users.noreply.github.com> Date: Fri, 24 Dec 2021 11:57:29 +0530 Subject: [PATCH] fix(UI): Restore theme preference after reloading (#469) (#473) * Added helper functions for theme configs under lib/theme. * Modified the id of theme stylsheet element to 'appMode'. --- frontend/src/container/SideNav/index.tsx | 14 ++++++++------ frontend/src/index.html.ejs | 18 +++++++++++++++++- frontend/src/lib/theme/getTheme.ts | 14 ++++++++++++++ frontend/src/lib/theme/setTheme.ts | 9 +++++++++ frontend/src/store/reducers/app.ts | 3 ++- 5 files changed, 50 insertions(+), 8 deletions(-) create mode 100644 frontend/src/lib/theme/getTheme.ts create mode 100644 frontend/src/lib/theme/setTheme.ts diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx index ba5c64132c..1078ca1123 100644 --- a/frontend/src/container/SideNav/index.tsx +++ b/frontend/src/container/SideNav/index.tsx @@ -11,6 +11,8 @@ import { ToggleDarkMode } from 'store/actions'; import { AppState } from 'store/reducers'; import AppActions from 'types/actions'; import AppReducer from 'types/reducer/app'; +import getTheme from 'lib/theme/getTheme'; +import setTheme from 'lib/theme/setTheme'; import menus from './menuItems'; import { Logo, Sider, ThemeSwitcherWrapper } from './styles'; @@ -21,10 +23,10 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => { const { isDarkMode } = useSelector((state) => state.app); const toggleTheme = useCallback(() => { - const preMode: mode = isDarkMode ? 'lightMode' : 'darkMode'; - const postMode: mode = isDarkMode ? 'darkMode' : 'lightMode'; + const preMode: appMode = isDarkMode ? 'lightMode' : 'darkMode'; + setTheme(preMode); - const id: mode = preMode; + const id: appMode = preMode; const head = document.head; const link = document.createElement('link'); link.rel = 'stylesheet'; @@ -36,7 +38,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => { link.onload = (): void => { toggleDarkMode(); - const prevNode = document.getElementById(postMode); + const prevNode = document.getElementById('appMode'); prevNode?.remove(); }; }, [toggleDarkMode, isDarkMode]); @@ -57,7 +59,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => { return ( - + @@ -81,7 +83,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => { ); }; -type mode = 'darkMode' | 'lightMode'; +type appMode = 'darkMode' | 'lightMode'; interface DispatchProps { toggleDarkMode: () => void; diff --git a/frontend/src/index.html.ejs b/frontend/src/index.html.ejs index 49928c33a4..f3a7e7879a 100644 --- a/frontend/src/index.html.ejs +++ b/frontend/src/index.html.ejs @@ -14,11 +14,27 @@ - +
+ diff --git a/frontend/src/lib/theme/getTheme.ts b/frontend/src/lib/theme/getTheme.ts new file mode 100644 index 0000000000..e9e72f2b51 --- /dev/null +++ b/frontend/src/lib/theme/getTheme.ts @@ -0,0 +1,14 @@ +import getLocalStorageKey from 'api/browser/localstorage/get'; + +const getTheme = (): appMode => { + const userTheme = getLocalStorageKey('theme'); + if (userTheme === null || userTheme === 'darkMode') { + return 'darkMode'; + } + + return 'lightMode'; +}; + +type appMode = 'darkMode' | 'lightMode'; + +export default getTheme; diff --git a/frontend/src/lib/theme/setTheme.ts b/frontend/src/lib/theme/setTheme.ts new file mode 100644 index 0000000000..e46790ad3f --- /dev/null +++ b/frontend/src/lib/theme/setTheme.ts @@ -0,0 +1,9 @@ +import setLocalStorageKey from 'api/browser/localstorage/set'; + +const setTheme = (value: appMode): void => { + setLocalStorageKey('theme', value); +}; + +type appMode = 'darkMode' | 'lightMode'; + +export default setTheme; diff --git a/frontend/src/store/reducers/app.ts b/frontend/src/store/reducers/app.ts index 4516f76fed..d0ab0fef79 100644 --- a/frontend/src/store/reducers/app.ts +++ b/frontend/src/store/reducers/app.ts @@ -5,11 +5,12 @@ import { SWITCH_DARK_MODE, TOGGLE_SETTINGS_TABS, } from 'types/actions/app'; +import getTheme from 'lib/theme/getTheme'; import InitialValueTypes from 'types/reducer/app'; import getLocalStorageKey from 'api/browser/localstorage/get'; const InitialValue: InitialValueTypes = { - isDarkMode: true, + isDarkMode: getTheme() === 'darkMode' ? true : false, isLoggedIn: getLocalStorageKey(IS_LOGGED_IN) === 'yes', settingsActiveTab: 'General', };