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>