davidrelich/nextcloud-notes-desktop-app
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

Fix dark mode visibility for all toolbar buttons and icons

Browse Source 
- 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
This commit is contained in:
drelich
2026-03-17 00:10:07 +01:00
parent f3096c16ca
commit 81cc72b444
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/NoteEditor.tsx
View File

@@ -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"
>

4
src/components/NotesList.tsx
View File

@@ -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>