From e424ca53c6d4012c4bedda0033430baf19753bed Mon Sep 17 00:00:00 2001 From: Chrisando Pramudhita Date: Mon, 5 Oct 2020 21:41:57 +0700 Subject: [PATCH] fix inconsistent text element color on dark mode while editing. (#2196) On dark mode, while text element is being edited, it was changing color to the light mode variant (white turns back to black, etc...). This is caused by the --appearance-filter not being applied to the floating textarea. The css var --appearance-filter is only applied to the .excalidraw class while the floating textarea is being appended to the body which put it outside of .excalidraw. This change adds excalidraw class to the floating textarea and also adds Appearance_dark to it while dark mode is on. --- src/element/textWysiwyg.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/element/textWysiwyg.tsx b/src/element/textWysiwyg.tsx index 5743a69d..1045a5ec 100644 --- a/src/element/textWysiwyg.tsx +++ b/src/element/textWysiwyg.tsx @@ -89,6 +89,9 @@ export const textWysiwyg = ({ editable.dataset.type = "wysiwyg"; // prevent line wrapping on Safari editable.wrap = "off"; + editable.className = `excalidraw ${ + appState.appearance === "dark" ? "Appearance_dark" : "" + }`; Object.assign(editable.style, { position: "fixed",