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#04172a
  • 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#be203a
  • checkbox.border#D72342
  • contrastBorder#04172a
  • descriptionForeground#fff
  • diffEditor.border#1e4367
  • diffEditor.diagonalFill#bdbcbc
  • diffEditor.insertedLineBackground#58734cfa
  • diffEditor.insertedTextBackground#36900cfa
  • diffEditor.insertedTextBorder#81f74afa
  • diffEditor.removedLineBackground#f03e3eb0
  • diffEditor.removedTextBackground#ed7575
  • diffEditor.removedTextBorder#c92a2a
  • diffEditorGutter.insertedLineBackground#36900cfa
  • diffEditorGutter.removedLineBackground#ed7575
  • dropdown.background#1e4367
  • dropdown.listBackground#1e4367
  • editor.background#082949
  • editor.hoverHighlightBackground#d7234171
  • editor.lineHighlightBackground#d7234196
  • editor.selectionBackground#d7234196
  • editor.selectionForeground#fff
  • editor.selectionHighlightBackground#d7234171
  • editor.selectionHighlightBorder#ffffff00
  • editor.wordHighlightBackground#D72342
  • editor.wordHighlightBorder#ffffff00
  • editor.wordHighlightStrongBackground#D72342
  • editorBracketMatch.background#d72341d5
  • editorBracketMatch.border#d72341d5
  • editorGroup.border#d72341a6
  • editorGroup.dropBackground#d72341a6
  • editorGroup.emptyBackground#04172a
  • editorGroup.focusedEmptyBorder#0d3f72
  • editorGroupHeader.border#04172a
  • editorGroupHeader.noTabsBackground#d72341a6
  • editorGroupHeader.tabsBackground#04172a
  • editorGroupHeader.tabsBorder#04172a
  • editorLineNumber.activeForeground#ffffff
  • editorPane.background#d72341d5
  • editorWidget.background#1e4267
  • editorWidget.border#1e4367
  • focusBorder#ffffff00
  • gitDecoration.addedResourceForeground#51ff00
  • gitDecoration.conflictingResourceForeground#ff0000
  • gitDecoration.deletedResourceForeground#ff0000
  • gitDecoration.ignoredResourceForeground#ffd000
  • gitDecoration.modifiedResourceForeground#67aff6
  • gitDecoration.untrackedResourceForeground#51ff00
  • icon.foreground#ffffff
  • input.background#1e4367
  • input.border#1e4367
  • input.foreground#fff
  • inputOption.activeBackground#1e4367
  • inputOption.activeBorder#fff
  • inputOption.hoverBackground#2c5781
  • list.activeSelectionBackground#d72341d5
  • list.activeSelectionForeground#fff
  • list.dropBackground#d72341a6
  • list.errorForeground#ff0000
  • list.focusBackground#d72341d5
  • list.focusOutline#D72342
  • list.highlightForeground#fff
  • 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#04172aa6
  • 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#04172aa8
  • peekViewEditor.matchHighlightBackground#d7234171
  • peekViewEditor.matchHighlightBorder#d7234171
  • peekViewEditorGutter.background#04172a
  • peekViewResult.background#04172a
  • peekViewResult.fileForeground#fff
  • peekViewResult.lineForeground#fff
  • peekViewResult.matchHighlightBackground#d7234171
  • peekViewResult.selectionBackground#d7234171
  • peekViewResult.selectionForeground#fff
  • progressBar.background#D72342
  • sash.hoverBorder#D72342
  • scrollbarSlider.activeBackground#105090
  • scrollbarSlider.background#04172a
  • scrollbarSlider.hoverBackground#0a355fce
  • sideBar.background#082949
  • sideBar.border#d72341a6
  • sideBar.dropBackground#d72341a6
  • sideBar.foreground#fff
  • sideBarSectionHeader.background#04172a
  • sideBarSectionHeader.border#03101d
  • sideBarSectionHeader.foreground#fff
  • sideBarTitle.foreground#fff
  • sideBySideEditor.horizontalBorder#d72341d5
  • sideBySideEditor.verticalBorder#d72341d5
  • statusBar.background#04172a
  • statusBar.foreground#ffffff
  • tab.activeBackground#d72341a6
  • tab.activeBorderTop#D72342
  • tab.hoverBackground#d72341d5
  • tab.hoverBorder#D72342
  • tab.inactiveBackground#082949
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#d4334ea6
  • tab.unfocusedActiveBorder#D72342
  • tab.unfocusedInactiveForeground#fff
  • toolbar.activeBackground#D72342
  • toolbar.hoverBackground#D72342
  • toolbar.hoverOutline#D72342
  • widget.shadow#d723416d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ffffffb7
comment.block#ffffffb7
constant#BE84FF
contant.character.scape#BE84FF
constant.language#BE84FF
constant.numeric#9c49fa
declaration.tag#ff0000
entity.name.section#A6E22E
entity.name.function#A6E22E
entity.name.tag#d72341
entity.name.type#A6E22E
entity.other.attribute-name#A6E22E
entity.other.inherited-class#A6E22E
entity.other#66D9EF
keyword#d72341
keyword.operator#d72341
punctuation.definition.tag.begin#fff
punctuation.definition.tag.end#fff
punctuation.separator#fff
punctuation.definition.string.begin#E6DB74
punctuation.definition.string.end#E6DB74
keyword.function#d72341
storage#A6E22E
storage.type#66D9EF
storage.modifier#A6E22E
string#E6DB74
string.other#fff
string.quoted.single#E6DB74
string.quoted.double#E6DB74
string.quoted.raw#A6E22E
variable#fff
variable.parameter#FD971Fitalic
variable.language#d72341
source#fff
support.function#66D9EF
support.type#A6E22E
support.constant#BE84FF
meta.attribute#A6E22E
meta.paragraph#A6E22E
markup.heading#66D9EF
markup.list#fff
markup.list.numbered#fff
markup.bold#fffbold
go.sum#66D9EF
text.html#ffffff
Wawandco VScode Theme by Julian De Leon - VS Code Theme