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

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

3
src/initializers/fontAwesome.ts
View file

@ -38,6 +38,7 @@ import {
faSort, faSort,
faSortDown, faSortDown,
faSortUp, faSortUp,
faSun,
faSync, faSync,
faTag, faTag,
faThumbtack, faThumbtack,
@ -55,5 +56,5 @@ export const setUpFontAwesome: (() => void) = () => {
faDropbox, faTwitter, faUsers, faAddressCard, faEye, faPencilAlt, faColumns, faDropbox, faTwitter, faUsers, faAddressCard, faEye, faPencilAlt, faColumns,
faMoon, faQuestionCircle, faShareSquare, faHistory, faFileCode, faPaste, faMoon, faQuestionCircle, faShareSquare, faHistory, faFileCode, faPaste,
faCircle, faSort, faDownload, faUpload, faTrash, faSync, faSortUp, faSortDown, faCopy, faCircle, faSort, faDownload, faUpload, faTrash, faSync, faSortUp, faSortDown, faCopy,
faHashtag, faLanguage, faTag, faDotCircle) faHashtag, faLanguage, faTag, faDotCircle, faSun)
} }