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#C7511E
  • activityBar.background#080707
  • activityBar.foreground#4E9AFC
  • activityBarBadge.background#C7511E
  • activityBarBadge.foreground#0A0809
  • badge.background#C7511E
  • badge.foreground#0A0809
  • button.background#C7511E
  • button.foreground#0A0809
  • button.hoverBackground#E28B73
  • dropdown.background#080707
  • dropdown.border#5A5A5A
  • dropdown.foreground#D8D8D8
  • editor.background#0A0809
  • editor.findMatchBackground#C7511E33
  • editor.findMatchHighlightBackground#C7511E11
  • editor.foreground#D8D8D8
  • editor.lineHighlightBackground#1E1A1A80
  • editor.lineHighlightBorder#1E1A1A
  • editor.selectionBackground#4E9AFC40
  • editor.selectionHighlightBackground#4E9AFC20
  • editorBracketMatch.background#4E9AFC33
  • editorBracketMatch.border#4E9AFC
  • editorCursor.foreground#C7511E
  • editorGroupHeader.tabsBackground#080707
  • editorIndentGuide.activeBackground#4E9AFC
  • editorIndentGuide.background#5A5A5A44
  • editorLineNumber.activeForeground#C7511E
  • editorLineNumber.foreground#5A5A5A
  • editorWhitespace.foreground#5A5A5A
  • focusBorder#C7511E
  • gitDecoration.conflictingResourceForeground#E0A938
  • gitDecoration.deletedResourceForeground#C7511E
  • gitDecoration.modifiedResourceForeground#4E9AFC
  • gitDecoration.untrackedResourceForeground#5BCFA0
  • input.background#080707
  • input.border#5A5A5A
  • input.foreground#D8D8D8
  • input.placeholderForeground#5A5A5A
  • inputOption.activeBorder#C7511E
  • list.activeSelectionBackground#4E9AFC40
  • list.activeSelectionForeground#D8D8D8
  • list.focusBackground#4E9AFC40
  • list.highlightForeground#C7511E
  • list.hoverBackground#4E9AFC20
  • minimap.background#0A0809
  • minimapSlider.activeBackground#4E9AFC66
  • minimapSlider.background#4E9AFC22
  • minimapSlider.hoverBackground#4E9AFC44
  • panel.background#0A0809
  • panel.border#080707
  • panelTitle.activeBorder#C7511E
  • panelTitle.activeForeground#D8D8D8
  • panelTitle.inactiveForeground#5A5A5A
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#4E9AFC88
  • scrollbarSlider.background#5A5A5A44
  • scrollbarSlider.hoverBackground#5A5A5A88
  • sideBar.background#080707
  • sideBar.foreground#D8D8D8
  • sideBarSectionHeader.background#0A0809
  • sideBarSectionHeader.foreground#C7511E
  • sideBarTitle.foreground#4E9AFC
  • statusBar.background#080707
  • statusBar.debuggingBackground#C7511E
  • statusBar.foreground#D8D8D8
  • statusBar.noFolderBackground#0A0809
  • statusBarItem.hoverBackground#4E9AFC40
  • tab.activeBackground#0A0809
  • tab.activeBorder#C7511E
  • tab.activeForeground#D8D8D8
  • tab.border#0A0809
  • tab.inactiveBackground#080707
  • tab.inactiveForeground#5A5A5A
  • terminal.ansiBlue#4E9AFC
  • terminal.ansiBrightBlue#99BFEF
  • terminal.ansiBrightCyan#8FF3C1
  • terminal.ansiBrightGreen#8FF3C1
  • terminal.ansiBrightMagenta#E28B73
  • terminal.ansiBrightRed#E28B73
  • terminal.ansiBrightYellow#F5C76B
  • terminal.ansiCyan#5BCFA0
  • terminal.ansiGreen#5BCFA0
  • terminal.ansiMagenta#E645A1
  • terminal.ansiRed#C7511E
  • terminal.ansiYellow#E0A938
  • terminal.background#0A0809
  • terminal.foreground#D8D8D8
  • titleBar.activeBackground#080707
  • titleBar.activeForeground#D8D8D8
  • titleBar.inactiveBackground#0A0809
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A5A5Aitalic
string, string.quoted, string.template#5BCFA0
keyword, storage.type, storage.modifier#C7511Ebold
keyword.operator, punctuation.accessor#4E9AFC
variable, variable.other#CCCCCC
variable.parameter#5BCFA0italic
entity.name.function, support.function#4E9AFC
meta.function-call#4E9AFC
entity.name.class, entity.name.type.class, support.class#4E9AFCbold
entity.name.type, support.type#4E9AFC
entity.name.type.interface#5BCFA0italic
constant.numeric#E0A938
constant, constant.language, constant.character#E0A938
constant.language.boolean#C7511Ebold
variable.other.property, support.variable.property#4E9AFC
meta.object-literal.key#C7511E
entity.name.tag, punctuation.definition.tag#C7511E
entity.other.attribute-name#5BCFA0italic
punctuation, meta.brace#D8D8D8
string.regexp#E0A938
constant.character.escape#C7511E
meta.decorator, punctuation.decorator#E0A938
invalid, invalid.illegal#C7511Estrikethrough
markup.heading, entity.name.section#4E9AFCbold
markup.bold#C7511Ebold
markup.italic#5BCFA0italic
markup.underline.link#4E9AFC
markup.inline.raw, markup.fenced_code#5BCFA0
support.type.property-name.json#4E9AFC
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C7511E
support.type.property-name.css#4E9AFC
support.constant.property-value.css#5BCFA0