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#171717
  • activityBar.border#23232360
  • activityBar.foreground#FFBE49
  • activityBarBadge.background#FFA80C
  • activityBarBadge.foreground#232323
  • badge.background#23232330
  • badge.foreground#FF6800
  • breadcrumb.activeSelectionForeground#FF6800
  • breadcrumb.background#232323
  • breadcrumb.focusForeground#FFBE49
  • breadcrumb.foreground#FF6800
  • breadcrumbPicker.background#232323
  • button.background#FF680050
  • contrastBorder#FF680040
  • debugToolBar.background#232323
  • diffEditor.insertedTextBackground#FFBE4915
  • diffEditor.removedTextBackground#FFBE7B20
  • dropdown.background#232323
  • dropdown.border#FFBE4910
  • editor.background#232323
  • editor.findMatchBackground#232323
  • editor.findMatchBorder#FF6800
  • editor.findMatchHighlightBackground#FF680093
  • editor.findMatchHighlightBorder#FFBE4930
  • editor.foreground#FFBE49
  • editor.lineHighlightBackground#23232350
  • editor.selectionBackground#FFA80C30
  • editor.selectionHighlightBackground#FF68006b
  • editor.selectionHighlightBorder#FFA80Cf0
  • editorBracketMatch.background#232323
  • editorBracketMatch.border#FFBE497f
  • editorCursor.foreground#FFBE49
  • editorError.foreground#FFBE7B70
  • editorGroup.border#23232330
  • editorGroupHeader.tabsBackground#232323
  • editorGutter.addedBackground#FFBE4960
  • editorGutter.deletedBackground#FFBE7B60
  • editorGutter.modifiedBackground#FFA80C60
  • editorHoverWidget.background#232323
  • editorHoverWidget.border#FFBE4910
  • editorIndentGuide.activeBackground1#818181
  • editorIndentGuide.background1#81818170
  • editorInfo.foreground#FFA80C70
  • editorLineNumber.activeForeground#FFA80C
  • editorLineNumber.foreground#FF6800c0
  • editorLink.activeForeground#FFBE49
  • editorMarkerNavigation.background#FFBE4905
  • editorOverviewRuler.border#232323
  • editorOverviewRuler.errorForeground#FFBE7B40
  • editorOverviewRuler.findMatchForeground#FF680050
  • editorOverviewRuler.infoForeground#FFA80C40
  • editorOverviewRuler.warningForeground#FFBE4970
  • editorRuler.foreground#818181
  • editorSuggestWidget.background#232323
  • editorSuggestWidget.border#FFBE4910
  • editorSuggestWidget.foreground#FFBE49
  • editorSuggestWidget.highlightForeground#FFBE49
  • editorSuggestWidget.selectedBackground#FF680020
  • editorWarning.foreground#FFBE49
  • editorWhitespace.foreground#FFBE4940
  • editorWidget.background#232323
  • editorWidget.border#FFBE49
  • editorWidget.resizeBorder#FF6800
  • extensionButton.prominentBackground#FFBE4990
  • extensionButton.prominentHoverBackground#FFBE7B
  • focusBorder#FFBE4900
  • gitDecoration.conflictingResourceForeground#FFBE49
  • gitDecoration.deletedResourceForeground#FFBE7B
  • gitDecoration.ignoredResourceForeground#FF6800
  • gitDecoration.modifiedResourceForeground#FF6800
  • gitDecoration.untrackedResourceForeground#FFA80C
  • input.background#464646
  • input.border#FFBE4910
  • input.foreground#FFBE49
  • input.placeholderForeground#FFBE4960
  • inputOption.activeBackground#FFBE4930
  • inputOption.activeBorder#FFBE4930
  • inputValidation.errorBorder#FFBE7B50
  • inputValidation.infoBorder#FFA80C50
  • inputValidation.warningBorder#FFBE4950
  • list.activeSelectionBackground#232323
  • list.activeSelectionForeground#FF6800
  • list.focusBackground#464646
  • list.focusForeground#FFA80C
  • list.highlightForeground#FF6800
  • list.hoverBackground#FF680020
  • list.hoverForeground#FFBE49
  • list.inactiveSelectionBackground#23232330
  • list.inactiveSelectionForeground#FF6800
  • list.warningForeground#FFBE49
  • listFilterWidget.background#23232330
  • listFilterWidget.noMatchesOutline#23232330
  • listFilterWidget.outline#23232330
  • menu.background#232323f8
  • menu.border#FF680050
  • menu.foreground#FFBE49
  • menu.selectionBackground#464646
  • menu.selectionBorder#23232330
  • menu.selectionForeground#FFBE49
  • menu.separatorBackground#FFBE49
  • menubar.selectionBackground#464646
  • menubar.selectionBorder#FF680050
  • menubar.selectionForeground#FFBE49
  • minimap.background#232323
  • minimapGutter.addedBackground#FFBE7B
  • minimapGutter.deletedBackground#FFBE49
  • minimapGutter.modifiedBackground#FFBE49
  • minimapSlider.activeBackground#FFBE49b0
  • minimapSlider.background#FFBE4980
  • minimapSlider.hoverBackground#FFBE49a0
  • notificationLink.foreground#FF6800
  • notifications.background#232323
  • notifications.foreground#FFBE49
  • panel.background#232323
  • panel.border#FF680060
  • panelTitle.activeBorder#FF6800
  • panelTitle.activeForeground#FFBE49
  • panelTitle.inactiveForeground#FFBE49
  • peekView.border#17171730
  • peekViewEditor.background#FFBE4905
  • peekViewEditor.matchHighlightBackground#FF680050
  • peekViewEditorGutter.background#FFBE4905
  • peekViewResult.background#FFBE4905
  • peekViewResult.matchHighlightBackground#FF680050
  • peekViewResult.selectionBackground#FF680070
  • peekViewTitle.background#FFBE4905
  • peekViewTitleDescription.foreground#FFBE4960
  • pickerGroup.foreground#FF6800
  • progressBar.background#FF6800
  • scrollbar.shadow#23232300
  • scrollbarSlider.activeBackground#FF6800cc
  • scrollbarSlider.background#FF6800bb
  • scrollbarSlider.hoverBackground#FF6800ee
  • selection.background#FF6800
  • settings.checkboxBackground#232323
  • settings.checkboxForeground#FFBE49
  • settings.dropdownBackground#232323
  • settings.dropdownForeground#FFBE49
  • settings.headerForeground#FF6800
  • settings.modifiedItemIndicator#FF6800
  • settings.numberInputBackground#232323
  • settings.numberInputForeground#FFBE49
  • settings.textInputBackground#232323
  • settings.textInputForeground#FFBE49
  • sideBar.background#232323
  • sideBar.border#FF680050
  • sideBar.foreground#FFA80C
  • sideBarSectionHeader.background#232323
  • sideBarSectionHeader.border#23232360
  • sideBarSectionHeader.foreground#FFA80C
  • sideBarTitle.foreground#FFBE49
  • statusBar.background#171717
  • statusBar.border#23232360
  • statusBar.debuggingBackground#FFBE49
  • statusBar.debuggingForeground#FFBE49
  • statusBar.foreground#FFA80C
  • statusBar.noFolderBackground#232323
  • statusBarItem.hoverBackground#FF680020
  • statusBarItem.remoteBackground#FF6800
  • statusBarItem.remoteForeground#232323
  • tab.activeBackground#FF680050
  • tab.activeBorder#FF6800
  • tab.activeForeground#FFBE49
  • tab.activeModifiedBorder#FF6800
  • tab.border#232323
  • tab.inactiveBackground#FF680020
  • tab.inactiveForeground#FFBE49af
  • tab.unfocusedActiveBackground#FF680040
  • tab.unfocusedActiveBorder#FF6800
  • tab.unfocusedActiveForeground#FFBE49
  • tab.unfocusedInactiveBackground#FF680010
  • tab.unfocusedInactiveForeground#FFBE497f
  • terminal.ansiBlack#232323
  • terminal.ansiBlue#e5b14f
  • terminal.ansiBrightBlack#FF6800
  • terminal.ansiBrightBlue#FFA80C
  • terminal.ansiBrightCyan#FFA80C
  • terminal.ansiBrightGreen#FFBE49
  • terminal.ansiBrightMagenta#FFBE49
  • terminal.ansiBrightRed#FFBE7B
  • terminal.ansiBrightWhite#FFBE49
  • terminal.ansiBrightYellow#FFBE49
  • terminal.ansiCyan#FFA80C
  • terminal.ansiGreen#FFBE49
  • terminal.ansiMagenta#FFBE49
  • terminal.ansiRed#FFBE7B
  • terminal.ansiWhite#FFBE49
  • terminal.ansiYellow#FFBE49
  • terminalCursor.background#232323
  • terminalCursor.foreground#FFBE49
  • textLink.activeForeground#FFBE49
  • textLink.foreground#FF6800
  • titleBar.activeBackground#171717
  • titleBar.activeForeground#FFBE49
  • titleBar.border#23232360
  • titleBar.inactiveBackground#232323
  • titleBar.inactiveForeground#FF6800
  • tree.indentGuidesStroke#818181
  • 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#FFBE49
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#FFBE49
constant.other.php#FFBE49
constant.other.color#FFBE49
invalid, invalid.illegal#FFBE7B
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#FF6800
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#FFBE49
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#f6efdf
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FFBE49
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#FFBE49
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#FF6800
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#FFA80C
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#FFA80C
support.other.variable, string.other.link, markup.table#FFBE49
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#FFBE49
variable.parameter.function.language.special, variable.parameter#FFBE7B
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#FFBE49
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#FFBE49
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#FF6800
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FFBE7B
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#FFA80Citalic
entity.other.attribute-name, support.function#FFBE49
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#FFBE49
source.scss keyword.control#FFBE49
markup.inserted#FFBE49
markup.deleted#FFBE7B
markup.changed#FFBE49
string.regexp#FFA80C
constant.character.escape#FFA80C
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#FFBE49italic
support.type.property-name.json#FFBE49
text.html.markdown, punctuation.definition.list_item.markdown#FFBE49
text.html.markdown markup.inline.raw.markdown#FFBE49
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#FF680050
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#FF6800bold
markup.underline#FFA80Cunderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#FF680050
markup.quoteitalic
string.other.link.description.title.markdown#FFBE49
constant.other.reference.link.markdown#FFBE49
markup.raw.block#FFBE49
punctuation.definition.raw.markdown, punctuation.definition.markdown#FFA80C
variable.language.fenced.markdown#FF6800
meta.separator#A7A8AFbold
token.info-token#FF6800
token.warn-token#FFBE49
token.error-token#FF293B
token.debug-token#FFA80C