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#0f0f0e
  • activityBar.border#00001860
  • activityBar.foreground#F06000
  • activityBarBadge.background#FFF0F0
  • activityBarBadge.foreground#0f0f0e
  • badge.background#00001830
  • badge.foreground#181860
  • breadcrumb.activeSelectionForeground#181860
  • breadcrumb.background#0f0f0e
  • breadcrumb.focusForeground#eeeeee
  • breadcrumb.foreground#F06000
  • breadcrumbPicker.background#0f0f0e
  • button.background#18186050
  • contrastBorder#18186040
  • debugToolBar.background#0f0f0e
  • diffEditor.insertedTextBackground#C0521B15
  • diffEditor.removedTextBackground#D8603020
  • dropdown.background#0f0f0e
  • dropdown.border#FF713910
  • editor.background#0f0f0e
  • editor.findMatchBackground#0f0f0e
  • editor.findMatchBorder#181860
  • editor.findMatchHighlightBackground#18186093
  • editor.findMatchHighlightBorder#FF713930
  • editor.foreground#9697a0
  • editor.lineHighlightBackground#00001850
  • editor.selectionBackground#FFF0F030
  • editor.selectionHighlightBackground#1818606b
  • editor.selectionHighlightBorder#FFF0F0f0
  • editorBracketHighlight.foreground1#3C78D2
  • editorBracketHighlight.foreground2#D86030
  • editorBracketHighlight.foreground3#C0521B
  • editorBracketMatch.background#0f0f0e
  • editorBracketMatch.border#3C78D27f
  • editorCursor.foreground#3C78D2
  • editorError.foreground#D8603070
  • editorGroup.border#00001830
  • editorGroupHeader.tabsBackground#0f0f0e
  • editorGutter.addedBackground#C0521B60
  • editorGutter.deletedBackground#D8603060
  • editorGutter.modifiedBackground#FFF0F060
  • editorHoverWidget.background#0f0f0e
  • editorHoverWidget.border#FF713910
  • editorIndentGuide.activeBackground1#484848
  • editorIndentGuide.background1#48484870
  • editorInfo.foreground#FFF0F070
  • editorLineNumber.activeForeground#ff5100
  • editorLineNumber.foreground#d8603077
  • editorLink.activeForeground#1860D8
  • editorMarkerNavigation.background#1860D805
  • editorOverviewRuler.border#0f0f0e
  • editorOverviewRuler.errorForeground#D8603040
  • editorOverviewRuler.findMatchForeground#181860
  • editorOverviewRuler.infoForeground#FFF0F040
  • editorOverviewRuler.warningForeground#3C78D270
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#0f0f0e
  • editorSuggestWidget.border#FF713910
  • editorSuggestWidget.foreground#1860D8
  • editorSuggestWidget.highlightForeground#3C78D2
  • editorSuggestWidget.selectedBackground#18186020
  • editorWarning.foreground#C0521B
  • editorWhitespace.foreground#1860D840
  • editorWidget.background#0f0f0e
  • editorWidget.border#3C78D2
  • editorWidget.resizeBorder#181860
  • extensionButton.prominentBackground#C0521B90
  • extensionButton.prominentHoverBackground#D86030
  • focusBorder#FF713900
  • gitDecoration.conflictingResourceForeground#3C78D2
  • gitDecoration.deletedResourceForeground#D86030
  • gitDecoration.ignoredResourceForeground#181860
  • gitDecoration.modifiedResourceForeground#F06000
  • gitDecoration.untrackedResourceForeground#FFF0F0
  • input.background#27272781
  • input.border#FF713910
  • input.foreground#1860D8
  • input.placeholderForeground#c6d5ec9f
  • inputOption.activeBackground#1860D830
  • inputOption.activeBorder#1860D830
  • inputValidation.errorBorder#D8603050
  • inputValidation.infoBorder#FFF0F050
  • inputValidation.warningBorder#3C78D250
  • list.activeSelectionBackground#0f0f0e
  • list.activeSelectionForeground#FF7139
  • list.focusBackground#303030
  • list.focusForeground#FFF0F0
  • list.highlightForeground#181860
  • list.hoverBackground#48484800
  • list.hoverForeground#FF7139
  • list.inactiveSelectionBackground#00001830
  • list.inactiveSelectionForeground#1860D8
  • list.warningForeground#3C78D2
  • listFilterWidget.background#00001830
  • listFilterWidget.noMatchesOutline#00001830
  • listFilterWidget.outline#00001830
  • menu.background#1b1b19
  • menu.border#18186050
  • menu.foreground#c2c2c2
  • menu.selectionBackground#303030
  • menu.selectionBorder#00001830
  • menu.selectionForeground#1860D8
  • menu.separatorBackground#D86030
  • menubar.selectionBackground#303030
  • menubar.selectionBorder#18186050
  • menubar.selectionForeground#1860D8
  • minimap.background#0f0f0e
  • minimapGutter.addedBackground#D86030
  • minimapGutter.deletedBackground#3C78D2
  • minimapGutter.modifiedBackground#C0521B
  • minimapSlider.activeBackground#C0521Bb0
  • minimapSlider.background#C0521B80
  • minimapSlider.hoverBackground#C0521Ba0
  • notificationLink.foreground#181860
  • notifications.background#0f0f0e
  • notifications.foreground#1860D8
  • panel.background#0f0f0e
  • panel.border#00001860
  • panelTitle.activeBorder#181860
  • panelTitle.activeForeground#FF7139
  • panelTitle.inactiveForeground#1860D8
  • peekView.border#00001830
  • peekViewEditor.background#1860D805
  • peekViewEditor.matchHighlightBackground#18186050
  • peekViewEditorGutter.background#1860D805
  • peekViewResult.background#1860D805
  • peekViewResult.matchHighlightBackground#18186050
  • peekViewResult.selectionBackground#18186070
  • peekViewTitle.background#1860D805
  • peekViewTitleDescription.foreground#1860D860
  • pickerGroup.foreground#181860
  • progressBar.background#181860
  • scrollbar.shadow#00001800
  • scrollbarSlider.activeBackground#181860cc
  • scrollbarSlider.background#181860bb
  • scrollbarSlider.hoverBackground#181860ee
  • selection.background#181860
  • settings.checkboxBackground#0f0f0e
  • settings.checkboxForeground#1860D8
  • settings.dropdownBackground#0f0f0e
  • settings.dropdownForeground#1860D8
  • settings.headerForeground#181860
  • settings.modifiedItemIndicator#181860
  • settings.numberInputBackground#0f0f0e
  • settings.numberInputForeground#1860D8
  • settings.textInputBackground#0f0f0e
  • settings.textInputForeground#1860D8
  • sideBar.background#0f0f0e
  • sideBar.border#18186050
  • sideBar.foreground#FFF0F0
  • sideBarSectionHeader.background#0f0f0e
  • sideBarSectionHeader.border#00001860
  • sideBarSectionHeader.foreground#FFF0F0
  • sideBarTitle.foreground#FF5F00
  • statusBar.background#0f0f0e
  • statusBar.border#00001860
  • statusBar.debuggingBackground#3C78D2
  • statusBar.debuggingForeground#FF7139
  • statusBar.foreground#FF5F00
  • statusBar.noFolderBackground#0f0f0e
  • statusBarItem.hoverBackground#18186020
  • statusBarItem.remoteBackground#181860
  • statusBarItem.remoteForeground#0f0f0e
  • tab.activeBackground#18186050
  • tab.activeBorder#ff7300
  • tab.activeForeground#FF7139
  • tab.activeModifiedBorder#181860
  • tab.border#0f0f0e
  • tab.inactiveBackground#18186020
  • tab.inactiveForeground#1860D8af
  • tab.unfocusedActiveBackground#18186040
  • tab.unfocusedActiveBorder#181860
  • tab.unfocusedActiveForeground#1860D8
  • tab.unfocusedInactiveBackground#18186010
  • tab.unfocusedInactiveForeground#1860D87f
  • terminal.ansiBlack#0f0f0e
  • terminal.ansiBlue#FFF0F0
  • terminal.ansiBrightBlack#181860
  • terminal.ansiBrightBlue#FFF0F0
  • terminal.ansiBrightCyan#FFFDF8
  • terminal.ansiBrightGreen#C0521B
  • terminal.ansiBrightMagenta#3C78D2
  • terminal.ansiBrightRed#D86030
  • terminal.ansiBrightWhite#FF7139
  • terminal.ansiBrightYellow#3C78D2
  • terminal.ansiCyan#FFFDF8
  • terminal.ansiGreen#C0521B
  • terminal.ansiMagenta#3C78D2
  • terminal.ansiRed#D86030
  • terminal.ansiWhite#FF7139
  • terminal.ansiYellow#3C78D2
  • terminalCursor.background#0f0f0e
  • terminalCursor.foreground#3C78D2
  • textLink.activeForeground#1860D8
  • textLink.foreground#1860D8
  • titleBar.activeBackground#0f0f0e
  • titleBar.activeForeground#ffffff
  • titleBar.border#00001860
  • titleBar.inactiveBackground#0f0f0e
  • titleBar.inactiveForeground#727280
  • tree.indentGuidesStroke#484848
  • widget.shadow#00001830

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#FA6E30
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#C0521B
constant.other.php#3C78D2
constant.other.color#FF7139
invalid, invalid.illegal#D86030
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#c0bdbb
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#F06000
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#ff8c56
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#ff5f02
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#3C78D2
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#f6cead
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#f1f4ee
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#FFFDF8
support.other.variable, string.other.link, markup.table#1860D8
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#3C78D2
variable.parameter.function.language.special, variable.parameter#D86030
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#C0521B
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#d1cecd
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#F06000
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#D86030
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#FFF0F0italic
entity.other.attribute-name, support.function#3C78D2
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#1860D8
source.scss keyword.control#3C78D2
markup.inserted#C0521B
markup.deleted#D86030
markup.changed#3C78D2
string.regexp#FFFDF8
constant.character.escape#FFFDF8
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#1860D8italic
support.type.property-name.json#1860D8
text.html.markdown, punctuation.definition.list_item.markdown#1860D8
text.html.markdown markup.inline.raw.markdown#3C78D2
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#18186050
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#F06000bold
markup.underline#FFF0F0underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#18186050
markup.quoteitalic
string.other.link.description.title.markdown#3C78D2
constant.other.reference.link.markdown#3C78D2
markup.raw.block#3C78D2
punctuation.definition.raw.markdown, punctuation.definition.markdown#FFFDF8
variable.language.fenced.markdown#181860
meta.separator#A7A8AFbold
token.info-token#181860
token.warn-token#3C78D2
token.error-token#FF293B
token.debug-token#FFFDF8