From 65c3ab9ab0ea4733c5df27efc0d5509b041b7ae7 Mon Sep 17 00:00:00 2001
From: mesalogo <pettygay757@gmail.com>
Date: Thu, 20 Aug 2026 14:31:45 +0800
Subject: [PATCH] fix: improve magic notes placeholder contrast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Magic Notes editor inherited Quill's dark placeholder color, making the hint difficult to read in dark mode. It now uses the shared muted text token in both themes, with regression coverage for the editor style.

Release note: 修复暗色模式下魔法笔记输入提示文字过暗的问题，现在提示内容清晰可读。
---
 src/renderer/src/MagicNoteEditor.test.tsx | 15 +++++++++++++++
 src/renderer/src/styles.css               |  4 ++++
 2 files changed, 19 insertions(+)

diff --git a/src/renderer/src/MagicNoteEditor.test.tsx b/src/renderer/src/MagicNoteEditor.test.tsx
index 0f33eea6..42bd8928 100644
--- a/src/renderer/src/MagicNoteEditor.test.tsx
+++ b/src/renderer/src/MagicNoteEditor.test.tsx
@@ -1,9 +1,24 @@
+/// <reference types="node" />
+
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
 import { describe, expect, it, vi } from 'vitest'
 import type { MagicNoteRichContent } from '../../shared/magic-notes-contracts'
 import { MagicNoteEditor } from './MagicNoteEditor'
 
+const stylesheet = readFileSync(
+  join(process.cwd(), 'src', 'renderer', 'src', 'styles.css'),
+  'utf8'
+)
+
 describe('MagicNoteEditor', () => {
+  it('uses the themed muted text color for its placeholder', () => {
+    expect(stylesheet).toMatch(
+      /\.magic-note-editor__content\s+\.ql-editor\.ql-blank::before\s*\{\s*color:\s*var\(--text-muted\);\s*\}/
+    )
+  })
+
   it('exposes numeric font sizes, text color, and attachment controls', () => {
     const { container } = render(
       <MagicNoteEditor
diff --git a/src/renderer/src/styles.css b/src/renderer/src/styles.css
index 98aeebe5..58b46e64 100644
--- a/src/renderer/src/styles.css
+++ b/src/renderer/src/styles.css
@@ -1965,6 +1965,10 @@
   line-height: 1.65;
 }
 
+.magic-note-editor__content .ql-editor.ql-blank::before {
+  color: var(--text-muted);
+}
+
 .magic-note-editor .ql-size-small,
 .magic-note-content .ql-size-small {
   font-size: 12px;