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#C41E3D
  • activityBar.background#0B0D17
  • activityBar.foreground#C41E3D
  • activityBarBadge.background#C41E3D
  • activityBarBadge.foreground#0B0D17
  • badge.background#C41E3D
  • badge.foreground#0B0D17
  • button.background#151720
  • button.foreground#FFFFFF
  • button.hoverBackground#252735
  • dropdown.background#0F111A
  • dropdown.border#151720
  • dropdown.foreground#D8D8D8
  • editor.background#0B0D17
  • editor.findMatchBackground#C41E3D44
  • editor.findMatchHighlightBackground#C41E3D22
  • editor.foreground#D8D8D8
  • editor.lineHighlightBackground#15172066
  • editor.lineHighlightBorder#151720AA
  • editor.selectionBackground#C41E3D33
  • editor.selectionHighlightBackground#C41E3D22
  • editorBracketMatch.background#C41E3D33
  • editorBracketMatch.border#C41E3D
  • editorCursor.foreground#C41E3D
  • editorGroupHeader.tabsBackground#0B0D17
  • editorIndentGuide.activeBackground#3A3A3A88
  • editorIndentGuide.background#3A3A3A44
  • editorLineNumber.activeForeground#C41E3D
  • editorLineNumber.foreground#4A4A4A
  • editorWhitespace.foreground#3A3A3A
  • focusBorder#C41E3D
  • gitDecoration.conflictingResourceForeground#FFE066
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#C41E3D
  • gitDecoration.untrackedResourceForeground#6FD17E
  • input.background#0F111A
  • input.border#151720
  • input.foreground#D8D8D8
  • input.placeholderForeground#5A5A5A
  • inputOption.activeBorder#C41E3D
  • list.activeSelectionBackground#151720
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#151720
  • list.highlightForeground#C41E3D
  • list.hoverBackground#15172066
  • minimap.background#0B0D17
  • minimapSlider.activeBackground#C41E3D66
  • minimapSlider.background#C41E3D22
  • minimapSlider.hoverBackground#C41E3D44
  • panel.background#0B0D17
  • panel.border#151720
  • panelTitle.activeBorder#C41E3D
  • panelTitle.activeForeground#C41E3D
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#C41E3D88
  • scrollbarSlider.background#4A4A4A44
  • scrollbarSlider.hoverBackground#4A4A4A88
  • sideBar.background#0F111A
  • sideBar.foreground#B0B0B0
  • sideBarSectionHeader.background#0B0D17
  • sideBarSectionHeader.foreground#C41E3D
  • sideBarTitle.foreground#C41E3D
  • statusBar.background#151720
  • statusBar.debuggingBackground#C41E3D
  • statusBar.foreground#D8D8D8
  • statusBar.noFolderBackground#0B0D17
  • statusBarItem.hoverBackground#252735
  • tab.activeBackground#151720
  • tab.activeBorder#C41E3D
  • tab.activeForeground#FFFFFF
  • tab.border#0A0A0A
  • tab.inactiveBackground#0F111A
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#5FD8D8
  • terminal.ansiBrightBlue#8FD8FF
  • terminal.ansiBrightCyan#9ED8F3
  • terminal.ansiBrightGreen#9EF8C3
  • terminal.ansiBrightMagenta#E8AFFF
  • terminal.ansiBrightRed#FF8B8B
  • terminal.ansiBrightYellow#FFF68B
  • terminal.ansiCyan#7AB8F5
  • terminal.ansiGreen#6FD17E
  • terminal.ansiMagenta#D58BF4
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#FFE066
  • terminal.background#0B0D17
  • terminal.foreground#D8D8D8
  • titleBar.activeBackground#0B0D17
  • titleBar.activeForeground#D8D8D8
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A5Aitalic
string, string.quoted, string.template#6FD17E
keyword, storage.type, storage.modifier#C41E3Dbold
keyword.operator, punctuation.accessor#D8D8D8
variable, variable.other#C0C0C0
variable.parameter#FFB066italic
entity.name.function, support.function#7AB8F5
meta.function-call#93C9FF
entity.name.class, entity.name.type.class, support.class#C41E3Dbold
entity.name.type, support.type#7AB8F5
entity.name.type.interface#5FD8D8italic
constant.numeric#FFB86C
constant, constant.language, constant.character#FFB066
constant.language.boolean#FFB86Cbold
variable.other.property, support.variable.property#C0C0C0
meta.object-literal.key#7AB8F5
entity.name.tag, punctuation.definition.tag#C41E3D
entity.other.attribute-name#D58BF4italic
punctuation, meta.brace#A0A0A0
string.regexp#FFB86C
constant.character.escape#D58BF4
meta.decorator, punctuation.decorator#FFE066
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#C41E3Dbold
markup.bold#FFB066bold
markup.italic#D58BF4italic
markup.underline.link#5FD8D8
markup.inline.raw, markup.fenced_code#6FD17E
support.type.property-name.json#7AB8F5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFE066
support.type.property-name.css#7AB8F5
support.constant.property-value.css#5FD8D8