1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00

feat: dark mode switch (#3370)

https://linear.app/unleash/issue/1-802/replace-the-dark-mode-switch

<img width="221" alt="image"
src="https://user-images.githubusercontent.com/14320932/226900284-642f5f0d-5f10-47a5-92cc-080bddbcbfc1.png">
<img width="159" alt="image"
src="https://user-images.githubusercontent.com/14320932/226900684-13a044a3-4a18-41fc-bc76-f4f34a911a53.png">

**Note**: The second screenshot does not show the dark theme because
that's part of https://github.com/Unleash/unleash/pull/3298

Improves the dark mode switch to be a simple IconButton that acts as a
flip switch.
This commit is contained in:
Nuno Góis 2023-03-22 14:39:02 +00:00 committed by GitHub
parent 421fddfe3b
commit e0d2536d6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -5,10 +5,8 @@ import { Link } from 'react-router-dom';
import {
AppBar,
Container,
FormControlLabel,
IconButton,
Tooltip,
Switch,
styled,
Theme,
} from '@mui/material';
@ -31,7 +29,11 @@ import {
adminMenuRoutes,
getCondensedRoutes,
} from 'component/menu/routes';
import { KeyboardArrowDown } from '@mui/icons-material';
import {
DarkModeOutlined,
KeyboardArrowDown,
LightModeOutlined,
} from '@mui/icons-material';
import { filterByConfig } from 'component/common/util';
import { useAuthPermissions } from 'hooks/api/getters/useAuth/useAuthPermissions';
import { useId } from 'hooks/useId';
@ -239,15 +241,25 @@ const Header: VFC = () => {
uiConfig.flags.ENABLE_DARK_MODE_SUPPORT
)}
show={
<FormControlLabel
control={
<Switch
onChange={onSetThemeMode}
checked={themeMode === 'dark'}
/>
<Tooltip
title={
themeMode === 'dark'
? 'Switch to light theme'
: 'Switch to dark theme'
}
label="darkmode"
/>
arrow
>
<IconButton
onClick={onSetThemeMode}
sx={focusable}
>
<ConditionallyRender
condition={themeMode === 'dark'}
show={<DarkModeOutlined />}
elseShow={<LightModeOutlined />}
/>
</IconButton>
</Tooltip>
}
/>
<ConditionallyRender