github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-25 11:16:31 -05:00
Code Issues Projects Releases Packages Wiki Activity

Fix dark mode button (#86)

Browse source 
* Add no-active-focus css class
* Improve dark mode button
* Remove class
This commit is contained in:
mrdrogdrog 2020-05-30 16:02:58 +02:00 committed by GitHub
parent 02f1b2abcc
commit 68790dbe1b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 3 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,11 +1,16 @@
import React 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'
const DarkModeButton: React.FC = () => { const DarkModeButton: React.FC = () => {
const [buttonState, setButtonState] = useState(false)
const buttonToggle = () => {
setButtonState(prevState => !prevState)
}
return ( return (
<ToggleButtonGroup type="checkbox" defaultValue={[]} name="dark-mode" className="ml-2"> <ToggleButtonGroup type="checkbox" defaultValue={[]} name="dark-mode" className="ml-2" value={buttonState ? ['dark'] : ['']}>
<ToggleButton value={1} variant="light" className="text-secondary"> <ToggleButton variant={ buttonState ? 'secondary' : 'light' } className={ buttonState ? 'text-white' : 'text-secondary' } onChange={buttonToggle} value={'dark'}>
<FontAwesomeIcon icon="moon"/> <FontAwesomeIcon icon="moon"/>
</ToggleButton> </ToggleButton>
</ToggleButtonGroup> </ToggleButtonGroup>