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#ffa700
  • activityBar.activeBorder#ffa700
  • activityBar.activeFocusBorder#626262
  • activityBar.background#626262
  • activityBar.border#626262
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff
  • activityBarBadge.background#000027
  • activityBarBadge.foreground#ffa700
  • badge.background#ffa700
  • badge.foreground#000027
  • 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#000027
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#55ce55
  • editor.findMatchHighlightBackground#000000a0
  • editor.foldBackground#00000020
  • editor.foreground#D6D6D6
  • editor.lineHighlightBackground#00314e
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#00ccff8a
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBackground#ffffff28
  • editor.selectionHighlightBorder#ffffff28
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketPairGuide.activeBackground1#ffa700
  • editorBracketPairGuide.activeBackground2#ffa700
  • editorBracketPairGuide.activeBackground3#ffa700
  • editorBracketPairGuide.activeBackground4#ffa700
  • editorBracketPairGuide.activeBackground5#ffa700
  • editorBracketPairGuide.activeBackground6#ffa700
  • editorBracketPairGuide.background1#457693
  • editorBracketPairGuide.background2#457693
  • editorBracketPairGuide.background3#457693
  • editorBracketPairGuide.background4#457693
  • editorBracketPairGuide.background5#457693
  • editorBracketPairGuide.background6#457693
  • editorCursor.background#ffffff
  • editorCursor.foreground#ffffff
  • editorGroup.border#626262
  • editorGroup.dropBackground#25375daa
  • editorGroupHeader.tabsBackground#1c1c2a
  • editorGutter.addedBackground#55ce55
  • editorGutter.background#000027
  • editorGutter.deletedBackground#d8624e
  • editorGutter.foldingControlForeground#ffa700
  • editorGutter.modifiedBackground#ffa700
  • editorHoverWidget.background#000c38
  • editorHoverWidget.border#626262
  • editorIndentGuide.activeBackground1#457693
  • editorIndentGuide.background1#ffffff20
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#d8d8d8
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#060621
  • editorMarkerNavigationError.background#ab395b
  • editorMarkerNavigationWarning.background#5b7e7a
  • editorRuler.foreground#ffffff20
  • editorStickyScroll.background#000040
  • editorStickyScrollHover.background#00314e
  • editorWhitespace.foreground#555555
  • editorWidget.background#262641
  • extensionButton.prominentBackground#5f8b3b
  • extensionButton.prominentHoverBackground#5f8b3bbb
  • focusBorder#626262
  • 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#d8624e
  • minimapGutter.addedBackground#00aa00
  • minimapGutter.deletedBackground#aa0000
  • minimapGutter.modifiedBackground#ffff55
  • minimapSlider.activeBackground#ffffff40
  • minimapSlider.background#ffffff20
  • minimapSlider.hoverBackground#ffffff40
  • panel.background#222222
  • panel.border#626262
  • panel.dropBorder#ff0000
  • panelInput.border#ffffff
  • panelSection.border#626262
  • panelSection.dropBackground#ff0000
  • panelSectionHeader.background#555555
  • panelSectionHeader.border#ffffff
  • panelSectionHeader.foreground#ffffff
  • panelTitle.activeBorder#ffa700
  • 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#000027
  • sideBar.border#626262
  • sideBarSectionHeader.background#000027
  • sideBarSectionHeader.foreground#FFFFFF
  • statusBar.background#000027
  • statusBar.border#626262
  • statusBar.debuggingBackground#10192c
  • statusBar.noFolderBackground#000084
  • statusBarItem.activeBackground#00314e
  • statusBarItem.prominentBackground#0063a5
  • statusBarItem.prominentHoverBackground#0063a5dd
  • tab.activeBackground#626262
  • tab.activeForeground#d8d8d8
  • tab.border#626262
  • tab.inactiveBackground#555555
  • tab.inactiveForeground#aaaaaa
  • 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#ffa700
  • 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#55ce55
comment#384887
string#ffa700
constant.numeric#F280D0
constant.language#F280D0
constant.character, constant.other#F280D0
variable
keyword#457693
storage#457693
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#457693
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#55ce55italic
markup.deleted#DC322F
markup.changed#CB4B16
markup.inserted#219186
markup.quote#ffa700
markup.bold, markup.italic#ffa700
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#ffa700
keyword#457693
keyword.control#457693
storage#457693
storage.type#457693
constant.numeric#d8624e
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#626262
punctuation.definition.comment#626262
string#ffa700
meta.embedded.assembly#55ce55
keyword - keyword.operator#FFFFFF
keyword.control#FFFFFF
storage#FFFFFF
storage.type#FFFFFF
constant.numeric#d8624e
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#55ce55
entity.name.tag#FFFFFF
userfunctions.QB64PE#52DD7C
entity.name.tag.css#55FF55
entity.other.attribute-name#55FFFF
string.quoted.double#ffa700
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#55ce55
markup.heading.markdown, markup.heading.setext#55FF55
markup.fenced_code.block, punctuation.definition.list, markup.list#FFFF55

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...