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.activeBorder#0078d4
  • activityBar.background#181818
  • activityBar.border#ffffff15
  • activityBar.foreground#d7d7d7
  • activityBar.inactiveForeground#ffffff80
  • activityBarBadge.background#0078d4
  • activityBarBadge.foreground#ffffff
  • badge.background#0078d4
  • badge.foreground#ffffff
  • button.background#0078d4
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#0078d4e6
  • button.secondaryBackground#FFFFFF0F
  • button.secondaryForeground#BCBEC4
  • button.secondaryHoverBackground#ffffff15
  • checkbox.background#313131
  • checkbox.border#ffffff1f
  • debugToolBar.background#181818
  • descriptionForeground#8b949e
  • diffEditor.insertedLineBackground#23863633
  • diffEditor.insertedTextBackground#2386364d
  • diffEditor.removedLineBackground#da363333
  • diffEditor.removedTextBackground#da36334d
  • dropdown.background#313131
  • dropdown.border#ffffff1f
  • dropdown.foreground#BCBEC4
  • dropdown.listBackground#313131
  • editor.background#1E1F22
  • editor.findMatchBackground#9e6a03
  • editor.foreground#BCBEC4
  • editor.inactiveSelectionBackground#3A3D41
  • editor.selectionHighlightBackground#ADD6FF26
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#ffffff15
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#0078d4
  • editorIndentGuide.activeBackground#707070
  • editorIndentGuide.background#404040
  • editorInlayHint.background#8b949e33
  • editorInlayHint.foreground#8b949e
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#8b949e
  • editorLineNumber.activeForeground#BCBEC4
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#010409
  • editorWidget.background#1E1F22
  • errorForeground#f85149
  • focusBorder#0078d4
  • foreground#BCBEC4
  • icon.foreground#BCBEC4
  • input.background#2a2a2a
  • input.border#ffffff1f
  • input.foreground#BCBEC4
  • input.placeholderForeground#ffffff79
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#BCBEC4
  • list.activeSelectionBackground#323232
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383B3D
  • menu.background#1E1F22
  • menu.border#454545
  • menu.foreground#BCBEC4
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#1E1F22
  • notificationCenterHeader.foreground#BCBEC4
  • notifications.background#1E1F22
  • notifications.border#ffffff15
  • notifications.foreground#BCBEC4
  • panel.background#181818
  • panel.border#ffffff15
  • panelInput.border#ffffff15
  • panelTitle.activeBorder#0078d4
  • panelTitle.activeForeground#BCBEC4
  • panelTitle.inactiveForeground#8b949e
  • peekViewEditor.background#1E1F22
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#1E1F22
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#ffffff15
  • pickerGroup.foreground#8b949e
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0078d4
  • quickInput.background#1E1F22
  • quickInput.foreground#BCBEC4
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#6e768187
  • scrollbarSlider.background#6e768133
  • scrollbarSlider.hoverBackground#6e768145
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#ffffff1f
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#181818
  • sideBar.border#ffffff15
  • sideBar.foreground#BCBEC4
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#ffffff15
  • sideBarSectionHeader.foreground#BCBEC4
  • sideBarTitle.foreground#BCBEC4
  • statusBar.background#181818
  • statusBar.border#ffffff15
  • statusBar.debuggingBackground#0078d4
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#0078d4
  • statusBar.foreground#BCBEC4
  • statusBar.noFolderBackground#1E1F22
  • statusBarItem.focusBorder#0078d4
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0078d4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1E1F22
  • tab.activeBorder#1E1F22
  • tab.activeBorderTop#0078d4
  • tab.activeForeground#ffffff
  • tab.border#ffffff15
  • tab.hoverBackground#1E1F22
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#ffffff80
  • tab.lastPinnedBorder#ccc3
  • tab.unfocusedActiveBorder#1E1F22
  • tab.unfocusedActiveBorderTop#ffffff15
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.foreground#BCBEC4
  • terminal.inactiveSelectionBackground#3A3D41
  • terminal.tab.activeBorder#0078d4
  • textBlockQuote.background#010409
  • textBlockQuote.border#ffffff14
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#40A6FF
  • textLink.foreground#40A6FF
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#BCBEC4
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#1E1F22
  • titleBar.inactiveForeground#8b949e
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#ffffff0f
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#BCBEC4
emphasisitalic
strongbold
header#000080
comment, string.quoted.docstring#7A7E85
constant.language#d4b878
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#2AACB8
constant.regexp#646695
entity.name.tag#d4b878
entity.name.tag.css#D5B778
entity.other.attribute-name#BCBEC4
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.scss#D5B778
invalid#FA6675
markup.underlineunderline
markup.bold#d4b878bold
markup.heading#d4b878bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#2AACB8
markup.deleted#6AAB73
markup.changed#d4b878
punctuation.definition.quote.begin.markdown#7A7E85
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#6AAB73
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#d4b878
meta.preprocessor.string#6AAB73
meta.preprocessor.numeric#2AACB8
meta.structure.dictionary.key.python#BCBEC4
meta.diff.header#d4b878
storage#d4b878
storage.type#d4b878
storage.modifier, keyword.operator.noexcept#d4b878
string, meta.embedded.assembly#6AAB73
string.tag#6AAB73
string.value#6AAB73
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#d4b878
meta.template.expression#BCBEC4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#BCBEC4
keyword#d4b878
keyword.control#d4b878
keyword.operator#BCBEC4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#d4b878
keyword.other.unit#2AACB8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#d4b878
support.function.git-rebase#BCBEC4
constant.sha.git-rebase#2AACB8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#BCBEC4
variable.language#d4b878
variable.argument.css, punctuation.definition.tag, entity.name.tag, support.function.misc, meta.function.variable.css, meta.property-value.css support.function, meta.selector.css, entity.other.attribute-name.css#D5B778
keyword.other.unit, punctuation.separator.key-value.html, meta.tag.attributes keyword.operator.assignment#6AAB73
entity.other.attribute-name, support.type.property-name.css#BABABA
support.type.property-name.json#C77DBB
meta.tag.custom entity.name.tag.html#d4b878
comment.block.documentation, comment.block.javadoc#5F826B
entity.name.function.ruby#fc9800
constant.language.symbol.ruby#88a6af
entity.name.type.class.ruby#ffc56d
variable.ruby#d5af1e
constant.language.symbol.hashkey.ruby#88a6af
variable.parameter.function.ruby#d5af1e
entity.name.function.member, entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#ffc56d
keyword.control.ruby, keyword.control.def.ruby, keyword.control.class.ruby#cf8e6d
entity.other.inherited-class.ruby, meta.class.ruby entity.other.inherited-class, constant.other.ruby entity.other.inherited-class.ruby, keyword.other.special-method.ruby entity.other.inherited-class.ruby, source.ruby entity.other.inherited-class#fefffaitalic
constant.language.ruby entity.other.inherited-class.ruby#fefffaitalic bold
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#88a6af
support.class, support.type, 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#d4b878
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#d4b878
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#d4b878
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#BCBEC4
variable.other.constant, variable.other.enummember#C77DBB
meta.object-literal.key#BCBEC4
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#6AAB73
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#6AAB73
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#88a6af
keyword.operator.quantifier.regexp#D5B778
constant.character, constant.other.option#d4b878
constant.character.escape#D5B778
entity.name.label#C8C8C8