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#0D1117
  • activityBar.border#0D111760
  • activityBar.foreground#E0DDCF
  • activityBarBadge.background#A4C3B2
  • activityBarBadge.foreground#0D1117
  • badge.background#0D111730
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.background#0D1117
  • breadcrumb.focusForeground#E0DDCF
  • breadcrumb.foreground#5DABB0
  • breadcrumbPicker.background#0D1117
  • button.background#FFFFFF50
  • contrastBorder#FFFFFF40
  • debugToolBar.background#0D1117
  • diffEditor.insertedTextBackground#7CC2AB15
  • diffEditor.removedTextBackground#FFFFFF20
  • dropdown.background#0D1117
  • dropdown.border#F1F0EA10
  • editor.background#0D1117
  • editor.findMatchBackground#0D1117
  • editor.findMatchBorder#FFFFFF
  • editor.findMatchHighlightBackground#FFFFFF93
  • editor.findMatchHighlightBorder#F1F0EA30
  • editor.foreground#E0DDCF
  • editor.lineHighlightBackground#0D111750
  • editor.selectionBackground#A4C3B230
  • editor.selectionHighlightBackground#FFFFFF6b
  • editor.selectionHighlightBorder#A4C3B2f0
  • editorBracketMatch.background#0D1117
  • editorBracketMatch.border#7CC2AB7f
  • editorCursor.foreground#7CC2AB
  • editorError.foreground#FFFFFF70
  • editorGroup.border#0D111730
  • editorGroupHeader.tabsBackground#0D1117
  • editorGutter.addedBackground#7CC2AB60
  • editorGutter.deletedBackground#FFFFFF60
  • editorGutter.modifiedBackground#A4C3B260
  • editorHoverWidget.background#0D1117
  • editorHoverWidget.border#F1F0EA10
  • editorIndentGuide.activeBackground#474448
  • editorIndentGuide.background#47444870
  • editorInfo.foreground#A4C3B270
  • editorLineNumber.activeForeground#A4C3B2
  • editorLineNumber.foreground#FFFFFFc0
  • editorLink.activeForeground#E0DDCF
  • editorMarkerNavigation.background#E0DDCF05
  • editorOverviewRuler.border#0D1117
  • editorOverviewRuler.errorForeground#FFFFFF40
  • editorOverviewRuler.findMatchForeground#FFFFFF
  • editorOverviewRuler.infoForeground#A4C3B240
  • editorOverviewRuler.warningForeground#7CC2AB70
  • editorRuler.foreground#474448
  • editorSuggestWidget.background#0D1117
  • editorSuggestWidget.border#F1F0EA10
  • editorSuggestWidget.foreground#E0DDCF
  • editorSuggestWidget.highlightForeground#7CC2AB
  • editorSuggestWidget.selectedBackground#FFFFFF20
  • editorWarning.foreground#7CC2AB
  • editorWhitespace.foreground#E0DDCF40
  • editorWidget.background#0D1117
  • editorWidget.border#7CC2AB
  • editorWidget.resizeBorder#FFFFFF
  • extensionButton.prominentBackground#7CC2AB90
  • extensionButton.prominentHoverBackground#FFFFFF
  • focusBorder#F1F0EA00
  • gitDecoration.conflictingResourceForeground#7CC2AB
  • gitDecoration.deletedResourceForeground#FFFFFF
  • gitDecoration.ignoredResourceForeground#FFFFFF
  • gitDecoration.modifiedResourceForeground#5DABB0
  • gitDecoration.untrackedResourceForeground#A4C3B2
  • input.background#534B52
  • input.border#F1F0EA10
  • input.foreground#E0DDCF
  • input.placeholderForeground#E0DDCF60
  • inputOption.activeBackground#E0DDCF30
  • inputOption.activeBorder#E0DDCF30
  • inputValidation.errorBorder#FFFFFF50
  • inputValidation.infoBorder#A4C3B250
  • inputValidation.warningBorder#7CC2AB50
  • list.activeSelectionBackground#0D1117
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#534B52
  • list.focusForeground#A4C3B2
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#474448
  • list.hoverForeground#F1F0EA
  • list.inactiveSelectionBackground#0D111730
  • list.inactiveSelectionForeground#FFFFFF
  • list.warningForeground#7CC2AB
  • listFilterWidget.background#0D111730
  • listFilterWidget.noMatchesOutline#0D111730
  • listFilterWidget.outline#0D111730
  • menu.background#0D1117f8
  • menu.border#FFFFFF50
  • menu.foreground#E0DDCF
  • menu.selectionBackground#534B52
  • menu.selectionBorder#0D111730
  • menu.selectionForeground#E0DDCF
  • menu.separatorBackground#E0DDCF
  • menubar.selectionBackground#534B52
  • menubar.selectionBorder#FFFFFF50
  • menubar.selectionForeground#E0DDCF
  • minimap.background#0D1117
  • minimapGutter.addedBackground#FFFFFF
  • minimapGutter.deletedBackground#7CC2AB
  • minimapGutter.modifiedBackground#7CC2AB
  • minimapSlider.activeBackground#7CC2ABb0
  • minimapSlider.background#7CC2AB80
  • minimapSlider.hoverBackground#7CC2ABa0
  • notificationLink.foreground#FFFFFF
  • notifications.background#0D1117
  • notifications.foreground#E0DDCF
  • panel.background#0D1117
  • panel.border#0D111760
  • panelTitle.activeBorder#FFFFFF
  • panelTitle.activeForeground#F1F0EA
  • panelTitle.inactiveForeground#E0DDCF
  • peekView.border#0D111730
  • peekViewEditor.background#E0DDCF05
  • peekViewEditor.matchHighlightBackground#FFFFFF50
  • peekViewEditorGutter.background#E0DDCF05
  • peekViewResult.background#E0DDCF05
  • peekViewResult.matchHighlightBackground#FFFFFF50
  • peekViewResult.selectionBackground#FFFFFF70
  • peekViewTitle.background#E0DDCF05
  • peekViewTitleDescription.foreground#E0DDCF60
  • pickerGroup.foreground#FFFFFF
  • progressBar.background#FFFFFF
  • scrollbar.shadow#0D111700
  • scrollbarSlider.activeBackground#FFFFFFcc
  • scrollbarSlider.background#FFFFFFbb
  • scrollbarSlider.hoverBackground#FFFFFFee
  • selection.background#FFFFFF
  • settings.checkboxBackground#0D1117
  • settings.checkboxForeground#E0DDCF
  • settings.dropdownBackground#0D1117
  • settings.dropdownForeground#E0DDCF
  • settings.headerForeground#FFFFFF
  • settings.modifiedItemIndicator#FFFFFF
  • settings.numberInputBackground#0D1117
  • settings.numberInputForeground#E0DDCF
  • settings.textInputBackground#0D1117
  • settings.textInputForeground#E0DDCF
  • sideBar.background#0D1117
  • sideBar.border#FFFFFF50
  • sideBar.foreground#A4C3B2
  • sideBarSectionHeader.background#0D1117
  • sideBarSectionHeader.border#0D111760
  • sideBarSectionHeader.foreground#A4C3B2
  • sideBarTitle.foreground#E0DDCF
  • statusBar.background#534B52
  • statusBar.border#0D111760
  • statusBar.debuggingBackground#7CC2AB
  • statusBar.debuggingForeground#F1F0EA
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#0D1117
  • statusBarItem.hoverBackground#FFFFFF20
  • statusBarItem.remoteBackground#FFFFFF
  • statusBarItem.remoteForeground#0D1117
  • tab.activeBackground#FFFFFF50
  • tab.activeBorder#FFFFFF
  • tab.activeForeground#F1F0EA
  • tab.activeModifiedBorder#FFFFFF
  • tab.border#0D1117
  • tab.inactiveBackground#FFFFFF20
  • tab.inactiveForeground#E0DDCFaf
  • tab.unfocusedActiveBackground#FFFFFF40
  • tab.unfocusedActiveBorder#FFFFFF
  • tab.unfocusedActiveForeground#E0DDCF
  • tab.unfocusedInactiveBackground#FFFFFF10
  • tab.unfocusedInactiveForeground#E0DDCF7f
  • terminal.ansiBlack#0D1117
  • terminal.ansiBlue#A4C3B2
  • terminal.ansiBrightBlack#FFFFFF
  • terminal.ansiBrightBlue#A4C3B2
  • terminal.ansiBrightCyan#F5CB5C
  • terminal.ansiBrightGreen#7CC2AB
  • terminal.ansiBrightMagenta#7CC2AB
  • terminal.ansiBrightRed#FFFFFF
  • terminal.ansiBrightWhite#F1F0EA
  • terminal.ansiBrightYellow#7CC2AB
  • terminal.ansiCyan#F5CB5C
  • terminal.ansiGreen#7CC2AB
  • terminal.ansiMagenta#7CC2AB
  • terminal.ansiRed#FFFFFF
  • terminal.ansiWhite#F1F0EA
  • terminal.ansiYellow#7CC2AB
  • terminalCursor.background#0D1117
  • terminalCursor.foreground#7CC2AB
  • textLink.activeForeground#E0DDCF
  • textLink.foreground#FFFFFF
  • titleBar.activeBackground#0D1117
  • titleBar.activeForeground#E0DDCF
  • titleBar.border#0D111760
  • titleBar.inactiveBackground#0D1117
  • titleBar.inactiveForeground#FFFFFF
  • tree.indentGuidesStroke#474448
  • widget.shadow#0D111730

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#7CC2AB
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssitalic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#7CC2AB
constant.other.php#7CC2AB
constant.other.color#F1F0EA
invalid, invalid.illegal#FFFFFF
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#A7A8AF
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#5DABB0
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js#E0DDCF
punctuation.definition, string.quoted.single.scss#A7A8AF
keyword.controlbold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html#6D6F7C
text.html.derivative#A7A8AF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#E0DDCF
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#7CC2AB
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#5DABB0
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control#A4C3B2
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#F5CB5C
support.other.variable, string.other.link, markup.table#E0DDCF
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#7CC2AB
variable.parameter.function.language.special, variable.parameter#FFFFFF
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js#7CC2AB
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html#7CC2AB
support.type#B2CCD6
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#5DABB0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FFFFFF
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#A4C3B2italic
entity.other.attribute-name, support.function#7CC2AB
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key#E0DDCF
source.scss keyword.control#7CC2AB
markup.inserted#7CC2AB
markup.deleted#FFFFFF
markup.changed#7CC2AB
string.regexp#F5CB5C
constant.character.escape#F5CB5C
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#E0DDCFitalic
support.type.property-name.json#E0DDCF
text.html.markdown, punctuation.definition.list_item.markdown#E0DDCF
text.html.markdown markup.inline.raw.markdown#7CC2AB
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#FFFFFF50
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#5DABB0bold
markup.underline#A4C3B2underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#FFFFFF50
markup.quoteitalic
string.other.link.description.title.markdown#7CC2AB
constant.other.reference.link.markdown#7CC2AB
markup.raw.block#7CC2AB
punctuation.definition.raw.markdown, punctuation.definition.markdown#F5CB5C
variable.language.fenced.markdown#FFFFFF
meta.separator#A7A8AFbold
token.info-token#FFFFFF
token.warn-token#7CC2AB
token.error-token#FF293B
token.debug-token#F5CB5C