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.background#222223
  • activityBar.border#222223
  • activityBar.foreground#E6E6E6
  • activityBarBadge.background#19f9d8
  • activityBarBadge.foreground#211f25
  • badge.background#6476a4
  • badge.foreground#0c0c0c
  • button.background#45A9F9
  • button.foreground#FFFFFF
  • button.hoverBackground#676B79
  • diffEditor.insertedTextBackground#024502a8
  • diffEditor.removedTextBackground#ac274f66
  • editor.background#2b2831
  • editor.findMatchBackground#B084EB90
  • editor.findMatchHighlightBackground#ad97d778
  • editor.foreground#E6E6E6
  • editor.inactiveSelectionBackground#ad97d778
  • editor.lineHighlightBackground#c375e11a
  • editor.selectionBackground#ad97d778
  • editor.selectionHighlightBackground#ad97d778
  • editor.wordHighlightBackground#503f629c
  • editor.wordHighlightStrongBackground#7965c870
  • editorBracketMatch.border#19f9d8
  • editorCodeLens.foreground#ad97d778
  • editorCursor.foreground#FF4B82
  • editorError.border#c74646
  • editorError.foreground#c74646
  • editorGutter.addedBackground#87e280
  • editorGutter.deletedBackground#e28080
  • editorGutter.modifiedBackground#e2c480
  • editorHoverWidget.background#31353a
  • editorOverviewRuler.addedForeground#e0c4ff
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#FF4B82
  • editorOverviewRuler.errorForeground#FF4B82
  • editorOverviewRuler.infoForeground#6FC1FF
  • editorOverviewRuler.modifiedForeground#FFCC95
  • editorOverviewRuler.warningForeground#FFCC95
  • editorRuler.foreground#B084EB60
  • editorSuggestWidget.selectedBackground#e0c4ff99
  • editorWarning.border#FFCC95
  • editorWarning.foreground#FFCC95
  • editorWhitespace.foreground#4E5260
  • editorWidget.background#2a2c2d
  • editorWidget.border#373B41
  • errorForeground#FF4B82
  • extensionButton.prominentBackground#45A9F9
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#676B79
  • list.activeSelectionBackground#292A2B
  • list.activeSelectionForeground#e0c4ff
  • list.focusBackground#292A2B
  • list.focusForeground#e0c4ff
  • list.highlightForeground#6FC1FF
  • list.hoverBackground#292A2B
  • list.hoverForeground#CDCDCD
  • list.inactiveSelectionBackground#292A2B
  • list.inactiveSelectionForeground#e0c4ff
  • merge.currentContentBackground#B084EB40
  • merge.currentHeaderBackground#B084EB90
  • merge.incomingContentBackground#FFB86C40
  • merge.incomingHeaderBackground#45A9F990
  • progressBar.background#B084EB
  • scrollbar.shadow#222223
  • scrollbarSlider.activeBackground#757575
  • scrollbarSlider.background#373B4199
  • scrollbarSlider.hoverBackground#757575
  • sideBar.background#211f25
  • sideBar.border#222223
  • sideBar.foreground#BBBBBB
  • statusBar.activeBackground#ff8dec38
  • statusBar.background#724873
  • statusBar.debuggingBackground#B084EB
  • statusBar.debuggingForeground#E6E6E6
  • statusBar.foreground#E6E6E6
  • statusBar.noFolderBackground#211f25
  • statusBar.noFolderForeground#E6E6E6
  • tab.activeBackground#4a364a
  • tab.activeBorder#ffffff00
  • tab.activeForeground#ffffff
  • tab.inactiveBackground#211f25
  • tab.inactiveForeground#E6E6E6
  • terminal.ansiBlue#45A9F9
  • terminal.ansiBrightBlack#757575
  • terminal.ansiBrightBlue#6FC1FF
  • terminal.ansiBrightCyan#BCAAFE
  • terminal.ansiBrightGreen#e0c4ff
  • terminal.ansiBrightMagenta#FF9AC1
  • terminal.ansiBrightRed#FF2C6D
  • terminal.ansiBrightWhite#E6E6E6
  • terminal.ansiBrightYellow#FFCC95
  • terminal.ansiCyan#B084EB
  • terminal.ansiGreen#19f9d8
  • terminal.ansiMagenta#FF75B5
  • terminal.ansiRed#FF2C6D
  • terminal.ansiWhite#CDCDCD
  • terminal.ansiYellow#FFB86C
  • terminalCursor.background#E6E6E6
  • terminalCursor.foreground#FF4B82
  • titleBar.activeBackground#211f25
  • titleBar.activeForeground#E6E6E6
  • titleBar.inactiveBackground#211f25
  • titleBar.inactiveForeground#E6E6E6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#888888
