mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +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