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#C63D2F
  • activityBar.background#120C0F
  • activityBar.foreground#E6E1E8
  • activityBarBadge.background#C63D2F
  • activityBarBadge.foreground#F5F5F5
  • badge.background#C63D2F
  • badge.foreground#F5F5F5
  • button.background#C63D2F
  • button.foreground#F5F5F5
  • button.hoverBackground#FF8A4F
  • dropdown.background#130D0F
  • dropdown.border#C63D2F
  • dropdown.foreground#E6E1E8
  • editor.background#0D0B0F
  • editor.findMatchBackground#C63D2F80
  • editor.findMatchHighlightBackground#C63D2F40
  • editor.foreground#E6E1E8
  • editor.lineHighlightBackground#1A151D80
  • editor.lineHighlightBorder#C63D2F
  • editor.selectionBackground#C63D2F66
  • editor.selectionHighlightBackground#C63D2F33
  • editorBracketMatch.background#C63D2F33
  • editorBracketMatch.border#C63D2F
  • editorCursor.foreground#FFB84D
  • editorGroupHeader.tabsBackground#0D0B0F
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#E6E1E8
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#C63D2F
  • gitDecoration.conflictingResourceForeground#F5B450
  • gitDecoration.deletedResourceForeground#FF5F4F
  • gitDecoration.modifiedResourceForeground#C63D2F
  • gitDecoration.untrackedResourceForeground#4FD96C
  • input.background#130D0F
  • input.border#C63D2F
  • input.foreground#E6E1E8
  • input.placeholderForeground#777777
  • inputOption.activeBorder#C63D2F
  • list.activeSelectionBackground#C63D2F80
  • list.activeSelectionForeground#E6E1E8
  • list.focusBackground#C63D2F66
  • list.highlightForeground#C63D2F
  • list.hoverBackground#C63D2F40
  • minimap.background#0D0B0F
  • minimapSlider.activeBackground#C63D2F66
  • minimapSlider.background#C63D2F22
  • minimapSlider.hoverBackground#C63D2F44
  • panel.background#0D0B0F
  • panel.border#C63D2F
  • panelTitle.activeBorder#C63D2F
  • panelTitle.activeForeground#E6E1E8
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#C63D2F88
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#130D0F
  • sideBar.foreground#D0C9D1
  • sideBarSectionHeader.background#180C0F
  • sideBarSectionHeader.foreground#E6E1E8
  • sideBarTitle.foreground#C63D2F
  • statusBar.background#0D0B0F
  • statusBar.debuggingBackground#C63D2F
  • statusBar.foreground#E6E1E8
  • statusBar.noFolderBackground#0D0B0F
  • statusBarItem.hoverBackground#C63D2F80
  • tab.activeBackground#0D0B0F
  • tab.activeBorder#C63D2F
  • tab.activeForeground#E6E1E8
  • tab.border#0D0B0F
  • tab.inactiveBackground#130D0F
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#2A5FE0
  • terminal.ansiBrightBlue#5A85FF
  • terminal.ansiBrightCyan#33E0EE
  • terminal.ansiBrightGreen#66FF99
  • terminal.ansiBrightMagenta#E086FF
  • terminal.ansiBrightRed#FF8A73
  • terminal.ansiBrightYellow#FFE170
  • terminal.ansiCyan#00C5D4
  • terminal.ansiGreen#4FD96C
  • terminal.ansiMagenta#C965FF
  • terminal.ansiRed#FF5F4F
  • terminal.ansiYellow#F5B450
  • terminal.background#0D0B0F
  • terminal.foreground#E6E1E8
  • titleBar.activeBackground#120C0F
  • titleBar.activeForeground#E6E1E8
  • titleBar.inactiveBackground#0D0B0F
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#FFB84D
keyword, storage.type, storage.modifier#C63D2Fbold
keyword.operator, punctuation.accessor#A04134
variable, variable.other#E6E1E8
variable.parameter#C63D2Fitalic
entity.name.function, support.function#00C5D4
meta.function-call#00C5D4
entity.name.class, entity.name.type.class, support.class#FF8A4Fbold
entity.name.type, support.type#F5B450
entity.name.type.interface#FFAB57italic
constant.numeric#4FD96C
constant, constant.language, constant.character#FFB84D
constant.language.boolean#C63D2Fbold
variable.other.property, support.variable.property#00C5D4
meta.object-literal.key#FFB84D
entity.name.tag, punctuation.definition.tag#C63D2F
entity.other.attribute-name#A04134italic
punctuation, meta.brace#E6E1E8
string.regexp#C965FF
constant.character.escape#C965FF
meta.decorator, punctuation.decorator#FF8A4F
invalid, invalid.illegal#FF5F4Fstrikethrough
markup.heading, entity.name.section#C63D2Fbold
markup.bold#C63D2Fbold
markup.italic#A04134italic
markup.underline.link#00C5D4
markup.inline.raw, markup.fenced_code#FFB84D
support.type.property-name.json#C63D2F
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C63D2F
support.type.property-name.css#F5B450
support.constant.property-value.css#00C5D4