Skip to main content
Coding Theme

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
Multicolor Pigeon Theme by js2me - VS Code Theme