From d4a805f806996b43542a13ebb6cb26aaba79cdb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonatan=20K=C5=82osko?= Date: Tue, 7 Mar 2023 14:57:25 +0100 Subject: [PATCH] Define light editor theme (#1755) --- assets/css/utilities.css | 4 +- .../hooks/cell_editor/live_editor/monaco.js | 4 +- .../js/hooks/cell_editor/live_editor/theme.js | 127 +++++++++++------- assets/js/hooks/editor_settings.js | 12 +- assets/js/lib/settings.js | 7 +- lib/livebook_web/live/settings_live.ex | 6 +- 6 files changed, 96 insertions(+), 64 deletions(-) diff --git a/assets/css/utilities.css b/assets/css/utilities.css index 14f0f6834..a71bf167c 100644 --- a/assets/css/utilities.css +++ b/assets/css/utilities.css @@ -5,8 +5,8 @@ background-color: #282c34; } - body[data-editor-theme="highContrast"] .bg-editor { - background-color: #060708; + body[data-editor-theme="light"] .bg-editor { + background-color: #fafafa; } .text-editor { diff --git a/assets/js/hooks/cell_editor/live_editor/monaco.js b/assets/js/hooks/cell_editor/live_editor/monaco.js index bfcf0215e..129232a58 100644 --- a/assets/js/hooks/cell_editor/live_editor/monaco.js +++ b/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. diff --git a/assets/js/hooks/cell_editor/live_editor/theme.js b/assets/js/hooks/cell_editor/live_editor/theme.js index d8065a163..56fa69be5 100644 --- a/assets/js/hooks/cell_editor/live_editor/theme.js +++ b/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: [ - { 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 }, - ], + rules: rules(colors), 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 = { - ...theme, +const lightTheme = { + base: "vs", + inherit: false, + rules: rules(lightColors), + colors: { - ...theme.colors, - "editor.background": background.highContrast, + "editor.background": lightColors.background, + "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 }; diff --git a/assets/js/hooks/editor_settings.js b/assets/js/hooks/editor_settings.js index 956d8837b..1ae408064 100644 --- a/assets/js/hooks/editor_settings.js +++ b/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( - `[name="editor_high_contrast"][value="true"]` + const editorLightThemeCheckbox = this.el.querySelector( + `[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 = - settings.editor_theme === EDITOR_THEME.highContrast ? true : false; + editorLightThemeCheckbox.checked = + 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, }); }); diff --git a/assets/js/lib/settings.js b/assets/js/lib/settings.js index 8064b1445..3d8d2111a 100644 --- a/assets/js/lib/settings.js +++ b/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 }; } diff --git a/lib/livebook_web/live/settings_live.ex b/lib/livebook_web/live/settings_live.ex index 229304956..4335c2863 100644 --- a/lib/livebook_web/live/settings_live.ex +++ b/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 - name="editor_high_contrast" - label="Use high contrast theme" - value={false} - /> + <.switch_field name="editor_light_theme" label="Use light theme" value={false} /> <.switch_field name="editor_markdown_word_wrap" label="Wrap words in Markdown"