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#00a3a3
  • activityBar.activeBorder#55ffff
  • activityBar.activeFocusBorder#ffffff
  • activityBar.background#555555
  • activityBar.border#ffffff
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff
  • activityBarBadge.background#00a3a3
  • activityBarBadge.foreground#ffff55
  • badge.background#00a8ac
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#007777
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#ffff00
  • breadcrumbPicker.background#222222
  • button.background#555555
  • button.foreground#ffffff
  • button.hoverBackground#00a8ac
  • checkbox.background#ffffff
  • checkbox.border#000000
  • checkbox.foreground#000000
  • debugExceptionWidget.background#051336
  • debugExceptionWidget.border#ab395b
  • debugToolBar.background#051336
  • diffEditor.insertedTextBackground#31958a55
  • diffEditor.removedTextBackground#892f4688
  • dropdown.background#181f2f
  • editor.background#0000aa
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#ffff55
  • editor.findMatchHighlightBackground#000000a0
  • editor.foldBackground#00000020
  • editor.foreground#93c4eb
  • editor.lineHighlightBackground#00000060
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#00ccff8a
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBackground#ffffff28
  • editor.selectionHighlightBorder#ffffff28
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketPairGuide.activeBackground1#ffff55
  • editorBracketPairGuide.activeBackground2#ffff55
  • editorBracketPairGuide.activeBackground3#ffff55
  • editorBracketPairGuide.activeBackground4#ffff55
  • editorBracketPairGuide.activeBackground5#ffff55
  • editorBracketPairGuide.activeBackground6#ffff55
  • editorBracketPairGuide.background1#ffffff60
  • editorBracketPairGuide.background2#ffffff60
  • editorBracketPairGuide.background3#ffffff60
  • editorBracketPairGuide.background4#ffffff60
  • editorBracketPairGuide.background5#ffffff60
  • editorBracketPairGuide.background6#ffffff60
  • editorCursor.background#ffffff
  • editorCursor.foreground#ffffff
  • editorGroup.border#2b2b4a
  • editorGroup.dropBackground#25375daa
  • editorGroupHeader.tabsBackground#1c1c2a
  • editorGutter.addedBackground#00aa00
  • editorGutter.background#00000060
  • editorGutter.deletedBackground#aa0000
  • editorGutter.foldingControlForeground#fff28c
  • editorGutter.modifiedBackground#ffff55
  • editorHoverWidget.background#000c38
  • editorHoverWidget.border#004c18
  • editorIndentGuide.activeBackground1#ffffff60
  • editorIndentGuide.background1#ffffff20
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#ffffff60
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#ab395b
  • editorMarkerNavigationWarning.background#5b7e7a
  • editorRuler.foreground#ffffff20
  • editorStickyScroll.background#3333ff
  • editorStickyScrollHover.background#555555
  • editorWhitespace.foreground#555555
  • editorWidget.background#262641
  • extensionButton.prominentBackground#5f8b3b
  • extensionButton.prominentHoverBackground#5f8b3bbb
  • focusBorder#ffffff
  • foreground#ffffff
  • icon.foreground#ffffff
  • input.background#000000
  • input.border#777777
  • input.foreground#ffffff
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#1d4a87
  • inputValidation.errorBackground#a22d44
  • inputValidation.errorBorder#ab395b
  • inputValidation.infoBackground#051336
  • inputValidation.infoBorder#384078
  • inputValidation.warningBackground#5b7e7a
  • inputValidation.warningBorder#5b7e7a
  • list.activeSelectionBackground#00a3a3
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#041d52
  • list.focusBackground#08286b
  • list.highlightForeground#0063a5
  • list.hoverBackground#061940
  • list.inactiveSelectionBackground#00a3a3
  • list.inactiveSelectionForeground#ffffff
  • minimap.background#00000020
  • minimap.errorHighlight#ff0000
  • minimap.findMatchHighlight#000000a0
  • minimap.selectionHighlight#ffff00a0
  • minimap.warningHighlight#ff00ff
  • minimapGutter.addedBackground#00aa00
  • minimapGutter.deletedBackground#aa0000
  • minimapGutter.modifiedBackground#ffff55
  • minimapSlider.activeBackground#ffffff40
  • minimapSlider.background#ffffff20
  • minimapSlider.hoverBackground#ffffff40
  • panel.background#222222
  • panel.border#ffffff
  • panel.dropBorder#ff0000
  • panelInput.border#ffffff
  • panelSection.border#ffffff
  • panelSection.dropBackground#ff0000
  • panelSectionHeader.background#555555
  • panelSectionHeader.border#ffffff
  • panelSectionHeader.foreground#ffffff
  • panelTitle.activeBorder#55ffff
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#cccccc
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#eeeeee33
  • peekViewResult.background#060621
  • peekViewResult.matchHighlightBackground#eeeeee44
  • peekViewTitle.background#10192c
  • pickerGroup.border#596f99
  • pickerGroup.foreground#596f99
  • progressBar.background#0063a5
  • scrollbar.shadow#515e91aa
  • scrollbarSlider.activeBackground#ffffff40
  • scrollbarSlider.background#ffffff20
  • scrollbarSlider.hoverBackground#ffffff40
  • sideBar.background#000084
  • sideBar.border#ffffff
  • sideBarSectionHeader.background#000084
  • sideBarSectionHeader.foreground#ffffff
  • statusBar.background#00a3a3
  • statusBar.border#ffffff
  • statusBar.debuggingBackground#10192c
  • statusBar.noFolderBackground#000084
  • statusBarItem.activeBackground#ff0000
  • statusBarItem.prominentBackground#0063a5
  • statusBarItem.prominentHoverBackground#0063a5dd
  • tab.activeBackground#00a3a3
  • tab.activeForeground#ffffff
  • tab.border#2b2b4a
  • tab.inactiveBackground#555555
  • tab.inactiveForeground#ffffff
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0000aa
  • terminal.ansiBrightBlack#555555
  • terminal.ansiBrightBlue#5555ff
  • terminal.ansiBrightCyan#55ffff
  • terminal.ansiBrightGreen#55ff55
  • terminal.ansiBrightMagenta#ff55ff
  • terminal.ansiBrightRed#ff5555
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff55
  • terminal.ansiCyan#00aaaa
  • terminal.ansiGreen#00aa00
  • terminal.ansiMagenta#aa00aa
  • terminal.ansiRed#aa0000
  • terminal.ansiWhite#aaaaaa
  • terminal.ansiYellow#aa5500
  • terminal.background#000000
  • terminal.findMatchBackground#ffff55a0
  • terminal.findMatchHighlightBackground#ffff55a0
  • terminal.foreground#aaaaaa
  • terminal.selectionBackground#00a3a3
  • terminal.selectionForeground#ffffff
  • terminal.tab.activeBorder#55ffff
  • terminalCommandDecoration.defaultBackground#00a3a3
  • terminalCommandDecoration.errorBackground#aa0000
  • terminalCommandDecoration.successBackground#00aa00
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#ffffff
  • titleBar.activeBackground#10192c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#6688CC—
