github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-02-16 15:51:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

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
Show stats 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>
)

3
src/initializers/fontAwesome.ts
View file

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