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#001818
  • activityBar.border#00181860
  • activityBar.foreground#90F090
  • activityBarBadge.background#E8ECE9
  • activityBarBadge.foreground#001818
  • badge.background#00181830
  • badge.foreground#196856
  • breadcrumb.activeSelectionForeground#196856
  • breadcrumb.background#001818
  • breadcrumb.focusForeground#90F090
  • breadcrumb.foreground#009030
  • breadcrumbPicker.background#001818
  • button.background#19685650
  • contrastBorder#19685640
  • debugToolBar.background#001818
  • diffEditor.insertedTextBackground#48787815
  • diffEditor.removedTextBackground#D8C09020
  • dropdown.background#001818
  • dropdown.border#C0D8C010
  • editor.background#001818
  • editor.findMatchBackground#001818
  • editor.findMatchBorder#196856
  • editor.findMatchHighlightBackground#19685693
  • editor.findMatchHighlightBorder#C0D8C030
  • editor.foreground#dfdfdf
  • editor.lineHighlightBackground#00181850
  • editor.selectionBackground#E8ECE930
  • editor.selectionHighlightBackground#1968566b
  • editor.selectionHighlightBorder#E8ECE9f0
  • editorBracketHighlight.foreground1#196856
  • editorBracketHighlight.foreground2#E8ECE9
  • editorBracketHighlight.foreground3#E6FFEB
  • editorBracketMatch.background#001818
  • editorBracketMatch.border#FAD19D7f
  • editorCursor.foreground#FAD19D
  • editorError.foreground#D8C09070
  • editorGroup.border#00181830
  • editorGroupHeader.tabsBackground#001818
  • editorGutter.addedBackground#48787860
  • editorGutter.deletedBackground#D8C09060
  • editorGutter.modifiedBackground#E8ECE960
  • editorHoverWidget.background#001818
  • editorHoverWidget.border#C0D8C010
  • editorIndentGuide.activeBackground#183048
  • editorIndentGuide.background#18304870
  • editorInfo.foreground#E8ECE970
  • editorLineNumber.activeForeground#E8ECE9
  • editorLineNumber.foreground#196856c0
  • editorLink.activeForeground#90F090
  • editorMarkerNavigation.background#90F09005
  • editorOverviewRuler.border#001818
  • editorOverviewRuler.errorForeground#D8C09040
  • editorOverviewRuler.findMatchForeground#196856
  • editorOverviewRuler.infoForeground#E8ECE940
  • editorOverviewRuler.warningForeground#FAD19D70
  • editorRuler.foreground#183048
  • editorSuggestWidget.background#001818
  • editorSuggestWidget.border#C0D8C010
  • editorSuggestWidget.foreground#90F090
  • editorSuggestWidget.highlightForeground#FAD19D
  • editorSuggestWidget.selectedBackground#19685620
  • editorWarning.foreground#487878
  • editorWhitespace.foreground#90F09040
  • editorWidget.background#001818
  • editorWidget.border#FAD19D
  • editorWidget.resizeBorder#196856
  • extensionButton.prominentBackground#48787890
  • extensionButton.prominentHoverBackground#D8C090
  • focusBorder#C0D8C000
  • gitDecoration.conflictingResourceForeground#FAD19D
  • gitDecoration.deletedResourceForeground#D8C090
  • gitDecoration.ignoredResourceForeground#196856
  • gitDecoration.modifiedResourceForeground#009030
  • gitDecoration.untrackedResourceForeground#E8ECE9
  • input.background#002D2D
  • input.border#C0D8C010
  • input.foreground#90F090
  • input.placeholderForeground#90F09060
  • inputOption.activeBackground#90F09030
  • inputOption.activeBorder#90F09030
  • inputValidation.errorBorder#D8C09050
  • inputValidation.infoBorder#E8ECE950
  • inputValidation.warningBorder#FAD19D50
  • list.activeSelectionBackground#001818
  • list.activeSelectionForeground#196856
  • list.focusBackground#002D2D
  • list.focusForeground#E8ECE9
  • list.highlightForeground#196856
  • list.hoverBackground#183048
  • list.hoverForeground#C0D8C0
  • list.inactiveSelectionBackground#00181830
  • list.inactiveSelectionForeground#196856
  • list.warningForeground#FAD19D
  • listFilterWidget.background#00181830
  • listFilterWidget.noMatchesOutline#00181830
  • listFilterWidget.outline#00181830
  • menu.background#001818f8
  • menu.border#19685650
  • menu.foreground#90F090
  • menu.selectionBackground#002D2D
  • menu.selectionBorder#00181830
  • menu.selectionForeground#90F090
  • menu.separatorBackground#90F090
  • menubar.selectionBackground#002D2D
  • menubar.selectionBorder#19685650
  • menubar.selectionForeground#90F090
  • minimap.background#001818
  • minimapGutter.addedBackground#D8C090
  • minimapGutter.deletedBackground#FAD19D
  • minimapGutter.modifiedBackground#487878
  • minimapSlider.activeBackground#487878b0
  • minimapSlider.background#48787880
  • minimapSlider.hoverBackground#487878a0
  • notificationLink.foreground#196856
  • notifications.background#001818
  • notifications.foreground#90F090
  • panel.background#001818
  • panel.border#00181860
  • panelTitle.activeBorder#196856
  • panelTitle.activeForeground#C0D8C0
  • panelTitle.inactiveForeground#90F090
  • peekView.border#00181830
  • peekViewEditor.background#90F09005
  • peekViewEditor.matchHighlightBackground#19685650
  • peekViewEditorGutter.background#90F09005
  • peekViewResult.background#90F09005
  • peekViewResult.matchHighlightBackground#19685650
  • peekViewResult.selectionBackground#19685670
  • peekViewTitle.background#90F09005
  • peekViewTitleDescription.foreground#90F09060
  • pickerGroup.foreground#196856
  • progressBar.background#196856
  • scrollbar.shadow#00181800
  • scrollbarSlider.activeBackground#196856cc
  • scrollbarSlider.background#196856bb
  • scrollbarSlider.hoverBackground#196856ee
  • selection.background#196856
  • settings.checkboxBackground#001818
  • settings.checkboxForeground#90F090
  • settings.dropdownBackground#001818
  • settings.dropdownForeground#90F090
  • settings.headerForeground#196856
  • settings.modifiedItemIndicator#196856
  • settings.numberInputBackground#001818
  • settings.numberInputForeground#90F090
  • settings.textInputBackground#001818
  • settings.textInputForeground#90F090
  • sideBar.background#001818
  • sideBar.border#19685650
  • sideBar.foreground#E8ECE9
  • sideBarSectionHeader.background#001818
  • sideBarSectionHeader.border#00181860
  • sideBarSectionHeader.foreground#E8ECE9
  • sideBarTitle.foreground#90F090
  • statusBar.background#001818
  • statusBar.border#00181860
  • statusBar.debuggingBackground#FAD19D
  • statusBar.debuggingForeground#C0D8C0
  • statusBar.foreground#48D860
  • statusBar.noFolderBackground#001818
  • statusBarItem.hoverBackground#19685620
  • statusBarItem.remoteBackground#196856
  • statusBarItem.remoteForeground#001818
  • tab.activeBackground#19685650
  • tab.activeBorder#196856
  • tab.activeForeground#C0D8C0
  • tab.activeModifiedBorder#196856
  • tab.border#001818
  • tab.inactiveBackground#19685620
  • tab.inactiveForeground#90F090af
  • tab.unfocusedActiveBackground#19685640
  • tab.unfocusedActiveBorder#196856
  • tab.unfocusedActiveForeground#90F090
  • tab.unfocusedInactiveBackground#19685610
  • tab.unfocusedInactiveForeground#90F0907f
  • terminal.ansiBlack#001818
  • terminal.ansiBlue#E8ECE9
  • terminal.ansiBrightBlack#196856
  • terminal.ansiBrightBlue#E8ECE9
  • terminal.ansiBrightCyan#E6FFEB
  • terminal.ansiBrightGreen#487878
  • terminal.ansiBrightMagenta#FAD19D
  • terminal.ansiBrightRed#D8C090
  • terminal.ansiBrightWhite#C0D8C0
  • terminal.ansiBrightYellow#FAD19D
  • terminal.ansiCyan#E6FFEB
  • terminal.ansiGreen#487878
  • terminal.ansiMagenta#FAD19D
  • terminal.ansiRed#D8C090
  • terminal.ansiWhite#C0D8C0
  • terminal.ansiYellow#FAD19D
  • terminalCursor.background#001818
  • terminalCursor.foreground#FAD19D
  • textLink.activeForeground#90F090
  • textLink.foreground#196856
  • titleBar.activeBackground#001818
  • titleBar.activeForeground#90F090
  • titleBar.border#00181860
  • titleBar.inactiveBackground#001818
  • titleBar.inactiveForeground#196856
  • tree.indentGuidesStroke#183048
  • widget.shadow#00181830

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#c1ed56
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#487878
constant.other.php#FAD19D
constant.other.color#C0D8C0
invalid, invalid.illegal#D8C090
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#5f8f32
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#90F090
punctuation.definition, string.quoted.single.scss#b1c059
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#caceeb
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#90F090
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#FAD19D
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#009030
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#8860d3
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#E6FFEB
support.other.variable, string.other.link, markup.table#90F090
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#9eda62
variable.parameter.function.language.special, variable.parameter#D8C090
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#993b56
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#3f95a3
support.type#B2CCD6
source.python#9eda62
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#009030
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#D8C090
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#E8ECE9italic
entity.other.attribute-name, support.function#FAD19D
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#90F090
source.scss keyword.control#FAD19D
markup.inserted#487878
markup.deleted#D8C090
markup.changed#FAD19D
string.regexp#E6FFEB
constant.character.escape#E6FFEB
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#90F090italic
support.type.property-name.json#90F090
text.html.markdown, punctuation.definition.list_item.markdown#90F090
text.html.markdown markup.inline.raw.markdown#FAD19D
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#19685650
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#009030bold
markup.underline#E8ECE9underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#19685650
markup.quoteitalic
string.other.link.description.title.markdown#FAD19D
constant.other.reference.link.markdown#FAD19D
markup.raw.block#FAD19D
punctuation.definition.raw.markdown, punctuation.definition.markdown#E6FFEB
variable.language.fenced.markdown#196856
meta.separator#A7A8AFbold
token.info-token#196856
token.warn-token#FAD19D
token.error-token#FF293B
token.debug-token#E6FFEB