536c1c37b1
- Introduced new appearance settings page with a dark mode toggle feature. - Added localization support for English, Spanish, and Portuguese in appearance settings. - Removed the ThemeSelector component and updated PreferenceSelector accordingly.
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { Card, Divider, Flex, Switch, Typography } from 'antd';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
|
import { useAppSelector } from '@/hooks/useAppSelector';
|
|
import { toggleTheme } from '@/features/theme/themeSlice';
|
|
import { useDocumentTitle } from '@/hooks/useDoumentTItle';
|
|
import { MoonOutlined, SunOutlined } from '@ant-design/icons';
|
|
|
|
const AppearanceSettings = () => {
|
|
const { t } = useTranslation('settings/appearance');
|
|
const themeMode = useAppSelector(state => state.themeReducer.mode);
|
|
const dispatch = useAppDispatch();
|
|
|
|
useDocumentTitle(t('title'));
|
|
|
|
const handleThemeToggle = () => {
|
|
dispatch(toggleTheme());
|
|
};
|
|
|
|
return (
|
|
<Card style={{ width: '100%' }}>
|
|
<Flex vertical gap={4}>
|
|
<Flex gap={8} align="center">
|
|
<Switch
|
|
checked={themeMode === 'dark'}
|
|
onChange={handleThemeToggle}
|
|
checkedChildren={<MoonOutlined />}
|
|
unCheckedChildren={<SunOutlined />}
|
|
/>
|
|
<Typography.Title level={4} style={{ marginBlockEnd: 0 }}>
|
|
{t('darkMode')}
|
|
</Typography.Title>
|
|
</Flex>
|
|
<Typography.Text
|
|
style={{ fontSize: 14, color: themeMode === 'dark' ? '#9CA3AF' : '#00000073' }}
|
|
>
|
|
{t('darkModeDescription')}
|
|
</Typography.Text>
|
|
</Flex>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default AppearanceSettings;
|