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—