GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 04:05:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(UI): Restore theme preference after reloading (#469) (#473)

Browse Source 
* Added helper functions for theme configs under lib/theme.
* Modified the id of theme stylsheet element to 'appMode'.
This commit is contained in:
Aryan Shridhar 2021-12-24 11:57:29 +05:30 committed by GitHub
parent 3b687201a6
commit 0f39643a56
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 50 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/container/SideNav/index.tsx
View File

@ -11,6 +11,8 @@ import { ToggleDarkMode } from 'store/actions';
import { AppState } from 'store/reducers'; import { AppState } from 'store/reducers';
import AppActions from 'types/actions'; import AppActions from 'types/actions';
import AppReducer from 'types/reducer/app'; import AppReducer from 'types/reducer/app';
import getTheme from 'lib/theme/getTheme';
import setTheme from 'lib/theme/setTheme';
import menus from './menuItems'; import menus from './menuItems';
import { Logo, Sider, ThemeSwitcherWrapper } from './styles'; import { Logo, Sider, ThemeSwitcherWrapper } from './styles';
@ -21,10 +23,10 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app); const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
const toggleTheme = useCallback(() => { const toggleTheme = useCallback(() => {
const preMode: mode = isDarkMode ? 'lightMode' : 'darkMode'; const preMode: appMode = isDarkMode ? 'lightMode' : 'darkMode';
const postMode: mode = isDarkMode ? 'darkMode' : 'lightMode'; setTheme(preMode);
const id: mode = preMode; const id: appMode = preMode;
const head = document.head; const head = document.head;
const link = document.createElement('link'); const link = document.createElement('link');
link.rel = 'stylesheet'; link.rel = 'stylesheet';
@ -36,7 +38,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
link.onload = (): void => { link.onload = (): void => {
toggleDarkMode(); toggleDarkMode();
const prevNode = document.getElementById(postMode); const prevNode = document.getElementById('appMode');
prevNode?.remove(); prevNode?.remove();
}; };
}, [toggleDarkMode, isDarkMode]); }, [toggleDarkMode, isDarkMode]);
@ -57,7 +59,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
return ( return (
<Sider collapsible collapsed={collapsed} onCollapse={onCollapse} width={200}> <Sider collapsible collapsed={collapsed} onCollapse={onCollapse} width={200}>
<ThemeSwitcherWrapper> <ThemeSwitcherWrapper>
<ToggleButton checked={isDarkMode} onChange={toggleTheme} /> <ToggleButton checked={getTheme() === 'darkMode'} onChange={toggleTheme} />
</ThemeSwitcherWrapper> </ThemeSwitcherWrapper>
<NavLink to={ROUTES.APPLICATION}> <NavLink to={ROUTES.APPLICATION}>
<Logo src={'/signoz.svg'} alt="SigNoz" collapsed={collapsed} /> <Logo src={'/signoz.svg'} alt="SigNoz" collapsed={collapsed} />
@ -81,7 +83,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
); );
}; };
type mode = 'darkMode' | 'lightMode'; type appMode = 'darkMode' | 'lightMode';
interface DispatchProps { interface DispatchProps {
toggleDarkMode: () => void; toggleDarkMode: () => void;

18
frontend/src/index.html.ejs
View File

@ -14,11 +14,27 @@
<meta data-react-helmet="true" name="docusaurus_tag" content="default"> <meta data-react-helmet="true" name="docusaurus_tag" content="default">
<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico"> <link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico">
<link id='darkMode' rel='stylesheet' type='text/css' href='/css/antd.dark.min.css' /> <link id='appMode' rel='stylesheet' type='text/css' href='/css/antd.dark.min.css' />
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<script>
const themeNode = document.getElementById('appMode');
let userTheme;
try {
userTheme = localStorage.getItem('theme');
} catch (e) {
userTheme = '';
}
if(userTheme === 'lightMode'){
themeNode.setAttribute('href','/css/antd.min.css');
} else {
themeNode.setAttribute('href', '/css/antd.dark.min.css');
}
</script>
</body> </body>
</html> </html>

14
frontend/src/lib/theme/getTheme.ts Normal file
View File

@ -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;

9
frontend/src/lib/theme/setTheme.ts Normal file
View File

@ -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;

3
frontend/src/store/reducers/app.ts
View File

@ -5,11 +5,12 @@ import {
SWITCH_DARK_MODE, SWITCH_DARK_MODE,
TOGGLE_SETTINGS_TABS, TOGGLE_SETTINGS_TABS,
} from 'types/actions/app'; } from 'types/actions/app';
import getTheme from 'lib/theme/getTheme';
import InitialValueTypes from 'types/reducer/app'; import InitialValueTypes from 'types/reducer/app';
import getLocalStorageKey from 'api/browser/localstorage/get'; import getLocalStorageKey from 'api/browser/localstorage/get';
const InitialValue: InitialValueTypes = { const InitialValue: InitialValueTypes = {
isDarkMode: true, isDarkMode: getTheme() === 'darkMode' ? true : false,
isLoggedIn: getLocalStorageKey(IS_LOGGED_IN) === 'yes', isLoggedIn: getLocalStorageKey(IS_LOGGED_IN) === 'yes',
settingsActiveTab: 'General', settingsActiveTab: 'General',
}; };