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#2f2f2f
  • activityBar.border#28282860
  • activityBar.foreground#b9b9b9
  • activityBarBadge.background#00A5E1
  • activityBarBadge.foreground#282828
  • badge.background#28282830
  • badge.foreground#008BB6
  • breadcrumb.activeSelectionForeground#008BB6
  • breadcrumb.background#282828
  • breadcrumb.focusForeground#000000
  • breadcrumb.foreground#00BAFF
  • breadcrumbPicker.background#282828
  • button.background#008BB650
  • contrastBorder#008BB640
  • debugToolBar.background#282828
  • diffEditor.insertedTextBackground#0061E115
  • diffEditor.removedTextBackground#8000FF20
  • dropdown.background#282828
  • dropdown.border#77777710
  • editor.background#282828
  • editor.findMatchBackground#282828
  • editor.findMatchBorder#008BB6
  • editor.findMatchHighlightBackground#008BB693
  • editor.findMatchHighlightBorder#77777730
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#28282850
  • editor.selectionBackground#00A5E130
  • editor.selectionHighlightBackground#008BB66b
  • editor.selectionHighlightBorder#00A5E1f0
  • editorBracketMatch.background#282828
  • editorBracketMatch.border#006EFF7f
  • editorCursor.foreground#00A5E1
  • editorError.foreground#8000FF70
  • editorGroup.border#28282830
  • editorGroupHeader.tabsBackground#282828
  • editorGutter.addedBackground#0061E160
  • editorGutter.deletedBackground#8000FF60
  • editorGutter.modifiedBackground#00A5E160
  • editorHoverWidget.background#282828
  • editorHoverWidget.border#77777710
  • editorIndentGuide.activeBackground#656565
  • editorIndentGuide.background#65656570
  • editorInfo.foreground#00A5E170
  • editorLineNumber.activeForeground#00A5E1
  • editorLineNumber.foreground#008BB6c0
  • editorLink.activeForeground#ffffff
  • editorMarkerNavigation.background#00000005
  • editorOverviewRuler.border#282828
  • editorOverviewRuler.errorForeground#8000FF40
  • editorOverviewRuler.findMatchForeground#008BB6
  • editorOverviewRuler.infoForeground#00A5E140
  • editorOverviewRuler.warningForeground#006EFF70
  • editorRuler.foreground#656565
  • editorSuggestWidget.background#282828
  • editorSuggestWidget.border#77777710
  • editorSuggestWidget.foreground#000000
  • editorSuggestWidget.highlightForeground#006EFF
  • editorSuggestWidget.selectedBackground#008BB620
  • editorWarning.foreground#0061E1
  • editorWhitespace.foreground#00000040
  • editorWidget.background#282828
  • editorWidget.border#006EFF
  • editorWidget.resizeBorder#008BB6
  • extensionButton.prominentBackground#0061E190
  • extensionButton.prominentHoverBackground#8000FF
  • focusBorder#77777700
  • gitDecoration.conflictingResourceForeground#006EFF
  • gitDecoration.deletedResourceForeground#8000FF
  • gitDecoration.ignoredResourceForeground#008BB6
  • gitDecoration.modifiedResourceForeground#00BAFF
  • gitDecoration.untrackedResourceForeground#00A5E1
  • input.background#494949
  • input.border#77777710
  • input.foreground#c2c2c2
  • input.placeholderForeground#00000060
  • inputOption.activeBackground#00000030
  • inputOption.activeBorder#00000030
  • inputValidation.errorBorder#8000FF50
  • inputValidation.infoBorder#00A5E150
  • inputValidation.warningBorder#006EFF50
  • list.activeSelectionBackground#282828
  • list.activeSelectionForeground#008BB6
  • list.focusBackground#494949
  • list.focusForeground#00A5E1
  • list.highlightForeground#008BB6
  • list.hoverBackground#656565
  • list.hoverForeground#777777
  • list.inactiveSelectionBackground#28282830
  • list.inactiveSelectionForeground#008BB6
  • list.warningForeground#006EFF
  • listFilterWidget.background#28282830
  • listFilterWidget.noMatchesOutline#28282830
  • listFilterWidget.outline#28282830
  • menu.background#505050f8
  • menu.border#008BB650
  • menu.foreground#b9b9b9
  • menu.selectionBackground#1b1b1b
  • menu.selectionBorder#28282830
  • menu.selectionForeground#b9b9b9
  • menu.separatorBackground#000000
  • menubar.selectionBackground#1b1b1b
  • menubar.selectionBorder#b7b7b750
  • menubar.selectionForeground#b9b9b9
  • minimap.background#282828
  • minimapGutter.addedBackground#8000FF
  • minimapGutter.deletedBackground#006EFF
  • minimapGutter.modifiedBackground#0061E1
  • minimapSlider.activeBackground#0061E1b0
  • minimapSlider.background#0061E180
  • minimapSlider.hoverBackground#0061E1a0
  • notificationLink.foreground#008BB6
  • notifications.background#1c1c1c
  • notifications.foreground#707070
  • panel.background#282828
  • panel.border#28282860
  • panelTitle.activeBorder#008BB6
  • panelTitle.activeForeground#777777
  • panelTitle.inactiveForeground#b9b9b9
  • peekView.border#28282830
  • peekViewEditor.background#00000005
  • peekViewEditor.matchHighlightBackground#008BB650
  • peekViewEditorGutter.background#00000005
  • peekViewResult.background#00000005
  • peekViewResult.matchHighlightBackground#008BB650
  • peekViewResult.selectionBackground#008BB670
  • peekViewTitle.background#00000005
  • peekViewTitleDescription.foreground#00000060
  • pickerGroup.foreground#008BB6
  • progressBar.background#008BB6
  • scrollbar.shadow#28282800
  • scrollbarSlider.activeBackground#008BB6cc
  • scrollbarSlider.background#008BB6bb
  • scrollbarSlider.hoverBackground#008BB6ee
  • selection.background#008BB6
  • settings.checkboxBackground#282828
  • settings.checkboxForeground#363636
  • settings.dropdownBackground#282828
  • settings.dropdownForeground#363636
  • settings.headerForeground#008BB6
  • settings.modifiedItemIndicator#008BB6
  • settings.numberInputBackground#b9b9b9
  • settings.numberInputForeground#b9b9b9
  • settings.textInputBackground#0e96c0
  • settings.textInputForeground#b9b9b9
  • sideBar.background#353535
  • sideBar.border#26262650
  • sideBar.foreground#00A5E1
  • sideBarSectionHeader.background#323232
  • sideBarSectionHeader.border#181818
  • sideBarSectionHeader.foreground#00A5E1
  • sideBarTitle.foreground#b9b9b9
  • statusBar.background#3f3f3f
  • statusBar.border#323232
  • statusBar.debuggingBackground#3f3f3f
  • statusBar.debuggingForeground#ececec
  • statusBar.foreground#ececec
  • statusBar.noFolderBackground#3f3f3f
  • statusBarItem.hoverBackground#787878
  • statusBarItem.remoteBackground#008BB6
  • statusBarItem.remoteForeground#282828
  • tab.activeBackground#008BB650
  • tab.activeBorder#008BB6
  • tab.activeForeground#ececec
  • tab.activeModifiedBorder#008BB6
  • tab.border#282828
  • tab.inactiveBackground#2f2f2f
  • tab.inactiveForeground#a7a7a7
  • tab.unfocusedActiveBackground#008BB640
  • tab.unfocusedActiveBorder#008BB6
  • tab.unfocusedActiveForeground#ececec
  • tab.unfocusedInactiveBackground#008BB610
  • tab.unfocusedInactiveForeground#ececec
  • terminal.ansiBlack#282828
  • terminal.ansiBlue#00A5E1
  • terminal.ansiBrightBlack#008BB6
  • terminal.ansiBrightBlue#00A5E1
  • terminal.ansiBrightCyan#00CBFF
  • terminal.ansiBrightGreen#0e96c0
  • terminal.ansiBrightMagenta#0e96c0
  • terminal.ansiBrightRed#8000FF
  • terminal.ansiBrightWhite#777777
  • terminal.ansiBrightYellow#0e96c0
  • terminal.ansiCyan#00CBFF
  • terminal.ansiGreen#0e96c0
  • terminal.ansiMagenta#0e96c0
  • terminal.ansiRed#8000FF
  • terminal.ansiWhite#777777
  • terminal.ansiYellow#0e96c0
  • terminalCursor.background#282828
  • terminalCursor.foreground#ffffff81
  • textLink.activeForeground#14b4e5
  • textLink.foreground#1e9ec5
  • titleBar.activeBackground#282828
  • titleBar.activeForeground#b9b9b9
  • titleBar.border#28282860
  • titleBar.inactiveBackground#282828
  • titleBar.inactiveForeground#008BB6
  • tree.indentGuidesStroke#656565
  • widget.shadow#28282830

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#006EFF
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#b9b9b9
constant.other.php#006EFF
constant.other.color#777777
invalid, invalid.illegal#ff0000italic bold underline
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#00BAFF
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#b9b9b9
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#39fc09bold
text.html.derivative#A7A8AF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#b9b9b9
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#006EFF
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#00BAFF
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#00A5E1
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#00CBFF
support.other.variable, string.other.link, markup.table#b9b9b9
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#006EFF
variable.parameter.function.language.special, variable.parameter#8000FF
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#0061E1
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#006EFF
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#00BAFF
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#8000FF
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#00A5E1italic
entity.other.attribute-name, support.function#006EFF
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#8e8e8e
source.scss keyword.control#006EFF
markup.inserted#0061E1
markup.deleted#8000FF
markup.changed#006EFF
string.regexp#00CBFF
constant.character.escape#00CBFF
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#838383italic
support.type.property-name.json#838383
text.html.markdown, punctuation.definition.list_item.markdown#838383
text.html.markdown markup.inline.raw.markdown#006EFF
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#008BB650
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#00BAFFbold
markup.underline#00A5E1underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#008BB650
markup.quoteitalic
string.other.link.description.title.markdown#006EFF
constant.other.reference.link.markdown#006EFF
markup.raw.block#006EFF
punctuation.definition.raw.markdown, punctuation.definition.markdown#00CBFF
variable.language.fenced.markdown#008BB6
meta.separator#A7A8AFbold
token.info-token#008BB6
token.warn-token#006EFF
token.error-token#FF293B
token.debug-token#00CBFF