Skip to content

Commit 8f7ff3f

Browse files
kelvink96kelvink96
authored
Merge pull request #102 from ram-prasad23/darkmode
feat(ui): added support for dark mode
2 parents 4641ce9 + ad15140 commit 8f7ff3f

File tree

14 files changed

+110
-23
lines changed

14 files changed

+110
-23
lines changed

‎.changeset/thick-dots-dress.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"antd-multi-dashboard": patch
3+
---
4+
5+
### Added
6+
- feat(ui): added support for dark mode.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@ant-design/colors": "^7.0.2",
2222
"@ant-design/icons": "^5.3.0",
2323
"@changesets/cli": "^2.26.2",
24+
"@reduxjs/toolkit": "^2.2.3",
2425
"@tanem/react-nprogress": "^5.0.51",
2526
"antd": "^5.10.1",
2627
"dayjs": "^1.11.9",
@@ -33,9 +34,11 @@
3334
"react-dom": "^18.2.0",
3435
"react-fast-marquee": "^1.6.4",
3536
"react-helmet-async": "^1.3.0",
37+
"react-redux": "^9.1.2",
3638
"react-responsive": "^9.0.2",
3739
"react-router-dom": "^6.15.0",
38-
"react-transition-group": "^4.4.5"
40+
"react-transition-group": "^4.4.5",
41+
"redux-persist": "^6.0.0"
3942
},
4043
"devDependencies": {
4144
"@commitlint/cli": "^18.4.3",

‎src/App.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { RouterProvider } from 'react-router-dom';
2-
import { ConfigProvider } from 'antd';
2+
import { ConfigProvider, theme as antdTheme } from 'antd';
3+
34
import { HelmetProvider } from 'react-helmet-async';
45
import { StylesContext } from './context';
56
import routes from './routes/routes.tsx';
7+
import { useSelector } from 'react-redux';
68

79
import './App.css';
810

@@ -25,6 +27,8 @@ export const COLOR = {
2527
};
2628

2729
function App() {
30+
const { mytheme } = useSelector((state: RootState) => state.theme);
31+
2832
return (
2933
<HelmetProvider>
3034
<ConfigProvider
@@ -36,8 +40,8 @@ function App() {
3640
},
3741
components: {
3842
Breadcrumb: {
39-
linkColor: 'rgba(0,0,0,.8)',
40-
itemColor: 'rgba(0,0,0,.8)',
43+
// linkColor: 'rgba(0,0,0,.8)',
44+
// itemColor: 'rgba(0,0,0,.8)',
4145
},
4246
Button: {
4347
colorLink: COLOR['500'],
@@ -48,7 +52,6 @@ function App() {
4852
colorBgContainer: 'none',
4953
},
5054
Card: {
51-
colorBgContainer: 'none',
5255
colorBorderSecondary: COLOR['borderColor'],
5356
},
5457
Carousel: {
@@ -83,6 +86,10 @@ function App() {
8386
linkHoverDecoration: 'underline',
8487
},
8588
},
89+
algorithm:
90+
mytheme === 'dark'
91+
? antdTheme.darkAlgorithm
92+
: antdTheme.defaultAlgorithm,
8693
}}
8794
>
8895
<StylesContext.Provider

‎src/components/Card/styles.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
.card {
33
/*backdrop-filter: blur(16px) saturate(180%);*/
44
/*-webkit-backdrop-filter: blur(16px) saturate(180%);*/
5-
background-color: rgba(255, 255, 255, 1);
5+
/* background-color: rgba(255, 255, 255, 1); */
66
/*border: 1px solid rgba(209, 213, 219, 0.3);*/
77
-webkit-box-shadow: rgba(140, 152, 164, 0.075) 0 6px 12px 0;
88
-moz-box-shadow: rgba(140, 152, 164, 0.075) 0 6px 12px 0;

‎src/layouts/app/App.tsx‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
message,
1010
theme,
1111
Tooltip,
12+
Switch,
1213
} from 'antd';
1314
import { useLocation, useNavigate } from 'react-router-dom';
1415
import { ReactNode, useEffect, useRef, useState } from 'react';
@@ -21,6 +22,8 @@ import {
2122
QuestionOutlined,
2223
SettingOutlined,
2324
UserOutlined,
25+
MoonOutlined,
26+
SunOutlined,
2427
} from '@ant-design/icons';
2528
import {
2629
CSSTransition,
@@ -33,6 +36,8 @@ import HeaderNav from './HeaderNav.tsx';
3336
import FooterNav from './FooterNav.tsx';
3437
import { NProgress } from '../../components';
3538
import { PATH_LANDING } from '../../constants';
39+
import { useSelector, useDispatch } from 'react-redux';
40+
import { toggleTheme } from '../../redux/theme/themeSlice.ts';
3641

3742
const { Content } = Layout;
3843

@@ -52,7 +57,8 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
5257
const navigate = useNavigate();
5358
const nodeRef = useRef(null);
5459
const floatBtnRef = useRef(null);
55-
60+
const dispatch = useDispatch();
61+
const { mytheme } = useSelector((state: RootState) => state.theme);
5662
const items: MenuProps['items'] = [
5763
{
5864
key: 'user-profile-link',
@@ -110,7 +116,7 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
110116
<Layout
111117
style={{
112118
minHeight: '100vh',
113-
backgroundColor: 'white',
119+
// backgroundColor: 'white',
114120
}}
115121
>
116122
<SideNav
@@ -130,9 +136,11 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
130136
}}
131137
/>
132138
<Layout
133-
style={{
134-
background: 'none',
135-
}}
139+
style={
140+
{
141+
// background: 'none',
142+
}
143+
}
136144
>
137145
<HeaderNav
138146
style={{
@@ -182,6 +190,15 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
182190
<Tooltip title="Messages">
183191
<Button icon={<MessageOutlined />} type="text" size="large" />
184192
</Tooltip>
193+
<Tooltip title="Theme">
194+
<Switch
195+
className=" hidden sm:inline py-1"
196+
checkedChildren={<MoonOutlined />}
197+
unCheckedChildren={<SunOutlined />}
198+
checked={mytheme === 'light' ? true : false}
199+
onClick={() => dispatch(toggleTheme())}
200+
/>
201+
</Tooltip>
185202
<Dropdown menu={{ items }} trigger={['click']}>
186203
<Flex>
187204
<img
@@ -198,7 +215,7 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
198215
<Content
199216
style={{
200217
margin: `0 0 0 ${collapsed ? 0 : '200px'}`,
201-
background: '#ebedf0',
218+
// background: '#ebedf0',
202219
borderRadius: collapsed ? 0 : borderRadius,
203220
transition: 'all .25s',
204221
padding: '24px 32px',

‎src/layouts/app/SideNav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ const SideNav = ({ ...others }: SideNavProps) => {
238238
return (
239239
<Sider ref={nodeRef} breakpoint="lg" collapsedWidth="0" {...others}>
240240
<Logo
241-
color="black"
241+
color="blue"
242242
asLink
243243
href={PATH_LANDING.root}
244244
justify="center"

‎src/layouts/guest/Guest.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,15 +70,15 @@ export const GuestLayout = () => {
7070
className="layout"
7171
style={{
7272
minHeight: '100vh',
73-
backgroundColor: 'white',
73+
// backgroundColor: 'white',
7474
}}
7575
>
7676
<Header
7777
style={{
7878
display: 'flex',
7979
alignItems: 'center',
8080
justifyContent: 'space-between',
81-
background: navFill ? 'rgba(255, 255, 255, .5)' : 'none',
81+
// background: navFill ? 'rgba(255, 255, 255, .5)' : 'none',
8282
backdropFilter: navFill ? 'blur(8px)' : 'none',
8383
boxShadow: navFill ? '0 0 8px 2px rgba(0, 0, 0, 0.05)' : 'none',
8484
gap: 12,
@@ -88,7 +88,7 @@ export const GuestLayout = () => {
8888
zIndex: 1,
8989
}}
9090
>
91-
<Logo color="black" asLink href={PATH_LANDING.root} />
91+
<Logo color="blue" asLink href={PATH_LANDING.root} />
9292
{!isMobile ? (
9393
<>
9494
<Flex gap="small">
@@ -131,7 +131,7 @@ export const GuestLayout = () => {
131131
</Header>
132132
<Content
133133
style={{
134-
background: 'rgba(255, 255, 255, 1)',
134+
// background: 'rgba(255, 255, 255, 1)',
135135
borderRadius,
136136
transition: 'all .25s',
137137
paddingBottom: '10rem',

‎src/main.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,16 @@ import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import App from './App.tsx';
44
import './index.css';
5-
5+
import { store, persistor } from './redux/store.ts';
6+
import { Provider } from 'react-redux';
7+
import { PersistGate } from 'redux-persist/integration/react';
68
ReactDOM.createRoot(document.getElementById('root')!).render(
79
<React.StrictMode>
8-
<App />
10+
<PersistGate persistor={persistor}>
11+
<Provider store={store}>
12+
<App />
13+
</Provider>
14+
</PersistGate>
15+
,
916
</React.StrictMode>
1017
);

‎src/pages/Home.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ export const HomePage = () => {
182182
height: isTablet ? 600 : 800,
183183
width: '100%',
184184
padding: isMobile ? '2rem 1rem' : '5rem 0',
185-
backgroundColor: 'rgba(255, 255, 255, 0.85)',
185+
// backgroundColor: 'rgba(255, 255, 255, 0.85)',
186186
}}
187187
>
188188
<Container>

‎src/pages/authentication/AccountDeactivate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const AccountDeactivePage = () => {
1212
justify="center"
1313
style={{ height: '80vh' }}
1414
>
15-
<Logo color="black" />
15+
<Logo color="blue" />
1616
<Typography.Title className="m-0">Deactivated Account</Typography.Title>
1717
<Typography.Text style={{ fontSize: 18 }}>
1818
Looking for answers? Check the <Link to="#">Help Center</Link>.

0 commit comments

Comments
 (0)