From 68790dbe1bfa35d330380ee509d21fc5bac226f3 Mon Sep 17 00:00:00 2001
From: mrdrogdrog <mr.drogdrog@gmail.com>
Date: Sat, 30 May 2020 16:02:58 +0200
Subject: [PATCH] Fix dark mode button (#86)

* Add no-active-focus css class
* Improve dark mode button
* Remove class
---
 src/components/editor/task-bar/dark-mode-button.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/editor/task-bar/dark-mode-button.tsx b/src/components/editor/task-bar/dark-mode-button.tsx
index ae303c475..d1665154d 100644
--- a/src/components/editor/task-bar/dark-mode-button.tsx
+++ b/src/components/editor/task-bar/dark-mode-button.tsx
@@ -1,11 +1,16 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
 
 const DarkModeButton: React.FC = () => {
+  const [buttonState, setButtonState] = useState(false)
+  const buttonToggle = () => {
+    setButtonState(prevState => !prevState)
+  }
+
   return (
-    <ToggleButtonGroup type="checkbox" defaultValue={[]} name="dark-mode" className="ml-2">
-      <ToggleButton value={1} variant="light" className="text-secondary">
+    <ToggleButtonGroup type="checkbox" defaultValue={[]} name="dark-mode" className="ml-2" value={buttonState ? ['dark'] : ['']}>
+      <ToggleButton variant={ buttonState ? 'secondary' : 'light' } className={ buttonState ? 'text-white' : 'text-secondary' } onChange={buttonToggle} value={'dark'}>
         <FontAwesomeIcon icon="moon"/>
       </ToggleButton>
     </ToggleButtonGroup>