Define light editor theme (#1755)

assets/css/utilities.css

@@ -5,8 +5,8 @@
     background-color: #282c34;
   }
 
-  body[data-editor-theme="highContrast"] .bg-editor {
+  body[data-editor-theme="light"] .bg-editor {
-    background-color: #060708;
+    background-color: #fafafa;
   }
 
   .text-editor {

assets/js/hooks/cell_editor/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, highContrast } from "./theme";
+import { theme, lightTheme } from "./theme";
 
 import { PieceTreeTextBufferBuilder } from "monaco-editor/esm/vs/editor/common/model/pieceTreeTextBuffer/pieceTreeTextBufferBuilder";
 
@@ -56,7 +56,7 @@ monaco.languages.registerOnTypeFormattingEditProvider(
 
 // Define custom theme
 monaco.editor.defineTheme("default", theme);
-monaco.editor.defineTheme("highContrast", highContrast);
+monaco.editor.defineTheme("light", lightTheme);
 
 // See https://github.com/microsoft/monaco-editor/issues/648#issuecomment-564978560
 // Without this selecting text with whitespace shrinks the whitespace.

assets/js/hooks/cell_editor/live_editor/theme.js

@@ -2,6 +2,7 @@
 // We color graded the comment so it has AA accessibility and
 // then similarly scaled the default font.
 const colors = {
+  background: "#282c34",
   default: "#c4cad6",
   lightRed: "#e06c75",
   blue: "#61afef",
@@ -13,59 +14,72 @@ const colors = {
   peach: "#d19a66",
 };
 
-const background = { default: "#282c34", highContrast: "#060708" };
+const lightColors = {
+  background: "#fafafa",
+  default: "#304254",
+  lightRed: "#e45649",
+  blue: "#4078F2",
+  gray: "#707177",
+  green: "#50a14f",
+  purple: "#a726a4",
+  red: "#ca1243",
+  teal: "#56b6c2",
+  peach: "#986801",
+};
+
+const rules = (colors) => [
+  { token: "", foreground: colors.default },
+  { token: "variable", foreground: colors.lightRed },
+  { token: "constant", foreground: colors.blue },
+  { token: "constant.character.escape", foreground: colors.blue },
+  { token: "comment", foreground: colors.gray },
+  { token: "number", foreground: colors.blue },
+  { token: "regexp", foreground: colors.lightRed },
+  { token: "type", foreground: colors.lightRed },
+  { token: "string", foreground: colors.green },
+  { token: "keyword", foreground: colors.purple },
+  { token: "operator", foreground: colors.peach },
+  { token: "delimiter.bracket.embed", foreground: colors.red },
+  { token: "sigil", foreground: colors.teal },
+  { token: "function", foreground: colors.blue },
+  { token: "function.call", foreground: colors.default },
+
+  // Markdown specific
+  { token: "emphasis", fontStyle: "italic" },
+  { token: "strong", fontStyle: "bold" },
+  { token: "keyword.md", foreground: colors.lightRed },
+  { token: "keyword.table", foreground: colors.lightRed },
+  { token: "string.link.md", foreground: colors.blue },
+  { token: "variable.md", foreground: colors.teal },
+  { token: "string.md", foreground: colors.default },
+  { token: "variable.source.md", foreground: colors.default },
+
+  // XML specific
+  { token: "tag", foreground: colors.lightRed },
+  { token: "metatag", foreground: colors.lightRed },
+  { token: "attribute.name", foreground: colors.peach },
+  { token: "attribute.value", foreground: colors.green },
+
+  // JSON specific
+  { token: "string.key", foreground: colors.lightRed },
+  { token: "keyword.json", foreground: colors.blue },
+
+  // SQL specific
+  { token: "operator.sql", foreground: colors.purple },
+];
 
 const theme = {
   base: "vs-dark",
   inherit: false,
-  rules: [
+  rules: rules(colors),
-    { token: "", foreground: colors.default },
-    { token: "variable", foreground: colors.lightRed },
-    { token: "constant", foreground: colors.blue },
-    { token: "constant.character.escape", foreground: colors.blue },
-    { token: "comment", foreground: colors.gray },
-    { token: "number", foreground: colors.blue },
-    { token: "regexp", foreground: colors.lightRed },
-    { token: "type", foreground: colors.lightRed },
-    { token: "string", foreground: colors.green },
-    { token: "keyword", foreground: colors.purple },
-    { token: "operator", foreground: colors.peach },
-    { token: "delimiter.bracket.embed", foreground: colors.red },
-    { token: "sigil", foreground: colors.teal },
-    { token: "function", foreground: colors.blue },
-    { token: "function.call", foreground: colors.default },
-
-    // Markdown specific
-    { token: "emphasis", fontStyle: "italic" },
-    { token: "strong", fontStyle: "bold" },
-    { token: "keyword.md", foreground: colors.lightRed },
-    { token: "keyword.table", foreground: colors.lightRed },
-    { token: "string.link.md", foreground: colors.blue },
-    { token: "variable.md", foreground: colors.teal },
-    { token: "string.md", foreground: colors.default },
-    { token: "variable.source.md", foreground: colors.default },
-
-    // XML specific
-    { token: "tag", foreground: colors.lightRed },
-    { token: "metatag", foreground: colors.lightRed },
-    { token: "attribute.name", foreground: colors.peach },
-    { token: "attribute.value", foreground: colors.green },
-
-    // JSON specific
-    { token: "string.key", foreground: colors.lightRed },
-    { token: "keyword.json", foreground: colors.blue },
-
-    // SQL specific
-    { token: "operator.sql", foreground: colors.purple },
-  ],
 
   colors: {
-    "editor.background": background.default,
+    "editor.background": colors.background,
     "editor.foreground": colors.default,
     "editorLineNumber.foreground": "#636d83",
     "editorCursor.foreground": "#636d83",
     "editor.selectionBackground": "#3e4451",
-    "editor.findMatchHighlightBackground": "#528bff3D",
+    "editor.findMatchHighlightBackground": "#528bff3d",
     "editorSuggestWidget.background": "#21252b",
     "editorSuggestWidget.border": "#181a1f",
     "editorSuggestWidget.selectedBackground": "#2c313a",
@@ -76,12 +90,29 @@ const theme = {
   },
 };
 
-const highContrast = {
+const lightTheme = {
-  ...theme,
+  base: "vs",
+  inherit: false,
+  rules: rules(lightColors),
+
   colors: {
-    ...theme.colors,
+    "editor.background": lightColors.background,
-    "editor.background": background.highContrast,
+    "editor.foreground": lightColors.default,
+    "editorLineNumber.foreground": "#9d9d9f",
+    "editorCursor.foreground": "#526fff",
+    "editor.selectionBackground": "#e5e5e6",
+    "editor.findMatchHighlightBackground": "#526fff33",
+    "editorSuggestWidget.highlightForeground": lightColors.default,
+    "editorSuggestWidget.focusHighlightForeground": "#0431fa",
+    "editorSuggestWidget.selectedForeground": lightColors.default,
+    "editorSuggestWidget.background": "#eaeaeb",
+    "editorSuggestWidget.border": "#dbdbdc",
+    "editorSuggestWidget.selectedBackground": "#ffffff",
+    "input.background": "#ffffff",
+    "input.border": "#dbdbdc",
+    "editorBracketMatch.border": "#fafafa",
+    "editorBracketMatch.background": "#e5e5e6",
   },
 };
 
-export { theme, highContrast };
+export { theme, lightTheme };

assets/js/hooks/editor_settings.js

@@ -20,8 +20,8 @@ const EditorSettings = {
     const editorFontSizeCheckbox = this.el.querySelector(
       `[name="editor_font_size"][value="true"]`
     );
-    const editorHighContrastCheckbox = this.el.querySelector(
+    const editorLightThemeCheckbox = this.el.querySelector(
-      `[name="editor_high_contrast"][value="true"]`
+      `[name="editor_light_theme"][value="true"]`
     );
     const editorMarkdownWordWrapCheckbox = this.el.querySelector(
       `[name="editor_markdown_word_wrap"][value="true"]`
@@ -31,8 +31,8 @@ const EditorSettings = {
     editorAutoSignatureCheckbox.checked = settings.editor_auto_signature;
     editorFontSizeCheckbox.checked =
       settings.editor_font_size === EDITOR_FONT_SIZE.large ? true : false;
-    editorHighContrastCheckbox.checked =
+    editorLightThemeCheckbox.checked =
-      settings.editor_theme === EDITOR_THEME.highContrast ? true : false;
+      settings.editor_theme === EDITOR_THEME.light ? true : false;
     editorMarkdownWordWrapCheckbox.checked = settings.editor_markdown_word_wrap;
 
     editorAutoCompletionCheckbox.addEventListener("change", (event) => {
@@ -51,10 +51,10 @@ const EditorSettings = {
       });
     });
 
-    editorHighContrastCheckbox.addEventListener("change", (event) => {
+    editorLightThemeCheckbox.addEventListener("change", (event) => {
       settingsStore.update({
         editor_theme: event.target.checked
-          ? EDITOR_THEME.highContrast
+          ? EDITOR_THEME.light
           : EDITOR_THEME.default,
       });
     });

assets/js/lib/settings.js

@@ -9,7 +9,7 @@ export const EDITOR_FONT_SIZE = {
 
 export const EDITOR_THEME = {
   default: "default",
-  highContrast: "highContrast",
+  light: "light",
 };
 
 const DEFAULT_SETTINGS = {
@@ -66,6 +66,11 @@ class SettingsStore {
   _loadSettings() {
     const settings = load(SETTINGS_KEY);
 
+    // Rewrite settings for backward compatibility
+    if (!Object.values(EDITOR_THEME).includes(settings.editor_theme)) {
+      delete settings.editor_theme;
+    }
+
     if (settings) {
       this._settings = { ...this._settings, ...settings };
     }

lib/livebook_web/live/settings_live.ex

@@ -166,11 +166,7 @@ defmodule LivebookWeb.SettingsLive do
                 value={false}
               />
               <.switch_field name="editor_font_size" label="Increase font size" value={false} />
-              <.switch_field
+              <.switch_field name="editor_light_theme" label="Use light theme" value={false} />
-                name="editor_high_contrast"
-                label="Use high contrast theme"
-                value={false}
-              />
               <.switch_field
                 name="editor_markdown_word_wrap"
                 label="Wrap words in Markdown"