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.activeBackground#04172a
  • activityBar.activeBorder#D72342
  • activityBar.activeFocusBorder#D72342
  • activityBar.background#082949
  • activityBar.border#d72341a6
  • activityBar.dropBorder#d72341a6
  • activityBar.foreground#d72341d5
  • activityBar.inactiveForeground#fff
  • activityBarBadge.background#d72341d5
  • activityBarBadge.foreground#fff
  • badge.background#d72341d5
  • badge.foreground#fff
  • button.background#D72342
  • button.foreground#fff
  • button.hoverBackground#D72342
  • checkbox.border#D72342
  • contrastBorder#04172a
  • descriptionForeground#fff
  • diffEditor.border#1e4367
  • diffEditor.diagonalFill#bdbcbc
  • diffEditor.insertedLineBackground#6bc644af
  • diffEditor.insertedTextBackground#91ff5efa
  • diffEditor.insertedTextBorder#81f74afa
  • diffEditor.removedLineBackground#f03e3eb0
  • diffEditor.removedTextBackground#f03e3eb0
  • diffEditor.removedTextBorder#c92a2a
  • diffEditorGutter.insertedLineBackground#91ff5efa
  • diffEditorGutter.removedLineBackground#f03e3ed8
  • dropdown.background#fff
  • dropdown.border#D72342
  • dropdown.listBackground#fff
  • editor.background#ffffff
  • editor.foreground#67aff6
  • editor.hoverHighlightBackground#d7234171
  • editor.lineHighlightBackground#67aff6c7
  • editor.selectionBackground#67aff6c7
  • editor.selectionForeground#082949
  • editor.selectionHighlightBackground#67aff6c7
  • editor.selectionHighlightBorder#ffffff00
  • editor.wordHighlightBackground#67aff6c7
  • editor.wordHighlightBorder#ffffff00
  • editor.wordHighlightStrongBackground#276099f8
  • editorBracketHighlight.foreground1#fff
  • editorBracketMatch.background#007efb
  • editorBracketMatch.border#004991
  • editorCodeLens.foreground#ffffff
  • editorGhostText.foreground#ffffff
  • editorGroup.border#d72341a6
  • editorGroup.dropBackground#d72341a6
  • editorGroup.emptyBackground#04172a
  • editorGroup.focusedEmptyBorder#0d3f72
  • editorGroupHeader.border#04172a
  • editorGroupHeader.noTabsBackground#d72341a6
  • editorGroupHeader.tabsBackground#082949
  • editorGroupHeader.tabsBorder#04172a
  • editorHoverWidget.foreground#1e4367
  • editorHoverWidget.highlightForeground#d72341
  • editorLineNumber.activeForeground#D72342
  • editorPane.background#d72341d5
  • editorSuggestWidget.background#F2F2F2
  • editorSuggestWidget.border#1e4367
  • editorSuggestWidget.foreground#1e4367
  • editorSuggestWidget.highlightForeground#d72341d5
  • editorSuggestWidget.selectedBackground#d72341d5
  • editorWarning.foreground#ffd000
  • editorWidget.background#F2F2F2
  • editorWidget.border#1e4367
  • editorWidget.foreground#1e4367
  • focusBorder#ffffff00
  • gitDecoration.addedResourceForeground#51ff00
  • gitDecoration.conflictingResourceForeground#ff0000
  • gitDecoration.deletedResourceForeground#ff0000
  • gitDecoration.ignoredResourceForeground#ffd000
  • gitDecoration.modifiedResourceForeground#67aff6
  • gitDecoration.untrackedResourceForeground#51ff00
  • icon.foreground#D72342
  • input.background#fff
  • input.border#1e4367
  • input.foreground#1e4367
  • inputOption.activeBackground#1e4367
  • inputOption.activeBorder#fff
  • inputOption.hoverBackground#2c5781
  • list.activeSelectionBackground#d72341d5
  • list.activeSelectionForeground#fff
  • list.dropBackground#d72341a6
  • list.errorForeground#D72342
  • list.focusBackground#d72341d5
  • list.focusOutline#D72342
  • list.highlightForeground#D72342
  • list.hoverBackground#d72341d5
  • list.hoverForeground#fff
  • list.inactiveFocusBackground#d72341a1
  • list.inactiveFocusOutline#D72342
  • list.inactiveSelectionBackground#d72341a1
  • list.invalidItemForeground#D72342
  • list.warningForeground#ffd000c2
  • listFilterWidget.noMatchesOutline#ff0000
  • listFilterWidget.outline#D72342
  • merge.currentContentBackground#23d756a0
  • merge.currentHeaderBackground#23d756
  • merge.incomingContentBackground#d72341a0
  • merge.incomingHeaderBackground#d72341
  • minimap.background#e9e8e8
  • minimap.errorHighlight#D72342
  • minimap.findMatchHighlight#D72342
  • minimap.foregroundOpacity#fff
  • minimap.selectionHighlight#D72342
  • minimap.selectionOccurrenceHighlight#D72342
  • minimap.warningHighlight#ffd000c2
  • minimapGutter.addedBackground#51ff00
  • minimapGutter.deletedBackground#ff0000
  • minimapGutter.modifiedBackground#67aff6
  • minimapSlider.activeBackground#0c3f72be
  • minimapSlider.background#08284998
  • minimapSlider.hoverBackground#0a355fbb
  • peekView.border#04172a
  • peekViewEditor.background#e2e2e2
  • peekViewEditor.matchHighlightBackground#d7234171
  • peekViewEditor.matchHighlightBorder#d7234171
  • peekViewEditorGutter.background#e2e2e2
  • peekViewResult.background#e2e2e2
  • peekViewResult.fileForeground#04172a
  • peekViewResult.lineForeground#04172a
  • peekViewResult.matchHighlightBackground#d7234171
  • peekViewResult.selectionBackground#d7234171
  • peekViewResult.selectionForeground#04172a
  • peekViewTitle.background#e2e2e2
  • progressBar.background#D72342
  • sash.hoverBorder#D72342
  • scrollbarSlider.activeBackground#105090
  • scrollbarSlider.background#08284998
  • scrollbarSlider.hoverBackground#0a355fce
  • sideBar.background#fff
  • sideBar.border#d72341a6
  • sideBar.dropBackground#d72341a6
  • sideBar.foreground#082949
  • sideBarSectionHeader.background#fff
  • sideBarSectionHeader.border#04172a
  • sideBarSectionHeader.foreground#04172a
  • sideBarTitle.foreground#082949
  • sideBySideEditor.horizontalBorder#d72341d5
  • sideBySideEditor.verticalBorder#d72341d5
  • statusBar.background#04172a
  • statusBar.foreground#ffffff
  • tab.activeBackground#d72341a6
  • tab.activeBorderTop#D72342
  • tab.activeForeground#fff
  • tab.border#d72341a6
  • tab.hoverBackground#d72341d5
  • tab.hoverBorder#D72342
  • tab.inactiveBackground#082949
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#d4334ea6
  • tab.unfocusedActiveBorder#D72342
  • tab.unfocusedInactiveForeground#fff
  • terminal.ansiBlue#67aff6
  • terminal.foreground#1e4267
  • toolbar.activeBackground#D72342
  • toolbar.hoverBackground#e2e2e2
  • toolbar.hoverOutline#e2e2e2
  • widget.shadow#d723416d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ACA498
comment.block#ACA498
constant#BE84FF
contant.character.scape#BE84FF
constant.language#BE84FF
constant.numeric#9c49fa
declaration.tag#ff0000
entity.name.section#A6E22E
entity.name.function#186EB1
entity.name.tag#994493
entity.name.type#F0813B
entity.other.attribute-name#F0813B
entity.other.inherited-class#F0813B
entity.other#66D9EF
keyword#994493
keyword.operator#514D48
punctuation.definition.tag.begin#514D48
punctuation.definition.tag.end#514D48
punctuation.separator#514D48
punctuation.definition.string.begin#514D48
punctuation.definition.string.end#514D48
keyword.function#994493
storage#A6E22E
storage.type#66D9EF
storage.modifier#A6E22E
string#219B5C
string.other#219B5C
string.quoted.single#219B5C
string.quoted.double#219B5C
string.quoted.raw#FD971F
variable#d72341
variable.parameter#FD971Fitalic
variable.language#d72341
source#514D48
support.function#186EB1
support.type#A6E22E
support.constant#BE84FF
meta.attribute#A6E22E
meta.paragraph#A6E22E
markup.heading#66D9EF
markup.list#1e4267
markup.list.numbered#fff
markup.bold#fffbold
go.sum#66D9EF