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#181818
  • activityBar.border#18181860
  • activityBar.foreground#90A8A8
  • activityBarBadge.background#A4B8CD
  • activityBarBadge.foreground#181818
  • badge.background#18181830
  • badge.foreground#66737F
  • breadcrumb.activeSelectionForeground#66737F
  • breadcrumb.background#181818
  • breadcrumb.focusForeground#90A8A8
  • breadcrumb.foreground#8090A0
  • breadcrumbPicker.background#181818
  • button.background#66737F50
  • contrastBorder#66737F40
  • debugToolBar.background#181818
  • diffEditor.insertedTextBackground#C84E2D15
  • diffEditor.removedTextBackground#A4C9EA20
  • dropdown.background#181818
  • dropdown.border#B3D1D110
  • editor.background#181818
  • editor.findMatchBackground#181818
  • editor.findMatchBorder#66737F
  • editor.findMatchHighlightBackground#66737F93
  • editor.findMatchHighlightBorder#B3D1D130
  • editor.foreground#90A8A8
  • editor.lineHighlightBackground#18181850
  • editor.selectionBackground#A4B8CD30
  • editor.selectionHighlightBackground#66737F6b
  • editor.selectionHighlightBorder#A4B8CDf0
  • editorBracketMatch.background#181818
  • editorBracketMatch.border#D854317f
  • editorCursor.foreground#D85431
  • editorError.foreground#ff000070
  • editorGroup.border#18181830
  • editorGroupHeader.tabsBackground#181818
  • editorGutter.addedBackground#C84E2D60
  • editorGutter.deletedBackground#A4C9EA60
  • editorGutter.modifiedBackground#A4B8CD60
  • editorHoverWidget.background#181818
  • editorHoverWidget.border#B3D1D110
  • editorIndentGuide.activeBackground#483048
  • editorIndentGuide.background#48304870
  • editorInfo.foreground#A4B8CD70
  • editorLineNumber.activeForeground#A4B8CD
  • editorLineNumber.foreground#66737Fc0
  • editorLink.activeForeground#90A8A8
  • editorMarkerNavigation.background#90A8A805
  • editorOverviewRuler.border#181818
  • editorOverviewRuler.errorForeground#ff2b2be7
  • editorOverviewRuler.findMatchForeground#66737F
  • editorOverviewRuler.infoForeground#A4B8CD40
  • editorOverviewRuler.warningForeground#D8543170
  • editorRuler.foreground#483048
  • editorSuggestWidget.background#181818
  • editorSuggestWidget.border#B3D1D110
  • editorSuggestWidget.foreground#90A8A8
  • editorSuggestWidget.highlightForeground#D85431
  • editorSuggestWidget.selectedBackground#66737F20
  • editorWarning.foreground#C84E2D
  • editorWhitespace.foreground#90A8A840
  • editorWidget.background#181818
  • editorWidget.border#D85431
  • editorWidget.resizeBorder#66737F
  • extensionButton.prominentBackground#C84E2D90
  • extensionButton.prominentHoverBackground#A4C9EA
  • focusBorder#B3D1D100
  • gitDecoration.conflictingResourceForeground#D85431
  • gitDecoration.deletedResourceForeground#A4C9EA
  • gitDecoration.ignoredResourceForeground#66737F
  • gitDecoration.modifiedResourceForeground#8090A0
  • gitDecoration.untrackedResourceForeground#A4B8CD
  • input.background#301830
  • input.border#B3D1D110
  • input.foreground#90A8A8
  • input.placeholderForeground#90A8A860
  • inputOption.activeBackground#90A8A830
  • inputOption.activeBorder#90A8A830
  • inputValidation.errorBorder#A4C9EA50
  • inputValidation.infoBorder#A4B8CD50
  • inputValidation.warningBorder#D8543150
  • list.activeSelectionBackground#181818
  • list.activeSelectionForeground#66737F
  • list.focusBackground#301830
  • list.focusForeground#A4B8CD
  • list.highlightForeground#66737F
  • list.hoverBackground#483048
  • list.hoverForeground#B3D1D1
  • list.inactiveSelectionBackground#18181830
  • list.inactiveSelectionForeground#66737F
  • list.warningForeground#D85431
  • listFilterWidget.background#18181830
  • listFilterWidget.noMatchesOutline#18181830
  • listFilterWidget.outline#18181830
  • menu.background#181818f8
  • menu.border#66737F50
  • menu.foreground#90A8A8
  • menu.selectionBackground#301830
  • menu.selectionBorder#18181830
  • menu.selectionForeground#90A8A8
  • menu.separatorBackground#90A8A8
  • menubar.selectionBackground#301830
  • menubar.selectionBorder#66737F50
  • menubar.selectionForeground#90A8A8
  • minimap.background#181818
  • minimapGutter.addedBackground#A4C9EA
  • minimapGutter.deletedBackground#D85431
  • minimapGutter.modifiedBackground#C84E2D
  • minimapSlider.activeBackground#C84E2Db0
  • minimapSlider.background#C84E2D80
  • minimapSlider.hoverBackground#C84E2Da0
  • notificationLink.foreground#66737F
  • notifications.background#181818
  • notifications.foreground#90A8A8
  • panel.background#181818
  • panel.border#18181860
  • panelTitle.activeBorder#66737F
  • panelTitle.activeForeground#B3D1D1
  • panelTitle.inactiveForeground#90A8A8
  • peekView.border#18181830
  • peekViewEditor.background#90A8A805
  • peekViewEditor.matchHighlightBackground#66737F50
  • peekViewEditorGutter.background#90A8A805
  • peekViewResult.background#90A8A805
  • peekViewResult.matchHighlightBackground#66737F50
  • peekViewResult.selectionBackground#66737F70
  • peekViewTitle.background#90A8A805
  • peekViewTitleDescription.foreground#90A8A860
  • pickerGroup.foreground#66737F
  • progressBar.background#66737F
  • scrollbar.shadow#18181800
  • scrollbarSlider.activeBackground#66737Fcc
  • scrollbarSlider.background#66737Fbb
  • scrollbarSlider.hoverBackground#66737Fee
  • selection.background#66737F
  • settings.checkboxBackground#181818
  • settings.checkboxForeground#90A8A8
  • settings.dropdownBackground#181818
  • settings.dropdownForeground#90A8A8
  • settings.headerForeground#66737F
  • settings.modifiedItemIndicator#66737F
  • settings.numberInputBackground#181818
  • settings.numberInputForeground#90A8A8
  • settings.textInputBackground#181818
  • settings.textInputForeground#90A8A8
  • sideBar.background#181818
  • sideBar.border#66737F50
  • sideBar.foreground#A4B8CD
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#18181860
  • sideBarSectionHeader.foreground#A4B8CD
  • sideBarTitle.foreground#90A8A8
  • statusBar.background#181818
  • statusBar.border#18181860
  • statusBar.debuggingBackground#D85431
  • statusBar.debuggingForeground#B3D1D1
  • statusBar.foreground#DDDACB
  • statusBar.noFolderBackground#181818
  • statusBarItem.hoverBackground#66737F20
  • statusBarItem.remoteBackground#66737F
  • statusBarItem.remoteForeground#181818
  • tab.activeBackground#66737F50
  • tab.activeBorder#66737F
  • tab.activeForeground#B3D1D1
  • tab.activeModifiedBorder#66737F
  • tab.border#181818
  • tab.inactiveBackground#66737F20
  • tab.inactiveForeground#90A8A8af
  • tab.unfocusedActiveBackground#66737F40
  • tab.unfocusedActiveBorder#66737F
  • tab.unfocusedActiveForeground#90A8A8
  • tab.unfocusedInactiveBackground#66737F10
  • tab.unfocusedInactiveForeground#90A8A87f
  • terminal.ansiBlack#181818
  • terminal.ansiBlue#A4B8CD
  • terminal.ansiBrightBlack#66737F
  • terminal.ansiBrightBlue#A4B8CD
  • terminal.ansiBrightCyan#C0D8F0
  • terminal.ansiBrightGreen#C84E2D
  • terminal.ansiBrightMagenta#D85431
  • terminal.ansiBrightRed#A4C9EA
  • terminal.ansiBrightWhite#B3D1D1
  • terminal.ansiBrightYellow#D85431
  • terminal.ansiCyan#C0D8F0
  • terminal.ansiGreen#C84E2D
  • terminal.ansiMagenta#D85431
  • terminal.ansiRed#A4C9EA
  • terminal.ansiWhite#B3D1D1
  • terminal.ansiYellow#D85431
  • terminalCursor.background#181818
  • terminalCursor.foreground#D85431
  • textLink.activeForeground#90A8A8
  • textLink.foreground#66737F
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#90A8A8
  • titleBar.border#18181860
  • titleBar.inactiveBackground#181818
  • titleBar.inactiveForeground#66737F
  • tree.indentGuidesStroke#483048
  • widget.shadow#18181830

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#15a170
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssbold underline
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#C84E2D
constant.other.php#D85431
constant.other.color#8cc5c5
invalid, invalid.illegal#A4C9EA
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#f9f9f9italic
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#8090A0
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#00ffff
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#5a5353
text.html.derivative#A7A8AF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#4ac06a
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#D85431
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#8090A0
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#A4B8CD
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#C0D8F0
support.other.variable, string.other.link, markup.table#90A8A8
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#D85431
variable.parameter.function.language.special, variable.parameter#A4C9EA
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#C84E2D
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#D85431
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#8090A0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#A4C9EA
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#A4B8CDitalic
entity.other.attribute-name, support.function#D85431
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#11a1a1italic bold
source.scss keyword.control#D85431
markup.inserted#C84E2D
markup.deleted#A4C9EA
markup.changed#D85431
string.regexp#C0D8F0
constant.character.escape#C0D8F0
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#90A8A8italic
support.type.property-name.json#90A8A8
text.html.markdown, punctuation.definition.list_item.markdown#90A8A8
text.html.markdown markup.inline.raw.markdown#D85431
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#66737F50
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#8090A0bold
markup.underline#A4B8CDunderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#66737F50
markup.quoteitalic
string.other.link.description.title.markdown#D85431
constant.other.reference.link.markdown#D85431
markup.raw.block#D85431
punctuation.definition.raw.markdown, punctuation.definition.markdown#C0D8F0
variable.language.fenced.markdown#66737F
meta.separator#A7A8AFbold
token.info-token#66737F
token.warn-token#D85431
token.error-token#FF293B
token.debug-token#C0D8F0