import * as React from 'react' ; import { SunIcon } from '@radix-ui/react-icons' ; import useDarkMode from 'use-dark-mode' ; import { Button } from './Button' ; import { darkThemeClass } from '../stitches.config' ; interface DarkModeButtonProps { css ? : React . ComponentProps < typeof Button > [ 'css' ] ; } export const DarkModeButton = ( { css , ... props } ) => { let storageProvider = null ; try { storageProvider = localStorage ; } catch { } const darkMode = useDarkMode ( undefined , { classNameDark : darkThemeClass , storageProvider , } ) ; React . useEffect ( ( ) => { if ( darkMode . value === true ) { document . documentElement . style . colorScheme = 'dark' ; } else { document . documentElement . style . colorScheme = 'light' ; } } , [ darkMode . value ] ) ; return ( < Button { ... props } onClick = { darkMode . toggle } focus = "boxShadow" css = { { width : '36px' , height : '36px' , padding : '3px' , margin : '-3px' , borderRadius : '50%' , ... ( css as any ) , } } title = "Toggle dark mode" aria - label = "Toggle dark mode" > < SunIcon width = "30" height = "30" / > < /Button>); } ;