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#82aaff
- activityBar.background#1e2030
- activityBar.foreground#c8d3f5
- chat.requestBubbleBackground#00000000
- chat.requestBubbleHoverBackground#00000000
- debugToolBar.background#1e2030
- debugToolBar.border#1b1d2b
- diffEditor.insertedLineBackground#2a4556cc
- diffEditor.insertedTextBackground#394b70cc
- diffEditor.removedLineBackground#4b2a3dcc
- diffEditor.removedTextBackground#4b2a3dcc
- dropdown.background#1e2030
- dropdown.border#589ed7
- editor.background#222436
- editor.findMatchBackground#ff966c
- editor.findMatchBorder#00000000
- editor.findMatchForeground#1b1d2b
- editor.findMatchHighlightBackground#3e68d7cc
- editor.findMatchHighlightBorder#00000000
- editor.foreground#c8d3f5
- editor.hoverHighlightBackground#2f334d80
- editor.lineHighlightBackground#2f334d
- editor.rangeHighlightBackground#2f334d80
- editor.selectionBackground#2d3f76
- editor.snippetTabstopHighlightBackground#2f334d
- editorBracketMatch.background#00000000
- editorBracketMatch.border#ff966c
- editorBracketPairGuide.activeBackground1#65bcff
- editorBracketPairGuide.background1#3b4261
- editorCursor.background#222436
- editorCursor.foreground#c8d3f5
- editorError.foreground#c53b53
- editorGroup.border#1b1d2b
- editorGroupHeader.tabsBackground#1e2030
- editorHint.foreground#4fd6be
- editorHoverWidget.background#1e2030
- editorHoverWidget.border#589ed7
- editorIndentGuide.activeBackground1#65bcff
- editorIndentGuide.background1#3b4261
- editorInfo.foreground#0db9d7
- editorLineNumber.activeForeground#ff966c
- editorLineNumber.foreground#3b4261
- editorOverviewRuler.border#191b29
- editorSuggestWidget.background#1e2030
- editorSuggestWidget.border#589ed7
- editorSuggestWidget.foreground#c8d3f5
- editorSuggestWidget.selectedBackground#363b58
- editorSuggestWidget.selectedForeground#65bcff
- editorWarning.foreground#ffc777
- editorWhitespace.foreground#3b4261
- editorWidget.background#1e2030
- editorWidget.border#589ed7
- editorWidget.resizeBorder#65bcff
- focusBorder#65bcff
- gitDecoration.addedResourceForeground#b8db87
- gitDecoration.conflictingResourceForeground#c53b53
- gitDecoration.deletedResourceForeground#e26a75
- gitDecoration.ignoredResourceForeground#545c7e
- gitDecoration.modifiedResourceForeground#7ca1f2
- gitDecoration.untrackedResourceForeground#c099ff
- input.background#1e2030
- input.border#3b4261
- inputOption.activeBackground#2f334d
- inputOption.activeBorder#65bcff
- inputOption.activeForeground#c8d3f5
- inputOption.hoverBackground#2f334d
- list.activeSelectionBackground#2f334d
- list.activeSelectionForeground#c8d3f5
- list.dropBackground#394b70
- list.focusAndSelectionOutline#65bcff
- list.focusOutline#65bcff
- list.hoverBackground#2f334d
- list.hoverForeground#c8d3f5
- list.inactiveFocusOutline#3b4261
- list.inactiveSelectionBackground#2f334d
- menu.background#1e2030
- menu.border#589ed7
- menu.selectionBackground#2f334d
- menu.selectionBorder#3b4261
- menu.separatorBackground#3b4261
- multiDiffEditor.headerBackground#1e2030
- panel.background#222436
- panel.border#1b1d2b
- peekView.border#65bcff
- peekViewEditor.background#222436
- peekViewResult.background#1e2030
- peekViewResult.selectionBackground#2f334d
- peekViewTitle.background#1e2030
- quickInput.background#1e2030
- quickInput.foreground#c8d3f5
- quickInputList.focusBackground#2f334d
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#636da680
- scrollbarSlider.background#3b426180
- scrollbarSlider.hoverBackground#545c7e80
- sideBar.background#1e2030
- sideBar.foreground#828bb8
- sideBarSectionHeader.background#1e2030
- simpleFindWidget.sashBorder#3b4261
- statusBar.background#1e2030
- statusBar.border#191b29
- statusBar.debuggingBackground#ff966c
- statusBar.debuggingBorder#ff966c
- statusBar.debuggingForeground#1b1d2b
- statusBar.focusBorder#65bcff
- statusBar.foreground#828bb8
- statusBar.noFolderBackground#1e2030
- statusBar.noFolderBorder#191b29
- statusBar.noFolderForeground#3b4261
- statusBarItem.activeBackground#3b4261
- statusBarItem.compactHoverBackground#2f334d
- statusBarItem.errorBackground#ff757f
- statusBarItem.errorForeground#1b1d2b
- statusBarItem.errorHoverBackground#c53b53
- statusBarItem.errorHoverForeground#c8d3f5
- statusBarItem.focusBorder#65bcff
- statusBarItem.hoverBackground#2f334d
- statusBarItem.hoverForeground#c8d3f5
- statusBarItem.offlineBackground#3b4261
- statusBarItem.offlineForeground#828bb8
- statusBarItem.offlineHoverBackground#545c7e
- statusBarItem.offlineHoverForeground#c8d3f5
- statusBarItem.prominentBackground#82aaff
- statusBarItem.prominentForeground#1b1d2b
- statusBarItem.prominentHoverBackground#65bcff
- statusBarItem.prominentHoverForeground#1b1d2b
- statusBarItem.remoteBackground#4fd6be
- statusBarItem.remoteForeground#1b1d2b
- statusBarItem.remoteHoverBackground#41a6b5
- statusBarItem.remoteHoverForeground#1b1d2b
- statusBarItem.warningBackground#ffc777
- statusBarItem.warningForeground#1b1d2b
- statusBarItem.warningHoverBackground#ff966c
- statusBarItem.warningHoverForeground#1b1d2b
- tab.activeBackground#222436
- tab.activeForeground#c8d3f5
- tab.border#1b1d2b
- tab.inactiveBackground#1e2030
- tab.inactiveForeground#828bb8
- tab.selectedBorderTop#82aaff
- terminal.ansiBlack#1e2030
- terminal.ansiBlue#82aaff
- terminal.ansiBrightBlack#444a73
- terminal.ansiBrightBlue#82aaff
- terminal.ansiBrightCyan#86e1fc
- terminal.ansiBrightGreen#c3e88d
- terminal.ansiBrightMagenta#c099ff
- terminal.ansiBrightRed#ff757f
- terminal.ansiBrightWhite#c8d3f5
- terminal.ansiBrightYellow#ffc777
- terminal.ansiCyan#86e1fc
- terminal.ansiGreen#c3e88d
- terminal.ansiMagenta#c099ff
- terminal.ansiRed#ff757f
- terminal.ansiWhite#828bb8
- terminal.ansiYellow#ffc777
- terminal.background#222436
- terminal.border#1b1d2b
- terminal.findMatchBackground#ff966ccc
- terminal.findMatchBorder#00000000
- terminal.findMatchHighlightBackground#3e68d7cc
- terminal.findMatchHighlightBorder#00000000
- terminal.foreground#c8d3f5
- titleBar.activeBackground#191b29
- titleBar.activeForeground#c8d3f5
- titleBar.inactiveBackground#191b29
- titleBar.inactiveForeground#828bb8
- toolbar.hoverBackground#2f334d
- toolbar.hoverOutline#3b4261
- widget.border#589ed7
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, keyword.other.operator, punctuation.accessor, punctuation.definition, punctuation.definition.list.begin.markdown, punctuation.section, punctuation.separator, punctuation.terminator, punctuation.vararg-ellipses, storage.modifier.pointer, storage.modifier.reference | #89ddff | |
| meta.brace, punctuation.parenthesis, punctuation.section.parens, punctuation.section.square, punctuation.section.block, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json | #828bb8 | |
| constant.character.escape, constant.other.placeholder, entity.name.operator.custom-literal, keyword.other.suffix.literal | #c099ff | |
| punctuation.definition.string.begin, punctuation.definition.string.end, storage.type.string.python, string | #c3e88d | |
| constant.numeric, constant.language, keyword.other.unit | #ff966c | |
| entity.name.function, support.function | #82aaff | |
| variable.function.constructor, keyword.declaration.function, storage.type.function | #c099ff | |
| entity.name.type, storage.type, storage.type.template.argument, support.type.exception, support.type.property-name, support.type.python | #65bcff | |
| support.type.built-in | #589ed7 | |
| entity.name.module, entity.name.namespace, entity.name.scope-resolution | #86e1fc | |
| keyword.control.return, keyword.control.co_return, keyword.control.co_await, keyword.control.co_yield, keyword.control.default, keyword.control.goto | #fca7ea | italic |
| string.special.path.include.cpp | #c3e88d | |
| keyword.control.conditional, keyword.control.if, keyword.control.else, keyword.control.switch, keyword.control.case, keyword.control.exception, keyword.control.loop, keyword.control.repeat, keyword.control.while, keyword.control.for, keyword.control.do, keyword.control.flow, keyword.control.continue, keyword.control.break, keyword.control.catch, keyword.control.throw, keyword.control.try, keyword.operator.noexcept, storage.modifier.specifier.functional.post-parameters.noexcept | #c099ff | |
| entity.name.operator.cpp | #82aaff | |
| keyword.other.static-assert | #65bcff | |
| keyword.operator.typeid, keyword.operator.alignas | #c8d3f5 | |
| entity.name.section, keyword.control, keyword.other, keyword.other.using, storage.modifier, storage.type.class, storage.type.decltype, storage.type.enum, storage.type.modifier, storage.type.namespace, storage.type.struct, storage.type.union, storage.type.template, storage.type.template.argument.class | #fca7ea | italic |
| entity.other.attribute, keyword.other.export, keyword.other.import, keyword.other.module, entity.name.function.preprocessor, meta.preprocessor | #86e1fc | |
| variable.language.special, variable.language.this | #ff757f | |
| entity.name.label | #82aaff | |
| variable.parameter | #ffc777 | |
| support.type.property-name.json | #4fd6be | |
| variable.other.assignment, variable.other.enummember, variable.other.object, variable.other.property, variable.legacy.builtin.python, source, support.variable | #c8d3f5 | |
| comment, punctuation.definition.comment, storage.type.class.doxygen.cpp, string.quoted.docstring | #636da6 | italic |