From 81cc72b444294d5b22a63c740f44db19298aa379 Mon Sep 17 00:00:00 2001
From: drelich <david.relich@me.com>
Date: Tue, 17 Mar 2026 00:10:07 +0100
Subject: [PATCH] Fix dark mode visibility for all toolbar buttons and icons

- Fixed all formatting toolbar buttons to be visible in dark mode
- Added proper text colors (gray-700/gray-300) to all toolbar icons
- Fixed sync and new note button icons in sidebar
- Fixed divider colors between button groups
- All UI elements now properly visible in both light and dark modes
---
 src/components/NoteEditor.tsx | 22 +++++++++++-----------
 src/components/NotesList.tsx  |  4 ++--
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/NoteEditor.tsx b/src/components/NoteEditor.tsx
index c2a66bc..59a73bd 100644
--- a/src/components/NoteEditor.tsx
+++ b/src/components/NoteEditor.tsx
@@ -217,7 +217,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleItalic().run()}
           className={`p-2 rounded transition-colors ${
-            editor.isActive('italic') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('italic') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Italic"
         >
@@ -229,7 +229,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleStrike().run()}
           className={`p-2 rounded transition-colors ${
-            editor.isActive('strike') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('strike') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Strikethrough"
         >
@@ -241,7 +241,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleUnderline().run()}
           className={`p-2 rounded transition-colors ${
-            editor.isActive('underline') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('underline') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Underline"
         >
@@ -255,7 +255,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
           className={`px-2 py-1 rounded transition-colors font-bold text-sm ${
-            editor.isActive('heading', { level: 1 }) ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('heading', { level: 1 }) ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Heading 1"
         >
@@ -265,7 +265,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
           className={`px-2 py-1 rounded transition-colors font-bold text-sm ${
-            editor.isActive('heading', { level: 2 }) ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('heading', { level: 2 }) ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Heading 2"
         >
@@ -275,7 +275,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
           className={`px-2 py-1 rounded transition-colors font-bold text-sm ${
-            editor.isActive('heading', { level: 3 }) ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('heading', { level: 3 }) ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Heading 3"
         >
@@ -287,7 +287,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleBulletList().run()}
           className={`p-2 rounded transition-colors ${
-            editor.isActive('bulletList') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('bulletList') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Bullet List"
         >
@@ -299,7 +299,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleOrderedList().run()}
           className={`p-2 rounded transition-colors ${
-            editor.isActive('orderedList') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('orderedList') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Numbered List"
         >
@@ -308,12 +308,12 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
           </svg>
         </button>
 
-        <div className="w-px h-6 bg-gray-300 mx-1"></div>
+        <div className="w-px h-6 bg-gray-300 dark:bg-gray-600 mx-1"></div>
 
         <button
           onClick={() => editor.chain().focus().toggleCode().run()}
           className={`p-2 rounded transition-colors ${
-            editor.isActive('code') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('code') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Inline Code"
         >
@@ -325,7 +325,7 @@ export function NoteEditor({ note, onUpdateNote, fontSize }: NoteEditorProps) {
         <button
           onClick={() => editor.chain().focus().toggleCodeBlock().run()}
           className={`p-2 rounded transition-colors ${
-            editor.isActive('codeBlock') ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-200'
+            editor.isActive('codeBlock') ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300' : 'hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'
           }`}
           title="Code Block"
         >
diff --git a/src/components/NotesList.tsx b/src/components/NotesList.tsx
index 105f481..d637dfb 100644
--- a/src/components/NotesList.tsx
+++ b/src/components/NotesList.tsx
@@ -74,7 +74,7 @@ export function NotesList({
               title="Sync with Server"
             >
               <svg 
-                className={`w-5 h-5 ${isSyncing ? 'animate-spin' : ''}`} 
+                className={`w-5 h-5 text-gray-700 dark:text-gray-300 ${isSyncing ? 'animate-spin' : ''}`} 
                 fill="none" 
                 stroke="currentColor" 
                 viewBox="0 0 24 24"
@@ -87,7 +87,7 @@ export function NotesList({
               className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
               title="New Note"
             >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg className="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
               </svg>
             </button>