fix: add dark class to the elements when dark mode is enabled to support components library modes (#7607)

This commit is contained in:
Shaheer Kochai 2025-05-06 20:14:26 +04:30 committed by GitHub
parent 08579242eb
commit b80626f5e2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -376,9 +376,11 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
useEffect(() => { useEffect(() => {
if (isDarkMode) { if (isDarkMode) {
document.body.classList.remove('lightMode'); document.body.classList.remove('lightMode');
document.body.classList.add('dark');
document.body.classList.add('darkMode'); document.body.classList.add('darkMode');
} else { } else {
document.body.classList.add('lightMode'); document.body.classList.add('lightMode');
document.body.classList.remove('dark');
document.body.classList.remove('darkMode'); document.body.classList.remove('darkMode');
} }
}, [isDarkMode]); }, [isDarkMode]);
@ -588,7 +590,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
); );
return ( return (
<Layout className={cx(isDarkMode ? 'darkMode' : 'lightMode')}> <Layout className={cx(isDarkMode ? 'darkMode dark' : 'lightMode')}>
<Helmet> <Helmet>
<title>{pageTitle}</title> <title>{pageTitle}</title>
</Helmet> </Helmet>
@ -638,7 +640,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
</div> </div>
)} )}
<Flex className={cx('app-layout', isDarkMode ? 'darkMode' : 'lightMode')}> <Flex
className={cx('app-layout', isDarkMode ? 'darkMode dark' : 'lightMode')}
>
{isToDisplayLayout && !renderFullScreen && <SideNav />} {isToDisplayLayout && !renderFullScreen && <SideNav />}
<div <div
className={cx('app-content', { className={cx('app-content', {