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—
Wawandco VScode Theme by Julian De Leon - VS Code Theme