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#B22222
  • activityBar.background#111213
  • activityBar.foreground#B22222
  • activityBarBadge.background#B22222
  • activityBarBadge.foreground#0B0C0F
  • badge.background#B22222
  • badge.foreground#0B0C0F
  • button.background#1A1B1C
  • button.foreground#FFFFFF
  • button.hoverBackground#2A2A2A
  • dropdown.background#101112
  • dropdown.border#1A1B1C
  • dropdown.foreground#E1E1E1
  • editor.background#0B0C0F
  • editor.findMatchBackground#B2222244
  • editor.findMatchHighlightBackground#B2222222
  • editor.foreground#E1E1E1
  • editor.lineHighlightBackground#1E1F2033
  • editor.lineHighlightBorder#B2222280
  • editor.selectionBackground#B2222233
  • editor.selectionHighlightBackground#B2222222
  • editorBracketMatch.background#B2222233
  • editorBracketMatch.border#B22222
  • editorCursor.foreground#B22222
  • editorGroupHeader.tabsBackground#0B0C0F
  • editorIndentGuide.activeBackground#3A3A3A88
  • editorIndentGuide.background#3A3A3A44
  • editorLineNumber.activeForeground#B22222
  • editorLineNumber.foreground#5A5A5A
  • editorWhitespace.foreground#3A3A3A
  • focusBorder#B22222
  • gitDecoration.conflictingResourceForeground#D2691E
  • gitDecoration.deletedResourceForeground#C04040
  • gitDecoration.modifiedResourceForeground#B22222
  • gitDecoration.untrackedResourceForeground#8B8B3A
  • input.background#101112
  • input.border#1A1B1C
  • input.foreground#E1E1E1
  • input.placeholderForeground#5A5A5A
  • inputOption.activeBorder#B22222
  • list.activeSelectionBackground#1A1B1C
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1A1B1C
  • list.highlightForeground#B22222
  • list.hoverBackground#1A1B1C66
  • minimap.background#0B0C0F
  • minimapSlider.activeBackground#B2222066
  • minimapSlider.background#B2222022
  • minimapSlider.hoverBackground#B2222044
  • panel.background#0B0C0F
  • panel.border#1A1A1A
  • panelTitle.activeBorder#B22222
  • panelTitle.activeForeground#B22222
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#B2222288
  • scrollbarSlider.background#3A3A3A44
  • scrollbarSlider.hoverBackground#3A3A3A88
  • sideBar.background#101112
  • sideBar.foreground#C0C0C0
  • sideBarSectionHeader.background#111213
  • sideBarSectionHeader.foreground#B22222
  • sideBarTitle.foreground#B22222
  • statusBar.background#1A1B1C
  • statusBar.debuggingBackground#B22222
  • statusBar.foreground#E1E1E1
  • statusBar.noFolderBackground#111213
  • statusBarItem.hoverBackground#2A2A2A
  • tab.activeBackground#1A1B1C
  • tab.activeBorder#B22222
  • tab.activeForeground#FFFFFF
  • tab.border#0B0C0F
  • tab.inactiveBackground#0F1011
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#3B6EA5
  • terminal.ansiBrightBlue#5A9BD5
  • terminal.ansiBrightCyan#3CB371
  • terminal.ansiBrightGreen#6B8E23
  • terminal.ansiBrightMagenta#C04040
  • terminal.ansiBrightRed#C04040
  • terminal.ansiBrightYellow#E27A2E
  • terminal.ansiCyan#2E8B57
  • terminal.ansiGreen#2E8B57
  • terminal.ansiMagenta#8B3A3A
  • terminal.ansiRed#B22222
  • terminal.ansiYellow#D2691E
  • terminal.background#0B0C0F
  • terminal.foreground#E1E1E1
  • titleBar.activeBackground#111213
  • titleBar.activeForeground#E1E1E1
  • titleBar.inactiveBackground#0B0C0F
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#E9967A
keyword, storage.type, storage.modifier#B22222bold
keyword.operator, punctuation.accessor#D2691E
variable, variable.other#E1E1E1
variable.parameter#D2691Eitalic
entity.name.function, support.function#A0522D
meta.function-call#C0C0C0
entity.name.class, entity.name.type.class, support.class#B22222bold
entity.name.type, support.type#8B3A3A
entity.name.type.interface#D2691Eitalic
constant.numeric#D2691E
constant, constant.language, constant.character#B22222
constant.language.boolean#B22222bold
variable.other.property, support.variable.property#C0C0C0
meta.object-literal.key#A0522D
entity.name.tag, punctuation.definition.tag#B22222
entity.other.attribute-name#D2691Eitalic
punctuation, meta.brace#D2691E
string.regexp#D2691E
constant.character.escape#D2691E
meta.decorator, punctuation.decorator#D2691E
invalid, invalid.illegal#C04040strikethrough
markup.heading, entity.name.section#B22222bold
markup.bold#D2691Ebold
markup.italic#D2691Eitalic
markup.underline.link#8B3A3A
markup.inline.raw, markup.fenced_code#D2691E
support.type.property-name.json#A0522D
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D2691E
support.type.property-name.css#8B3A3A
support.constant.property-value.css#D2691E