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#e1e1e4
  • activityBar.foreground#5c7cfa
  • activityBarBadge.background#ff6b6b
  • activityBarBadge.foreground#f5f5f7
  • badge.background#ff6b6b
  • badge.foreground#f5f5f7
  • button.background#ff6b6b
  • button.foreground#f5f5f7
  • button.hoverBackground#ff8c8c
  • dropdown.background#ebebed
  • dropdown.border#c0c0c5
  • dropdown.foreground#2e2e3a
  • editor.background#f5f5f7
  • editor.findMatchBackground#ff6b6b44
  • editor.findMatchHighlightBackground#ff6b6b22
  • editor.foreground#2e2e3a
  • editor.lineHighlightBackground#d0d0d5
  • editor.lineHighlightBorder#c0c0c5
  • editor.selectionBackground#b5d0ff80
  • editor.selectionHighlightBackground#b5d0ff33
  • editorBracketMatch.background#ff6b6b33
  • editorBracketMatch.border#ff6b6b
  • editorCursor.foreground#ff6b6b
  • editorGroupHeader.tabsBackground#eaeaea
  • editorIndentGuide.activeBackground#a0a0a5
  • editorIndentGuide.background#c0c0c5
  • editorLineNumber.activeForeground#ff6b6b
  • editorLineNumber.foreground#9a9a9e
  • editorWhitespace.foreground#b0b0b5
  • focusBorder#ff6b6b
  • gitDecoration.conflictingResourceForeground#d4b24e
  • gitDecoration.deletedResourceForeground#ff8c8c
  • gitDecoration.modifiedResourceForeground#ff6b6b
  • gitDecoration.untrackedResourceForeground#8ab54a
  • input.background#ebebed
  • input.border#c0c0c5
  • input.foreground#2e2e3a
  • input.placeholderForeground#9a9a9e
  • inputOption.activeBorder#ff6b6b
  • list.activeSelectionBackground#c0c0d5
  • list.activeSelectionForeground#2e2e3a
  • list.focusBackground#c0c0d5
  • list.highlightForeground#ff6b6b
  • list.hoverBackground#c0c0d566
  • minimap.background#f5f5f7
  • minimapSlider.activeBackground#ff6b6622
  • minimapSlider.background#c0c0c522
  • minimapSlider.hoverBackground#c0c0c544
  • panel.background#e1e1e4
  • panel.border#c0c0c5
  • panelTitle.activeBorder#ff6b6b
  • panelTitle.activeForeground#ff6b6b
  • panelTitle.inactiveForeground#6a6a73
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#ff6b6b88
  • scrollbarSlider.background#c0c0c570
  • scrollbarSlider.hoverBackground#c0c0c5a0
  • sideBar.background#ebebed
  • sideBar.foreground#3a3a44
  • sideBarSectionHeader.background#e1e1e4
  • sideBarSectionHeader.foreground#5c7cfa
  • sideBarTitle.foreground#5c7cfa
  • statusBar.background#e1e1e4
  • statusBar.debuggingBackground#ff6b6b
  • statusBar.foreground#2e2e3a
  • statusBar.noFolderBackground#e1e1e4
  • statusBarItem.hoverBackground#ff8c8c
  • tab.activeBackground#fafafa
  • tab.activeBorder#ff6b6b
  • tab.activeForeground#2e2e3a
  • tab.border#d4d4d4
  • tab.inactiveBackground#eaeaea
  • tab.inactiveForeground#6a6a73
  • terminal.ansiBlue#5c7cfa
  • terminal.ansiBrightBlue#96b3e0
  • terminal.ansiBrightCyan#73c2d2
  • terminal.ansiBrightGreen#a0d770
  • terminal.ansiBrightMagenta#c58ef2
  • terminal.ansiBrightRed#ff8c8c
  • terminal.ansiBrightYellow#e5c977
  • terminal.ansiCyan#5fa0b0
  • terminal.ansiGreen#8ab54a
  • terminal.ansiMagenta#b274c0
  • terminal.ansiRed#ff6b6b
  • terminal.ansiYellow#d4b24e
  • terminal.background#f5f5f7
  • terminal.foreground#2e2e3a
  • titleBar.activeBackground#e1e1e4
  • titleBar.activeForeground#2e2e3a
  • titleBar.inactiveBackground#d4d4d6
  • titleBar.inactiveForeground#6a6a73

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a3a3a8italic
string, string.quoted, string.template#c44d58
keyword, storage.type, storage.modifier#ff6f61bold
keyword.operator, punctuation.accessor#7a9cc6
variable, variable.other#c0c0c0
variable.parameter#7a9cc6italic
entity.name.function, support.function#ff6f61
meta.function-call#7a9cc6
entity.name.class, entity.name.type.class, support.class#ff8a73bold
entity.name.type, support.type#9fa8da
entity.name.type.interface#7a9cc6italic
constant.numeric#e0c080
constant, constant.language, constant.character#c44d58
constant.language.boolean#ff6f61bold
variable.other.property, support.variable.property#a1b1c2
meta.object-literal.key#7a9cc6
entity.name.tag, punctuation.definition.tag#ff6f61
entity.other.attribute-name#9f88ffitalic
punctuation, meta.brace#7a9cc6
string.regexp#d4b24e
constant.character.escape#c44d58
meta.decorator, punctuation.decorator#7a9cc6
invalid, invalid.illegal#ff4d4dstrikethrough
markup.heading, entity.name.section#7a9cc6bold
markup.bold#ff8a73bold
markup.italic#9f88ffitalic
markup.underline.link#7a9cc6
markup.inline.raw, markup.fenced_code#c44d58
support.type.property-name.json#7a9cc6
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9f88ff
support.type.property-name.css#ff6f61
support.constant.property-value.css#d4b24e