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:
parent
421fddfe3b
commit
e0d2536d6f
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user