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#ff6b6b
  • activityBar.background#111111
  • activityBar.foreground#ff6b6b
  • activityBarBadge.background#ff6b6b
  • activityBarBadge.foreground#0d0d0d
  • badge.background#ff6b6b
  • badge.foreground#0d0d0d
  • button.background#151515
  • button.foreground#f5f5f5
  • button.hoverBackground#2a2a2a
  • dropdown.background#111111
  • dropdown.border#333333
  • dropdown.foreground#f5f5f5
  • editor.background#0d0d0d
  • editor.findMatchBackground#ff6b6b44
  • editor.findMatchHighlightBackground#ff6b6b22
  • editor.foreground#f5f5f5
  • editor.lineHighlightBackground#1a1a1a
  • editor.lineHighlightBorder#2a2a2a
  • editor.selectionBackground#3b3b3b
  • editor.selectionHighlightBackground#2f2f2f
  • editorBracketMatch.background#ff6b6b33
  • editorBracketMatch.border#ff6b6b
  • editorCursor.foreground#ff6b6b
  • editorGroupHeader.tabsBackground#0d0d0d
  • editorIndentGuide.activeBackground#444444
  • editorIndentGuide.background#222222
  • editorLineNumber.activeForeground#ff6b6b
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#333333
  • focusBorder#ff6b6b
  • gitDecoration.conflictingResourceForeground#ff6b6b
  • gitDecoration.deletedResourceForeground#777777
  • gitDecoration.modifiedResourceForeground#ff6b6b
  • gitDecoration.untrackedResourceForeground#ff79c6
  • input.background#111111
  • input.border#333333
  • input.foreground#f5f5f5
  • input.placeholderForeground#555555
  • inputOption.activeBorder#ff6b6b
  • list.activeSelectionBackground#2a2a2a
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#2a2a2a
  • list.highlightForeground#ff6b6b
  • list.hoverBackground#1f1f1f
  • minimap.background#0d0d0d
  • minimapSlider.activeBackground#ff6b6b66
  • minimapSlider.background#ff6b6b22
  • minimapSlider.hoverBackground#ff6b6b44
  • panel.background#0d0d0d
  • panel.border#333333
  • panelTitle.activeBorder#ff6b6b
  • panelTitle.activeForeground#ff6b6b
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#666666cc
  • scrollbarSlider.background#44444444
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#111111
  • sideBar.foreground#c0c0c0
  • sideBarSectionHeader.background#111111
  • sideBarSectionHeader.foreground#ff6b6b
  • sideBarTitle.foreground#ff6b6b
  • statusBar.background#151515
  • statusBar.debuggingBackground#ff6b6b
  • statusBar.foreground#f5f5f5
  • statusBar.noFolderBackground#111111
  • statusBarItem.hoverBackground#222222
  • tab.activeBackground#151515
  • tab.activeBorder#ff6b6b
  • tab.activeForeground#ffffff
  • tab.border#0d0d0d
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#8be9fd
  • terminal.ansiBrightBlue#bd93f9
  • terminal.ansiBrightCyan#a4ffff
  • terminal.ansiBrightGreen#69ff94
  • terminal.ansiBrightMagenta#ff92df
  • terminal.ansiBrightRed#ff92a1
  • terminal.ansiBrightYellow#ffffa5
  • terminal.ansiCyan#8be9fd
  • terminal.ansiGreen#50fa7b
  • terminal.ansiMagenta#ff79c6
  • terminal.ansiRed#ff6b6b
  • terminal.ansiYellow#f1fa8c
  • terminal.background#0d0d0d
  • terminal.foreground#f5f5f5
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#f5f5f5
  • titleBar.inactiveBackground#0d0d0d
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6272a4italic
string, string.quoted, string.template#8be9fd
keyword, storage.type, storage.modifier#ff6b6bbold
keyword.operator, punctuation.accessor#f5f5f5
variable, variable.other#f5f5f5
variable.parameter#ff79c6italic
entity.name.function, support.function#f5f5f5
meta.function-call#f5f5f5
entity.name.class, entity.name.type.class, support.class#ff6b6bbold
entity.name.type, support.type#f5f5f5
entity.name.type.interface#ff79c6italic
constant.numeric#ff79c6
constant, constant.language, constant.character#ff79c6
constant.language.boolean#ff6b6bbold
variable.other.property, support.variable.property#f5f5f5
meta.object-literal.key#ff6b6b
entity.name.tag, punctuation.definition.tag#ff6b6b
entity.other.attribute-name#ff79c6italic
punctuation, meta.brace#f5f5f5
string.regexp#ff79c6
constant.character.escape#ff79c6
meta.decorator, punctuation.decorator#ff6b6b
invalid, invalid.illegal#ff6b6bstrikethrough
markup.heading, entity.name.section#ff6b6bbold
markup.bold#ff6b6bbold
markup.italic#ff79c6italic
markup.underline.link#ff79c6
markup.inline.raw, markup.fenced_code#ff79c6
support.type.property-name.json#ff6b6b
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff6b6b
support.type.property-name.css#f5f5f5
support.constant.property-value.css#ff79c6