From 6d3c89645d4868b8a72e7d88b62e60c426d4f542 Mon Sep 17 00:00:00 2001
From: Ayush Ranjan <ayshushus@gmail.com>
Date: Wed, 24 Jun 2026 19:06:06 -0400
Subject: [PATCH] add CodeMirror editor theme inheritance

---
 translate/src/context/Theme.tsx                          | 6 ++++++
 .../src/modules/translationform/components/EditField.tsx | 9 ++-------
 .../modules/translationform/utils/editFieldExtensions.ts | 9 ++++++++-
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/translate/src/context/Theme.tsx b/translate/src/context/Theme.tsx
index 1fca9857ce..16d22767a1 100644
--- a/translate/src/context/Theme.tsx
+++ b/translate/src/context/Theme.tsx
@@ -8,6 +8,12 @@ type ThemeContextType = {
   setEditorTheme: (editorTheme: string) => void;
 };
 
+export function editorThemeClass(editorTheme: string | null): string {
+  return editorTheme === 'dark' || editorTheme === 'light'
+    ? `${editorTheme}-theme`
+    : '';
+}
+
 export const ThemeContext = createContext<ThemeContextType>({
   theme: 'dark',
   editorTheme: 'match',
diff --git a/translate/src/modules/translationform/components/EditField.tsx b/translate/src/modules/translationform/components/EditField.tsx
index 311ca5c709..525ab2046f 100644
--- a/translate/src/modules/translationform/components/EditField.tsx
+++ b/translate/src/modules/translationform/components/EditField.tsx
@@ -14,7 +14,7 @@ import React, {
 
 import { EditFieldHandle, EditorActions } from '~/context/Editor';
 import { Locale } from '~/context/Locale';
-import { ThemeContext } from '~/context/Theme';
+import { editorThemeClass, ThemeContext } from '~/context/Theme';
 import { useReadonlyEditor } from '~/hooks/useReadonlyEditor';
 
 import { getExtensions, useKeyHandlers } from '../utils/editFieldExtensions';
@@ -127,15 +127,10 @@ export const EditField = memo(
         [view],
       );
 
-      const editorThemeClass =
-        editorTheme === 'dark' || editorTheme === 'light'
-          ? `${editorTheme}-theme`
-          : '';
-
       return (
         <div
           className={
-            [readOnly && 'readonly', editorThemeClass]
+            [readOnly && 'readonly', editorThemeClass(editorTheme)]
               .filter(Boolean)
               .join(' ') || undefined
           }
diff --git a/translate/src/modules/translationform/utils/editFieldExtensions.ts b/translate/src/modules/translationform/utils/editFieldExtensions.ts
index 15e265714f..e6716ec082 100644
--- a/translate/src/modules/translationform/utils/editFieldExtensions.ts
+++ b/translate/src/modules/translationform/utils/editFieldExtensions.ts
@@ -22,6 +22,7 @@ import { tags } from '@lezer/highlight';
 import { useContext, useEffect, useRef } from 'react';
 
 import { EditorActions } from '~/context/Editor';
+import { editorThemeClass } from '~/context/Theme';
 import { useCopyOriginalIntoEditor } from '~/modules/editor';
 import { placeholder } from '~/modules/placeable/placeholder';
 import type { MessageEntry } from '~/utils/message';
@@ -167,7 +168,13 @@ function autocompletePlaceholders(entry: MessageEntry) {
       override.push(completePlaceholder(edit, ...hl));
     }
   }
-  return override.length ? autocompletion({ override }) : null;
+  return override.length
+    ? autocompletion({
+        override,
+        tooltipClass: () =>
+          editorThemeClass(document.body.getAttribute('data-editor-theme')),
+      })
+    : null;
 }
 
 function completePlaceholder(