High-contrast option for the code editor

assets/js/cell/index.js

@@ -4,6 +4,7 @@ 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";
 
 /**
  * A hook managing a single cell.
@@ -41,6 +42,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 =
+          settings.editor_background_color;
         // Setup the editor instance.
         this.state.liveEditor = new LiveEditor(
           this,

assets/js/cell/live_editor/theme.js

@@ -1,5 +1,6 @@
-// This is a port of the One Dark theme to the Monaco editor.
+import { loadLocalSettings } from "../../lib/settings"
 
+// This is a port of the One Dark theme to the Monaco editor.
 const colors = {
   default: "#abb2bf",
   lightRed: "#e06c75",
@@ -12,6 +13,8 @@ const colors = {
   peach: "#d19a66",
 };
 
+const settings = loadLocalSettings()
+
 const theme = {
   base: "vs-dark",
   inherit: false,
@@ -54,7 +57,7 @@ const theme = {
   ],
 
   colors: {
-    "editor.background": "#282c34",
+    "editor.background": settings.editor_background_color,
     "editor.foreground": colors.default,
     "editorLineNumber.foreground": "#636d83",
     "editorCursor.foreground": "#636d83",

assets/js/editor_settings/index.js

@@ -2,6 +2,7 @@ import {
   loadLocalSettings,
   storeLocalSettings,
   EDITOR_FONT_SIZE,
+  EDITOR_BACKGROUND_COLOR,
 } from "../lib/settings";
 
 /**
@@ -24,11 +25,18 @@ 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_background_color === EDITOR_BACKGROUND_COLOR.highConstrast
+        ? true
+        : false;
 
     editorAutoCompletionCheckbox.addEventListener("change", (event) => {
       storeLocalSettings({ editor_auto_completion: event.target.checked });
@@ -45,6 +53,14 @@ const EditorSettings = {
           : EDITOR_FONT_SIZE.normal,
       });
     });
+
+    editorHighContrastCheckbox.addEventListener("change", (event) => {
+      storeLocalSettings({
+        editor_background_color: event.target.checked
+          ? EDITOR_BACKGROUND_COLOR.highConstrast
+          : EDITOR_BACKGROUND_COLOR.normal,
+      });
+    });
   },
 };
 

assets/js/lib/settings.js

@@ -5,10 +5,17 @@ export const EDITOR_FONT_SIZE = {
   large: 16,
 };
 
+export const EDITOR_BACKGROUND_COLOR = {
+  normal: "#282c34",
+  highConstrast: "#060708",
+};
+
 const DEFAULT_SETTINGS = {
   editor_auto_completion: true,
   editor_auto_signature: true,
+  editor_high_contrast: false,
   editor_font_size: EDITOR_FONT_SIZE.normal,
+  editor_background_color: EDITOR_BACKGROUND_COLOR.normal,
 };
 
 /**

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"
+                  checked={false} />
               </div>
             </div>
           </div>