commit 1a7835bdfa55d60c717bad20b943e34499da0016
author Ben Rohlfs <brohlfs@google.com> Mon Mar 27 12:47:55 2023 +0200
committer Ben Rohlfs <brohlfs@google.com> Mon Mar 27 12:47:55 2023 +0200
tree ad15192eb64577c2951e4ecd047d14782cc94edb
parent 597573b5d1ed44c75844d2b8047aae08f7ef8619

Fix CodeMirror in dark mode

Release-Notes: skip
Google-Bug-Id: b/274854578
Change-Id: Ie6dbebae79441e9813a2993541994a2db44de1cb

web/element/extensions.ts

diff --git a/web/element/extensions.ts b/web/element/extensions.ts
index ea18ffc..1f59c35 100644
--- a/web/element/extensions.ts
+++ b/web/element/extensions.ts
@@ -36,11 +36,20 @@
 import {language} from './language';
 import {EditPreferencesInfo} from './codemirror-element';
 
-const oneLight = () =>
-  EditorView.theme({
-    '&': {background: 'white'},
-    '.cm-lineNumbers': {'background-color': '#f1f3f4'},
-  });
+const colorTheme = (dark: boolean) =>
+  EditorView.theme(
+    {
+      '&': {
+        color: 'var(--primary-text-color)',
+        'background-color': 'var(--background-color-primary)',
+      },
+      '.cm-gutters': {
+        color: 'var(--deemphasized-text-color)',
+        'background-color': 'var(--background-color-secondary)',
+      },
+    },
+    {dark}
+  );
 
 const trailingspace = () =>
   EditorView.theme({
@@ -89,7 +98,7 @@
   prefs?: EditPreferencesInfo,
   fileType?: string,
   fileContent?: string,
-  _darkMode?: boolean
+  darkMode?: boolean
 ) => {
   // This uses the preference to detect whether
   // to use 'tabs' when you use the tab button
@@ -123,7 +132,7 @@
     trailingspace(),
     tabsOrSpaces(),
     fixedHeightEditor(height),
-    oneLight(),
+    colorTheme(darkMode ?? false),
   ];
 
   if (!prefs) return codeExtensions;