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#202020BF
  • activityBar.activeBorder#1B1D2C
  • activityBar.background#1F1F1F
  • activityBar.foreground#5A5A5A
  • activityBar.inactiveForeground#7b8482
  • activityBarBadge.background#353535
  • activityBarBadge.foreground#F8F8F2
  • badge.background#30302E
  • badge.foreground#F8F8F2
  • breadcrumb.activeSelectionForeground#F8F8F2
  • breadcrumb.background#141414
  • breadcrumb.focusForeground#F8F8F2
  • breadcrumb.foreground#4D4C4B
  • breadcrumbPicker.background#191A21
  • button.background#30302E
  • button.foreground#F8F8F2
  • contrastBorder#050505
  • debugToolBar.background#222222
  • diffEditor.insertedTextBackground#50FA7B20
  • diffEditor.removedTextBackground#F52E0150
  • dropdown.background#202020
  • dropdown.border#050505
  • dropdown.foreground#F8F8F2
  • editor.background#141414
  • editor.findMatchBackground#FFB86C80
  • editor.findMatchHighlightBackground#35353570
  • editor.findRangeHighlightBackground#35353570
  • editor.foldBackground#222222
  • editor.foreground#F8F8F2
  • editor.hoverHighlightBackground#35353585
  • editor.lineHighlightBorder#30302E
  • editor.rangeHighlightBackground#4D4C4B80
  • editor.selectionBackground#30302E
  • editor.selectionHighlightBackground#4D4C4B
  • editor.snippetFinalTabstopHighlightBackground#141414
  • editor.snippetFinalTabstopHighlightBorder#50FA7B
  • editor.snippetTabstopHighlightBackground#141414
  • editor.snippetTabstopHighlightBorder#4D4C4B
  • editor.wordHighlightBackground#35353585
  • editor.wordHighlightStrongBackground#50FA7B50
  • editorCodeLens.foreground#4D4C4B
  • editorError.foreground#F52E01
  • editorGroup.border#353535
  • editorGroup.dropBackground#353535BF
  • editorGroupHeader.tabsBackground#222222
  • editorGutter.addedBackground#50FA7B80
  • editorGutter.deletedBackground#F52E0180
  • editorGutter.modifiedBackground#8BE9FD80
  • editorHoverWidget.background#141414
  • editorHoverWidget.border#686868
  • editorIndentGuide.activeBackground#2E2E2E66
  • editorIndentGuide.background#2E2E2E66
  • editorLineNumber.foreground#4D4C4B
  • editorLink.activeForeground#8BE9FD
  • editorMarkerNavigation.background#222222
  • editorOverviewRuler.addedForeground#50FA7B80
  • editorOverviewRuler.border#050505
  • editorOverviewRuler.currentContentForeground#50FA7B
  • editorOverviewRuler.deletedForeground#F52E0180
  • editorOverviewRuler.errorForeground#F52E0180
  • editorOverviewRuler.incomingContentForeground#68686870
  • editorOverviewRuler.infoForeground#8BE9FD80
  • editorOverviewRuler.modifiedForeground#8BE9FD80
  • editorOverviewRuler.selectionHighlightForeground#FFB86C
  • editorOverviewRuler.warningForeground#FFB86C80
  • editorOverviewRuler.wordHighlightForeground#8BE9FD
  • editorOverviewRuler.wordHighlightStrongForeground#50FA7B
  • editorRuler.foreground#2E2E2E66
  • editorSuggestWidget.background#222222
  • editorSuggestWidget.foreground#F8F8F2
  • editorSuggestWidget.selectedBackground#30302E
  • editorWarning.foreground#8BE9FD
  • editorWhitespace.foreground#2E2E2E66
  • editorWidget.background#222222
  • errorForeground#F52E01
  • extensionButton.prominentBackground#50FA7B90
  • extensionButton.prominentForeground#F8F8F2
  • extensionButton.prominentHoverBackground#50FA7B60
  • focusBorder#4D4C4B
  • foreground#F8F8F2
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#F52E01
  • gitDecoration.ignoredResourceForeground#4D4C4B
  • gitDecoration.modifiedResourceForeground#8BE9FD
  • gitDecoration.untrackedResourceForeground#50FA7B
  • input.050505#4D4C4B
  • input.background#141414
  • input.border#050505
  • input.foreground#F8F8F2
  • inputOption.activeBorder#686868
  • inputValidation.errorBorder#F52E01
  • inputValidation.infoBorder#686868
  • inputValidation.warningBorder#FFB86C
  • list.activeSelectionBackground#30302E
  • list.activeSelectionForeground#F8F8F2
  • list.dropBackground#30302E
  • list.errorForeground#F52E01
  • list.focusBackground#30302E75
  • list.highlightForeground#8BE9FD
  • list.hoverBackground#30302E75
  • list.inactiveSelectionBackground#30302E75
  • list.warningForeground#D1B618
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#FF3100
  • listFilterWidget.outline#4D4C4B
  • merge.currentHeaderBackground#50FA7B90
  • merge.incomingHeaderBackground#68686870
  • notification.background#141414
  • notification.buttonBackground#30302E
  • notification.buttonForeground#F8F8F2
  • notification.buttonHoverBackground#30302E75
  • notification.errorBackground#F52E01
  • notification.errorForeground#F8F8F2
  • notification.foreground#F8F8F2
  • notification.infoBackground#8BE9FD
  • notification.infoForeground#141414
  • notification.warningBackground#FFB86C
  • notification.warningForeground#141414
  • panel.background#141414
  • panel.border#686868
  • panelTitle.activeBorder#686868
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#4D4C4B
  • peekView.border#30302E
  • peekViewEditor.background#141414
  • peekViewEditor.matchHighlightBackground#F1FA8C80
  • peekViewResult.background#30302E
  • peekViewResult.fileForeground#F8F8F2
  • peekViewResult.lineForeground#F8F8F2
  • peekViewResult.matchHighlightBackground#F1FA8C80
  • peekViewResult.selectionBackground#30302E
  • peekViewResult.selectionForeground#F8F8F2
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#4D4C4B
  • peekViewTitleLabel.foreground#F8F8F2
  • pickerGroup.border#686868
  • pickerGroup.foreground#8BE9FD
  • progressBar.background#686868
  • selection.background#762ebe93
  • settings.checkboxBackground#222222
  • settings.checkboxBorder#191A21
  • settings.checkboxForeground#F8F8F2
  • settings.dropdownBackground#222222
  • settings.dropdownBorder#191A21
  • settings.dropdownForeground#F8F8F2
  • settings.headerForeground#F8F8F2
  • settings.modifiedItemForeground#FFB86C
  • settings.modifiedItemIndicator#FFB86C
  • settings.numberInputBackground#222222
  • settings.numberInputBorder#191A21
  • settings.numberInputForeground#F8F8F2
  • settings.textInputBackground#222222
  • settings.textInputBorder#191A21
  • settings.textInputForeground#F8F8F2
  • sideBar.background#222222
  • sideBarSectionHeader.background#353535
  • sideBarSectionHeader.border#202020
  • sideBarTitle.foreground#F8F8F2
  • statusBar.background#191A21
  • statusBar.debuggingBackground#F52E01
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#F8F8F2
  • statusBar.noFolderBackground#191A21
  • statusBar.noFolderForeground#F8F8F2
  • statusBarItem.prominentBackground#F52E01
  • statusBarItem.prominentHoverBackground#FFB86C
  • statusBarItem.remoteBackground#686868
  • statusBarItem.remoteForeground#F8F8F2
  • tab.activeBackground#141414
  • tab.activeBorderTop#35353580
  • tab.activeForeground#F8F8F2
  • tab.border#050505
  • tab.inactiveBackground#222222
  • tab.inactiveForeground#535353
  • terminal.ansiBlack#222222
  • terminal.ansiBlue#BD93F9
  • terminal.ansiBrightBlack#4D4C4B
  • terminal.ansiBrightBlue#686868
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#686868
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#686868
  • terminal.ansiRed#F52E01
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#F1FA8C
  • terminal.background#1C1B1A
  • terminal.foreground#F8F8F2
  • titleBar.activeBackground#222222
  • titleBar.activeForeground#F8F8F2
  • titleBar.inactiveBackground#191A21
  • titleBar.inactiveForeground#4D4C4B
  • walkThrough.embeddedEditorBackground#222222

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta, meta.function-call#FFEA77
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#DCDCAA
meta.return-type, support.class, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#4EC9B0
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#4EC9B0
source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#C586C0
meta.definition.variable.name, support.variable, entity.name.variable#9CDCFE
variable.other.constant, variable.other.enummember#4FC1FF
meta.object-literal.key#9CDCFE
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#CE9178
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#CE9178
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#FF3100
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA
keyword.operator.quantifier.regexp#d7ba7d
constant.character#569cd6
constant.character.escape#d7ba7d
entity.name.label#C8C8C8
meta.property-value.css#C0C0C0
entity.name.function, support.constant.handlebars#28FFCAitalic
support.function#28FFCAitalic
support.type, keyword.control#4FC1FF
meta.return-type, support.class, entity.name.type, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, variable, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#EDEEFB
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#FF82D0
keyword.control#FF82D0
variable, meta.definition.variable.name, support.variable#EDEEFB
variable.other.object.property#FF82D0
variable.other.readwrite#EDEEFB
variable.other.property, variable.other.constant#FF82D0
meta.object-literal.key#28FFCA
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#FFF09A
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#FF82D0
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d16969
keyword.operator.or.regexp, keyword.control.anchor.regexp#DCDCAA
keyword.operator.quantifier.regexp#d7ba7d
constant.character#FF82D0
constant.character.escape#d7ba7d
meta.embedded, source.groovy.embedded#EDEEFB
emphasisitalic
strongbold
header#000080
comment, punctuation.definition.comment#59628Fitalic
constant.language#FF82D0italic
constant.numeric#FFF09A
constant.regexp#646695
entity.name.tag.css#42D0FF
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#42D0FF
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-element.css#28FFCAitalic
invalid#FF603D
markup.underlineunderline
markup.bold#FF82D0bold
markup.heading#FF82D0bold
markup.italicitalic
markup.inserted#cecea8
markup.deleted#FF82D0
markup.changed#FF82D0
beginning.punctuation.definition.quote.markdown#608b4e
beginning.punctuation.definition.list.markdown#6796e6
markup.inline.raw#FF82D0
meta.selector#FF82D0
punctuation.definition.tag#808080
meta.preprocessor#FF82D0
meta.preprocessor.string#FF82D0
meta.preprocessor.numeric#FF82D0
meta.structure.dictionary.key.python#28FFCA
meta.diff.header#FF82D0
storage#FF82D0
storage.modifier#FF82D0italic
keyword.operator.expression.delete#FF82D0italic
string, string.quoted.double.js#dddddd
string.tag#FF82D0
string.value#FF82D0
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#28FFCA
meta.template.expression#c9c9c9
support.type.vendored.property-name, support.type.property-name, variable.other.less, variable.css, variable.scss, source.coffee.embedded#f2f2f2
keyword#FF82D0
keyword.operator#FF82D0
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python, storage.type, variable.language.this#FFEA77
storage.type.function.arrow.js#FF82D0italic
keyword.other.unit#FFF09A
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#FF82D0
support.function.git-rebase#28FFCA
constant.sha.git-rebase#cecea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#EDEEFB
variable.language#FF82D0
meta.var.expr, punctuation.definition.block, keyword.operator.assignment.compound, punctuation.acessor.js, punctuation.separator.comma.js#FFEA77
meta.function.js, meta.brace.round.js#4FC1FF
keyword.operator.assignment#FFEA77
keyword.operator.assignment.compound, keyword.operator.comparison, punctuation.section.property-list.begin.bracket.curly.css#FFEA77
storage.type.function.arrow.js#FF3100
string.quoted.double.html, meta.attribute.class.html#A1C1FF
entity.name.tag#F1AEFF
entity.other.attribute-name#FFEE8Ditalic