cosmik.network
A social knowledge tool for researchers built on ATProto
feat: dark mode
+51
-10
src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
+51
-10
src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
···
6
6
Menu,
7
7
Image,
8
8
Button,
9
+
useMantineColorScheme,
10
+
useComputedColorScheme,
9
11
} from '@mantine/core';
10
12
import useMyProfile from '../../lib/queries/useMyProfile';
11
13
import CosmikLogo from '@/assets/cosmik-logo-full.svg';
12
14
import CosmikLogoWhite from '@/assets/cosmik-logo-full-white.svg';
13
-
import { MdBugReport } from 'react-icons/md';
15
+
import {
16
+
MdBugReport,
17
+
MdDarkMode,
18
+
MdLightMode,
19
+
MdAutoAwesome,
20
+
} from 'react-icons/md';
14
21
import { useAuth } from '@/hooks/useAuth';
15
22
import { useRouter } from 'next/navigation';
16
23
import Link from 'next/link';
17
24
import { IoMdLogOut } from 'react-icons/io';
18
25
import { useNavbarContext } from '@/providers/navbar';
19
26
import { BiSolidUserCircle } from 'react-icons/bi';
20
-
import { useColorScheme } from '@mantine/hooks';
21
27
22
28
export default function ProfileMenu() {
23
29
const router = useRouter();
24
-
const colorScheme = useColorScheme();
25
30
const { toggleMobile } = useNavbarContext();
26
31
const { data, error, isPending } = useMyProfile();
27
32
const { logout } = useAuth();
33
+
34
+
const { colorScheme, setColorScheme } = useMantineColorScheme();
35
+
const computedColorScheme = useComputedColorScheme('light', {
36
+
getInitialValueInEffect: true,
37
+
});
28
38
29
39
const handleLogout = async () => {
30
40
try {
···
35
45
}
36
46
};
37
47
48
+
const handleThemeToggle = () => {
49
+
const nextScheme =
50
+
colorScheme === 'light'
51
+
? 'dark'
52
+
: colorScheme === 'dark'
53
+
? 'auto'
54
+
: 'light';
55
+
56
+
setColorScheme(nextScheme);
57
+
};
58
+
38
59
if (isPending || !data) {
39
-
return <Skeleton w={38} h={38} radius={'md'} ml={4} />;
60
+
return <Skeleton w={38} h={38} radius="md" ml={4} />;
40
61
}
41
62
42
63
if (error) {
···
49
70
<Menu.Target>
50
71
<Button
51
72
variant="subtle"
52
-
color={colorScheme === 'dark' ? 'gray' : 'dark'}
53
-
fz={'md'}
54
-
radius={'md'}
73
+
color={computedColorScheme === 'dark' ? 'gray' : 'dark'}
74
+
fz="md"
75
+
radius="md"
55
76
size="lg"
56
77
px={3}
57
-
fullWidth={true}
78
+
fullWidth
58
79
justify="start"
59
80
leftSection={<Avatar src={data.avatarUrl} />}
60
81
>
61
82
{data.name}
62
83
</Button>
63
84
</Menu.Target>
85
+
64
86
<Menu.Dropdown>
65
87
<Menu.Item
66
88
component={Link}
···
92
114
93
115
<Menu.Divider />
94
116
117
+
{/*<Menu.Item
118
+
color="gray"
119
+
leftSection={
120
+
colorScheme === 'auto' ? (
121
+
<MdAutoAwesome />
122
+
) : computedColorScheme === 'dark' ? (
123
+
<MdDarkMode />
124
+
) : (
125
+
<MdLightMode />
126
+
)
127
+
}
128
+
closeMenuOnClick={false}
129
+
onClick={handleThemeToggle}
130
+
>
131
+
Theme: {colorScheme}
132
+
</Menu.Item>*/}
133
+
95
134
<Menu.Item
96
135
component="a"
97
136
href="https://cosmik.network/"
···
99
138
>
100
139
<Image
101
140
src={
102
-
colorScheme === 'dark' ? CosmikLogoWhite.src : CosmikLogo.src
141
+
computedColorScheme === 'dark'
142
+
? CosmikLogoWhite.src
143
+
: CosmikLogo.src
103
144
}
104
145
alt="Cosmik logo"
105
-
w={'auto'}
146
+
w="auto"
106
147
h={24}
107
148
/>
108
149
</Menu.Item>
+1
-1
src/webapp/providers/mantine.tsx
+1
-1
src/webapp/providers/mantine.tsx