emphasisitalic
strongbold
header#000080
comment#51823d
constant.language#c76c95
constant.numeric#b5cea8
constant.regexp#646695
entity.name.tag#c76c95
entity.name.tag.css#d7ba7d
entity.other.attribute-name#3fc995
entity.other.attribute-name.class.css#d7ba7d
entity.other.attribute-name.class.mixin.css#d7ba7d
entity.other.attribute-name.id.css#d7ba7d
entity.other.attribute-name.parent-selector.css#d7ba7d
entity.other.attribute-name.pseudo-class.css#d7ba7d
entity.other.attribute-name.pseudo-element.css#d7ba7d
source.css.less entity.other.attribute-name.id#d7ba7d
entity.other.attribute-name.attribute.scss#d7ba7d
entity.other.attribute-name.scss#d7ba7d
invalid#f44747
markup.underlineunderline
markup.bold#c76c95bold
markup.heading#c76c95bold
markup.italicitalic
markup.inserted#b5cea8
markup.deleted#b97349
markup.changed#c76c95
beginning.punctuation.definition.quote.markdown#51823d
beginning.punctuation.definition.list.markdown#6796e6
markup.inline.raw#b97349
meta.selector#d7ba7d
punctuation.definition.tag#808080
meta.preprocessor#c76c95
meta.preprocessor.string#b97349
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#b3b3b3
meta.diff.header#c76c95
storage#c76c95
storage.type#c76c95
storage.modifier#c76c95
string#b97349
string.tag#b97349
string.value#b97349
string.regexp#9c8d8d
punctuation.definition.template-expression.begin.ts#c76c95
punctuation.definition.template-expression.end.ts#c76c95
support.type.vendored.property-name#b3b3b3
support.type.property-name#b3b3b3
variable.css#b3b3b3
variable.scss#b3b3b3
variable.other.less#b3b3b3
keyword#c76c95
keyword.control#c76c95
keyword.operator#d3628c
keyword.operator.new#c76c95
invalid.illegal
invalid.deprecated
keyword.operator.expression#c76c95
keyword.other.unit#b5cea8
punctuation.section.embedded.begin.metatag.php#c76c95
punctuation.section.embedded.end.metatag.php#c76c95
support.function.git-rebase#b3b3b3
constant.sha.git-rebase#b5cea8
storage.modifier.import.java#888888
storage.modifier.package.java#888888
variable.language#c76c95
entity.name.function#3fc995
support.function#3fc995
support.constant.handlebars#3fc995
meta.return-type#5d99bd
support.class#5d99bd
support.type#5d99bd
entity.name.type#5d99bd
entity.name.class#5d99bd
storage.type.cs#5d99bd
storage.type.generic.cs#5d99bd
storage.type.modifier.cs#5d99bd
storage.type.variable.cs#5d99bd
storage.type.annotation.java#5d99bd
storage.type.generic.java#5d99bd
storage.type.java#5d99bd
storage.type.object.array.java#5d99bd
storage.type.primitive.array.java#5d99bd
storage.type.primitive.java#5d99bd
storage.type.token.java#5d99bd
storage.type.groovy#5d99bd
storage.type.annotation.groovy#5d99bd
storage.type.parameters.groovy#5d99bd
storage.type.generic.groovy#5d99bd
storage.type.object.array.groovy#5d99bd
storage.type.primitive.array.groovy#5d99bd
storage.type.primitive.groovy#5d99bd
meta.return.type#5d99bd
meta.type.cast.expr#5d99bd
meta.type.new.expr#5d99bd
support.constant.math#5d99bd
support.constant.dom#5d99bd
support.constant.json#5d99bd
entity.other.inherited-class#5d99bd
keyword.control#d29758
variable#b3b3b3
meta.definition.variable.name#b3b3b3
support.variable#b3b3b3
meta.object-literal.key#b3b3b3
meta.object-literal.key entity.name.function#b3b3b3
support.constant.property-value#b97349
support.constant.font-name#b97349
support.constant.media-type#b97349
support.constant.media#b97349
constant.other.color.rgb-value#b97349
constant.other.rgb-value#b97349
support.constant.color#b97349