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#0969da
  • activityBar.background#f6f8fa
  • activityBar.border#d0d7de
  • activityBar.foreground#24292f
  • activityBar.inactiveForeground#57606a
  • activityBarBadge.background#0969da
  • activityBarBadge.foreground#ffffff
  • badge.background#0969da
  • badge.foreground#ffffff
  • button.background#0969da
  • button.foreground#ffffff
  • button.hoverBackground#0550ae
  • diffEditor.insertedLineBackground#dafbe140
  • diffEditor.insertedTextBackground#dafbe180
  • diffEditor.removedLineBackground#ffebe940
  • diffEditor.removedTextBackground#ffebe980
  • editor.background#ffffff
  • editor.findMatchBackground#fff8c5
  • editor.findMatchHighlightBackground#fff8c5b3
  • editor.foreground#24292f
  • editor.lineHighlightBackground#f6f8fa
  • editor.selectionBackground#0969da33
  • editor.selectionHighlightBackground#0969da1a
  • editor.wordHighlightBackground#0969da1a
  • editor.wordHighlightStrongBackground#0969da26
  • editorBracketMatch.background#0969da1f
  • editorBracketMatch.border#0969da66
  • editorCursor.foreground#0969da
  • editorIndentGuide.activeBackground1#8c959f
  • editorIndentGuide.background1#d0d7de
  • editorLineNumber.activeForeground#24292f
  • editorLineNumber.foreground#8c959f
  • focusBorder#0969da
  • input.background#ffffff
  • input.border#d0d7de
  • input.foreground#24292f
  • list.activeSelectionBackground#0969da1a
  • list.activeSelectionForeground#24292f
  • list.focusHighlightForeground#0969da
  • list.hoverBackground#d0d7de40
  • list.inactiveSelectionBackground#0969da12
  • panel.background#ffffff
  • panel.border#d0d7de
  • panelTitle.activeForeground#24292f
  • panelTitle.inactiveForeground#57606a
  • peekView.border#0969da
  • peekViewResult.selectionBackground#0969da1a
  • peekViewResult.selectionForeground#24292f
  • peekViewTitle.background#f6f8fa
  • peekViewTitleDescription.foreground#57606a
  • peekViewTitleLabel.foreground#24292f
  • sideBar.background#f6f8fa
  • sideBar.border#d0d7de
  • sideBar.foreground#24292f
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.border#d0d7de
  • sideBarSectionHeader.foreground#24292f
  • sideBarTitle.foreground#24292f
  • statusBar.background#f6f8fa
  • statusBar.border#d0d7de
  • statusBar.foreground#24292f
  • statusBarItem.hoverBackground#d0d7de66
  • tab.activeBackground#ffffff
  • tab.activeForeground#24292f
  • tab.border#d0d7de
  • tab.inactiveBackground#f6f8fa
  • tab.inactiveForeground#57606a
  • terminal.background#ffffff
  • terminal.foreground#24292f
  • terminal.selectionBackground#0969da33
  • terminalCursor.foreground#0969da

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6e7781
constant.other.placeholder, constant.character#cf222e
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#0550ae
entity.name, meta.export.default, meta.definition.variable#953800
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#24292f
entity.name.function#8250df
entity.name.tag, support.class.component#116329
keyword#cf222e
storage, storage.type#cf222e
storage.modifier.package, storage.modifier.import, storage.type.java#24292f
string, string punctuation.section.embedded source#0a3069
support#0550ae
meta.property-name#0550ae
variable#953800
variable.other#24292f
invalid.broken, invalid.deprecated, invalid.illegal, invalid.unimplemented#d1242fitalic
message.error#d1242f
source.regexp, string.regexp#0a3069
string.regexp constant.character.escape#116329bold
support.type.property-name.json#116329
punctuation.definition.list.begin.markdown#953800
markup.heading, markup.heading entity.name#0550aebold
markup.quote#116329
markup.italic#24292fitalic
markup.bold#24292fbold
markup.inline.raw#0550ae
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#d1242f
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#116329
markup.changed, punctuation.definition.changed#953800
meta.diff.range#8250dfbold
meta.diff.header#0550ae
punctuation.definition.attribute-list.begin.kramdown, punctuation.definition.attribute-list.end.kramdown#8250df
punctuation.definition.extension.begin.kramdown, punctuation.definition.extension.end.kramdown, punctuation.definition.extension.endtag.begin.kramdown, punctuation.definition.extension.endtag.end.kramdown, punctuation.definition.extension.self-close.kramdown, punctuation.definition.end-of-block-marker.kramdown#8250df
entity.name.function.kramdown#0550ae
token.info-token#0969da
token.warn-token#9a6700
token.error-token#d1242f
token.debug-token#8250df