From fc6f20f6162b69edfc59522a0965549a27fee24d Mon Sep 17 00:00:00 2001 From: Hugues Gaillard Date: Mon, 13 Apr 2026 19:41:55 +0200 Subject: [PATCH 1/3] align theme with VS Code 2026 refresh Follow the layered workbench/tools/actions palette from the 1.109-1.113 theme refresh and fill the gaps that accumulated since 2020: - enable semanticHighlighting with semanticTokenColors - add editorBracketHighlight, sticky scroll, command center, inlay hints - add terminal ANSI palette, git decorations, diff/merge, minimap, scrollbar - add chat / inlineChat colors for Copilot Chat UI - add notifications, buttons, badges, inputs, dropdowns, symbol icons - drop wildcard *url*/*link*/*uri* scopes for explicit link scopes - remove trailing commas so strict JSON parsers accept the file - bump engines.vscode to ^1.113.0 (April 2026) Co-Authored-By: Claude Opus 4.6 (1M context) --- CHANGELOG.md | 15 +- package.json | 4 +- themes/Quartz-color-theme.json | 384 ++++++++++++++++++++++++++++++--- 3 files changed, 376 insertions(+), 27 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cab4e35..5adb854 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,19 @@ All notable changes to the "quartz" extension will be documented in this file. Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file. -## [Unreleased] +## [0.1.0] + +- Aligned with the VS Code 2026 theme refresh (layered workbench / tools / actions palette) +- Enabled semantic highlighting with dedicated `semanticTokenColors` +- Added bracket pair colorization (`editorBracketHighlight.foreground1..6`) +- Added terminal ANSI palette, git decorations, diff & merge editor colors +- Added sticky scroll, command center, inlay hints, minimap and scrollbar colors +- Added chat / inline chat colors for Copilot Chat UI +- Added notifications, buttons, badges, inputs, dropdowns and symbol icon colors +- Replaced wildcard `*url*` TextMate scopes with explicit link scopes +- Cleaned up trailing commas in the theme JSON +- Bumped minimum engine to VS Code `^1.113.0` (April 2026) + +## [0.0.7] - Initial release diff --git a/package.json b/package.json index 4bf5009..678f383 100644 --- a/package.json +++ b/package.json @@ -7,9 +7,9 @@ "type": "git", "url": "https://github.com/hugues31/Quartz.git" }, - "version": "0.0.7", + "version": "0.1.0", "engines": { - "vscode": "^1.51.0" + "vscode": "^1.113.0" }, "categories": [ "Themes" diff --git a/themes/Quartz-color-theme.json b/themes/Quartz-color-theme.json index 38ad3e8..90fef70 100644 --- a/themes/Quartz-color-theme.json +++ b/themes/Quartz-color-theme.json @@ -1,46 +1,383 @@ { "name": "Quartz", "type": "dark", + "semanticHighlighting": true, "colors": { + "focusBorder": "#00b7ff80", + "foreground": "#cfcfcf", + "descriptionForeground": "#8a8a8a", + "errorForeground": "#FF5370", + "widget.shadow": "#00000080", + "selection.background": "#00b7ff41", + "icon.foreground": "#cfcfcf", + "editor.background": "#1b1b1b", "editor.foreground": "#ffffff", + "editorLineNumber.foreground": "#494949", + "editorLineNumber.activeForeground": "#cfcfcf", + "editor.lineHighlightBackground": "#ffffff10", + "editor.lineHighlightBorder": "#00000000", + "editorCursor.foreground": "#00b7ff", + "editor.selectionBackground": "#00b7ff41", + "editor.selectionHighlightBackground": "#00b7ff29", + "editor.inactiveSelectionBackground": "#00b7ff20", + "editor.wordHighlightBackground": "#00b7ff29", + "editor.wordHighlightStrongBackground": "#00b7ff41", + "editor.findMatchBackground": "#FFCB6B40", + "editor.findMatchHighlightBackground": "#FFCB6B20", + "editor.hoverHighlightBackground": "#00b7ff20", + "editorBracketMatch.background": "#00b7ff41", + "editorBracketMatch.border": "#00b7ff00", + "editorBracketMatch.foreground": "#00b7ff", + "editorIndentGuide.background1": "#222222", + "editorIndentGuide.activeBackground1": "#3a3a3a", + "editorWhitespace.foreground": "#3a3a3a", + "editorRuler.foreground": "#2a2a2a", + "editorOverviewRuler.border": "#00000000", + "editorOverviewRuler.findMatchForeground": "#FFCB6B80", + "editorOverviewRuler.selectionHighlightForeground": "#00b7ff80", + "editorOverviewRuler.wordHighlightForeground": "#00b7ff60", + "editorOverviewRuler.modifiedForeground": "#C792EA80", + "editorOverviewRuler.addedForeground": "#C3E88D80", + "editorOverviewRuler.deletedForeground": "#FF537080", + "editorOverviewRuler.errorForeground": "#FF5370", + "editorOverviewRuler.warningForeground": "#FFCB6B", + "editorOverviewRuler.infoForeground": "#00b7ff", + + "editorBracketHighlight.foreground1": "#FFCB6B", + "editorBracketHighlight.foreground2": "#C792EA", + "editorBracketHighlight.foreground3": "#00b7ff", + "editorBracketHighlight.foreground4": "#C3E88D", + "editorBracketHighlight.foreground5": "#F78C6C", + "editorBracketHighlight.foreground6": "#89DDFF", + "editorBracketHighlight.unexpectedBracket.foreground": "#FF5370", + + "editorError.foreground": "#FF5370", + "editorWarning.foreground": "#FFCB6B", + "editorInfo.foreground": "#00b7ff", + "editorHint.foreground": "#89DDFF", + + "editorGutter.background": "#1b1b1b", + "editorGutter.modifiedBackground": "#C792EA", + "editorGutter.addedBackground": "#C3E88D", + "editorGutter.deletedBackground": "#FF5370", + + "editorInlayHint.background": "#00000000", + "editorInlayHint.foreground": "#6a6a6a", + "editorInlayHint.typeBackground": "#00000000", + "editorInlayHint.typeForeground": "#B2CCD6", + "editorInlayHint.parameterBackground": "#00000000", + "editorInlayHint.parameterForeground": "#8a8a8a", + + "editorStickyScroll.background": "#1b1b1b", + "editorStickyScroll.shadow": "#00000080", + "editorStickyScrollHover.background": "#262626", + + "editorWidget.background": "#1b1b1b", + "editorWidget.foreground": "#cfcfcf", + "editorWidget.border": "#2a2a2a", + "editorHoverWidget.background": "#1b1b1b", + "editorHoverWidget.border": "#2a2a2a", + "editorSuggestWidget.background": "#1b1b1b", + "editorSuggestWidget.border": "#2a2a2a", + "editorSuggestWidget.foreground": "#cfcfcf", + "editorSuggestWidget.highlightForeground": "#00b7ff", + "editorSuggestWidget.selectedBackground": "#00b7ff29", + + "peekView.border": "#00b7ff", + "peekViewEditor.background": "#1b1b1b", + "peekViewEditor.matchHighlightBackground": "#FFCB6B40", + "peekViewResult.background": "#1b1b1b", + "peekViewResult.selectionBackground": "#00b7ff29", + "peekViewResult.matchHighlightBackground": "#FFCB6B40", + "peekViewTitle.background": "#000000", + "peekViewTitleLabel.foreground": "#ffffff", + "peekViewTitleDescription.foreground": "#8a8a8a", + + "diffEditor.insertedTextBackground": "#C3E88D20", + "diffEditor.removedTextBackground": "#FF537020", + "diffEditor.insertedLineBackground": "#C3E88D15", + "diffEditor.removedLineBackground": "#FF537015", + "diffEditor.diagonalFill": "#2a2a2a", + "diffEditor.border": "#2a2a2a", + + "merge.currentHeaderBackground": "#00b7ff60", + "merge.currentContentBackground": "#00b7ff20", + "merge.incomingHeaderBackground": "#C792EA60", + "merge.incomingContentBackground": "#C792EA20", + "merge.commonHeaderBackground": "#FFCB6B60", + "merge.commonContentBackground": "#FFCB6B20", + + "activityBar.background": "#000000", + "activityBar.foreground": "#cfcfcf", + "activityBar.inactiveForeground": "#6a6a6a", + "activityBar.border": "#000000", + "activityBar.activeBorder": "#00b7ff", "activityBarBadge.background": "#00b7ff", - "sideBarTitle.foreground": "#bbbbbb", + "activityBarBadge.foreground": "#000000", + "sideBar.background": "#000000", + "sideBar.foreground": "#cfcfcf", "sideBar.border": "#000000", + "sideBarTitle.foreground": "#bbbbbb", "sideBarSectionHeader.background": "#000000", - "activityBar.background": "#000000", + "sideBarSectionHeader.foreground": "#cfcfcf", + "sideBarSectionHeader.border": "#000000", + + "list.activeSelectionBackground": "#1b1b1b", + "list.activeSelectionForeground": "#ffffff", + "list.inactiveSelectionBackground": "#1b1b1b", + "list.inactiveSelectionForeground": "#cfcfcf", + "list.hoverBackground": "#262626", + "list.hoverForeground": "#ffffff", + "list.focusBackground": "#00b7ff29", + "list.focusForeground": "#ffffff", + "list.highlightForeground": "#00b7ff", + "list.errorForeground": "#FF5370", + "list.warningForeground": "#FFCB6B", + "tree.indentGuidesStroke": "#2a2a2a", + "tab.activeBackground": "#1b1b1b", + "tab.activeForeground": "#ffffff", + "tab.activeBorderTop": "#00b7ff", "tab.inactiveBackground": "#000000", + "tab.inactiveForeground": "#8a8a8a", "tab.hoverBackground": "#003457", - "editorLineNumber.foreground": "#494949", - "editor.lineHighlightBackground": "#ffffff10", - "editorCursor.foreground": "#00b7ff", - "editor.selectionHighlightBackground": "#00b7ff41", - "editorBracketMatch.background": "#00b7ff41", - "editorIndentGuide.background": "#222222", - "menu.background": "#000000", - "panel.border": "#000000", - "debugToolBar.background": "#1b1b1b", + "tab.hoverForeground": "#ffffff", + "tab.border": "#000000", + "tab.unfocusedActiveBorderTop": "#00b7ff60", + "tab.activeModifiedBorder": "#C792EA", + "tab.inactiveModifiedBorder": "#C792EA80", + "editorGroupHeader.tabsBackground": "#000000", + "editorGroupHeader.tabsBorder": "#000000", + "editorGroup.border": "#000000", + "statusBar.background": "#000000", "statusBar.foreground": "#cfcfcf", - "editorGroupHeader.tabsBackground": "#000000", - "tab.border": "#000", + "statusBar.border": "#000000", + "statusBar.debuggingBackground": "#F78C6C", + "statusBar.debuggingForeground": "#000000", + "statusBar.noFolderBackground": "#000000", + "statusBarItem.hoverBackground": "#262626", + "statusBarItem.activeBackground": "#00b7ff29", "statusBarItem.remoteBackground": "#000000", + "statusBarItem.remoteForeground": "#cfcfcf", + "statusBarItem.errorBackground": "#FF5370", + "statusBarItem.errorForeground": "#000000", + "statusBarItem.warningBackground": "#FFCB6B", + "statusBarItem.warningForeground": "#000000", + "statusBarItem.prominentBackground": "#00b7ff", + "statusBarItem.prominentForeground": "#000000", + "titleBar.activeBackground": "#000000", - "list.activeSelectionBackground": "#1b1b1b", - "list.inactiveSelectionBackground": "#1b1b1b", + "titleBar.activeForeground": "#cfcfcf", + "titleBar.inactiveBackground": "#000000", + "titleBar.inactiveForeground": "#8a8a8a", + "titleBar.border": "#000000", + + "commandCenter.background": "#1b1b1b", + "commandCenter.foreground": "#cfcfcf", + "commandCenter.activeBackground": "#262626", + "commandCenter.activeForeground": "#ffffff", + "commandCenter.border": "#2a2a2a", + "commandCenter.inactiveForeground": "#8a8a8a", + "commandCenter.inactiveBorder": "#2a2a2a", + + "menu.background": "#000000", + "menu.foreground": "#cfcfcf", + "menu.selectionBackground": "#00b7ff29", + "menu.selectionForeground": "#ffffff", + "menu.border": "#2a2a2a", + "menu.separatorBackground": "#2a2a2a", + "menubar.selectionBackground": "#262626", + "menubar.selectionForeground": "#ffffff", + + "panel.background": "#1b1b1b", + "panel.border": "#000000", + "panelTitle.activeBorder": "#00b7ff", + "panelTitle.activeForeground": "#ffffff", + "panelTitle.inactiveForeground": "#8a8a8a", + "panelSection.border": "#000000", + "panelSectionHeader.background": "#000000", + "panelSectionHeader.foreground": "#cfcfcf", + "input.background": "#1b1b1b", - "peekViewResult.background": "#1b1b1b", - "peekViewEditor.background": "#1b1b1b", + "input.foreground": "#ffffff", + "input.border": "#2a2a2a", + "input.placeholderForeground": "#8a8a8a", + "inputOption.activeBackground": "#00b7ff41", + "inputOption.activeBorder": "#00b7ff", + "inputOption.activeForeground": "#ffffff", + "inputValidation.errorBackground": "#FF537020", + "inputValidation.errorBorder": "#FF5370", + "inputValidation.warningBackground": "#FFCB6B20", + "inputValidation.warningBorder": "#FFCB6B", + "inputValidation.infoBackground": "#00b7ff20", + "inputValidation.infoBorder": "#00b7ff", + + "dropdown.background": "#1b1b1b", + "dropdown.foreground": "#cfcfcf", + "dropdown.border": "#2a2a2a", + "quickInput.background": "#1b1b1b", - "editorWidget.background": "#1b1b1b", + "quickInput.foreground": "#cfcfcf", + "quickInputTitle.background": "#000000", + "quickInputList.focusBackground": "#00b7ff29", + "quickInputList.focusForeground": "#ffffff", + + "button.background": "#00b7ff", + "button.foreground": "#000000", + "button.hoverBackground": "#33c5ff", + "button.secondaryBackground": "#262626", + "button.secondaryForeground": "#ffffff", + "button.secondaryHoverBackground": "#333333", + + "badge.background": "#00b7ff", + "badge.foreground": "#000000", + + "progressBar.background": "#00b7ff", + + "scrollbar.shadow": "#00000080", + "scrollbarSlider.background": "#ffffff15", + "scrollbarSlider.hoverBackground": "#ffffff25", + "scrollbarSlider.activeBackground": "#ffffff35", + + "minimap.background": "#1b1b1b", + "minimap.selectionHighlight": "#00b7ff", + "minimap.findMatchHighlight": "#FFCB6B", + "minimap.errorHighlight": "#FF5370", + "minimap.warningHighlight": "#FFCB6B", + "minimapSlider.background": "#ffffff10", + "minimapSlider.hoverBackground": "#ffffff20", + "minimapSlider.activeBackground": "#ffffff30", + "minimapGutter.addedBackground": "#C3E88D", + "minimapGutter.modifiedBackground": "#C792EA", + "minimapGutter.deletedBackground": "#FF5370", + + "breadcrumb.background": "#1b1b1b", + "breadcrumb.foreground": "#8a8a8a", + "breadcrumb.focusForeground": "#ffffff", + "breadcrumb.activeSelectionForeground": "#00b7ff", + "breadcrumbPicker.background": "#1b1b1b", + + "notifications.background": "#1b1b1b", + "notifications.foreground": "#cfcfcf", + "notifications.border": "#2a2a2a", + "notificationCenter.border": "#2a2a2a", + "notificationCenterHeader.background": "#000000", + "notificationCenterHeader.foreground": "#cfcfcf", + "notificationToast.border": "#2a2a2a", + "notificationsErrorIcon.foreground": "#FF5370", + "notificationsWarningIcon.foreground": "#FFCB6B", + "notificationsInfoIcon.foreground": "#00b7ff", + + "terminal.background": "#1b1b1b", + "terminal.foreground": "#cfcfcf", + "terminal.selectionBackground": "#00b7ff41", + "terminalCursor.background": "#1b1b1b", + "terminalCursor.foreground": "#00b7ff", + "terminal.ansiBlack": "#000000", + "terminal.ansiRed": "#FF5370", + "terminal.ansiGreen": "#C3E88D", + "terminal.ansiYellow": "#FFCB6B", + "terminal.ansiBlue": "#00b7ff", + "terminal.ansiMagenta": "#C792EA", + "terminal.ansiCyan": "#89DDFF", + "terminal.ansiWhite": "#cfcfcf", + "terminal.ansiBrightBlack": "#546E7A", + "terminal.ansiBrightRed": "#f07178", + "terminal.ansiBrightGreen": "#C3E88D", + "terminal.ansiBrightYellow": "#F78C6C", + "terminal.ansiBrightBlue": "#33c5ff", + "terminal.ansiBrightMagenta": "#C792EA", + "terminal.ansiBrightCyan": "#B2CCD6", + "terminal.ansiBrightWhite": "#ffffff", + + "debugToolBar.background": "#1b1b1b", + "debugToolBar.border": "#2a2a2a", + "debugIcon.breakpointForeground": "#FF5370", + "debugIcon.breakpointDisabledForeground": "#546E7A", + "debugConsole.infoForeground": "#00b7ff", + "debugConsole.warningForeground": "#FFCB6B", + "debugConsole.errorForeground": "#FF5370", + "debugConsole.sourceForeground": "#cfcfcf", + + "gitDecoration.addedResourceForeground": "#C3E88D", + "gitDecoration.modifiedResourceForeground": "#C792EA", + "gitDecoration.deletedResourceForeground": "#FF5370", + "gitDecoration.renamedResourceForeground": "#00b7ff", + "gitDecoration.untrackedResourceForeground": "#C3E88D", + "gitDecoration.ignoredResourceForeground": "#546E7A", + "gitDecoration.conflictingResourceForeground": "#F78C6C", + "gitDecoration.stageModifiedResourceForeground": "#C792EA", + "gitDecoration.stageDeletedResourceForeground": "#FF5370", + "gitDecoration.submoduleResourceForeground": "#89DDFF", + + "chat.requestBackground": "#1b1b1b", + "chat.requestBorder": "#2a2a2a", + "chat.slashCommandBackground": "#00b7ff29", + "chat.slashCommandForeground": "#00b7ff", + "chat.avatarBackground": "#262626", + "chat.avatarForeground": "#cfcfcf", + "inlineChat.background": "#1b1b1b", + "inlineChat.border": "#2a2a2a", + "inlineChat.foreground": "#cfcfcf", + "inlineChat.shadow": "#00000080", + "inlineChatInput.background": "#262626", + "inlineChatInput.border": "#2a2a2a", + "inlineChatInput.focusBorder": "#00b7ff", + "inlineChatInput.placeholderForeground": "#8a8a8a", + + "symbolIcon.classForeground": "#FFCB6B", + "symbolIcon.functionForeground": "#00b7ff", + "symbolIcon.methodForeground": "#00b7ff", + "symbolIcon.variableForeground": "#EEFFFF", + "symbolIcon.constantForeground": "#F78C6C", + "symbolIcon.interfaceForeground": "#FFCB6B", + "symbolIcon.enumeratorForeground": "#FFCB6B", + "symbolIcon.enumeratorMemberForeground": "#F78C6C", + "symbolIcon.keywordForeground": "#C792EA", + "symbolIcon.stringForeground": "#C3E88D", + "symbolIcon.numberForeground": "#F78C6C", + "symbolIcon.booleanForeground": "#F78C6C", + "symbolIcon.propertyForeground": "#89DDFF", + "symbolIcon.moduleForeground": "#FFCB6B", + "symbolIcon.namespaceForeground": "#FFCB6B", + + "charts.foreground": "#cfcfcf", + "charts.lines": "#2a2a2a", + "charts.red": "#FF5370", + "charts.blue": "#00b7ff", + "charts.yellow": "#FFCB6B", + "charts.orange": "#F78C6C", + "charts.green": "#C3E88D", + "charts.purple": "#C792EA" + }, + "semanticTokenColors": { + "parameter": "#F78C6C", + "property": "#89DDFF", + "variable.readonly": "#F78C6C", + "variable.defaultLibrary": "#FFCB6B", + "class": "#FFCB6B", + "interface": "#FFCB6B", + "enum": "#FFCB6B", + "enumMember": "#F78C6C", + "function": "#00b7ff", + "method": "#00b7ff", + "macro": "#C792EA", + "keyword": "#C792EA", + "type": "#FFCB6B", + "type.defaultLibrary": "#FFCB6B", + "namespace": "#FFCB6B", + "*.deprecated": { + "strikethrough": true + } }, "tokenColors": [ { "name": "DocString", "scope": [ - "string.quoted.docstring", + "string.quoted.docstring" ], "settings": { "foreground": "#ffee00" @@ -49,7 +386,7 @@ { "name": "Constant", "scope": [ - "constant.language.python", + "constant.language.python" ], "settings": { "foreground": "#ffe600" @@ -366,9 +703,8 @@ { "name": "URL", "scope": [ - "*url*", - "*link*", - "*uri*" + "markup.underline.link", + "string.other.link" ], "settings": { "fontStyle": "underline" @@ -673,4 +1009,4 @@ } } ] -} \ No newline at end of file +} From de4f729506633b73debdc923edae5f7259f46d3d Mon Sep 17 00:00:00 2001 From: Hugues Gaillard Date: Mon, 13 Apr 2026 20:47:33 +0200 Subject: [PATCH 2/3] match Dark 2026 bg and glass popups - editor/terminal/panel/minimap backgrounds move from #1b1b1b to #121314 to match the official VS Code Dark 2026 theme - menu, command palette, suggest widget, hover widget, notifications, inline chat, debug toolbar, command center get translucent #202122CC (80%) backgrounds and slightly lighter borders, so compositor blur renders them as frosted glass - list selections move off the old editor color onto accent-tinted translucency now that editor is darker - widget.shadow deepened to #000000B3 to add lift under the glass - input/chat keep opaque chrome-layer #191A1B so typed text stays legible Co-Authored-By: Claude Opus 4.6 (1M context) --- CHANGELOG.md | 2 + themes/Quartz-color-theme.json | 102 +++++++++++++++++---------------- 2 files changed, 54 insertions(+), 50 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5adb854..d0a921e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how ## [0.1.0] +- Aligned `editor.background` with the official VS Code Dark 2026 theme (`#121314`) +- Applied translucent "glass" backgrounds to menus, command palette, suggest/hover widgets, notifications, inline chat and command center — renders as true frosted glass when the window compositor blurs transparent surfaces (KWin blur rules, Hyprland `layerrule blur`, Picom `--blur-background`) - Aligned with the VS Code 2026 theme refresh (layered workbench / tools / actions palette) - Enabled semantic highlighting with dedicated `semanticTokenColors` - Added bracket pair colorization (`editorBracketHighlight.foreground1..6`) diff --git a/themes/Quartz-color-theme.json b/themes/Quartz-color-theme.json index 90fef70..f959675 100644 --- a/themes/Quartz-color-theme.json +++ b/themes/Quartz-color-theme.json @@ -7,11 +7,11 @@ "foreground": "#cfcfcf", "descriptionForeground": "#8a8a8a", "errorForeground": "#FF5370", - "widget.shadow": "#00000080", + "widget.shadow": "#000000B3", "selection.background": "#00b7ff41", "icon.foreground": "#cfcfcf", - "editor.background": "#1b1b1b", + "editor.background": "#121314", "editor.foreground": "#ffffff", "editorLineNumber.foreground": "#494949", "editorLineNumber.activeForeground": "#cfcfcf", @@ -57,7 +57,7 @@ "editorInfo.foreground": "#00b7ff", "editorHint.foreground": "#89DDFF", - "editorGutter.background": "#1b1b1b", + "editorGutter.background": "#121314", "editorGutter.modifiedBackground": "#C792EA", "editorGutter.addedBackground": "#C3E88D", "editorGutter.deletedBackground": "#FF5370", @@ -69,25 +69,25 @@ "editorInlayHint.parameterBackground": "#00000000", "editorInlayHint.parameterForeground": "#8a8a8a", - "editorStickyScroll.background": "#1b1b1b", + "editorStickyScroll.background": "#121314", "editorStickyScroll.shadow": "#00000080", - "editorStickyScrollHover.background": "#262626", + "editorStickyScrollHover.background": "#202122CC", - "editorWidget.background": "#1b1b1b", + "editorWidget.background": "#202122CC", "editorWidget.foreground": "#cfcfcf", - "editorWidget.border": "#2a2a2a", - "editorHoverWidget.background": "#1b1b1b", - "editorHoverWidget.border": "#2a2a2a", - "editorSuggestWidget.background": "#1b1b1b", - "editorSuggestWidget.border": "#2a2a2a", + "editorWidget.border": "#3a3b3cAA", + "editorHoverWidget.background": "#202122CC", + "editorHoverWidget.border": "#3a3b3cAA", + "editorSuggestWidget.background": "#202122CC", + "editorSuggestWidget.border": "#3a3b3cAA", "editorSuggestWidget.foreground": "#cfcfcf", "editorSuggestWidget.highlightForeground": "#00b7ff", "editorSuggestWidget.selectedBackground": "#00b7ff29", "peekView.border": "#00b7ff", - "peekViewEditor.background": "#1b1b1b", + "peekViewEditor.background": "#121314", "peekViewEditor.matchHighlightBackground": "#FFCB6B40", - "peekViewResult.background": "#1b1b1b", + "peekViewResult.background": "#121314", "peekViewResult.selectionBackground": "#00b7ff29", "peekViewResult.matchHighlightBackground": "#FFCB6B40", "peekViewTitle.background": "#000000", @@ -124,9 +124,9 @@ "sideBarSectionHeader.foreground": "#cfcfcf", "sideBarSectionHeader.border": "#000000", - "list.activeSelectionBackground": "#1b1b1b", + "list.activeSelectionBackground": "#00b7ff29", "list.activeSelectionForeground": "#ffffff", - "list.inactiveSelectionBackground": "#1b1b1b", + "list.inactiveSelectionBackground": "#ffffff0d", "list.inactiveSelectionForeground": "#cfcfcf", "list.hoverBackground": "#262626", "list.hoverForeground": "#ffffff", @@ -137,7 +137,7 @@ "list.warningForeground": "#FFCB6B", "tree.indentGuidesStroke": "#2a2a2a", - "tab.activeBackground": "#1b1b1b", + "tab.activeBackground": "#121314", "tab.activeForeground": "#ffffff", "tab.activeBorderTop": "#00b7ff", "tab.inactiveBackground": "#000000", @@ -175,24 +175,24 @@ "titleBar.inactiveForeground": "#8a8a8a", "titleBar.border": "#000000", - "commandCenter.background": "#1b1b1b", + "commandCenter.background": "#191A1BCC", "commandCenter.foreground": "#cfcfcf", - "commandCenter.activeBackground": "#262626", + "commandCenter.activeBackground": "#202122E6", "commandCenter.activeForeground": "#ffffff", - "commandCenter.border": "#2a2a2a", + "commandCenter.border": "#2a2b2cAA", "commandCenter.inactiveForeground": "#8a8a8a", - "commandCenter.inactiveBorder": "#2a2a2a", + "commandCenter.inactiveBorder": "#2a2b2cAA", - "menu.background": "#000000", + "menu.background": "#202122CC", "menu.foreground": "#cfcfcf", "menu.selectionBackground": "#00b7ff29", "menu.selectionForeground": "#ffffff", - "menu.border": "#2a2a2a", - "menu.separatorBackground": "#2a2a2a", - "menubar.selectionBackground": "#262626", + "menu.border": "#3a3b3cAA", + "menu.separatorBackground": "#3a3b3c80", + "menubar.selectionBackground": "#ffffff14", "menubar.selectionForeground": "#ffffff", - "panel.background": "#1b1b1b", + "panel.background": "#121314", "panel.border": "#000000", "panelTitle.activeBorder": "#00b7ff", "panelTitle.activeForeground": "#ffffff", @@ -201,9 +201,9 @@ "panelSectionHeader.background": "#000000", "panelSectionHeader.foreground": "#cfcfcf", - "input.background": "#1b1b1b", + "input.background": "#191A1B", "input.foreground": "#ffffff", - "input.border": "#2a2a2a", + "input.border": "#2a2b2c", "input.placeholderForeground": "#8a8a8a", "inputOption.activeBackground": "#00b7ff41", "inputOption.activeBorder": "#00b7ff", @@ -215,15 +215,17 @@ "inputValidation.infoBackground": "#00b7ff20", "inputValidation.infoBorder": "#00b7ff", - "dropdown.background": "#1b1b1b", + "dropdown.background": "#202122CC", "dropdown.foreground": "#cfcfcf", - "dropdown.border": "#2a2a2a", + "dropdown.border": "#3a3b3cAA", - "quickInput.background": "#1b1b1b", + "quickInput.background": "#202122CC", "quickInput.foreground": "#cfcfcf", - "quickInputTitle.background": "#000000", + "quickInputTitle.background": "#202122CC", "quickInputList.focusBackground": "#00b7ff29", "quickInputList.focusForeground": "#ffffff", + "pickerGroup.border": "#3a3b3c80", + "pickerGroup.foreground": "#00b7ff", "button.background": "#00b7ff", "button.foreground": "#000000", @@ -242,7 +244,7 @@ "scrollbarSlider.hoverBackground": "#ffffff25", "scrollbarSlider.activeBackground": "#ffffff35", - "minimap.background": "#1b1b1b", + "minimap.background": "#121314", "minimap.selectionHighlight": "#00b7ff", "minimap.findMatchHighlight": "#FFCB6B", "minimap.errorHighlight": "#FF5370", @@ -254,27 +256,27 @@ "minimapGutter.modifiedBackground": "#C792EA", "minimapGutter.deletedBackground": "#FF5370", - "breadcrumb.background": "#1b1b1b", + "breadcrumb.background": "#121314", "breadcrumb.foreground": "#8a8a8a", "breadcrumb.focusForeground": "#ffffff", "breadcrumb.activeSelectionForeground": "#00b7ff", - "breadcrumbPicker.background": "#1b1b1b", + "breadcrumbPicker.background": "#202122CC", - "notifications.background": "#1b1b1b", + "notifications.background": "#202122CC", "notifications.foreground": "#cfcfcf", - "notifications.border": "#2a2a2a", - "notificationCenter.border": "#2a2a2a", - "notificationCenterHeader.background": "#000000", + "notifications.border": "#3a3b3cAA", + "notificationCenter.border": "#3a3b3cAA", + "notificationCenterHeader.background": "#202122CC", "notificationCenterHeader.foreground": "#cfcfcf", - "notificationToast.border": "#2a2a2a", + "notificationToast.border": "#3a3b3cAA", "notificationsErrorIcon.foreground": "#FF5370", "notificationsWarningIcon.foreground": "#FFCB6B", "notificationsInfoIcon.foreground": "#00b7ff", - "terminal.background": "#1b1b1b", + "terminal.background": "#121314", "terminal.foreground": "#cfcfcf", "terminal.selectionBackground": "#00b7ff41", - "terminalCursor.background": "#1b1b1b", + "terminalCursor.background": "#121314", "terminalCursor.foreground": "#00b7ff", "terminal.ansiBlack": "#000000", "terminal.ansiRed": "#FF5370", @@ -293,8 +295,8 @@ "terminal.ansiBrightCyan": "#B2CCD6", "terminal.ansiBrightWhite": "#ffffff", - "debugToolBar.background": "#1b1b1b", - "debugToolBar.border": "#2a2a2a", + "debugToolBar.background": "#202122CC", + "debugToolBar.border": "#3a3b3cAA", "debugIcon.breakpointForeground": "#FF5370", "debugIcon.breakpointDisabledForeground": "#546E7A", "debugConsole.infoForeground": "#00b7ff", @@ -313,18 +315,18 @@ "gitDecoration.stageDeletedResourceForeground": "#FF5370", "gitDecoration.submoduleResourceForeground": "#89DDFF", - "chat.requestBackground": "#1b1b1b", - "chat.requestBorder": "#2a2a2a", + "chat.requestBackground": "#191A1B", + "chat.requestBorder": "#2a2b2c", "chat.slashCommandBackground": "#00b7ff29", "chat.slashCommandForeground": "#00b7ff", - "chat.avatarBackground": "#262626", + "chat.avatarBackground": "#2a2b2c", "chat.avatarForeground": "#cfcfcf", - "inlineChat.background": "#1b1b1b", - "inlineChat.border": "#2a2a2a", + "inlineChat.background": "#202122CC", + "inlineChat.border": "#3a3b3cAA", "inlineChat.foreground": "#cfcfcf", "inlineChat.shadow": "#00000080", - "inlineChatInput.background": "#262626", - "inlineChatInput.border": "#2a2a2a", + "inlineChatInput.background": "#191A1BE6", + "inlineChatInput.border": "#3a3b3cAA", "inlineChatInput.focusBorder": "#00b7ff", "inlineChatInput.placeholderForeground": "#8a8a8a", From dd31baa079e74c82c9ae586aa2ce96475a5fda96 Mon Sep 17 00:00:00 2001 From: Hugues Gaillard Date: Mon, 13 Apr 2026 20:54:27 +0200 Subject: [PATCH 3/3] add native CSS blur for popups via proposed API Use the new "css" theme contribution (introduced alongside the 2026 refresh in microsoft/vscode PR #293281) to ship a stylesheet that applies real backdrop-filter: blur to command palette, context menus, suggest/hover/parameter-hints/find widgets, notifications, inline chat and modal dialogs. No compositor required. Pattern mirrors extensions/theme-2026/themes/styles.css: CSS custom properties gated on .vs-dark for contrast-safe luminosity blending, color-mix over vscode-editor-background for the translucent fill. enabledApiProposals: ["css"] makes this a proposed-API extension, so it runs on Insiders or on stable via code --enable-proposed-api Hugues.quartz and cannot currently be published to the marketplace. Co-Authored-By: Claude Opus 4.6 (1M context) --- CHANGELOG.md | 3 +- package.json | 8 +++- themes/quartz-glass.css | 92 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 101 insertions(+), 2 deletions(-) create mode 100644 themes/quartz-glass.css diff --git a/CHANGELOG.md b/CHANGELOG.md index d0a921e..a85a68a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,8 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how ## [0.1.0] - Aligned `editor.background` with the official VS Code Dark 2026 theme (`#121314`) -- Applied translucent "glass" backgrounds to menus, command palette, suggest/hover widgets, notifications, inline chat and command center — renders as true frosted glass when the window compositor blurs transparent surfaces (KWin blur rules, Hyprland `layerrule blur`, Picom `--blur-background`) +- Applied translucent "glass" backgrounds to menus, command palette, suggest/hover widgets, notifications, inline chat and command center +- Added `themes/quartz-glass.css` contributing real `backdrop-filter: blur(...)` to popups via the new `css` theme contribution proposed API (VS Code 1.113+ Insiders, or stable launched with `--enable-proposed-api Hugues.quartz`) — mirrors the pattern used by the built-in `theme-2026` extension - Aligned with the VS Code 2026 theme refresh (layered workbench / tools / actions palette) - Enabled semantic highlighting with dedicated `semanticTokenColors` - Added bracket pair colorization (`editorBracketHighlight.foreground1..6`) diff --git a/package.json b/package.json index 678f383..6c48fb2 100644 --- a/package.json +++ b/package.json @@ -14,11 +14,17 @@ "categories": [ "Themes" ], + "enabledApiProposals": [ + "css" + ], "contributes": { "themes": [{ "label": "Quartz", "uiTheme": "vs-dark", "path": "./themes/Quartz-color-theme.json" + }], + "css": [{ + "path": "./themes/quartz-glass.css" }] } -} \ No newline at end of file +} diff --git a/themes/quartz-glass.css b/themes/quartz-glass.css new file mode 100644 index 0000000..627e321 --- /dev/null +++ b/themes/quartz-glass.css @@ -0,0 +1,92 @@ +/* + * Quartz - frosted glass overlays for menus and popups. + * + * Requires the "css" proposed theme contribution (VS Code 1.113+ Insiders, + * or stable launched with `--enable-proposed-api Hugues.quartz`). + * Mirrors the pattern used by the built-in theme-2026 extension. + */ + +:root { + --quartz-blur: blur(20px) saturate(180%); + --quartz-blur-strong: blur(40px) saturate(180%); + --quartz-glass-bg: color-mix(in srgb, var(--vscode-editor-background) 60%, transparent); + --quartz-glass-border: color-mix(in srgb, #ffffff 8%, transparent); +} + +.monaco-workbench.vs-dark { + --quartz-blur: blur(20px) saturate(180%) brightness(0.65); + --quartz-blur-strong: blur(40px) saturate(180%) brightness(0.65); +} + +/* Command palette & quick pick */ +.monaco-workbench .quick-input-widget { + backdrop-filter: var(--quartz-blur-strong); + -webkit-backdrop-filter: var(--quartz-blur-strong); + background: var(--quartz-glass-bg) !important; + border: 1px solid var(--quartz-glass-border); +} + +/* Disable blur when quick chat takes over the quick input — nested + backdrop-filter breaks the stacking context for the chat editor. */ +.monaco-workbench .quick-input-widget:has(.interactive-session) { + backdrop-filter: none; + -webkit-backdrop-filter: none; +} + +/* Context menus & menubar dropdowns */ +.monaco-workbench .context-view .monaco-menu-container, +.monaco-workbench .context-view .monaco-menu { + backdrop-filter: var(--quartz-blur); + -webkit-backdrop-filter: var(--quartz-blur); + background: var(--quartz-glass-bg) !important; + border: 1px solid var(--quartz-glass-border); +} + +/* Suggest widget (autocomplete) */ +.monaco-workbench .monaco-editor .suggest-widget { + backdrop-filter: var(--quartz-blur); + -webkit-backdrop-filter: var(--quartz-blur); + background: var(--quartz-glass-bg) !important; + border: 1px solid var(--quartz-glass-border); +} + +/* Hover widget (symbol info, errors) */ +.monaco-workbench .monaco-editor .monaco-hover, +.monaco-workbench .monaco-editor-hover { + backdrop-filter: var(--quartz-blur); + -webkit-backdrop-filter: var(--quartz-blur); + background: var(--quartz-glass-bg) !important; + border: 1px solid var(--quartz-glass-border); +} + +/* Parameter hints, find widget, other editor popups */ +.monaco-workbench .monaco-editor .parameter-hints-widget, +.monaco-workbench .monaco-editor .find-widget { + backdrop-filter: var(--quartz-blur); + -webkit-backdrop-filter: var(--quartz-blur); + background: var(--quartz-glass-bg) !important; + border: 1px solid var(--quartz-glass-border); +} + +/* Notifications */ +.monaco-workbench .notifications-toasts, +.monaco-workbench .notifications-center { + backdrop-filter: var(--quartz-blur); + -webkit-backdrop-filter: var(--quartz-blur); + background: color-mix(in srgb, var(--vscode-notifications-background) 60%, transparent) !important; +} + +/* Inline chat popup */ +.monaco-workbench .interactive-session, +.monaco-workbench .inline-chat { + backdrop-filter: var(--quartz-blur); + -webkit-backdrop-filter: var(--quartz-blur); + background: var(--quartz-glass-bg) !important; +} + +/* Modal dialogs (confirm prompts, save dialogs) */ +.monaco-workbench .monaco-dialog-modal-block.dimmed { + backdrop-filter: var(--quartz-blur); + -webkit-backdrop-filter: var(--quartz-blur); + background: color-mix(in srgb, var(--vscode-editor-background) 50%, transparent) !important; +}