(core) Improve dark mode

Summary:
Enhances dark mode support for the formula editor, and adds support to
the color select popup. Also fixes some bugs with dark mode.

Test Plan: Tested manually.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3847

app/client/components/AceEditor.css

@@ -3,17 +3,21 @@
 }
 
 .ace_grist_link {
-  color: var(--grist-color-light-green);
+  color: var(--grist-theme-ace-autocomplete-link, var(--grist-color-light-green));
   text-decoration: underline;
   cursor: pointer;
 }
 
 .ace_grist_example {
-  color: #8f8f8f;
+  color: var(--grist-theme-ace-autocomplete-secondary-fg);
+}
+
+.ace_editor.ace_autocomplete .ace_completion-highlight {
+  color: var(--grist-theme-ace-autocomplete-highlighted-fg, #000) !important;
 }
 
 .ace_editor.ace_autocomplete .ace_completion-highlight.ace_grist_link {
-  color: var(--grist-color-dark-green);
+  color: var(--grist-theme-ace-autocomplete-link-highlighted, var(--grist-color-dark-green)) !important;
 }
 
 .ace_editor.ace_autocomplete .ace_text-layer {
@@ -22,6 +26,18 @@
 }
 
 .ace_editor.ace_autocomplete {
+  color: var(--grist-theme-ace-autocomplete-primary-fg) !important;
+  background: var(--grist-theme-ace-autocomplete-bg, #fbfbfb) !important;
+  border: 1px solid var(--grist-theme-ace-autocomplete-border, lightgray) !important;
   width: 500px !important;  /* the default in language_tools.js is 280px */
   max-width: 80%;  /* of the screen, for hypothetical mobile support */
 }
+
+.ace_editor.ace_autocomplete .ace_marker-layer .ace_line-hover {
+  background-color: var(--grist-theme-ace-autocomplete-line-bg-hover, rgba(233,233,253,0.4)) !important;
+  border: 1px solid var(--grist-theme-ace-autocomplete-line-border-hover, #abbffe) !important;
+}
+
+.ace_editor.ace_autocomplete .ace_marker-layer .ace_active-line {
+  background-color: var(--grist-theme-ace-autocomplete-active-line-bg, #CAD6FA) !important;
+}

app/client/components/AceEditor.js

@@ -204,7 +204,7 @@ AceEditor.prototype._setup = function() {
   this.session = this.editor.getSession();
   this.session.setMode('ace/mode/python');
 
-  const gristTheme = this.gristDoc?.docPageModel.appModel.currentTheme;
+  const gristTheme = this.gristDoc?.currentTheme;
   this._setAceTheme(gristTheme?.get());
   if (!getGristConfig().enableCustomCss && gristTheme) {
     this.autoDispose(gristTheme.addListener((theme) => {

app/client/components/ChartView.ts

@@ -229,7 +229,7 @@ export class ChartView extends Disposable {
     this.listenTo(this.sortedRows, 'rowNotify', this._update);
     this.autoDispose(this.sortedRows.getKoArray().subscribe(this._update));
     this.autoDispose(this._formatterComp.subscribe(this._update));
-    this.autoDispose(this.gristDoc.docPageModel.appModel.currentTheme.addListener(() => this._update()));
+    this.autoDispose(this.gristDoc.currentTheme.addListener(() => this._update()));
   }
 
   public prepareToPrint(onOff: boolean) {

app/client/components/CodeEditorPanel.css

@@ -50,3 +50,11 @@
 .g-code-viewer .hljs-number {
   color: var(--grist-theme-code-view-number, #880000);
 }
+
+.g-code-viewer .hljs-built_in {
+  color: var(--grist-theme-code-view-builtin, #397300);
+}
+
+.g-code-viewer .hljs-literal {
+  color: var(--grist-theme-code-view-literal, #78A960);
+}

app/client/components/GristDoc.ts

@@ -182,6 +182,8 @@ export class GristDoc extends DisposableWithEvents {
   // Holder for the popped up formula editor.
   public readonly formulaPopup = Holder.create(this);
 
+  public readonly currentTheme = this.docPageModel.appModel.currentTheme;
+
   private _actionLog: ActionLog;
   private _undoStack: UndoStack;
   private _lastOwnActionGroup: ActionGroupWithCursorPos|null = null;

app/client/components/Importer.ts

@@ -856,7 +856,8 @@ export class Importer extends DisposableWithEvents {
       return formula;
     };
 
-    return cssFieldFormula(use => formatFormula(use(column.formula)), {placeholder, maxLines: 1},
+    return cssFieldFormula(use => formatFormula(use(column.formula)),
+      {gristTheme: this._gristDoc.currentTheme, placeholder, maxLines: 1},
       dom.cls('disabled'),
       {tabIndex: '-1'},
       dom.on('focus', (_ev, elem) => buildEditor(elem)),

app/client/components/Printing.ts

@@ -2,6 +2,7 @@ import {CustomView} from 'app/client/components/CustomView';
 import {DataRowModel} from 'app/client/models/DataRowModel';
 import DataTableModel from 'app/client/models/DataTableModel';
 import {ViewSectionRec} from 'app/client/models/DocModel';
+import {prefersDarkMode, prefersDarkModeObs} from 'app/client/ui2018/cssVars';
 import {dom} from 'grainjs';
 
 type RowId = number|'new';
@@ -36,6 +37,16 @@ export async function printViewSection(layout: any, viewSection: ViewSectionRec)
   }
 
   function prepareToPrint(onOff: boolean) {
+    // window.print() is a blocking call, which means our listener for the
+    // `prefers-color-scheme: dark` media feature will not receive any updates for the
+    // duration that the print dialog is shown. This proves problematic since an event is
+    // sent just before the blocking call containing a value of false, regardless of the
+    // user agent's color scheme preference. It's not clear why this happens, but the result
+    // is Grist temporarily reverting to the light theme until the print dialog is dismissed.
+    // As a workaround, we'll temporarily pause our listener, and unpause after the print dialog
+    // is dismissed.
+    prefersDarkModeObs().pause();
+
     // Hide all layout boxes that do NOT contain the section to be printed.
     layout?.forEachBox((box: any) => {
       if (!box.dom.contains(sectionElem)) {
@@ -76,6 +87,10 @@ export async function printViewSection(layout: any, viewSection: ViewSectionRec)
       prepareToPrint(false);
     }
     delete (window as any).afterPrintCallback;
+    prefersDarkModeObs().pause(false);
+
+    // This may have changed while window.print() was blocking.
+    prefersDarkModeObs().set(prefersDarkMode());
   });
 
   // Running print on a timeout makes it possible to test printing using selenium, and doesn't