Skip to main content
CodingTheme

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#2B2B2B
  • activityBar.foreground#a9b7c6
  • activityBarBadge.background#3875d6
  • badge.background#2B2B2B
  • badge.foreground#a9b7c6
  • breadcrumb.activeSelectionForeground#eee
  • breadcrumb.focusForeground#eee
  • breadcrumb.foreground#bbbbbb
  • button.background#2B2B2B
  • button.foreground#a9b7c6
  • checkbox.background#2B2B2B
  • checkbox.foreground#a9b7c6
  • contrastBorder#444
  • descriptionForeground#bbbbbb
  • dropdown.foreground#a9b7c6
  • editor.background#2B2B2B
  • editor.foreground#a9b7c6
  • editor.lineHighlightBackground#333
  • editor.lineHighlightBorder#333
  • editor.selectionBackground#ADD6FF26
  • editor.selectionHighlightBackground#ADf6FF26
  • editorCodeLens.foreground#444
  • editorCursor.background#000
  • editorCursor.foreground#ffffff
  • editorGroup.border#444
  • editorGroupHeader.tabsBackground#444
  • editorGroupHeader.tabsBorder#444
  • editorIndentGuide.activeBackground#939393
  • editorIndentGuide.background#555
  • editorLineNumber.activeForeground#000
  • editorLineNumber.foreground#606366
  • editorRuler.foreground#444
  • editorSuggestWidget.background#363636
  • editorSuggestWidget.foreground#a9b7c6
  • editorSuggestWidget.selectedBackground#222
  • editorWidget.background#363636
  • editorWidget.foreground#a9b7c6
  • extensionButton.prominentForeground#bbb
  • foreground#bbbbbb
  • gitDecoration.addedResourceForeground#629755
  • gitDecoration.conflictingResourceForeground#DA4939
  • gitDecoration.modifiedResourceForeground#BBB529
  • gitDecoration.untrackedResourceForeground#789667
  • icon.foreground#bbbbbb
  • input.background#2B2B2B
  • input.foreground#a9b7c6
  • input.placeholderForeground#767676
  • list.activeSelectionBackground#2B61CD
  • list.errorForeground#DA4939
  • list.focusBackground#2B61CD
  • list.focusForeground#fff
  • list.hoverBackground#555555
  • list.inactiveSelectionBackground#1d3a69e3
  • list.invalidItemForeground#DA4939
  • list.warningForeground#BBB529
  • listFilterWidget.background#333
  • listFilterWidget.outline#DA4939
  • menu.background#2B2B2B
  • menu.foreground#a9b7c6
  • notification.foreground#bbb
  • panelTitle.activeForeground#bbb
  • pickerGroup.foreground#a9b7c6
  • scrollbarSlider.background#363636
  • scrollbarSlider.foreground#a9b7c6
  • settings.headerForeground#a9b7c6
  • settings.numberInputBorder#CECECE
  • settings.textInputBorder#CECECE
  • sideBar.background#363636
  • sideBar.border#444
  • sideBar.foreground#BBBBBB
  • sideBarSectionHeader.background#2B2B2B
  • sideBarTitle.foreground#BBBBBB
  • statusBar.background#363636
  • statusBar.border#444
  • statusBar.debuggingBackground#363636
  • statusBar.debuggingBorder#444
  • statusBar.debuggingForeground#BBBBBB
  • statusBar.foreground#BBBBBB
  • statusBar.noFolderBackground#363636
  • statusBar.noFolderBorder#444
  • statusBar.noFolderForeground#BBBBBB
  • tab.activeForeground#BBBBBB
  • tab.border#444
  • tab.inactiveBackground#363636
  • tab.inactiveForeground#BBBBBB
  • tab.unfocusedInactiveForeground#444
  • terminal.ansiBlack#333333
  • terminal.ansiBlue#6A7EC8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#819aff
  • terminal.ansiBrightCyan#66D9EF
  • terminal.ansiBrightGreen#A6E22E
  • terminal.ansiBrightMagenta#AE81FF
  • terminal.ansiBrightRed#f92672
  • terminal.ansiBrightWhite#f8f8f2
  • terminal.ansiBrightYellow#e2e22e
  • terminal.ansiCyan#56ADBC
  • terminal.ansiGreen#86B42B
  • terminal.ansiMagenta#8C6BC8
  • terminal.ansiRed#C16160
  • terminal.ansiWhite#e3e3dd
  • terminal.ansiYellow#B3B42B
  • terminal.foreground#bbb
  • textPreformat.foreground#789667
  • textSeparator.foreground#789667
  • tree.indentGuidesStroke#555
  • walkThrough.embeddedEditorBackground#363636

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#000000ff
emphasisitalic
strongbold
meta.diff.header#CC7832
comment#777
constant.language#CC7832
constant.numeric#6897BB
constant.regexp#811f3f
entity.name.tag#E8BF6A
entity.name.selector#800000
entity.other.attribute-name#cc7832ff
invalid#cd3131
markup.underlineunderline
markup.bold#CC7832bold
markup.heading#A9B7C6bold
markup.italicitalic
markup.inserted#09885a
markup.deleted#a31515
markup.changed#A9B7C6
punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown#A9B7C6
markup.inline.raw#A9B7C6
markup#bbb
markup.inline.raw#A9B7C6
punctuation.definition.tag#A9B7C6
meta.preprocessor#0000ff
meta.preprocessor.string#629755
meta.preprocessor.numeric#09885a
meta.structure.dictionary.key.python#A9B7C6
storage#0000ff
storage.type#cc7832
storage.modifier#0000ff
string.comment.buffered.block.pug, string.quoted.pug, string.interpolated.pug, string.unquoted.plain.in.yaml, string.unquoted.plain.out.yaml, string.unquoted.block.yaml, string.quoted.single.yaml, string.quoted.double.xml, string.quoted.single.xml, string.unquoted.cdata.xml, string.quoted.double.html, string.quoted.single.html, string.unquoted.html, string.quoted.single.handlebars, string.quoted.double.handlebars#A5C261
string.regexp#811f3f
string#789667
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#A9B7C6
meta.template.expression#000000
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#CC7832bold
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#a9b7c6
support.type.property-name.json#a9b7c6
keyword#CC7832
keyword.control#CC7832
keyword.operator#a9b7c6
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#CC7832
keyword.other.unit#629755
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#cc7832bold
support.function.git-rebase#A9B7C6
constant.sha.git-rebase#09885a
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#000000
variable.language#CC7832
keyword.operator.new#CC7832
keyword.control#CC7832
entity.name.function#ffc662
variable.language#CC7832
storage.modifier#CC7832
entity.name.tag#E8BF6A
punctuation.definition.tag#E8BF6A
entity.other.attribute-name#BABABA
string.quoted.double.html#A5C261
support.type.property-name#a9b7c6
support.constant.property-value#CC7832
variable#a9b7c6
entity.other.attribute-name, entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#bababa
entity.other.attribute-name.class.css#ffc662
variable.scss#CC7832bold

Shiki preview

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

Loading...