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', };