comment#384887—
string#22AA44—
constant.numeric#F280D0—
constant.language#F280D0—
constant.character, constant.other#F280D0—
variable—
keyword#225588—
storage#225588
storage.type#9966B8italic
entity.name.class, entity.name.type#FFEEBBunderline
entity.other.inherited-class#DDBB88italic underline
entity.name.function#DDBB88
variable.parameter#2277FFitalic
entity.name.tag#225588
entity.other.attribute-name#DDBB88
support.function#9966B8
support.constant#9966B8
support.type, support.class#9966B8italic
support.other.variable—
invalid#F8F8F0
invalid.deprecated#F8F8F0—
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#DC322F
markup.changed#CB4B16
markup.inserted#219186—
markup.quote#22AA44—
markup.bold, markup.italic#22AA44—
markup.inline.raw#9966B8
markup.heading.setext#DDBB88
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
comment#808080—
string#FFFF00—
keyword#5ED8F0—
keyword.control#5ED8F0—
storage#5ED8F0—
storage.type#5ED8F0—
constant.numeric#FF00FF—
entity.name.type#FFFFFF—
entity.name.class#FFFFFF—
support.type#FFFFFF—
support.class#FFFFFF—
entity.name.function#00FF00—
variable#FFFFFF—
comment, comment.block, comment.block.documentation, comment.line, constant, constant.character, constant.character.escape, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.other, constant.regexp, constant.rgb-value, emphasis, entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.section, entity.name.selector, entity.name.tag, entity.name.type, entity.other, entity.other.attribute-name, entity.other.inherited-class, invalid, invalid.deprecated, invalid.illegal, keyword, keyword.control, keyword.operator, keyword.operator.new, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.other, markup, markup.bold, markup.changed, markup.deleted, markup.heading, markup.inline.raw, markup.inserted, markup.italic, markup.list, markup.list.numbered, markup.list.unnumbered, markup.other, markup.quote, markup.raw, markup.underline, markup.underline.link, meta, meta.block, meta.cast, meta.class, meta.function, meta.function-call, meta.preprocessor, meta.return-type, meta.selector, meta.tag, meta.type.annotation, meta.type, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.separator, punctuation.separator.continuation, punctuation.terminator, storage, storage.modifier, storage.type, string, string.interpolated, string.other, string.quoted, string.quoted.double, string.quoted.other, string.quoted.single, string.quoted.triple, string.regexp, string.unquoted, strong, support, support.class, support.constant, support.function, support.other, support.type, support.type.property-name, support.variable, variable, variable.language, variable.name, variable.other, variable.other.readwrite, variable.parameter—
comment#8681C9—
punctuation.definition.comment#8681C9—
string#FFFF55—
meta.embedded.assembly#FFFF55—
keyword - keyword.operator#FFFFFF—
keyword.control#FFFFFF—
storage#FFFFFF—
storage.type#FFFFFF—
constant.numeric#FF85A7—
entity.name.type#59DDF5—
entity.name.class#59DDF5—
support.type#59DDF5—
support.class#59DDF5—
entity.name.function#52DD7C—
support.function#52DD7C—
variable#59DDF5—
entity.name.variable#59DDF5—
comment, comment.block, comment.block.documentation, comment.line, constant, constant.character, constant.character.escape, constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.other, constant.regexp, constant.rgb-value, emphasis, entity, entity.name, entity.name.class, entity.name.function, entity.name.method, entity.name.section, entity.name.selector, entity.name.tag, entity.name.type, entity.other, entity.other.attribute-name, entity.other.inherited-class, invalid, invalid.deprecated, invalid.illegal, keyword, keyword.control, keyword.operator, keyword.operator.new, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.other, markup, markup.bold, markup.changed, markup.deleted, markup.heading, markup.inline.raw, markup.inserted, markup.italic, markup.list, markup.list.numbered, markup.list.unnumbered, markup.other, markup.quote, markup.raw, markup.underline, markup.underline.link, meta, meta.block, meta.cast, meta.class, meta.function, meta.function-call, meta.preprocessor, meta.return-type, meta.selector, meta.tag, meta.type.annotation, meta.type, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.separator, punctuation.separator.continuation, punctuation.terminator, storage, storage.modifier, storage.type, string, string.interpolated, string.other, string.quoted, string.quoted.double, string.quoted.other, string.quoted.single, string.quoted.triple, string.regexp, string.unquoted, strong, support, support.class, support.constant, support.function, support.other, support.type, support.type.property-name, support.variable, variable, variable.language, variable.name, variable.other, variable.other.readwrite, variable.parameter—
keyword.all.QB64PE, keywords.all.QB64PE, keyword.QB64PE#E2FFFF—
graphics.QB64PE, entity.name.function.QB64PE#DF77FF—
sound.QB64PE#FFBB00—
keyword.control.QB64PE#95EBF1—
debug.QB64PE, metacommand.QB64PE#FF85A7—
entity.name.tag#FFFFFF—
userfunctions.QB64PE#52DD7C—
entity.name.tag.css#55FF55—
entity.other.attribute-name#55FFFF—
string.quoted.double#FFFF55—
comment.line.double-slash#55FFFF—
variable.parameter#FFFF55—
entity.other.attribute-name#55FF55—
variable.other.readwrite#59DDF5—
support.constant.property-value#93C4EB—
support.constant.value#93C4EB—
support.constant.font-name.css#93C4EB—
support.constant.color.w3c-extended-color-name.css#93C4EB—
support.constant.color.w3c-standard-color-name.css#93C4EB—
variable.other.QB64PE#FEFFE6
keyword.other.unit, meta.link.inline, storage.modifier.async.js#FF85A7—
markup.heading.markdown, markup.heading.setext#55FF55—
markup.fenced_code.block, punctuation.definition.list, markup.list#FFFF55—