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#FF6F61
  • activityBar.background#080808
  • activityBar.foreground#A78BFA
  • activityBarBadge.background#FF6F61
  • activityBarBadge.foreground#0B0C10
  • badge.background#FF6F61
  • badge.foreground#0B0C10
  • button.background#FF6F61
  • button.foreground#0B0C10
  • button.hoverBackground#FF6F6180
  • dropdown.background#111119
  • dropdown.border#22222A
  • dropdown.foreground#D8D9E8
  • editor.background#0B0C10
  • editor.findMatchBackground#FF6F6160
  • editor.findMatchHighlightBackground#FF6F6130
  • editor.foreground#D8D9E8
  • editor.lineHighlightBackground#FF6F6120
  • editor.lineHighlightBorder#FF6F6180
  • editor.selectionBackground#FF6F6140
  • editor.selectionHighlightBackground#FF6F6130
  • editorBracketMatch.background#FF6F6133
  • editorBracketMatch.border#FF6F61
  • editorCursor.foreground#FF6F61
  • editorGroupHeader.tabsBackground#0B0C10
  • editorIndentGuide.activeBackground#A78BFA
  • editorIndentGuide.background#3F3F5544
  • editorLineNumber.activeForeground#A78BFA
  • editorLineNumber.foreground#5A5A70
  • editorWhitespace.foreground#3F3F55
  • focusBorder#FF6F61
  • gitDecoration.conflictingResourceForeground#F5C179
  • gitDecoration.deletedResourceForeground#FF6F61
  • gitDecoration.modifiedResourceForeground#A78BFA
  • gitDecoration.untrackedResourceForeground#FF9F60
  • input.background#111119
  • input.border#22222A
  • input.foreground#D8D9E8
  • input.placeholderForeground#5A5A70
  • inputOption.activeBorder#FF6F61
  • list.activeSelectionBackground#FF6F6130
  • list.activeSelectionForeground#D8D9E8
  • list.focusBackground#FF6F6130
  • list.highlightForeground#A78BFA
  • list.hoverBackground#FF6F6120
  • minimap.background#0B0C10
  • minimapSlider.activeBackground#FF6F6666
  • minimapSlider.background#A78BFA22
  • minimapSlider.hoverBackground#A78BFA44
  • panel.background#0B0C10
  • panel.border#111119
  • panelTitle.activeBorder#FF6F61
  • panelTitle.activeForeground#D8D9E8
  • panelTitle.inactiveForeground#5A5A70
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#A78BFAAA
  • scrollbarSlider.background#5A5A7044
  • scrollbarSlider.hoverBackground#5A5A7088
  • sideBar.background#111119
  • sideBar.foreground#D8D9E8
  • sideBarSectionHeader.background#0B0C10
  • sideBarSectionHeader.foreground#A78BFA
  • sideBarTitle.foreground#A78BFA
  • statusBar.background#1B0D0D
  • statusBar.debuggingBackground#FF6F61
  • statusBar.foreground#D8D9E8
  • statusBar.noFolderBackground#111119
  • statusBarItem.hoverBackground#FF6F6144
  • tab.activeBackground#0B0C10
  • tab.activeBorder#FF6F61
  • tab.activeForeground#D8D9E8
  • tab.border#0B0C10
  • tab.inactiveBackground#111119
  • tab.inactiveForeground#5A5A70
  • terminal.ansiBlue#A78BFA
  • terminal.ansiBrightBlue#B7A1FF
  • terminal.ansiBrightCyan#7AE7C5
  • terminal.ansiBrightGreen#C9E99F
  • terminal.ansiBrightMagenta#E8C4FF
  • terminal.ansiBrightRed#FF8A80
  • terminal.ansiBrightYellow#FFD79A
  • terminal.ansiCyan#5FD5A9
  • terminal.ansiGreen#A0C980
  • terminal.ansiMagenta#D19CFF
  • terminal.ansiRed#FF6F61
  • terminal.ansiYellow#F5C179
  • terminal.background#0B0C10
  • terminal.foreground#D8D9E8
  • titleBar.activeBackground#080808
  • titleBar.activeForeground#D8D9E8
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#5A5A70

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A7A7Aitalic
string, string.quoted, string.template#FF7043
keyword, storage.type, storage.modifier#FF453Abold
keyword.operator, punctuation.accessor#8E7CC3
variable, variable.other#D0CCF0
variable.parameter#FF9F50italic
entity.name.function, support.function#8E7CC3
meta.function-call#FF453A
entity.name.class, entity.name.type.class, support.class#FFB84Dbold
entity.name.type, support.type#9ACD5E
entity.name.type.interface#C58BEFitalic
constant.numeric#FFB84D
constant, constant.language, constant.character#FF7043
constant.language.boolean#FF453Abold
variable.other.property, support.variable.property#9ACD5E
meta.object-literal.key#8E7CC3
entity.name.tag, punctuation.definition.tag#FF453A
entity.other.attribute-name#C58BEFitalic
punctuation, meta.brace#E0DBF9
string.regexp#FF9F50
constant.character.escape#C58BEF
meta.decorator, punctuation.decorator#FFB84D
invalid, invalid.illegal#FF453Astrikethrough
markup.heading, entity.name.section#8E7CC3bold
markup.bold#FF453Abold
markup.italic#FF7043italic
markup.underline.link#8E7CC3
markup.inline.raw, markup.fenced_code#FF7043
support.type.property-name.json#8E7CC3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C58BEF
support.type.property-name.css#9ACD5E
support.constant.property-value.css#FF7043