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.activeBackground#493526
  • activityBar.background#211E1C
  • activityBar.foreground#FB9D51
  • activityBar.inactiveForeground#999999
  • activityBarBadge.background#FB9D51
  • activityBarBadge.foreground#1D1B1B
  • badge.background#FB9D51
  • badge.foreground#1D1B1B
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.background#343232
  • breadcrumb.focusForeground#FFFFFF
  • breadcrumb.foreground#999999
  • button.background#FB9D51
  • button.foreground#1D1B1B
  • button.secondaryBackground#211E1C
  • button.secondaryForeground#FFFFFF
  • dropdown.background#343232
  • dropdown.foreground#FFFFFF
  • editor.background#1D1B1B
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#4E4B4B
  • editor.lineHighlightBorder#4E4B4B
  • editor.selectionBackground#4E4B4B
  • editor.snippetFinalTabstopHighlightBackground#1D1B1B
  • editor.snippetTabstopHighlightBackground#1D1B1B
  • editor.snippetTabstopHighlightBorder#999999
  • editorBracketHighlight.foreground1#FFFFFF
  • editorCodeLens.foreground#999999
  • editorCursor.foreground#FB9D51
  • editorGroupHeader.tabsBackground#211E1C
  • editorHoverWidget.background#211E1C
  • editorHoverWidget.border#999999
  • editorIndentGuide.background1#FB9D5133
  • editorLineNumber.foreground#999999
  • editorLink.activeForeground#FB9D51
  • editorRuler.foreground#FB9D5133
  • editorSuggestWidget.background#211E1C
  • editorSuggestWidget.focusHighlightForeground#FB9D51
  • editorSuggestWidget.foreground#FFFFFF
  • editorSuggestWidget.highlightForeground#FB9D51
  • editorSuggestWidget.selectedBackground#211E1C
  • editorSuggestWidget.selectedIconForeground#FB9D51
  • editorWhitespace.foreground#4E4B4B
  • editorWidget.background#211E1C
  • focusBorder#FB9D51
  • foreground#FFFFFF
  • gitDecoration.ignoredResourceForeground#999999
  • icon.foreground#FB9D51
  • input.background#343232
  • input.foreground#FFFFFF
  • input.placeholderForeground#999999
  • keybindingLabel.background#1D1B1B
  • keybindingLabel.foreground#FFFFFF
  • list.activeSelectionBackground#4E4B4B
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#4E4B4B
  • list.focusBackground#4E4B4B
  • list.highlightForeground#FB9D51
  • list.hoverBackground#4E4B4B
  • list.inactiveSelectionBackground#615F5F
  • menu.background#211E1C
  • menu.foreground#FFFFFF
  • menu.selectionBackground#4E4B4B
  • menu.separatorBackground#493526
  • menubar.selectionBackground#4E4B4B
  • notificationLink.foreground#FB9D51
  • notifications.background#211E1C
  • panel.background#343232
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#999999
  • peekView.border#4E4B4B
  • peekViewEditor.background#1D1B1B
  • peekViewResult.fileForeground#FFFFFF
  • peekViewResult.lineForeground#FFFFFF
  • peekViewResult.selectionBackground#4E4B4B
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitleDescription.foreground#999999
  • peekViewTitleLabel.foreground#FFFFFF
  • pickerGroup.border#211E1C
  • pickerGroup.foreground#FB9D51
  • progressBar.background#FB9D51
  • scrollbarSlider.activeBackground#615F5F
  • scrollbarSlider.background#493526
  • settings.checkboxForeground#FFFFFF
  • settings.dropdownForeground#FFFFFF
  • settings.headerForeground#FFFFFF
  • settings.numberInputForeground#FFFFFF
  • settings.textInputForeground#FFFFFF
  • sideBar.background#343232
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#1D1B1B
  • sideBarTitle.background#211E1C
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#493526
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#4E4B4B
  • statusBar.noFolderForeground#FFFFFF
  • statusBarItem.remoteForeground#1D1B1B
  • tab.activeBackground#493526
  • tab.activeForeground#FB9D51
  • tab.inactiveBackground#343232
  • tab.inactiveForeground#FFFFFF
  • terminal.background#1D1B1B
  • terminal.border#493526
  • terminal.foreground#FFFFFF
  • terminalCursor.background#1D1B1B
  • terminalCursor.foreground#FB9D51
  • textLink.foreground#FB9D51
  • titleBar.activeBackground#211E1C
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveForeground#999999

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#FFFFFF—
comment#999999—
keyword.control, keyword.operator.expression, keyword.operator.new, keyword.other, storage.modifier, storage.type, support.variable#90C4F9—
entity.name.tag.css, entity.name.tag.scss#90C4F9—
entity.name.tag.doctype.html, keyword.control.flow.alias.yaml, keyword.control.flow.anchor.yaml, keyword.other.important, meta.doctype, meta.tag.metadata.doctype, meta.tag.metadata.doctype.html, punctuation.section.embedded, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, variable.other.alias.yaml, variable.other.anchor.yaml#90C4F9—
markup.heading#90C4F9—
entity.name.tag.yaml, entity.other.attribute-name, support.type.property-name#90C4F9—
support.type.property-name.css, support.type.property-name.media.css#DF9FD9—
entity.name.tag.html#FB9D51—
storage.type.java, storage.type.primitive, storage.type.tag#FB9D51—
constant.numeric, constant.other.color, keyword.other.unit#FB9D51—
entity.other.attribute-name.id#FB9D51—
markup.quote#FB9D51—
entity.other.attribute-name.class.css#90C4F9—
keyword.other.directive.yaml, string#B6BE6A—
string.regexp#B6BE6A—
constant.language.symbol, constant.other.reference.link.markdown, constant.other.symbol#B6BE6A—
variable.language, variable.language.this.php, variable.other.constant, variable.other.php, variable.other.readwrite.instance.ruby, variable.scss#B6BE6A—
markup.link, markup.underline.link#B6BE6A—
entity.other.attribute-name.pseudo-element.css#90C4F9—
support.function#FB9D51—
entity.name.type, support.class#FB9D51—
constant.language#FB9D51—
punctuation.definition.list.begin#CCCCCC—
markup.inline.raw, markup.raw#CCCCCC—
invalid#FCC5C5—
markup.italic—italic
markup.bold—bold