Fix coloring of breakpoints when switching themes

By resetting the state of CodeMirror, we force the new dark mode on the
editor. Solution inspired by
https://discuss.codemirror.net/t/cm6-dynamically-switching-syntax-theme-w-reconfigure/2858

R=yangguo@chromium.org
CC=marijnh@gmail.com

Fixed: 1289195
Change-Id: I14f49dbef5ec86159ad8193eb60050a24ce4270b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3404084
Commit-Queue: Tim Van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>

front_end/ui/components/text_editor/TextEditor.ts

diff --git a/front_end/ui/components/text_editor/TextEditor.ts b/front_end/ui/components/text_editor/TextEditor.ts
index 965b8f2..3c0dd53 100644
--- a/front_end/ui/components/text_editor/TextEditor.ts
+++ b/front_end/ui/components/text_editor/TextEditor.ts
@@ -5,11 +5,12 @@
 import * as Common from '../../../core/common/common.js';
 import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
+import * as ThemeSupport from '../../legacy/theme_support/theme_support.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
 import * as ComponentHelpers from '../helpers/helpers.js';
 
-import {baseConfiguration, dynamicSetting, DynamicSetting} from './config.js';
+import {baseConfiguration, dummyDarkTheme, dynamicSetting, DynamicSetting, themeSelection} from './config.js';
 import {toLineColumn, toOffset} from './position.js';
 
 declare global {
@@ -66,6 +67,12 @@
     });
     this.#ensureSettingListeners();
     this.#startObservingResize();
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      const currentTheme = ThemeSupport.ThemeSupport.instance().themeName() === 'dark' ? dummyDarkTheme : [];
+      this.editor.dispatch({
+        effects: themeSelection.reconfigure(currentTheme),
+      });
+    });
     return this.#activeEditor;
   }
 

front_end/ui/components/text_editor/config.ts

diff --git a/front_end/ui/components/text_editor/config.ts b/front_end/ui/components/text_editor/config.ts
index f19e135..a9822eb 100644
--- a/front_end/ui/components/text_editor/config.ts
+++ b/front_end/ui/components/text_editor/config.ts
@@ -202,10 +202,11 @@
   return setting === 'systemPreferred' ? window.matchMedia('(prefers-color-scheme: dark)').matches : setting === 'dark';
 }
 
-const dummyDarkTheme = CM.EditorView.theme({}, {dark: true});
+export const dummyDarkTheme = CM.EditorView.theme({}, {dark: true});
+export const themeSelection = new CM.Compartment();
 
 export function theme(): CM.Extension {
-  return [editorTheme, themeIsDark() ? dummyDarkTheme : []];
+  return [editorTheme, themeIsDark() ? themeSelection.of(dummyDarkTheme) : themeSelection.of([])];
 }
 
 let sideBarElement: HTMLElement|null = null;