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#EBDAD6
  • activityBar.foreground#2A1F1A
  • activityBar.inactiveForeground#928578
  • activityBarBadge.background#B80842
  • activityBarBadge.foreground#F5E6E2
  • badge.background#B80842
  • badge.foreground#F5E6E2
  • breadcrumb.activeSelectionForeground#B80842
  • breadcrumb.focusForeground#2A1F1A
  • breadcrumb.foreground#5A5048
  • button.background#B80842
  • button.foreground#F5E6E2
  • button.hoverBackground#920820
  • dropdown.background#F5E6E2
  • dropdown.border#CCC0B8
  • dropdown.foreground#2A1F1A
  • editor.background#F5E6E2
  • editor.findMatchBackground#94600044
  • editor.findMatchHighlightBackground#94600022
  • editor.foreground#2A1F1A
  • editor.lineHighlightBackground#DDD0CC
  • editor.selectionBackground#DDD0CC99
  • editor.wordHighlightBackground#DDD0CC66
  • editorBracketHighlight.foreground1#B80842
  • editorBracketHighlight.foreground2#946000
  • editorBracketHighlight.foreground3#0E3088
  • editorBracketHighlight.foreground4#1B5500
  • editorBracketHighlight.foreground5#3D3028
  • editorBracketHighlight.foreground6#5A5048
  • editorBracketHighlight.unexpectedBracket.foreground#D42010
  • editorBracketMatch.background#DDD0CC
  • editorBracketMatch.border#B80842
  • editorCursor.foreground#B80842
  • editorError.foreground#D42010
  • editorGroupHeader.tabsBackground#EBDAD6
  • editorGutter.addedBackground#1B5500
  • editorGutter.deletedBackground#D42010
  • editorGutter.modifiedBackground#946000
  • editorIndentGuide.activeBackground1#928578
  • editorIndentGuide.background1#CCC0B8
  • editorInfo.foreground#0E3088
  • editorLineNumber.activeForeground#946000
  • editorLineNumber.foreground#928578
  • editorSuggestWidget.selectedBackground#DDD0CC
  • editorWarning.foreground#946000
  • editorWidget.background#EBDAD6
  • editorWidget.border#CCC0B8
  • focusBorder#B8084266
  • foreground#2A1F1A
  • gitDecoration.addedResourceForeground#1B5500
  • gitDecoration.conflictingResourceForeground#B80842
  • gitDecoration.deletedResourceForeground#D42010
  • gitDecoration.modifiedResourceForeground#946000
  • gitDecoration.untrackedResourceForeground#0E3088
  • input.background#F5E6E2
  • input.border#CCC0B8
  • input.foreground#2A1F1A
  • input.placeholderForeground#928578
  • inputOption.activeBorder#B80842
  • list.activeSelectionBackground#DDD0CC
  • list.activeSelectionForeground#2A1F1A
  • list.focusBackground#DDD0CC
  • list.highlightForeground#B80842
  • list.hoverBackground#DDD0CC88
  • minimap.findMatchHighlight#94600044
  • minimap.selectionHighlight#DDD0CC99
  • minimapGutter.addedBackground#1B5500
  • minimapGutter.deletedBackground#D42010
  • minimapGutter.modifiedBackground#946000
  • panel.background#EBDAD6
  • panel.border#CCC0B8
  • panelTitle.activeBorder#B80842
  • panelTitle.activeForeground#2A1F1A
  • panelTitle.inactiveForeground#5A5048
  • peekView.border#B80842
  • peekViewEditor.background#EBDAD6
  • peekViewResult.background#EBDAD6
  • peekViewTitle.background#DDD0CC
  • peekViewTitleDescription.foreground#5A5048
  • peekViewTitleLabel.foreground#2A1F1A
  • scrollbar.shadow#CCC0B844
  • scrollbarSlider.activeBackground#CCC0B8AA
  • scrollbarSlider.background#CCC0B844
  • scrollbarSlider.hoverBackground#CCC0B888
  • selection.background#DDD0CC99
  • sideBar.background#EBDAD6
  • sideBar.border#CCC0B8
  • sideBar.foreground#3D3028
  • sideBarSectionHeader.background#DDD0CC
  • sideBarSectionHeader.foreground#2A1F1A
  • sideBarTitle.foreground#2A1F1A
  • statusBar.background#DDD0CC
  • statusBar.debuggingBackground#D42010
  • statusBar.debuggingForeground#F5E6E2
  • statusBar.foreground#3D3028
  • statusBar.noFolderBackground#DDD0CC
  • tab.activeBackground#F5E6E2
  • tab.activeBorderTop#B80842
  • tab.activeForeground#2A1F1A
  • tab.border#CCC0B8
  • tab.inactiveBackground#EBDAD6
  • tab.inactiveForeground#5A5048
  • terminal.ansiBlack#2A1F1A
  • terminal.ansiBlue#0E3088
  • terminal.ansiBrightBlack#928578
  • terminal.ansiBrightBlue#0A2575
  • terminal.ansiBrightCyan#0A2575
  • terminal.ansiBrightGreen#124800
  • terminal.ansiBrightMagenta#920820
  • terminal.ansiBrightRed#B81810
  • terminal.ansiBrightWhite#3D3028
  • terminal.ansiBrightYellow#A87000
  • terminal.ansiCyan#0E3088
  • terminal.ansiGreen#1B5500
  • terminal.ansiMagenta#B80842
  • terminal.ansiRed#D42010
  • terminal.ansiWhite#F5E6E2
  • terminal.ansiYellow#946000
  • terminal.background#F5E6E2
  • terminal.foreground#2A1F1A
  • titleBar.activeBackground#EBDAD6
  • titleBar.activeForeground#3D3028
  • titleBar.inactiveBackground#EBDAD6
  • titleBar.inactiveForeground#928578
  • widget.shadow#CCC0B844

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#928578italic
keyword, storage.type, storage.modifier#B80842—
keyword.control#B80842italic
keyword.operator#3D3028—
entity.name.function, support.function#946000—
string, string.quoted#1B5500—
constant.numeric#946000—
constant.language.boolean, constant.language#946000—
entity.name.type, support.type, entity.name.class, entity.name.interface#0E3088—
constant, variable.other.constant#0E3088—
constant.language.symbol#0E3088—
variable, variable.other.readwrite#2A1F1A—
variable.parameter#3D3028—
variable.other.property, variable.other.object.property#3D3028—
meta.preprocessor, keyword.control.directive, keyword.control.import#946000—
invalid, invalid.illegal#D42010—
entity.name.label#B80842—
entity.name.tag#B80842—
entity.other.attribute-name#946000—
support.type.property-name#0E3088—
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator#3D3028—
punctuation.definition.string#1B5500—
constant.character.escape#946000—
markup.heading, entity.name.section#B80842bold
markup.bold—bold
markup.italic—italic
markup.underline.link, string.other.link#0E3088—
markup.inline.raw, markup.fenced_code.block#1B5500—