Skip to main content
Coding Theme

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#61AFEF
  • activityBar.background#1B1E2B
  • activityBar.border#424A6C60
  • activityBar.dropBackground#f0717880
  • activityBar.foreground#babed8
  • activityBarBadge.background#61AFEF
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#676E95
  • breadcrumb.activeSelectionForeground#61AFEF
  • breadcrumb.background#282d3f
  • breadcrumb.focusForeground#babed8
  • breadcrumb.foreground#757CA1
  • breadcrumbPicker.background#1B1E2B
  • button.background#717CB450
  • button.foreground#ffffff
  • debugConsole.errorForeground#f07178
  • debugConsole.infoForeground#89DDFF
  • debugConsole.warningForeground#E5C07B
  • debugToolBar.background#282d3f
  • diffEditor.insertedTextBackground#89DDFF20
  • diffEditor.removedTextBackground#ff9cac20
  • dropdown.background#282d3f
  • dropdown.border#FFFFFF10
  • editor.background#282d3f
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#61AFEF
  • editor.findMatchHighlight#babed8
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#ffffff50
  • editor.findRangeHighlightBackground#E5C07B30
  • editor.foreground#babed8
  • editor.lineHighlightBackground#00000050
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#FFFFFF0d
  • editor.selectionBackground#717CB450
  • editor.selectionHighlightBackground#FFCC0020
  • editor.wordHighlightBackground#ff9cac30
  • editor.wordHighlightStrongBackground#98C37930
  • editorBracketMatch.background#282d3f
  • editorBracketMatch.border#FFCC0050
  • editorCursor.foreground#FFCC00
  • editorError.foreground#f0717870
  • editorGroup.border#00000030
  • editorGroup.dropBackground#f0717880
  • editorGroup.focusedEmptyBorder#f07178
  • editorGroupHeader.tabsBackground#282d3f
  • editorGutter.addedBackground#98C37960
  • editorGutter.deletedBackground#f0717860
  • editorGutter.modifiedBackground#82AAFF60
  • editorHoverWidget.background#282d3f
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground#4E5579
  • editorIndentGuide.background#4E557970
  • editorInfo.foreground#82AAFF70
  • editorLineNumber.activeForeground#757CA1
  • editorLineNumber.foreground#3A3F58
  • editorLink.activeForeground#babed8
  • editorMarkerNavigation.background#babed805
  • editorOverviewRuler.border#282d3f
  • editorOverviewRuler.errorForeground#f0717840
  • editorOverviewRuler.findMatchForeground#61AFEF
  • editorOverviewRuler.infoForeground#82AAFF40
  • editorOverviewRuler.warningForeground#E5C07B40
  • editorRuler.foreground#4E5579
  • editorSuggestWidget.background#282d3f
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#babed8
  • editorSuggestWidget.highlightForeground#61AFEF
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#E5C07B70
  • editorWhitespace.foreground#babed840
  • editorWidget.background#1B1E2B
  • editorWidget.border#61AFEF
  • editorWidget.resizeBorder#61AFEF
  • extensionBadge.remoteForeground#babed8
  • extensionButton.prominentBackground#98C37990
  • extensionButton.prominentForeground#babed8
  • extensionButton.prominentHoverBackground#98C379
  • focusBorder#FFFFFF00
  • foreground#babed8
  • gitDecoration.conflictingResourceForeground#E5C07B90
  • gitDecoration.deletedResourceForeground#f0717890
  • gitDecoration.ignoredResourceForeground#757CA190
  • gitDecoration.modifiedResourceForeground#d19a66
  • gitDecoration.untrackedResourceForeground#98C379
  • input.background#333747
  • input.border#FFFFFF10
  • input.foreground#babed8
  • input.placeholderForeground#babed860
  • inputOption.activeBackground#babed830
  • inputOption.activeBorder#babed830
  • inputValidation.errorBorder#f07178
  • inputValidation.infoBorder#82AAFF
  • inputValidation.warningBorder#E5C07B
  • list.activeSelectionBackground#1B1E2B
  • list.activeSelectionForeground#61AFEF
  • list.dropBackground#f0717880
  • list.focusBackground#babed820
  • list.focusForeground#babed8
  • list.highlightForeground#61AFEF
  • list.hoverBackground#1B1E2B
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#61AFEF
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#282d3f
  • menu.foreground#babed8
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#61AFEF
  • menu.separatorBackground#babed8
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#61AFEF
  • notebook.focusedCellBorder#61AFEF
  • notebook.inactiveFocusedCellBorder#61AFEF50
  • notificationLink.foreground#61AFEF
  • notifications.background#282d3f
  • notifications.foreground#babed8
  • panel.background#1B1E2B
  • panel.border#424A6C60
  • panel.dropBackground#babed8
  • panelTitle.activeBorder#61AFEF
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#babed8
  • peekView.border#00000030
  • peekViewEditor.background#333747
  • peekViewEditor.matchHighlightBackground#717CB450
  • peekViewEditorGutter.background#333747
  • peekViewResult.background#333747
  • peekViewResult.matchHighlightBackground#717CB450
  • peekViewResult.selectionBackground#757CA170
  • peekViewTitle.background#333747
  • peekViewTitleDescription.foreground#babed860
  • pickerGroup.border#FFFFFF1a
  • pickerGroup.foreground#61AFEF
  • progressBar.background#61AFEF
  • quickInput.background#282d3f
  • quickInput.foreground#757CA1
  • quickInput.list.focusBackground#babed820
  • sash.hoverBorder#61AFEF50
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#61AFEF
  • scrollbarSlider.background#A6ACCD20
  • scrollbarSlider.hoverBackground#A6ACCD10
  • selection.background#00000080
  • settings.checkboxBackground#1B1E2B
  • settings.checkboxForeground#babed8
  • settings.dropdownBackground#1B1E2B
  • settings.dropdownForeground#babed8
  • settings.headerForeground#61AFEF
  • settings.modifiedItemIndicator#61AFEF
  • settings.numberInputBackground#1B1E2B
  • settings.numberInputForeground#babed8
  • settings.textInputBackground#1B1E2B
  • settings.textInputForeground#babed8
  • sideBar.background#1B1E2B
  • sideBar.border#424A6C60
  • sideBar.foreground#757CA1
  • sideBarSectionHeader.background#1B1E2B
  • sideBarSectionHeader.border#424A6C60
  • sideBarTitle.foreground#babed8
  • statusBar.background#1B1E2B
  • statusBar.border#424A6C60
  • statusBar.debuggingBackground#C792EA
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#676E95
  • statusBar.noFolderBackground#282d3f
  • statusBarItem.activeBackground#f0717880
  • statusBarItem.hoverBackground#676E9520
  • statusBarItem.remoteBackground#61AFEF
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#1B1E2B
  • tab.activeBorder#61AFEF
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#757CA1
  • tab.border#282d3f
  • tab.inactiveBackground#282d3f
  • tab.inactiveForeground#757CA1
  • tab.inactiveModifiedBorder#904348
  • tab.unfocusedActiveBorder#676E95
  • tab.unfocusedActiveForeground#babed8
  • tab.unfocusedActiveModifiedBorder#c05a60
  • tab.unfocusedInactiveModifiedBorder#904348
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#676E95
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#98C379
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#E5C07B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#f07178
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#E5C07B
  • terminalCursor.background#000000
  • terminalCursor.foreground#E5C07B
  • textLink.activeForeground#babed8
  • textLink.foreground#61AFEF
  • titleBar.activeBackground#1B1E2B
  • titleBar.activeForeground#babed8
  • titleBar.border#424A6C60
  • titleBar.inactiveBackground#1B1E2B
  • titleBar.inactiveForeground#757CA1
  • tree.indentGuidesStroke#4E5579
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#babed8
string#98C379
punctuation, constant.other.symbol#89DDFF
constant.character.escape, text.html constant.character.entity.named#babed8
constant.language.boolean#ff9cac
constant.numeric#F78C6C
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#E06C75
keyword.other#F78C6C
keyword, modifier, variable.language.this, support.type.object, constant.language#89DDFF
entity.name.function, support.function#82AAFF
storage.type, storage.modifier, storage.control#C792EA
support.module, support.node#f07178
support.type, constant.other.key#E5C07B
entity.name.type, entity.other.inherited-class, entity.other#E5C07B
comment#676E95
comment punctuation.definition.comment, string.quoted.docstring#676E95
punctuation#89DDFF
entity.name, entity.name.type.class, support.type, support.class, meta.use#E5C07B
variable.object.property, meta.field.declaration entity.name.function#f07178
meta.definition.method entity.name.function#f07178
meta.function entity.name.function#82AAFF
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#89DDFF
meta.embedded, source.groovy.embedded, meta.template.expression#babed8
entity.name.tag.yaml#f07178
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#f07178
constant.language.json#89DDFF
entity.other.attribute-name.class#E5C07B
entity.other.attribute-name.id#F78C6C
source.css entity.name.tag#E5C07B
support.type.property-name.css#B2CCD6
meta.tag, punctuation.definition.tag#89DDFF
entity.name.tag#f07178
entity.other.attribute-name#C792EA
punctuation.definition.entity.html#babed8
markup.heading#89DDFF
text.html.markdown meta.link.inline, meta.link.reference#f07178
text.html.markdown beginning.punctuation.definition.list#89DDFF
markup.italic#f07178
markup.bold#f07178bold
markup.bold markup.italic, markup.italic markup.bold#f07178italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#98C379
markup.inline.raw.string.markdown#98C379
keyword.other.definition.ini#f07178
entity.name.section.group-title.ini#89DDFF
source.cs meta.class.identifier storage.type#E5C07B
source.cs meta.method.identifier entity.name.function#f07178
source.cs meta.method-call meta.method, source.cs entity.name.function#82AAFF
source.cs storage.type#E5C07B
source.cs meta.method.return-type#E5C07B
source.cs meta.preprocessor#676E95
source.cs entity.name.type.namespace#babed8
meta.jsx.children, SXNested#babed8
support.class.component#E5C07B
source.cpp meta.block variable.other#babed8
source.python meta.member.access.python#f07178
source.python meta.function-call.python, meta.function-call.arguments#82AAFF
meta.block#f07178
entity.name.function.call#82AAFF
source.php support.other.namespace, source.php meta.use support.class#babed8
constant.keyword#89DDFF
entity.name.function#82AAFF
Global settings#babed8
constant.other.placeholder#f07178
markup.deleted#f07178
markup.inserted#98C379
markup.underlineunderline
keyword.control#C678DD
variable.parameter
variable.parameter.function.language.special.self.python#f07178
constant.character.format.placeholder.other.python#F78C6C
markup.quote#89DDFF
markup.fenced_code.block#babed890
punctuation.definition.quote#ff9cac
meta.structure.dictionary.json support.type.property-name.json#C792EA
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E5C07B
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F78C6C
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f07178
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#916b53
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82AAFF
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff9cac
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C792EA
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#98C379