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—