mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-18 00:54:43 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

change dark mode button to show sun icon if toggled

Browse source 
see https://github.com/codimd/server/issues/378

Signed-off-by: Philip Molares <philip.molares@udo.edu>
This commit is contained in:
Philip Molares 2020-05-31 14:06:12 +02:00 • committed by Philip Molares
parent d035ff26a5
commit 727beb69f9
2 changed files with 9 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/editor/task-bar/dark-mode-button.tsx
View file

@ -1,10 +1,10 @@
import React, { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
import { useTranslation } from 'react-i18next';
import { useTranslation } from 'react-i18next'
const DarkModeButton: React.FC = () => {
const { t } = useTranslation();
const { t } = useTranslation()
const [buttonState, setButtonState] = useState(false)
const buttonToggle = () => {
setButtonState(prevState => !prevState)
@ -13,12 +13,15 @@ const DarkModeButton: React.FC = () => {
return (
<ToggleButtonGroup type="checkbox" defaultValue={[]} name="dark-mode" className="ml-2" value={buttonState ? ['dark'] : ['']}>
<ToggleButton
title={ buttonState ? t('editor.darkMode.switchToDark') : t('editor.darkMode.switchToLight')}
title={ buttonState ? t('editor.darkMode.switchToLight') : t('editor.darkMode.switchToDark')}
variant={ buttonState ? 'secondary' : 'light' }
className={ buttonState ? 'text-white' : 'text-secondary' }
onChange={buttonToggle} value={'dark'}
>
<FontAwesomeIcon icon="moon"/>
{buttonState
? <FontAwesomeIcon icon="sun"/>
: <FontAwesomeIcon icon="moon"/>
}
</ToggleButton>
</ToggleButtonGroup>
)