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.background#f6f8fa
  • activityBar.foreground#24292e
  • activityBarBadge.background#d7702f
  • activityBarBadge.foreground#ffffff
  • badge.background#d7702f
  • badge.foreground#ffffff
  • button.background#d7702f
  • button.foreground#ffffff
  • button.hoverBackground#cf5820
  • dropdown.background#ffffff
  • dropdown.border#e1e4e8
  • editor.background#ffffff
  • editor.findMatchBackground#fff5b1
  • editor.findMatchHighlightBackground#ffeb95dd
  • editor.findRangeHighlightBackground#ffd25f99
  • editor.foreground#24292e
  • editor.inactiveSelectionBackground#f0f0f0
  • editor.lineHighlightBackground#f6f8fa
  • editor.selectionBackground#fff5b1
  • editor.selectionHighlightBackground#fff8c5
  • editor.wordHighlightBackground#fff5b1
  • editor.wordHighlightStrongBackground#fff5b1
  • editorBracketMatch.background#fff0e6
  • editorBracketMatch.border#d7702f
  • editorCursor.foreground#d7702f
  • editorGroupHeader.tabsBackground#f6f8fa
  • editorGutter.addedBackground#28a74533
  • editorGutter.background#ffffff
  • editorGutter.deletedBackground#d73a4933
  • editorGutter.modifiedBackground#ffd7a833
  • editorIndentGuide.activeBackground#d7702f
  • editorIndentGuide.background#f0f0f0
  • editorLineNumber.activeForeground#d7702f
  • editorLineNumber.foreground#6f42c1
  • editorWhitespace.foreground#d0d0d0
  • foreground#24292e
  • input.background#ffffff
  • input.foreground#24292e
  • input.placeholderForeground#959da5
  • list.activeSelectionBackground#fff5b1
  • list.activeSelectionForeground#24292e
  • list.highlightForeground#d7702f
  • list.hoverBackground#f6f8fa
  • list.inactiveSelectionBackground#f0f0f0
  • panel.background#ffffff
  • panel.border#e1e4e8
  • panelTitle.activeForeground#24292e
  • panelTitle.inactiveForeground#6a737d
  • peekView.border#e1e4e8
  • peekViewEditor.background#f6f8fa
  • peekViewEditor.matchHighlightBackground#fff5b1
  • peekViewResult.background#ffffff
  • peekViewResult.matchHighlightBackground#fff5b1
  • scrollbarSlider.activeBackground#d7702f77
  • scrollbarSlider.background#d7702f33
  • scrollbarSlider.hoverBackground#d7702f55
  • sideBar.background#f6f8fa
  • sideBar.foreground#24292e
  • sideBarSectionHeader.background#eaeef2
  • statusBar.background#f6f8fa
  • statusBar.debuggingBackground#fff5b1
  • statusBar.debuggingForeground#24292e
  • statusBar.foreground#24292e
  • statusBar.noFolderBackground#f6f8fa
  • tab.activeBackground#ffffff
  • tab.activeForeground#24292e
  • tab.inactiveBackground#f6f8fa
  • tab.inactiveForeground#6a737d
  • terminal.ansiBlack#24292e
  • terminal.ansiBlue#0366d6
  • terminal.ansiBrightBlack#959da5
  • terminal.ansiBrightBlue#0366d6
  • terminal.ansiBrightCyan#1b7ee5
  • terminal.ansiBrightGreen#28a745
  • terminal.ansiBrightMagenta#a371f7
  • terminal.ansiBrightRed#d73a49
  • terminal.ansiBrightWhite#24292e
  • terminal.ansiBrightYellow#ffeb95
  • terminal.ansiCyan#1b7ee5
  • terminal.ansiGreen#28a745
  • terminal.ansiMagenta#a371f7
  • terminal.ansiRed#d73a49
  • terminal.ansiWhite#6a737d
  • terminal.ansiYellow#ffd25f
  • terminal.background#ffffff
  • terminal.foreground#24292e
  • terminalCursor.foreground#d7702f
  • titleBar.activeBackground#f6f8fa
  • titleBar.activeForeground#24292e
  • titleBar.inactiveBackground#f6f8fa
  • titleBar.inactiveForeground#6a737d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a737ditalic
string#ffd25f
constant.numeric, constant.character.numeric#d7702f
constant.language, punctuation.definition.constant, variable.other.constant#d73a49
constant.character.escape#ff5a3b
variable#24292e
punctuation.accessor, keyword#d73a49
storage, meta.var.expr, storage.type.property.js, storage.type.property.ts#d73a49
storage.type#d73a49
entity.name.class, meta.class entity.name.type.class#d7702f
entity.other.inherited-class#ffd25f
entity.name.function#d7702f
entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#d73a49
entity.other.attribute-name#ffd25f
support.function, support.constant#d7702f
support.type, support.class#ffd25f
invalid#ffffff
keyword.operator#ff5a3b
keyword.operator.relational#d73a49
keyword.operator.logical#d73a49
constant.language.boolean#d73a49
constant.language.null#d73a49
meta.brace#d7702f
variable.language#ff5a3b
variable.interpolation#d73a49
meta.function-call#d7702f
meta.property-name#ffd25f
entity.name.tag.custom#ff5a3b
entity.other.attribute-name.id#d7702f
markup.bold#ffd25fbold
markup.italic#ff5a3bitalic
markup.heading#d73a49bold
markup.quote#6a737ditalic
markup.raw#ffd25f