import { remote } from 'electron' ; import React , { useContext , useCallback } from 'react' ; import { Button , Classes , ControlGroup } from '@blueprintjs/core' ; import SharingSessionService from '../../features/SharingSessionService' ; import { SettingsContext } from '../../containers/SettingsProvider' ; const sharingSessionService = remote . getGlobal ( 'sharingSessionService' ) as SharingSessionService ; export default function ToggleThemeBtnGroup ( ) { const { isDarkTheme , setIsDarkThemeHook } = useContext ( SettingsContext ) ; const handleToggleDarkTheme = useCallback ( ( ) => { if ( ! isDarkTheme ) { document . body . classList . toggle ( Classes . DARK ) ; setIsDarkThemeHook ( true ) ; } sharingSessionService . sharingSessions . forEach ( ( sharingSession ) => { sharingSession ?. appThemeChanged ( ) ; } ) ; } , [ isDarkTheme , setIsDarkThemeHook ] ) ; const handleToggleLightTheme = useCallback ( ( ) => { if ( isDarkTheme ) { document . body . classList . toggle ( Classes . DARK ) ; setIsDarkThemeHook ( false ) ; } sharingSessionService . sharingSessions . forEach ( ( sharingSession ) => { sharingSession ?. appThemeChanged ( ) ; } ) ; } , [ isDarkTheme , setIsDarkThemeHook ] ) ; return ( < ControlGroup fill vertical = { false } style = { { width : '120px' } } > < Button id = "light-theme-toggle-btn" icon = "flash" onClick = { handleToggleLightTheme } active = { ! isDarkTheme } style = { { borderTopLeftRadius : '50px' , borderBottomLeftRadius : '50px' } } /> < Button id = "dark-theme-toggle-btn" icon = "moon" onClick = { handleToggleDarkTheme } active = { isDarkTheme } style = { { borderTopRightRadius : '50px' , borderBottomRightRadius : '50px' , } } /> < /ControlGroup>); }