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#08082b
  • activityBar.border#08082b60
  • activityBar.foreground#e5e7e9
  • activityBarBadge.background#e5e7e9
  • activityBarBadge.foreground#08082b
  • badge.background#08082b30
  • badge.foreground#e5e7e9
  • breadcrumb.activeSelectionForeground#e5e7e9
  • breadcrumb.background#08082b
  • breadcrumb.focusForeground#e5e7e9
  • breadcrumb.foreground#20a6ff
  • breadcrumbPicker.background#08082b
  • button.background#e5e7e950
  • button.hoverBackground#a6acb152
  • contrastBorder#e5e7e940
  • debugToolBar.background#08082b
  • diffEditor.insertedTextBackground#0E287F15
  • diffEditor.removedTextBackground#10009620
  • dropdown.background#08082b
  • dropdown.border#e5e7e910
  • editor.background#08082b
  • editor.findMatchBackground#08082b
  • editor.findMatchBorder#e5e7e9
  • editor.findMatchHighlightBackground#e5e7e993
  • editor.findMatchHighlightBorder#e5e7e930
  • editor.foreground#e5e7e9
  • editor.lineHighlightBackground#08082b50
  • editor.selectionBackground#aeb4b930
  • editor.selectionHighlightBackground#2223246b
  • editor.selectionHighlightBorder#7c8186f0
  • editorBracketMatch.background#08082b
  • editorBracketMatch.border#0058927f
  • editorCursor.foreground#a6acb1
  • editorError.foreground#10009670
  • editorGroup.border#08082b30
  • editorGroupHeader.tabsBackground#08082b
  • editorGutter.addedBackground#0E287F60
  • editorGutter.deletedBackground#10009660
  • editorGutter.modifiedBackground#e5e7e960
  • editorHoverWidget.background#08082b
  • editorHoverWidget.border#e5e7e910
  • editorIndentGuide.activeBackground#010142
  • editorIndentGuide.background#01014270
  • editorInfo.foreground#e5e7e970
  • editorLineNumber.activeForeground#e5e7e9
  • editorLineNumber.foreground#e5e7e9c0
  • editorLink.activeForeground#0098D1
  • editorMarkerNavigation.background#0098D105
  • editorOverviewRuler.border#08082b
  • editorOverviewRuler.errorForeground#10009640
  • editorOverviewRuler.findMatchForeground#e5e7e9
  • editorOverviewRuler.infoForeground#e5e7e940
  • editorOverviewRuler.warningForeground#00589270
  • editorRuler.foreground#010142
  • editorSuggestWidget.background#08082b
  • editorSuggestWidget.border#e5e7e910
  • editorSuggestWidget.foreground#0098D1
  • editorSuggestWidget.highlightForeground#005892
  • editorSuggestWidget.selectedBackground#e5e7e920
  • editorWarning.foreground#0E287F
  • editorWhitespace.foreground#0098D140
  • editorWidget.background#08082b
  • editorWidget.border#005892
  • editorWidget.resizeBorder#e5e7e9
  • extensionButton.prominentBackground#0E287F90
  • extensionButton.prominentHoverBackground#100096
  • focusBorder#e5e7e900
  • gitDecoration.conflictingResourceForeground#005892
  • gitDecoration.deletedResourceForeground#100096
  • gitDecoration.ignoredResourceForeground#e5e7e9
  • gitDecoration.modifiedResourceForeground#0099ff
  • gitDecoration.untrackedResourceForeground#e5e7e9
  • input.background#12007F
  • input.border#e5e7e910
  • input.foreground#0098D1
  • input.placeholderForeground#0098D160
  • inputOption.activeBackground#0098D130
  • inputOption.activeBorder#0098D130
  • inputValidation.errorBorder#10009650
  • inputValidation.infoBorder#e5e7e950
  • inputValidation.warningBorder#00589250
  • list.activeSelectionBackground#08082b
  • list.activeSelectionForeground#e5e7e9
  • list.focusBackground#12007F
  • list.focusForeground#e5e7e9
  • list.highlightForeground#e5e7e9
  • list.hoverBackground#010142
  • list.hoverForeground#e5e7e9
  • list.inactiveSelectionBackground#08082b30
  • list.inactiveSelectionForeground#e5e7e9
  • list.warningForeground#005892
  • listFilterWidget.background#08082b30
  • listFilterWidget.noMatchesOutline#08082b30
  • listFilterWidget.outline#08082b30
  • menu.background#08082bf8
  • menu.border#e5e7e950
  • menu.foreground#0098D1
  • menu.selectionBackground#12007F
  • menu.selectionBorder#08082b30
  • menu.selectionForeground#0098D1
  • menu.separatorBackground#0098D1
  • menubar.selectionBackground#12007F
  • menubar.selectionBorder#e5e7e950
  • menubar.selectionForeground#0098D1
  • minimap.background#0c0b50
  • minimapGutter.addedBackground#100096
  • minimapGutter.deletedBackground#005892
  • minimapGutter.modifiedBackground#0E287F
  • minimapSlider.activeBackground#0E287Fb0
  • minimapSlider.background#0E287F80
  • minimapSlider.hoverBackground#0E287Fa0
  • notificationLink.foreground#e5e7e9
  • notifications.background#070792
  • notifications.foreground#0098D1
  • panel.background#11115f
  • panel.border#08082b60
  • panelTitle.activeBorder#e5e7e9
  • panelTitle.activeForeground#e5e7e9
  • panelTitle.inactiveForeground#0098D1
  • peekView.border#08082b30
  • peekViewEditor.background#0098D105
  • peekViewEditor.matchHighlightBackground#e5e7e950
  • peekViewEditorGutter.background#0098D105
  • peekViewResult.background#0098D105
  • peekViewResult.matchHighlightBackground#e5e7e950
  • peekViewResult.selectionBackground#e5e7e970
  • peekViewTitle.background#0098D105
  • peekViewTitleDescription.foreground#0098D160
  • pickerGroup.foreground#e5e7e9
  • progressBar.background#e5e7e9
  • scrollbar.shadow#08082b00
  • scrollbarSlider.activeBackground#e5e7e9cc
  • scrollbarSlider.background#e5e7e9bb
  • scrollbarSlider.hoverBackground#e5e7e9ee
  • selection.background#05223db0
  • settings.checkboxBackground#08082b
  • settings.checkboxForeground#0098D1
  • settings.dropdownBackground#08082b
  • settings.dropdownForeground#0098D1
  • settings.headerForeground#e5e7e9
  • settings.modifiedItemIndicator#e5e7e9
  • settings.numberInputBackground#08082b
  • settings.numberInputForeground#0098D1
  • settings.textInputBackground#08082b
  • settings.textInputForeground#0098D1
  • sideBar.background#08082b
  • sideBar.border#e5e7e950
  • sideBar.foreground#e5e7e9
  • sideBarSectionHeader.background#08082b
  • sideBarSectionHeader.border#08082b60
  • sideBarSectionHeader.foreground#e5e7e9
  • sideBarTitle.foreground#0098D1
  • statusBar.background#383838
  • statusBar.border#08082b60
  • statusBar.debuggingBackground#005892
  • statusBar.debuggingForeground#e5e7e9
  • statusBar.foreground#e5e7e94f
  • statusBar.noFolderBackground#08082b
  • statusBarItem.hoverBackground#e5e7e920
  • statusBarItem.remoteBackground#e5e7e9
  • statusBarItem.remoteForeground#08082b
  • tab.activeBackground#e5e7e950
  • tab.activeBorder#e5e7e9
  • tab.activeForeground#e5e7e9
  • tab.activeModifiedBorder#e5e7e9
  • tab.border#08082b
  • tab.inactiveBackground#e5e7e920
  • tab.inactiveForeground#0098D1af
  • tab.unfocusedActiveBackground#e5e7e940
  • tab.unfocusedActiveBorder#e5e7e9
  • tab.unfocusedActiveForeground#0098D1
  • tab.unfocusedInactiveBackground#e5e7e910
  • tab.unfocusedInactiveForeground#0098D17f
  • terminal.ansiBlack#08082b
  • terminal.ansiBlue#e5e7e9
  • terminal.ansiBrightBlack#e5e7e9
  • terminal.ansiBrightBlue#e5e7e9
  • terminal.ansiBrightCyan#00ACD9
  • terminal.ansiBrightGreen#0E287F
  • terminal.ansiBrightMagenta#005892
  • terminal.ansiBrightRed#100096
  • terminal.ansiBrightWhite#e5e7e9
  • terminal.ansiBrightYellow#005892
  • terminal.ansiCyan#00ACD9
  • terminal.ansiGreen#0E287F
  • terminal.ansiMagenta#005892
  • terminal.ansiRed#100096
  • terminal.ansiWhite#e5e7e9
  • terminal.ansiYellow#005892
  • terminal.foreground#e5e7e9
  • terminal.selectionBackground#174f99
  • terminalCursor.background#a6acb1
  • terminalCursor.foreground#a6acb1
  • textLink.activeForeground#0098D1
  • textLink.foreground#e5e7e9
  • titleBar.activeBackground#08082b
  • titleBar.activeForeground#0098D1
  • titleBar.border#08082b60
  • titleBar.inactiveBackground#08082b
  • titleBar.inactiveForeground#e5e7e9
  • tree.indentGuidesStroke#010142
  • widget.shadow#08082b30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#005892
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#0E287F
constant.other.php#005892
constant.other.color#e5e7e9
invalid, invalid.illegal#100096
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#0099ff
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#0098D1
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#0098D1
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#005892
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#0099ff
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#e5e7e9
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#00ACD9
support.other.variable, string.other.link, markup.table#0098D1
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#005892
variable.parameter.function.language.special, variable.parameter#100096
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#0E287F
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#005892
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#0099ff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#100096
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#e5e7e9italic
entity.other.attribute-name, support.function#005892
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#0098D1
source.scss keyword.control#005892
markup.inserted#0E287F
markup.deleted#100096
markup.changed#005892
string.regexp#00ACD9
constant.character.escape#00ACD9
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#0098D1italic
support.type.property-name.json#0098D1
text.html.markdown, punctuation.definition.list_item.markdown#0098D1
text.html.markdown markup.inline.raw.markdown#005892
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#e5e7e950
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#0099ffbold
markup.underline#e5e7e9underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#e5e7e950
markup.quoteitalic
string.other.link.description.title.markdown#005892
constant.other.reference.link.markdown#005892
markup.raw.block#005892
punctuation.definition.raw.markdown, punctuation.definition.markdown#00ACD9
variable.language.fenced.markdown#e5e7e9
meta.separator#A7A8AFbold
token.info-token#e5e7e9
token.warn-token#005892
token.error-token#FF293B
token.debug-token#00ACD9