diff --git a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx
index 2d095d6d182..56714d927c6 100644
--- a/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx
+++ b/packages/grafana-ui/src/components/Monaco/ReactMonacoEditor.tsx
@@ -1,6 +1,6 @@
 import Editor, { loader as monacoEditorLoader, Monaco } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { useTheme2 } from '../../themes';
 
@@ -16,12 +16,15 @@ export const ReactMonacoEditor = (props: ReactMonacoEditorProps) => {
   const theme = useTheme2();
   const onMonacoBeforeMount = useCallback(
     (monaco: Monaco) => {
-      defineThemes(monaco, theme);
       beforeMount?.(monaco);
     },
-    [beforeMount, theme]
+    [beforeMount]
   );
 
+  useEffect(() => {
+    defineThemes(monaco, theme);
+  }, [theme]);
+
   return (
     <Editor
       {...restProps}