Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: dark mode switch (#3370)

Browse Source 
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
1 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/component/menu/Header/Header.tsx
View File

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