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.activeBorder#C1121C
  • activityBar.background#F5F5F5
  • activityBar.foreground#2B2B2B
  • activityBarBadge.background#C1121C
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C1121C
  • badge.foreground#FFFFFF
  • button.background#C1121C
  • button.foreground#FFFFFF
  • button.hoverBackground#A01018
  • dropdown.background#F5F5F5
  • dropdown.border#E2E2E2
  • dropdown.foreground#2B2B2B
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFD2C0
  • editor.findMatchHighlightBackground#FFD2C0
  • editor.foreground#2B2B2B
  • editor.lineHighlightBackground#FFF4F4
  • editor.lineHighlightBorder#C1121C
  • editor.selectionBackground#FFCCCC
  • editor.selectionHighlightBackground#FFE5E5
  • editorBracketMatch.background#FFE5E5
  • editorBracketMatch.border#C1121C
  • editorCursor.foreground#C1121C
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#C1121C
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#C1121C
  • editorLineNumber.foreground#7A7A7A
  • editorWhitespace.foreground#D0D0D0
  • focusBorder#C1121C
  • gitDecoration.conflictingResourceForeground#B8860B
  • gitDecoration.deletedResourceForeground#8B0000
  • gitDecoration.modifiedResourceForeground#C1121C
  • gitDecoration.untrackedResourceForeground#006B3C
  • input.background#F5F5F5
  • input.border#E2E2E2
  • input.foreground#2B2B2B
  • input.placeholderForeground#7A7A7A
  • inputOption.activeBorder#C1121C
  • list.activeSelectionBackground#C1121C
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#FFE5E5
  • list.highlightForeground#C1121C
  • list.hoverBackground#FFE5E5
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#FFBFBF
  • minimapSlider.background#FFE5E5
  • minimapSlider.hoverBackground#FFD2D2
  • panel.background#FAFAFA
  • panel.border#E2E2E2
  • panelTitle.activeBorder#C1121C
  • panelTitle.activeForeground#2B2B2B
  • panelTitle.inactiveForeground#7A7A7A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#808080
  • scrollbarSlider.background#C0C0C0
  • scrollbarSlider.hoverBackground#A0A0A0
  • sideBar.background#FFFFFF
  • sideBar.foreground#2B2B2B
  • sideBarSectionHeader.background#F5F5F5
  • sideBarSectionHeader.foreground#C1121C
  • sideBarTitle.foreground#2B2B2B
  • statusBar.background#C1121C
  • statusBar.debuggingBackground#8B3A2F
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#C1121C
  • statusBarItem.hoverBackground#A01018
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#C1121C
  • tab.activeForeground#2B2B2B
  • tab.border#E2E2E2
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#7A7A7A
  • terminal.ansiBlue#0066CC
  • terminal.ansiBrightBlue#3366FF
  • terminal.ansiBrightCyan#00CCCC
  • terminal.ansiBrightGreen#00CC00
  • terminal.ansiBrightMagenta#FF66FF
  • terminal.ansiBrightRed#FF5F5F
  • terminal.ansiBrightYellow#FFCC00
  • terminal.ansiCyan#009999
  • terminal.ansiGreen#008000
  • terminal.ansiMagenta#CC00CC
  • terminal.ansiRed#C1121C
  • terminal.ansiYellow#B8860B
  • terminal.background#FAFAFA
  • terminal.foreground#2B2B2B
  • titleBar.activeBackground#FAFAFA
  • titleBar.activeForeground#2B2B2B
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#7A7A7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#006400
keyword, storage.type, storage.modifier#B22222bold
keyword.operator, punctuation.accessor#8B4513
variable, variable.other#1A1A1A
variable.parameter#8B4513italic
entity.name.function, support.function#8B4513
meta.function-call#B22222
entity.name.class, entity.name.type.class, support.class#8B4513bold
entity.name.type, support.type#B22222
entity.name.type.interface#006400italic
constant.numeric#8B4513
constant, constant.language, constant.character#006400
constant.language.boolean#B22222bold
variable.other.property, support.variable.property#006400
meta.object-literal.key#8B4513
entity.name.tag, punctuation.definition.tag#B22222
entity.other.attribute-name#8B4513italic
punctuation, meta.brace#1A1A1A
string.regexp#8B4513
constant.character.escape#006400
meta.decorator, punctuation.decorator#B22222
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#B22222bold
markup.bold#B22222bold
markup.italic#777777italic
markup.underline.link#8B4513
markup.inline.raw, markup.fenced_code#006400
support.type.property-name.json#B22222
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8B4513
support.type.property-name.css#B22222
support.constant.property-value.css#006400