Add support for dark mode
Depends-On: I5e3105adf9f2989808417a16d0fbe86d6b485bad
Change-Id: I5bb16df0e794821d7a77cf4bd83d798ecd780196
diff --git a/web/BUILD b/web/BUILD
index 3c91428..2547585 100644
--- a/web/BUILD
+++ b/web/BUILD
@@ -74,6 +74,7 @@
"@plugins_npm//@codemirror/lint",
"@plugins_npm//@codemirror/search",
"@plugins_npm//@codemirror/state",
+ "@plugins_npm//@codemirror/theme-one-dark",
"@plugins_npm//@codemirror/view",
],
)
diff --git a/web/element/codemirror-element.ts b/web/element/codemirror-element.ts
index d8afff6..8b036fa 100644
--- a/web/element/codemirror-element.ts
+++ b/web/element/codemirror-element.ts
@@ -50,6 +50,8 @@
@property({type: Object}) prefs?: EditPreferencesInfo;
+ @property({type: Boolean}) darkMode = false;
+
@query('#wrapper')
wrapper!: HTMLElement;
@@ -63,10 +65,6 @@
monospace;
/* CodeMirror has a default z-index of 4. Set to 0 to avoid collisions with fixed header. */
z-index: 0;
- background: white;
- }
- .cm-lineNumbers {
- background-color: #f1f3f4;
}
.CodeMirror-ruler {
border-left: 1px solid #ddd;
@@ -109,13 +107,18 @@
height,
this.prefs,
this.fileType,
- this.fileContent ?? ''
+ this.fileContent ?? '',
+ this.darkMode
),
EditorView.updateListener.of(update => {
if (this.prefs?.line_length) {
// This is required to be in the setTimeout() to ensure the
// line is set as correctly as possible.
- updateRulerWidth(this.prefs.line_length, update.view.defaultCharacterWidth, true);
+ updateRulerWidth(
+ this.prefs.line_length,
+ update.view.defaultCharacterWidth,
+ true
+ );
}
if (update.docChanged) {
@@ -136,7 +139,7 @@
e.stopPropagation();
}
},
- })
+ }),
],
}),
parent: this.wrapper as Element,
diff --git a/web/element/extensions.ts b/web/element/extensions.ts
index 41dcca2..398684c 100644
--- a/web/element/extensions.ts
+++ b/web/element/extensions.ts
@@ -28,13 +28,14 @@
history,
historyKeymap,
indentWithTab,
- insertTab
+ insertTab,
} from '@codemirror/commands';
import {searchKeymap, highlightSelectionMatches} from '@codemirror/search';
import {closeBrackets, closeBracketsKeymap} from '@codemirror/autocomplete';
import {rulerPlugin} from './ruler';
import {language} from './language';
import {EditPreferencesInfo} from './codemirror-element';
+import {oneDark} from '@codemirror/theme-one-dark';
const trailingspace = () =>
EditorView.theme({
@@ -78,21 +79,28 @@
'.cm-scroller': {overflow: 'auto'},
});
+const oneLight = EditorView.theme({
+ '&': {background: 'white'},
+ '.cm-lineNumbers': {'background-color': '#f1f3f4'},
+});
+
export const extensions = (
height: number,
prefs?: EditPreferencesInfo,
fileType?: string,
- fileContent?: string
+ fileContent?: string,
+ darkMode?: boolean
) => {
// This uses the preference to detect whether
// to use 'tabs' when you use the tab button
// or to use 'spaces' when using the tab button.
- const tab = prefs?.indent_with_tabs ?
- {
+ const tab = prefs?.indent_with_tabs
+ ? {
key: 'Tab',
preventDefault: true,
run: insertTab,
- } : indentWithTab;
+ }
+ : indentWithTab;
const codeExtensions: Array<Extension> = [
lineNumbers(),
@@ -110,7 +118,7 @@
...searchKeymap,
...historyKeymap,
...foldKeymap,
- tab
+ tab,
]),
trailingspace(),
tabsOrSpaces(),
@@ -162,5 +170,11 @@
codeExtensions.push(EditorState.lineSeparator.of('\r\n'));
}
+ if (darkMode) {
+ codeExtensions.push(oneDark);
+ } else {
+ codeExtensions.push(oneLight);
+ }
+
return codeExtensions;
};
diff --git a/web/element/language.ts b/web/element/language.ts
index 50c1f03..0d72574 100644
--- a/web/element/language.ts
+++ b/web/element/language.ts
@@ -339,8 +339,6 @@
return StreamLanguage.define(tiki);
case 'text/x-toml':
return StreamLanguage.define(toml);
- case 'text/x-toml':
- return StreamLanguage.define(toml);
case 'application/typescript':
return javascript({typescript: true});
case 'text/x-ttcn':
diff --git a/web/element/ruler.ts b/web/element/ruler.ts
index 5f37d72..946fa29 100644
--- a/web/element/ruler.ts
+++ b/web/element/ruler.ts
@@ -45,7 +45,11 @@
}
}
- function updateRulerWidth(newWidth: number, defaultWidth: number, force = false) {
+ function updateRulerWidth(
+ newWidth: number,
+ defaultWidth: number,
+ force = false
+ ) {
if ((newWidth !== width || force) && rulerElement) {
width = newWidth;
rulerElement.style.left = `${width * defaultWidth}px`;
diff --git a/web/gr-editor.ts b/web/gr-editor.ts
index 6d04661..c461864 100644
--- a/web/gr-editor.ts
+++ b/web/gr-editor.ts
@@ -8,7 +8,6 @@
import {PluginApi} from '@gerritcodereview/typescript-api/plugin';
import {html, LitElement} from 'lit';
import {customElement, property, query} from 'lit/decorators.js';
-
import {setScriptSrc} from './safe-script';
declare global {
@@ -33,6 +32,8 @@
@property({type: Object}) plugin?: PluginApi;
+ @property({type: Boolean}) darkMode = false;
+
@query('#codemirror') mirror?: HTMLScriptElement;
override render() {
@@ -45,6 +46,7 @@
.prefs=${this.prefs}
.fileContent=${this.fileContent}
.fileType=${this.fileType}
+ ?darkMode=${this.darkMode}
>
</codemirror-element>
`;
