fix: improve toolbar icon visibility in dark mode

Author: Drita-ai

src/components/TemplateMarkdownToolbar.tsx

@@ -1,15 +1,24 @@
 import { LuHeading1, LuHeading2, LuHeading3 } from "react-icons/lu";
 import { FaBold, FaItalic, FaLink, FaImage, FaListUl, FaListOl } from "react-icons/fa";
 import { useMarkdownEditorContext } from "../contexts/MarkdownEditorContext";
+import useAppStore from "../store/store";
 
 export const TemplateMarkdownToolbar = () => {
   const { commands: markdownEditorCommands } = useMarkdownEditorContext();
+  const { backgroundColor } = useAppStore((state) => ({
+    backgroundColor: state.backgroundColor,
+  }));
+
+  const isDarkMode = backgroundColor !== "#ffffff";
+  const markdownToolbarButtonClasses = isDarkMode
+    ? "markdown-toolbar-button border-none bg-transparent text-white hover:bg-white hover:text-black"
+    : "markdown-toolbar-button border-none bg-transparent text-black hover:bg-slate-200";
 
   return (
     <div className="markdown-toolbar">
       <button
         type="button"
-        className="markdown-toolbar-button border-none bg-transparent hover:bg-slate-200"
+        className={markdownToolbarButtonClasses}
         onClick={() => markdownEditorCommands?.toggleHeading1?.()}
         title="Heading 1"
         aria-label="Heading 1"
@@ -18,7 +27,7 @@ export const TemplateMarkdownToolbar = () => {
       </button>
       <button
         type="button"
-        className="markdown-toolbar-button border-none bg-transparent hover:bg-slate-200"
+        className={markdownToolbarButtonClasses}
         onClick={() => markdownEditorCommands?.toggleHeading2?.()}
         title="Heading 2"
         aria-label="Heading 2"
@@ -27,7 +36,7 @@ export const TemplateMarkdownToolbar = () => {
       </button>
       <button
         type="button"
-        className="markdown-toolbar-button border-none bg-transparent hover:bg-slate-200"
+        className={markdownToolbarButtonClasses}
         onClick={() => markdownEditorCommands?.toggleHeading3?.()}
         title="Heading 3"
         aria-label="Heading 3"
@@ -36,7 +45,7 @@ export const TemplateMarkdownToolbar = () => {
       </button>
       <button
         type="button"
-        className="markdown-toolbar-button border-none bg-transparent hover:bg-slate-200"
+        className={markdownToolbarButtonClasses}
         onClick={() => markdownEditorCommands?.toggleBold?.()}
         title="Bold"
         aria-label="Bold"
@@ -45,7 +54,7 @@ export const TemplateMarkdownToolbar = () => {
       </button>
       <button
         type="button"
-        className="border-none bg-transparent hover:bg-slate-200"
+        className={markdownToolbarButtonClasses}
         onClick={() => markdownEditorCommands?.toggleItalic?.()}
         title="Italic"
         aria-label="Italic"
@@ -54,7 +63,7 @@ export const TemplateMarkdownToolbar = () => {
       </button>
       <button
         type="button"
-        className="border-none bg-transparent hover:bg-slate-200"
+        className={markdownToolbarButtonClasses}
         onClick={() => markdownEditorCommands?.toggleUnorderedList?.()}
         title="Unordered list"
         aria-label="Unordered list"
@@ -63,7 +72,7 @@ export const TemplateMarkdownToolbar = () => {
       </button>
       <button
         type="button"
-        className="border-none bg-transparent hover:bg-slate-200"
+        className={markdownToolbarButtonClasses}
         onClick={() => markdownEditorCommands?.toggleOrderedList?.()}
         title="Ordered list"
         aria-label="Ordered list"
@@ -72,7 +81,7 @@ export const TemplateMarkdownToolbar = () => {
       </button>
       <button
         type="button"
-        className="border-none bg-transparent hover:bg-slate-200"
+        className={markdownToolbarButtonClasses}
         onClick={() => markdownEditorCommands?.insertLink?.()}
         title="Insert link"
         aria-label="Insert link"
@@ -81,7 +90,7 @@ export const TemplateMarkdownToolbar = () => {
       </button>
       <button
         type="button"
-        className="border-none bg-transparent hover:bg-slate-200"
+        className={markdownToolbarButtonClasses}
         onClick={() => markdownEditorCommands?.insertImage?.()}
         title="Insert image"
         aria-label="Insert image"