From ce4276dcd61242b8de4f39d9f6789b29503f8494 Mon Sep 17 00:00:00 2001 From: "Tyler C Laprade, CFA" Date: Sat, 4 Jul 2026 16:33:23 -0400 Subject: [PATCH] feat(themes): add Quiet Light theme (#15650) * feat(themes): add Quiet Light theme Port of VSCode's built-in "Quiet Light" theme. Distinctive for its bold-on-functions and bold-on-types styling, a rare choice among existing Helix themes. Upstream: https://github.com/microsoft/vscode/tree/main/extensions/theme-quietlight * theme(quiet_light): tune UI chrome - Fix invisible popup/menu bg by using editor bg consistently - Set ui.background fg so picker outer border (Block::bordered, no explicit style) inherits a visible color - Switch popup.info from peek-bg (pale blue) to editor bg for consistency - Add chrome-border palette entry (#c9d0d9, QL tab.lastPinnedBorder) for ui.window and ui.background.separator - Quote underline + mark link-url underline style properly * Mute type inlay hints in Quiet Light theme * Make popups distinct from editor bg in Quiet Light --- runtime/themes/licenses/quiet_light.license | 26 ++ runtime/themes/quiet_light.toml | 260 ++++++++++++++++++++ 2 files changed, 286 insertions(+) create mode 100644 runtime/themes/licenses/quiet_light.license create mode 100644 runtime/themes/quiet_light.toml diff --git a/runtime/themes/licenses/quiet_light.license b/runtime/themes/licenses/quiet_light.license new file mode 100644 index 00000000..360bafc5 --- /dev/null +++ b/runtime/themes/licenses/quiet_light.license @@ -0,0 +1,26 @@ +MIT License + +Copyright (c) 2015 - present Microsoft Corporation +Copyright (c) 2026 Tyler Laprade + +Based on the "Quiet Light" theme bundled with Visual Studio Code +(extensions/theme-quietlight), which itself ports the TextMate theme +"Quiet Light" originally authored by Ian Beck. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/runtime/themes/quiet_light.toml b/runtime/themes/quiet_light.toml new file mode 100644 index 00000000..103be98b --- /dev/null +++ b/runtime/themes/quiet_light.toml @@ -0,0 +1,260 @@ +# Author: Tyler Laprade +# License: MIT +# Port of VSCode's built-in "Quiet Light" theme (originally by occlure, itself +# ported from Ian Beck's TextMate theme of the same name). Distinctive for its +# bold-on-functions / bold-on-types styling. + +# --- Syntax --- + +"comment" = { fg = "muted", modifiers = ["italic"] } +"comment.line" = { fg = "muted", modifiers = ["italic"] } +"comment.block" = { fg = "muted", modifiers = ["italic"] } +"comment.line.documentation" = { fg = "green", modifiers = ["italic"] } +"comment.block.documentation" = { fg = "green", modifiers = ["italic"] } +"comment.unused" = { fg = "muted", modifiers = ["italic", "dim"] } + +"string" = "green" +"string.regexp" = "blue" +"string.special" = "orange" +"string.special.symbol" = "orange" +"string.special.path" = "green" +"string.special.url" = "blue" +"constant.character.escape" = "gray" + +"constant" = "orange" +"constant.builtin" = "orange" +"constant.builtin.boolean" = "orange" +"constant.character" = "orange" +"constant.numeric" = "orange" +"constant.numeric.integer" = "orange" +"constant.numeric.float" = "orange" + +"variable" = "purple" +"variable.builtin" = "orange" +"variable.parameter" = "#333333" +"variable.other.member" = "#333333" +"variable.other.member.private" = "#333333" + +"label" = "purple" + +"type" = { fg = "purple", modifiers = ["bold"] } +"type.builtin" = "purple" +"type.parameter" = "purple" +"type.enum" = { fg = "purple", modifiers = ["bold"] } +"type.enum.variant" = "orange" + +"constructor" = { fg = "purple", modifiers = ["bold"] } +"namespace" = { fg = "purple", modifiers = ["bold"] } + +"attribute" = { fg = "slate", modifiers = ["italic"] } + +"function" = { fg = "red", modifiers = ["bold"] } +"function.builtin" = { fg = "red", modifiers = ["bold"] } +"function.method" = { fg = "red", modifiers = ["bold"] } +"function.method.private" = { fg = "red", modifiers = ["bold"] } +"function.macro" = { fg = "red", modifiers = ["bold"] } +"function.special" = { fg = "red", modifiers = ["bold"] } + +"tag" = "blue" +"tag.builtin" = "blue" + +"keyword" = "blue" +"keyword.control" = "blue" +"keyword.control.conditional" = "blue" +"keyword.control.repeat" = "blue" +"keyword.control.import" = "blue" +"keyword.control.return" = "blue" +"keyword.control.exception" = "blue" +"keyword.operator" = "gray" +"keyword.directive" = { fg = "blue", modifiers = ["bold"] } +"keyword.function" = "blue" +"keyword.storage" = "blue" +"keyword.storage.type" = "purple" +"keyword.storage.modifier" = "blue" + +"operator" = "gray" + +"punctuation" = "gray" +"punctuation.delimiter" = "gray" +"punctuation.bracket" = "gray" +"punctuation.special" = "gray" + +"special" = "orange" + +# --- Markup (Markdown etc.) --- + +"markup.heading" = { fg = "red", modifiers = ["bold"] } +"markup.heading.marker" = { fg = "red", modifiers = ["bold"] } +"markup.heading.1" = { fg = "red", modifiers = ["bold"] } +"markup.heading.2" = { fg = "red", modifiers = ["bold"] } +"markup.heading.3" = { fg = "red", modifiers = ["bold"] } +"markup.heading.4" = { fg = "red", modifiers = ["bold"] } +"markup.heading.5" = { fg = "red", modifiers = ["bold"] } +"markup.heading.6" = { fg = "red", modifiers = ["bold"] } +"markup.list" = "blue" +"markup.list.unnumbered" = "blue" +"markup.list.numbered" = "blue" +"markup.list.checked" = "green" +"markup.list.unchecked" = "gray" +"markup.bold" = { fg = "green", modifiers = ["bold"] } +"markup.italic" = { fg = "green", modifiers = ["italic"] } +"markup.strikethrough" = { modifiers = ["crossed_out"] } +"markup.link" = "blue" +"markup.link.url" = { fg = "blue", underline = { style = "line" } } +"markup.link.label" = "blue" +"markup.link.text" = "blue" +"markup.quote" = { fg = "purple", modifiers = ["italic"] } +"markup.raw" = "orange" +"markup.raw.inline" = "orange" +"markup.raw.block" = "orange" + +# --- Diff --- + +"diff.plus" = "diff-plus" +"diff.minus" = "diff-minus" +"diff.delta" = "diff-delta" +"diff.delta.moved" = "blue" + +# --- UI --- + +"ui.background" = { fg = "chrome-border", bg = "bg" } +"ui.background.separator" = { fg = "chrome-border" } + +"ui.text" = { fg = "fg" } +"ui.text.focus" = { fg = "fg", bg = "menu-sel" } +"ui.text.inactive" = { fg = "muted" } +"ui.text.info" = { fg = "fg" } +"ui.text.directory" = { fg = "blue" } +"ui.text.symlink" = { fg = "slate" } + +"ui.cursor" = { fg = "bg", bg = "cursor" } +"ui.cursor.normal" = { fg = "bg", bg = "cursor" } +"ui.cursor.insert" = { fg = "bg", bg = "cursor" } +"ui.cursor.select" = { fg = "bg", bg = "accent" } +"ui.cursor.match" = { bg = "match-bg", modifiers = ["bold"] } +"ui.cursor.primary" = { fg = "bg", bg = "cursor" } +"ui.cursor.primary.normal" = { fg = "bg", bg = "cursor" } +"ui.cursor.primary.insert" = { fg = "bg", bg = "cursor" } +"ui.cursor.primary.select" = { fg = "bg", bg = "accent" } + +"ui.selection" = { bg = "selection" } +"ui.selection.primary" = { bg = "selection" } + +"ui.cursorline.primary" = { bg = "line-hl" } +"ui.cursorline.secondary" = { bg = "line-hl-dim" } + +"ui.linenr" = { fg = "linenr" } +"ui.linenr.selected" = { fg = "active-link", modifiers = ["bold"] } + +"ui.gutter" = { bg = "bg" } +"ui.gutter.selected" = { bg = "line-hl" } + +"ui.statusline" = { fg = "white", bg = "accent" } +"ui.statusline.inactive" = { fg = "fg", bg = "title-inactive" } +"ui.statusline.normal" = { fg = "white", bg = "accent", modifiers = ["bold"] } +"ui.statusline.insert" = { fg = "white", bg = "#448C27", modifiers = ["bold"] } +"ui.statusline.select" = { fg = "white", bg = "red", modifiers = ["bold"] } +"ui.statusline.separator" = { fg = "accent-dark", bg = "accent" } + +"ui.bufferline" = { fg = "fg-dim", bg = "sidebar" } +"ui.bufferline.active" = { fg = "fg", bg = "bg", modifiers = ["bold"] } +"ui.bufferline.background" = { bg = "sidebar" } + +"ui.popup" = { fg = "fg", bg = "popup-bg" } +"ui.popup.info" = { fg = "fg", bg = "popup-bg" } +"ui.window" = { fg = "popup-border" } +"ui.help" = { fg = "fg", bg = "popup-bg" } + +"ui.picker.header" = { fg = "accent-dark", modifiers = ["bold"] } +"ui.picker.header.column" = { fg = "muted" } +"ui.picker.header.column.active" = { fg = "accent", modifiers = ["bold"], underline = { style = "line" } } + +"ui.menu" = { fg = "fg", bg = "popup-bg" } +"ui.menu.selected" = { fg = "fg", bg = "menu-sel", modifiers = ["bold"] } +"ui.menu.scroll" = { fg = "accent", bg = "popup-bg" } + +"ui.highlight" = { bg = "line-hl" } +"ui.highlight.frameline" = { bg = "line-hl" } + +"ui.virtual.ruler" = { bg = "ruler" } +"ui.virtual.whitespace" = { fg = "muted" } +"ui.virtual.indent-guide" = { fg = "indent-guide" } +"ui.virtual.inlay-hint" = { fg = "muted", bg = "inlay-bg" } +"ui.virtual.inlay-hint.parameter" = { fg = "slate", bg = "inlay-bg", modifiers = ["italic"] } +"ui.virtual.inlay-hint.type" = { fg = "muted", bg = "inlay-bg", modifiers = ["italic"] } +"ui.virtual.wrap" = { fg = "muted" } +"ui.virtual.jump-label" = { fg = "bg", bg = "red", modifiers = ["bold"] } + +"ui.debug.breakpoint" = { fg = "error-red" } +"ui.debug.active" = { fg = "accent" } + +"tabstop" = { bg = "menu-sel" } + +# --- Diagnostics --- + +"warning" = "warn" +"error" = "error-red" +"info" = "blue" +"hint" = "gray" + +"diagnostic" = { underline = { color = "gray", style = "curl" } } +"diagnostic.hint" = { underline = { color = "gray", style = "curl" } } +"diagnostic.info" = { underline = { color = "blue", style = "curl" } } +"diagnostic.warning" = { underline = { color = "warn", style = "curl" } } +"diagnostic.error" = { underline = { color = "error-red", style = "curl" } } +"diagnostic.unnecessary" = { modifiers = ["dim"] } +"diagnostic.deprecated" = { modifiers = ["crossed_out"] } + +# --- Palette (must be last table) --- + +[palette] +# Text +fg = "#333333" +fg-dim = "#6c6c6c" +bg = "#F5F5F5" +white = "#ffffff" + +# Greyscale +muted = "#AAAAAA" +gray = "#777777" + +# Syntax +green = "#448C27" +blue = "#4B69C6" +light-blue = "#91B3E0" +slate = "#8190A0" +purple = "#7A3E9D" +orange = "#9C5D27" +red = "#AA3731" + +# Diagnostics / errors +error-red = "#cd3131" +dark-red = "#660000" +warn = "#B58900" + +# Diff +diff-plus = "#448C27" +diff-minus = "#C73D20" +diff-delta = "#9C5D27" + +# UI accents +accent = "#705697" +accent-dark = "#4e3c69" +active-link = "#9769dc" +selection = "#C9D0D9" +cursor = "#54494B" +linenr = "#6D705B" +line-hl = "#E4F6D4" +line-hl-dim = "#eef8e1" +match-bg = "#edc9d8" +title-inactive = "#c4b7d7" +sidebar = "#F2F2F2" +border = "#d0d0d0" +chrome-border = "#c9d0d9" +ruler = "#ececec" +indent-guide = "#d0d0d0" +inlay-bg = "#ececec" +popup-bg = "#ffffff" +popup-border = "#a8a8a8" +menu-sel = "#c4d9b1" +peek-bg = "#F2F8FC" -- 2.51.2