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#FF4D4D
  • activityBar.background#0E0E0E
  • activityBar.foreground#FF4D4D
  • activityBarBadge.background#FF4D4D
  • activityBarBadge.foreground#111111
  • badge.background#FF4D4D
  • badge.foreground#111111
  • button.background#8B0000
  • button.foreground#FFFFFF
  • button.hoverBackground#FF4D4D
  • dropdown.background#0A0A0A
  • dropdown.border#FF4D4D
  • dropdown.foreground#CCCCCC
  • editor.background#111111
  • editor.findMatchBackground#FF4D4DAA
  • editor.findMatchHighlightBackground#FF4D4D80
  • editor.foreground#CCCCCC
  • editor.lineHighlightBackground#FF4D4D20
  • editor.lineHighlightBorder#FF4D4D40
  • editor.selectionBackground#FF4D4D60
  • editor.selectionHighlightBackground#FF4D4D40
  • editorBracketMatch.background#FF4D4D30
  • editorBracketMatch.border#FF4D4D
  • editorCursor.foreground#00E5E5
  • editorGroupHeader.tabsBackground#111111
  • editorIndentGuide.activeBackground#FF4D4D
  • editorIndentGuide.background#5A5A5A40
  • editorLineNumber.activeForeground#FF4D4D
  • editorLineNumber.foreground#5A5A5A
  • editorWhitespace.foreground#5A5A5A
  • focusBorder#FF4D4D
  • gitDecoration.conflictingResourceForeground#F5A623
  • gitDecoration.deletedResourceForeground#FF4D4D
  • gitDecoration.modifiedResourceForeground#00E5E5
  • gitDecoration.untrackedResourceForeground#7ED321
  • input.background#0A0A0A
  • input.border#FF4D4D
  • input.foreground#CCCCCC
  • input.placeholderForeground#5A5A5A
  • inputOption.activeBorder#FF4D4D
  • list.activeSelectionBackground#FF4D4D40
  • list.activeSelectionForeground#CCCCCC
  • list.focusBackground#FF4D4D40
  • list.highlightForeground#FF4D4D
  • list.hoverBackground#FF4D4D24
  • minimap.background#111111
  • minimapSlider.activeBackground#FF4D4D66
  • minimapSlider.background#FF4D4D22
  • minimapSlider.hoverBackground#FF4D4D44
  • panel.background#111111
  • panel.border#FF4D4D
  • panelTitle.activeBorder#FF4D4D
  • panelTitle.activeForeground#CCCCCC
  • panelTitle.inactiveForeground#5A5A5A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#FF4D4D88
  • scrollbarSlider.background#5A5A5A44
  • scrollbarSlider.hoverBackground#5A5A5A88
  • sideBar.background#111111
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#0E0E0E
  • sideBarSectionHeader.foreground#FF4D4D
  • sideBarTitle.foreground#FF4D4D
  • statusBar.background#8B0000
  • statusBar.debuggingBackground#FF4D4D
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#111111
  • statusBarItem.hoverBackground#FF4D4D40
  • tab.activeBackground#111111
  • tab.activeBorder#FF4D4D
  • tab.activeForeground#CCCCCC
  • tab.border#111111
  • tab.inactiveBackground#0A0A0A
  • tab.inactiveForeground#A66B6B
  • terminal.ansiBlue#4A90E2
  • terminal.ansiBrightBlue#5FA8FF
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#A0E75A
  • terminal.ansiBrightMagenta#FF66AA
  • terminal.ansiBrightRed#FF7F7F
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#00E5E5
  • terminal.ansiGreen#7ED321
  • terminal.ansiMagenta#D0021B
  • terminal.ansiRed#FF4D4D
  • terminal.ansiYellow#F5A623
  • terminal.background#111111
  • terminal.foreground#CCCCCC
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#CCCCCC
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#A66B6B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7F4F4Fitalic
string, string.quoted, string.template#00FFFF
keyword, storage.type, storage.modifier#FF3333bold
keyword.operator, punctuation.accessor#B22222
variable, variable.other#E0E0E0
variable.parameter#FFCC00italic
entity.name.function, support.function#33FF33
meta.function-call#33FF33
entity.name.class, entity.name.type.class, support.class#FF6666bold
entity.name.type, support.type#FFCC00
entity.name.type.interface#FFCC00italic
constant.numeric#FF6666
constant, constant.language, constant.character#FF6666
constant.language.boolean#FF6666bold
variable.other.property, support.variable.property#00FFFF
meta.object-literal.key#00FFFF
entity.name.tag, punctuation.definition.tag#FF3333
entity.other.attribute-name#FF6666italic
punctuation, meta.brace#E0E0E0
string.regexp#FF6666
constant.character.escape#FF6666
meta.decorator, punctuation.decorator#FFCC00
invalid, invalid.illegal#FF3333strikethrough
markup.heading, entity.name.section#FF3333bold
markup.bold#FF6666bold
markup.italic#FF6666italic
markup.underline.link#00FFFF
markup.inline.raw, markup.fenced_code#00FFFF
support.type.property-name.json#FF3333
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6666
support.type.property-name.css#FFCC00
support.constant.property-value.css#00FFFF