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#232323
  • activityBar.border#23232360
  • activityBar.foreground#BBBBBB
  • activityBarBadge.background#74a374
  • activityBarBadge.foreground#232323
  • badge.background#23232330
  • badge.foreground#688B58
  • breadcrumb.activeSelectionForeground#688B58
  • breadcrumb.background#232323
  • breadcrumb.focusForeground#BBBBBB
  • breadcrumb.foreground#83B06F
  • breadcrumbPicker.background#232323
  • button.background#688B5850
  • contrastBorder#688B5840
  • debugToolBar.background#232323
  • diffEditor.insertedTextBackground#BE737315
  • diffEditor.removedTextBackground#CD847820
  • dropdown.background#232323
  • dropdown.border#FFFFFF10
  • editor.background#232323
  • editor.findMatchBackground#232323
  • editor.findMatchBorder#688B58
  • editor.findMatchHighlightBackground#688B5893
  • editor.findMatchHighlightBorder#FFFFFF30
  • editor.foreground#BBBBBB
  • editor.lineHighlightBackground#23232350
  • editor.selectionBackground#74a37430
  • editor.selectionHighlightBackground#688B586b
  • editor.selectionHighlightBorder#74a374f0
  • editorBracketMatch.background#232323
  • editorBracketMatch.border#E279797f
  • editorCursor.foreground#E27979
  • editorError.foreground#CD847870
  • editorGroup.border#23232330
  • editorGroupHeader.tabsBackground#232323
  • editorGutter.addedBackground#BE737360
  • editorGutter.deletedBackground#CD847860
  • editorGutter.modifiedBackground#74a37460
  • editorHoverWidget.background#232323
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground1#3F3F3F
  • editorIndentGuide.background1#3F3F3F70
  • editorInfo.foreground#74a37470
  • editorLineNumber.activeForeground#74a374
  • editorLineNumber.foreground#688B58c0
  • editorLink.activeForeground#BBBBBB
  • editorMarkerNavigation.background#BBBBBB05
  • editorOverviewRuler.border#232323
  • editorOverviewRuler.errorForeground#CD847840
  • editorOverviewRuler.findMatchForeground#688b583d
  • editorOverviewRuler.infoForeground#74a37440
  • editorOverviewRuler.warningForeground#E2797970
  • editorRuler.foreground#3F3F3F
  • editorSuggestWidget.background#232323
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#BBBBBB
  • editorSuggestWidget.highlightForeground#E27979
  • editorSuggestWidget.selectedBackground#688B5820
  • editorWarning.foreground#BE7373
  • editorWhitespace.foreground#BBBBBB40
  • editorWidget.background#232323
  • editorWidget.border#E27979
  • editorWidget.resizeBorder#688B58
  • extensionButton.prominentBackground#BE737390
  • extensionButton.prominentHoverBackground#CD8478
  • focusBorder#FFFFFF00
  • gitDecoration.conflictingResourceForeground#E27979
  • gitDecoration.deletedResourceForeground#CD8478
  • gitDecoration.ignoredResourceForeground#688B58
  • gitDecoration.modifiedResourceForeground#83B06F
  • gitDecoration.untrackedResourceForeground#74a374
  • input.background#323232
  • input.border#FFFFFF10
  • input.foreground#BBBBBB
  • input.placeholderForeground#BBBBBB60
  • inputOption.activeBackground#BBBBBB30
  • inputOption.activeBorder#BBBBBB30
  • inputValidation.errorBorder#CD847850
  • inputValidation.infoBorder#74a37450
  • inputValidation.warningBorder#E2797950
  • list.activeSelectionBackground#232323
  • list.activeSelectionForeground#688B58
  • list.focusBackground#323232
  • list.focusForeground#74a374
  • list.highlightForeground#688B58
  • list.hoverBackground#3F3F3F
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#23232330
  • list.inactiveSelectionForeground#688B58
  • list.warningForeground#E27979
  • listFilterWidget.background#23232330
  • listFilterWidget.noMatchesOutline#23232330
  • listFilterWidget.outline#23232330
  • menu.background#232323f8
  • menu.border#688B5850
  • menu.foreground#BBBBBB
  • menu.selectionBackground#323232
  • menu.selectionBorder#23232330
  • menu.selectionForeground#BBBBBB
  • menu.separatorBackground#BBBBBB
  • menubar.selectionBackground#323232
  • menubar.selectionBorder#688B5850
  • menubar.selectionForeground#BBBBBB
  • minimap.background#232323
  • minimapGutter.addedBackground#CD8478
  • minimapGutter.deletedBackground#E27979
  • minimapGutter.modifiedBackground#BE7373
  • minimapSlider.activeBackground#BE7373b0
  • minimapSlider.background#BE737380
  • minimapSlider.hoverBackground#BE7373a0
  • notificationLink.foreground#688B58
  • notifications.background#232323
  • notifications.foreground#BBBBBB
  • panel.background#232323
  • panel.border#23232360
  • panelTitle.activeBorder#688B58
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#BBBBBB
  • peekView.border#23232330
  • peekViewEditor.background#BBBBBB05
  • peekViewEditor.matchHighlightBackground#688B5850
  • peekViewEditorGutter.background#BBBBBB05
  • peekViewResult.background#BBBBBB05
  • peekViewResult.matchHighlightBackground#688B5850
  • peekViewResult.selectionBackground#688B5870
  • peekViewTitle.background#BBBBBB05
  • peekViewTitleDescription.foreground#BBBBBB60
  • pickerGroup.foreground#688B58
  • progressBar.background#688B58
  • scrollbar.shadow#23232300
  • scrollbarSlider.activeBackground#688B58cc
  • scrollbarSlider.background#688B58bb
  • scrollbarSlider.hoverBackground#688B58ee
  • selection.background#688B58
  • settings.checkboxBackground#232323
  • settings.checkboxForeground#BBBBBB
  • settings.dropdownBackground#232323
  • settings.dropdownForeground#BBBBBB
  • settings.headerForeground#688B58
  • settings.modifiedItemIndicator#688B58
  • settings.numberInputBackground#232323
  • settings.numberInputForeground#BBBBBB
  • settings.textInputBackground#232323
  • settings.textInputForeground#BBBBBB
  • sideBar.background#232323
  • sideBar.border#688B5850
  • sideBar.foreground#74a374
  • sideBarSectionHeader.background#232323
  • sideBarSectionHeader.border#23232360
  • sideBarSectionHeader.foreground#74a374
  • sideBarTitle.foreground#BBBBBB
  • statusBar.background#565656
  • statusBar.border#23232360
  • statusBar.debuggingBackground#E27979
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#D3D3D3
  • statusBar.noFolderBackground#232323
  • statusBarItem.hoverBackground#688B5820
  • statusBarItem.remoteBackground#688B58
  • statusBarItem.remoteForeground#232323
  • tab.activeBackground#688B5850
  • tab.activeBorder#688B58
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#688B58
  • tab.border#232323
  • tab.inactiveBackground#688B5820
  • tab.inactiveForeground#BBBBBBaf
  • tab.unfocusedActiveBackground#688B5840
  • tab.unfocusedActiveBorder#688B58
  • tab.unfocusedActiveForeground#BBBBBB
  • tab.unfocusedInactiveBackground#688B5810
  • tab.unfocusedInactiveForeground#BBBBBB7f
  • terminal.ansiBlack#232323
  • terminal.ansiBlue#74a374
  • terminal.ansiBrightBlack#688B58
  • terminal.ansiBrightBlue#74a374
  • terminal.ansiBrightCyan#AEEAAE
  • terminal.ansiBrightGreen#BE7373
  • terminal.ansiBrightMagenta#E27979
  • terminal.ansiBrightRed#CD8478
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E27979
  • terminal.ansiCyan#AEEAAE
  • terminal.ansiGreen#BE7373
  • terminal.ansiMagenta#E27979
  • terminal.ansiRed#CD8478
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#E27979
  • terminalCursor.background#232323
  • terminalCursor.foreground#E27979
  • textLink.activeForeground#BBBBBB
  • textLink.foreground#688B58
  • titleBar.activeBackground#232323
  • titleBar.activeForeground#BBBBBB
  • titleBar.border#23232360
  • titleBar.inactiveBackground#232323
  • titleBar.inactiveForeground#688B58
  • tree.indentGuidesStroke#3F3F3F
  • widget.shadow#23232330

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#E27979
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#BE7373
constant.other.php#E27979
constant.other.color#FFFFFF
invalid, invalid.illegal#CD8478
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#83B06F
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#BBBBBB
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#BBBBBB
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#E27979
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#83B06F
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#74a374
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#8ec58e
support.other.variable, string.other.link, markup.table#BBBBBB
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#E27979
variable.parameter.function.language.special, variable.parameter#CD8478
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#BE7373
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#E27979
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#83B06F
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#CD8478
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#74a374italic
entity.other.attribute-name, support.function#E27979
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#BBBBBB
source.scss keyword.control#E27979
markup.inserted#BE7373
markup.deleted#CD8478
markup.changed#E27979
string.regexp#AEEAAE
constant.character.escape#AEEAAE
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#BBBBBBitalic
support.type.property-name.json#BBBBBB
text.html.markdown, punctuation.definition.list_item.markdown#BBBBBB
text.html.markdown markup.inline.raw.markdown#E27979
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#688B5850
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#83B06Fbold
markup.underline#74a374underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#688B5850
markup.quoteitalic
string.other.link.description.title.markdown#E27979
constant.other.reference.link.markdown#E27979
markup.raw.block#E27979
punctuation.definition.raw.markdown, punctuation.definition.markdown#8ec58e
variable.language.fenced.markdown#688B58
meta.separator#A7A8AFbold
token.info-token#688B58
token.warn-token#E27979
token.error-token#FF293B
token.debug-token#AEEAAE
Matteo's Dark Theme by mapersiani - VS Code Theme