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

Fix TipTap editor content colors for dark mode

Browse Source 
- Added proper text colors for all editor content in dark mode
- Fixed headings (H1, H2, H3) to use light text in dark mode
- Fixed bold, italic, strikethrough, underline text colors
- Fixed list items (ul, ol, li) text colors
- Fixed blockquote colors and borders for dark mode
- Fixed horizontal rule colors
- All formatted content now properly visible in dark mode
This commit is contained in:
drelich
2026-03-17 00:12:06 +01:00
parent 81cc72b444
commit 1c9efe6007
1 changed files with 60 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/index.css
View File

@@ -35,6 +35,11 @@ code {
font-weight: bold; font-weight: bold;
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
color: #111827;
}
.dark .ProseMirror h1 {
color: #f3f4f6;
} }
.ProseMirror h2 { .ProseMirror h2 {
@@ -42,6 +47,11 @@ code {
font-weight: bold; font-weight: bold;
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
color: #111827;
}
.dark .ProseMirror h2 {
color: #f3f4f6;
} }
.ProseMirror h3 { .ProseMirror h3 {
@@ -49,26 +59,56 @@ code {
font-weight: bold; font-weight: bold;
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
color: #111827;
}
.dark .ProseMirror h3 {
color: #f3f4f6;
} }
.ProseMirror p { .ProseMirror p {
margin-bottom: 0.5em; margin-bottom: 0.5em;
color: #111827;
}
.dark .ProseMirror p {
color: #f3f4f6;
} }
.ProseMirror strong { .ProseMirror strong {
font-weight: bold; font-weight: bold;
color: #111827;
}
.dark .ProseMirror strong {
color: #f3f4f6;
} }
.ProseMirror em { .ProseMirror em {
font-style: italic; font-style: italic;
color: #111827;
}
.dark .ProseMirror em {
color: #f3f4f6;
} }
.ProseMirror s { .ProseMirror s {
text-decoration: line-through; text-decoration: line-through;
color: #111827;
}
.dark .ProseMirror s {
color: #f3f4f6;
} }
.ProseMirror u { .ProseMirror u {
text-decoration: underline; text-decoration: underline;
color: #111827;
}
.dark .ProseMirror u {
color: #f3f4f6;
} }
.ProseMirror code { .ProseMirror code {
@@ -108,6 +148,12 @@ code {
.ProseMirror ol { .ProseMirror ol {
padding-left: 1.5rem; padding-left: 1.5rem;
margin: 0.5em 0; margin: 0.5em 0;
color: #111827;
}
.dark .ProseMirror ul,
.dark .ProseMirror ol {
color: #f3f4f6;
} }
.ProseMirror ul { .ProseMirror ul {
@@ -120,6 +166,11 @@ code {
.ProseMirror li { .ProseMirror li {
margin: 0.25em 0; margin: 0.25em 0;
color: #111827;
}
.dark .ProseMirror li {
color: #f3f4f6;
} }
.ProseMirror blockquote { .ProseMirror blockquote {
@@ -129,8 +180,17 @@ code {
color: #6b7280; color: #6b7280;
} }
.dark .ProseMirror blockquote {
border-left-color: #4b5563;
color: #9ca3af;
}
.ProseMirror hr { .ProseMirror hr {
border: none; border: none;
border-top: 2px solid #e5e7eb; border-top: 2px solid #e5e7eb;
margin: 2em 0; margin: 2em 0;
} }
.dark .ProseMirror hr {
border-top-color: #374151;
}