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#180B00
  • activityBar.border#180B0060
  • activityBar.foreground#F0F0F0
  • activityBarBadge.background#FFDD02
  • activityBarBadge.foreground#180B00
  • badge.background#180B0030
  • badge.foreground#C04800
  • breadcrumb.activeSelectionForeground#C04800
  • breadcrumb.background#180B00
  • breadcrumb.focusForeground#F0F0F0
  • breadcrumb.foreground#FF7800
  • breadcrumbPicker.background#180B00
  • button.background#C0480050
  • contrastBorder#C0480040
  • debugToolBar.background#180B00
  • diffEditor.insertedTextBackground#18487815
  • diffEditor.removedTextBackground#FFD83020
  • dropdown.background#180B00
  • dropdown.border#FFFFF010
  • editor.background#180B00
  • editor.findMatchBackground#180B00
  • editor.findMatchBorder#C04800
  • editor.findMatchHighlightBackground#C0480093
  • editor.findMatchHighlightBorder#FFFFF030
  • editor.foreground#F0F0F0
  • editor.lineHighlightBackground#180B0050
  • editor.selectionBackground#FFDD0230
  • editor.selectionHighlightBackground#C048006b
  • editor.selectionHighlightBorder#FFDD02f0
  • editorBracketHighlight.foreground1#00f0f0
  • editorBracketHighlight.foreground2#a0f8f8
  • editorBracketHighlight.foreground3#60F0F0
  • editorBracketHighlight.foreground4#A8F0F0
  • editorBracketHighlight.foreground5#52a0a0
  • editorBracketHighlight.foreground6#00ffff
  • editorBracketMatch.background#180B00
  • editorBracketMatch.border#F090007f
  • editorCursor.foreground#F09000
  • editorError.foreground#FFD83070
  • editorGroup.border#180B0030
  • editorGroupHeader.tabsBackground#180B00
  • editorGutter.addedBackground#18487860
  • editorGutter.deletedBackground#FFD83060
  • editorGutter.modifiedBackground#FFDD0260
  • editorHoverWidget.background#180B00
  • editorHoverWidget.border#FFFFF010
  • editorIndentGuide.activeBackground#903000
  • editorIndentGuide.background#90300070
  • editorInfo.foreground#FFDD0270
  • editorLineNumber.activeForeground#FFDD02
  • editorLineNumber.foreground#C04800c0
  • editorLink.activeForeground#F0F0F0
  • editorMarkerNavigation.background#F0F0F005
  • editorOverviewRuler.border#180B00
  • editorOverviewRuler.errorForeground#FFD83040
  • editorOverviewRuler.findMatchForeground#C04800
  • editorOverviewRuler.infoForeground#FFDD0240
  • editorOverviewRuler.warningForeground#F0900070
  • editorRuler.foreground#903000
  • editorSuggestWidget.background#180B00
  • editorSuggestWidget.border#FFFFF010
  • editorSuggestWidget.foreground#F0F0F0
  • editorSuggestWidget.highlightForeground#F09000
  • editorSuggestWidget.selectedBackground#C0480020
  • editorWarning.foreground#184878
  • editorWhitespace.foreground#F0F0F040
  • editorWidget.background#180B00
  • editorWidget.border#F09000
  • editorWidget.resizeBorder#C04800
  • extensionButton.prominentBackground#18487890
  • extensionButton.prominentHoverBackground#FFD830
  • focusBorder#FFFFF000
  • gitDecoration.conflictingResourceForeground#F09000
  • gitDecoration.deletedResourceForeground#FFD830
  • gitDecoration.ignoredResourceForeground#C04800
  • gitDecoration.modifiedResourceForeground#FF7800
  • gitDecoration.untrackedResourceForeground#FFDD02
  • input.background#481800
  • input.border#FFFFF010
  • input.foreground#F0F0F0
  • input.placeholderForeground#F0F0F060
  • inputOption.activeBackground#F0F0F030
  • inputOption.activeBorder#F0F0F030
  • inputValidation.errorBorder#FFD83050
  • inputValidation.infoBorder#FFDD0250
  • inputValidation.warningBorder#F0900050
  • list.activeSelectionBackground#180B00
  • list.activeSelectionForeground#f5d72c
  • list.focusBackground#481800
  • list.focusForeground#FFDD02
  • list.highlightForeground#C04800
  • list.hoverBackground#905600
  • list.hoverForeground#FFFFF0
  • list.inactiveSelectionBackground#180B0030
  • list.inactiveSelectionForeground#C04800
  • list.warningForeground#F09000
  • listFilterWidget.background#180B0030
  • listFilterWidget.noMatchesOutline#180B0030
  • listFilterWidget.outline#180B0030
  • menu.background#180B00f8
  • menu.border#C0480050
  • menu.foreground#F0F0F0
  • menu.selectionBackground#481800
  • menu.selectionBorder#180B0030
  • menu.selectionForeground#F0F0F0
  • menu.separatorBackground#F0F0F0
  • menubar.selectionBackground#481800
  • menubar.selectionBorder#C0480050
  • menubar.selectionForeground#F0F0F0
  • minimap.background#180B00
  • minimapGutter.addedBackground#FFD830
  • minimapGutter.deletedBackground#F09000
  • minimapGutter.modifiedBackground#184878
  • minimapSlider.activeBackground#184878b0
  • minimapSlider.background#18487880
  • minimapSlider.hoverBackground#184878a0
  • notificationLink.foreground#C04800
  • notifications.background#180B00
  • notifications.foreground#F0F0F0
  • panel.background#180B00
  • panel.border#180B0060
  • panelTitle.activeBorder#C04800
  • panelTitle.activeForeground#FFFFF0
  • panelTitle.inactiveForeground#F0F0F0
  • peekView.border#180B0030
  • peekViewEditor.background#F0F0F005
  • peekViewEditor.matchHighlightBackground#C0480050
  • peekViewEditorGutter.background#F0F0F005
  • peekViewResult.background#F0F0F005
  • peekViewResult.matchHighlightBackground#C0480050
  • peekViewResult.selectionBackground#C0480070
  • peekViewTitle.background#F0F0F005
  • peekViewTitleDescription.foreground#F0F0F060
  • pickerGroup.foreground#C04800
  • progressBar.background#C04800
  • scrollbar.shadow#180B0000
  • scrollbarSlider.activeBackground#acfaf3cc
  • scrollbarSlider.background#cca645cc
  • scrollbarSlider.hoverBackground#C04800ee
  • selection.background#C04800
  • settings.checkboxBackground#180B00
  • settings.checkboxForeground#F0F0F0
  • settings.dropdownBackground#180B00
  • settings.dropdownForeground#F0F0F0
  • settings.headerForeground#C04800
  • settings.modifiedItemIndicator#C04800
  • settings.numberInputBackground#180B00
  • settings.numberInputForeground#F0F0F0
  • settings.textInputBackground#180B00
  • settings.textInputForeground#F0F0F0
  • sideBar.background#180B00
  • sideBar.border#C0480050
  • sideBar.foreground#dbe5e7
  • sideBarSectionHeader.background#180B00
  • sideBarSectionHeader.border#180B0060
  • sideBarSectionHeader.foreground#FFDD02
  • sideBarTitle.foreground#F0F0F0
  • statusBar.background#180B00
  • statusBar.border#180B0060
  • statusBar.debuggingBackground#F09000
  • statusBar.debuggingForeground#FFFFF0
  • statusBar.foreground#A8F0F0
  • statusBar.noFolderBackground#180B00
  • statusBarItem.hoverBackground#C0480020
  • statusBarItem.remoteBackground#C04800
  • statusBarItem.remoteForeground#180B00
  • tab.activeBackground#C0480050
  • tab.activeBorder#C04800
  • tab.activeForeground#FFFFF0
  • tab.activeModifiedBorder#C04800
  • tab.border#180B00
  • tab.inactiveBackground#C0480020
  • tab.inactiveForeground#F0F0F0af
  • tab.unfocusedActiveBackground#C0480040
  • tab.unfocusedActiveBorder#C04800
  • tab.unfocusedActiveForeground#F0F0F0
  • tab.unfocusedInactiveBackground#C0480010
  • tab.unfocusedInactiveForeground#F0F0F07f
  • terminal.ansiBlack#180B00
  • terminal.ansiBlue#FFDD02
  • terminal.ansiBrightBlack#C04800
  • terminal.ansiBrightBlue#FFDD02
  • terminal.ansiBrightCyan#FFF0F0
  • terminal.ansiBrightGreen#184878
  • terminal.ansiBrightMagenta#F09000
  • terminal.ansiBrightRed#FFD830
  • terminal.ansiBrightWhite#FFFFF0
  • terminal.ansiBrightYellow#F09000
  • terminal.ansiCyan#FFF0F0
  • terminal.ansiGreen#184878
  • terminal.ansiMagenta#F09000
  • terminal.ansiRed#FFD830
  • terminal.ansiWhite#FFFFF0
  • terminal.ansiYellow#F09000
  • terminalCursor.background#180B00
  • terminalCursor.foreground#F09000
  • textLink.activeForeground#F0F0F0
  • textLink.foreground#C04800
  • titleBar.activeBackground#180B00
  • titleBar.activeForeground#F0F0F0
  • titleBar.border#180B0060
  • titleBar.inactiveBackground#180B00
  • titleBar.inactiveForeground#C04800
  • tree.indentGuidesStroke#903000
  • widget.shadow#180B0030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#F09000
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#184878
constant.other.php#F09000
constant.other.color#FFFFF0
entity.name.tag.js.jsx, entity.name.tag.html#fdeb86
invalid, invalid.illegal#FFD830
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#FF7800
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#F0F0F0
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#F0F0F0
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#F09000
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#FF7800
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#FFDD02
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#FFF0F0
support.other.variable, string.other.link, markup.table#F0F0F0
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#F09000
variable.parameter.function.language.special, variable.parameter#FFD830
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#184878
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#F09000
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#FF7800
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FFD830
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#FFDD02italic
entity.other.attribute-name, support.function#F09000
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#F0F0F0
source.scss keyword.control#F09000
markup.inserted#184878
markup.deleted#FFD830
markup.changed#F09000
string.regexp#FFF0F0
constant.character.escape#FFF0F0
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#F0F0F0italic
support.type.property-name.json#F0F0F0
text.html.markdown, punctuation.definition.list_item.markdown#F0F0F0
text.html.markdown markup.inline.raw.markdown#F09000
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#C0480050
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#FF7800bold
markup.underline#FFDD02underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#C0480050
markup.quoteitalic
string.other.link.description.title.markdown#F09000
constant.other.reference.link.markdown#F09000
markup.raw.block#F09000
punctuation.definition.raw.markdown, punctuation.definition.markdown#FFF0F0
variable.language.fenced.markdown#C04800
meta.separator#A7A8AFbold
token.info-token#C04800
token.warn-token#F09000
token.error-token#FF293B
token.debug-token#FFF0F0