High-contrast option for the code editor (#868)

* High-contrast option for the code editor

* Small refactor

* Creates a high-contrast theme from the custom theme

* Refactor to store the theme as a string

* Fix prettier

assets/js/cell/index.js

@@ -4,6 +4,8 @@ import Markdown from "./markdown";
 import { globalPubSub } from "../lib/pub_sub";
 import { md5Base64, smoothlyScrollToElement } from "../lib/utils";
 import scrollIntoView from "scroll-into-view-if-needed";
+import { loadLocalSettings } from "../lib/settings";
+import { THEME_BACKGROUND_COLOR } from "./live_editor/theme";
 
 /**
  * A hook managing a single cell.
@@ -41,6 +43,10 @@ const Cell = {
         // Create an empty container for the editor to be mounted in.
         const editorElement = document.createElement("div");
         editorContainer.appendChild(editorElement);
+        // Adjust the background color based on local settings
+        const settings = loadLocalSettings();
+        editorContainer.parentElement.style.backgroundColor =
+          THEME_BACKGROUND_COLOR[settings.editor_theme];
         // Setup the editor instance.
         this.state.liveEditor = new LiveEditor(
           this,

assets/js/cell/live_editor.js

@@ -160,7 +160,7 @@ class LiveEditor {
       },
       occurrencesHighlight: false,
       renderLineHighlight: "none",
-      theme: "custom",
+      theme: settings.editor_theme,
       fontFamily: "JetBrains Mono, Droid Sans Mono, monospace",
       fontSize: settings.editor_font_size,
       tabIndex: -1,

assets/js/cell/live_editor/monaco.js

@@ -1,7 +1,7 @@
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 import { CommandsRegistry } from "monaco-editor/esm/vs/platform/commands/common/commands";
 import ElixirOnTypeFormattingEditProvider from "./elixir/on_type_formatting_edit_provider";
-import theme from "./theme";
+import { theme, highContrast } from "./theme";
 
 monaco.languages.registerOnTypeFormattingEditProvider(
   "elixir",
@@ -9,7 +9,8 @@ monaco.languages.registerOnTypeFormattingEditProvider(
 );
 
 // Define custom theme
-monaco.editor.defineTheme("custom", theme);
+monaco.editor.defineTheme("default", theme);
+monaco.editor.defineTheme("highContrast", highContrast);
 
 // See https://github.com/microsoft/monaco-editor/issues/648#issuecomment-564978560
 // Without this selecting text with whitespace shrinks the whitespace.

assets/js/cell/live_editor/theme.js

@@ -1,5 +1,4 @@
 // This is a port of the One Dark theme to the Monaco editor.
-
 const colors = {
   default: "#abb2bf",
   lightRed: "#e06c75",
@@ -12,6 +11,8 @@ const colors = {
   peach: "#d19a66",
 };
 
+const THEME_BACKGROUND_COLOR = { default: "#282c34", highContrast: "#060708" };
+
 const theme = {
   base: "vs-dark",
   inherit: false,
@@ -54,7 +55,7 @@ const theme = {
   ],
 
   colors: {
-    "editor.background": "#282c34",
+    "editor.background": THEME_BACKGROUND_COLOR.default,
     "editor.foreground": colors.default,
     "editorLineNumber.foreground": "#636d83",
     "editorCursor.foreground": "#636d83",
@@ -70,4 +71,12 @@ const theme = {
   },
 };
 
-export default theme;
+const highContrast = {
+  ...theme,
+  colors: {
+    ...theme.colors,
+    "editor.background": THEME_BACKGROUND_COLOR.highContrast,
+  },
+};
+
+export { theme, highContrast, THEME_BACKGROUND_COLOR };

assets/js/editor_settings/index.js

@@ -2,6 +2,7 @@ import {
   loadLocalSettings,
   storeLocalSettings,
   EDITOR_FONT_SIZE,
+  EDITOR_THEME,
 } from "../lib/settings";
 
 /**
@@ -24,11 +25,16 @@ const EditorSettings = {
     const editorFontSizeCheckbox = this.el.querySelector(
       `[name="editor_font_size"][value="true"]`
     );
+    const editorHighContrastCheckbox = this.el.querySelector(
+      `[name="editor_high_contrast"][value="true"]`
+    );
 
     editorAutoCompletionCheckbox.checked = settings.editor_auto_completion;
     editorAutoSignatureCheckbox.checked = settings.editor_auto_signature;
     editorFontSizeCheckbox.checked =
       settings.editor_font_size === EDITOR_FONT_SIZE.large ? true : false;
+    editorHighContrastCheckbox.checked =
+      settings.editor_theme === EDITOR_THEME.highContrast ? true : false;
 
     editorAutoCompletionCheckbox.addEventListener("change", (event) => {
       storeLocalSettings({ editor_auto_completion: event.target.checked });
@@ -45,6 +51,14 @@ const EditorSettings = {
           : EDITOR_FONT_SIZE.normal,
       });
     });
+
+    editorHighContrastCheckbox.addEventListener("change", (event) => {
+      storeLocalSettings({
+        editor_theme: event.target.checked
+          ? EDITOR_THEME.highContrast
+          : EDITOR_THEME.default,
+      });
+    });
   },
 };
 

assets/js/lib/settings.js

@@ -5,10 +5,16 @@ export const EDITOR_FONT_SIZE = {
   large: 16,
 };
 
+export const EDITOR_THEME = {
+  default: "default",
+  highContrast: "highContrast",
+};
+
 const DEFAULT_SETTINGS = {
   editor_auto_completion: true,
   editor_auto_signature: true,
   editor_font_size: EDITOR_FONT_SIZE.normal,
+  editor_theme: EDITOR_THEME.default,
 };
 
 /**

lib/livebook_web/live/settings_live.ex

@@ -115,6 +115,10 @@ defmodule LivebookWeb.SettingsLive do
                   name="editor_font_size"
                   label="Increase font size"
                   checked={false} />
+                <.switch_checkbox
+                  name="editor_high_contrast"
+                  label="High contrast editor"
+                  checked={false} />
               </div>
             </div>
           </div>