Color themes
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.activeBorder#ffffff
- activityBar.background#ffffff
- activityBar.foreground#000000
- chat.requestBubbleBackground#ffffff00
- chat.requestBubbleHoverBackground#ffffff00
- debugToolBar.background#ffffff
- debugToolBar.border#a0a0a0
- dropdown.background#ffffff
- dropdown.border#a0a0a0
- editor.background#ffffff
- editor.findMatchBackground#ffffff
- editor.findMatchBorder#000000
- editor.findMatchHighlightBackground#ffffff00
- editor.findMatchHighlightBorder#404040
- editor.hoverHighlightBackground#ffffff00
- editor.rangeHighlightBackground#ffffff00
- editor.selectionBackground#a0a0a0
- editor.snippetTabstopHighlightBackground#a0a0a0
- editorBracketMatch.background#ffffff
- editorBracketMatch.border#404040
- editorGroup.border#ffffff
- editorGroupHeader.tabsBackground#ffffff
- editorHoverWidget.background#ffffff
- editorHoverWidget.border#a0a0a0
- editorLineNumber.activeForeground#707070
- editorLineNumber.foreground#a0a0a0
- editorOverviewRuler.border#ffffff
- editorSuggestWidget.background#ffffff
- editorSuggestWidget.border#a0a0a0
- editorSuggestWidget.foreground#404040
- editorSuggestWidget.selectedForeground#000000
- editorWidget.background#ffffff
- editorWidget.border#ffffff
- editorWidget.resizeBorder#ffffff
- focusBorder#707070
- input.background#ffffff
- input.border#a0a0a0
- inputOption.activeBackground#ffffff
- inputOption.activeBorder#707070
- inputOption.activeForeground#000000
- inputOption.hoverBackground#ffffff
- list.activeSelectionBackground#ffffff
- list.activeSelectionForeground#000000
- list.dropBackground#a0a0a0
- list.focusAndSelectionOutline#707070
- list.focusOutline#707070
- list.hoverBackground#ffffff
- list.hoverForeground#101010
- list.inactiveFocusOutline#a0a0a0
- list.inactiveSelectionBackground#ffffff
- menu.background#ffffff
- menu.border#a0a0a0
- menu.selectionBorder#a0a0a0
- menu.separatorBackground#a0a0a0
- multiDiffEditor.headerBackground#ffffff
- panel.border#ffffff
- peekView.border#a0a0a0
- peekViewEditor.background#ffffff
- peekViewResult.background#ffffff
- peekViewResult.selectionBackground#ffffff
- peekViewTitle.background#ffffff
- quickInput.background#ffffff
- quickInput.foreground#303030
- quickInputList.focusBackground#ffffff
- scrollbar.shadow#ffffff00
- scrollbarSlider.activeBackground#70707080
- scrollbarSlider.background#a0a0a080
- scrollbarSlider.hoverBackground#70707080
- sideBar.background#ffffff
- sideBar.foreground#282828
- sideBarSectionHeader.background#ffffff
- simpleFindWidget.sashBorder#ffffff
- tab.activeBackground#ffffff
- tab.border#ffffff
- tab.inactiveBackground#ffffff
- tab.selectedBorderTop#ffffff
- terminal.border#ffffff
- terminal.findMatchBackground#ffffff00
- terminal.findMatchBorder#000000
- terminal.findMatchHighlightBackground#ffffff00
- terminal.findMatchHighlightBorder#404040
- terminal.foreground#282828
- titleBar.activeBackground#ffffff
- titleBar.inactiveBackground#ffffff
- toolbar.hoverBackground#ffffff
- toolbar.hoverOutline#a0a0a0
- widget.border#a0a0a0
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| constant.character.format, entity.name.operator, keyword.operator, keyword.operator.delete.array.bracket, keyword.operator.logical.python, keyword.operator.new.cpp, meta.brace, punctuation.accessor, punctuation.definition, punctuation.definition.list.begin.markdown, punctuation.parenthesis, punctuation.section, punctuation.separator, punctuation.terminator, punctuation.vararg-ellipses, storage.modifier.pointer, storage.modifier.reference | #ff0000 | |
| constant.character.escape, constant.other.placeholder, entity.name.operator.custom-literal, keyword.other.suffix.literal, punctuation.definition.string.begin, punctuation.definition.string.end, storage.type.string.python, string | #ff8000 | |
| keyword.control.catch, keyword.control.co_await, keyword.control.co_return, keyword.control.co_yield, keyword.control.flow, keyword.control.return, keyword.control.throw, keyword.control.try | #c000ff | |
| constant.numeric, keyword.other.unit | #00a000 | |
| entity.name.function, entity.name.module, entity.name.namespace, entity.name.scope-resolution, entity.name.type, keyword.other.operator, storage.type, storage.type.template.argument, support.function, support.type.built-in, support.type.exception, support.type.property-name, support.type.python | #00a000 | bold |
| constant.language, entity.name.section, entity.name.function.preprocessor, keyword.control, keyword.operator.cast, keyword.operator.delete, keyword.operator.noexcept, keyword.operator.alignof, keyword.operator.sizeof, keyword.other, keyword.other.using, storage.modifier, storage.type.class, storage.type.decltype, storage.type.enum, storage.type.function, storage.type.modifier, storage.type.namespace, storage.type.struct, storage.type.template, storage.type.template.argument.class, variable.language.special, variable.language.this | #0080ff | bold |
| entity.other.attribute, keyword.other.export, keyword.other.import, keyword.other.module, entity.name.module, meta.preprocessor | #c000ff | |
| entity.name.label, variable.other.assignment, variable.other.enummember, variable.other.object, variable.other.property, variable.legacy.builtin.python, variable.parameter, source, support.variable | #282828 | |
| comment, punctuation.definition.comment, storage.type.class.doxygen.cpp, string.quoted.docstring | #404040 |