Skip to main content
CodingTheme

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#ffffff
  • activityBar.foreground#b7b7ba
  • activityBarBadge.background#e7e7e8
  • activityBarBadge.foreground#56585f
  • dropdown.background#ffffff
  • dropdown.border#e7e7e8
  • dropdown.foreground#0e101a
  • editor.background#ffffff
  • editor.findMatchBackground#e6f4fe
  • editor.findMatchHighlightBackground#e6f4fe
  • editor.findRangeHighlightBackground#e6f4fe
  • editor.foreground#0e101a
  • editor.hoverHighlightBackground#f2fafe
  • editor.inactiveSelectionBackground#f8f8f8
  • editor.lineHighlightBackground#fafafa
  • editor.rangeHighlightBackground#f2fafe
  • editor.selectionBackground#f2fafe
  • editor.wordHighlightBackground#f2fafe
  • editor.wordHighlightStrongBackground#0094f0
  • editorBracketMatch.background#ffffff
  • editorBracketMatch.border#e7e7e8
  • editorCursor.foreground#0094f0
  • editorGroup.border#fdfdfd
  • editorGroupHeader.tabsBackground#ffffff
  • editorGutter.addedBackground#f3f3f4
  • editorGutter.deletedBackground#f3f3f4
  • editorGutter.modifiedBackground#f3f3f4
  • editorIndentGuide.background#ffffff
  • editorLineNumber.foreground#e6f4fe
  • editorRuler.foreground#e7e7e8
  • editorWhitespace.foreground#e6f4fe
  • editorWidget.background#ffffff
  • editorWidget.border#cfcfd1
  • editorWidget.foreground#0e101a
  • editorWidget.resizeBorder#0094f0
  • focusBorder#0094f0
  • foreground#56585f
  • input.background#ffffff
  • input.border#e7e7e8
  • input.foreground#0e101a
  • input.placeholderForeground#3e4048
  • inputOption.activeBorder#0094f0
  • list.activeSelectionBackground#f2fafe
  • list.activeSelectionForeground#56585f
  • list.focusBackground#e6f4fe
  • list.hoverBackground#f8f8f8
  • list.inactiveSelectionBackground#f3f3f4
  • panel.border#e7e7e8
  • peekViewEditor.matchHighlightBackground#e7e7e8
  • peekViewResult.matchHighlightBackground#f2fafe
  • quickInput.background#ffffff
  • quickInput.foreground#0e101a
  • quickInputTitle.background#f3f3f4
  • scrollbarSlider.activeBackground#0e101a30
  • scrollbarSlider.background#0e101a10
  • scrollbarSlider.hoverBackground#0e101a20
  • sideBar.background#ffffff
  • sideBar.border#e7e7e8
  • sideBar.foreground#0e101a
  • sideBarSectionHeader.background#ffffff
  • sideBarSectionHeader.foreground#56585f
  • statusBar.background#ffffff
  • statusBar.foreground#56585f
  • tab.activeBackground#ffffff
  • tab.activeBorder#ffffff
  • tab.activeForeground#56585f
  • tab.border#e7e7e8
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#b7b7ba
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#56585f
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#b7b7ba

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#b7b7baitalic
comment.block.preprocessor#b7b7ba
comment.documentation, comment.block.documentation#0094f0
invalid.illegal#0094f0
keyword.operator#6e7076
keyword, storage#0094f0
storage.type, support.type#0094f0
constant.language, support.constant, variable.language#0e101a
variable, support.variable#0094f0
entity.name.function, support.function#0094f0
entity.name.type, entity.other.inherited-class, support.class#0094f0bold
entity.name.exception#0094f0
constant.numeric, constant.character, constant#0e101a
string#0e101a
constant.character.escape#6e7076
string.regexp#0094f0
constant.other.symbol#0094f0
punctuation#cfcfd1
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#b7b7ba
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#66bff6
entity.name.tag#0094f0
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#66bff6italic
constant.character.entity, punctuation.definition.entity#0094f0
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#0094f0
meta.property-name, support.type.property-name#0094f0
meta.property-value, meta.property-value constant.other, support.constant.property-value#0094f0
keyword.other.importantbold
markup.changed#0e101a
markup.deleted#0e101a
markup.italicitalic
markup.error#0094f0
markup.inserted#0e101a
meta.link#0094f0
markup.output, markup.raw#0e101a
markup.prompt#0e101a
markup.heading#0e101a
markup.boldbold
markup.traceback#0094f0
markup.underlineunderline
markup.quote#6e7076italic
markup.list#0e101a
markup.bold, markup.italic#0e101a
markup.inline.raw#0e101a
meta.diff.range, meta.diff.index#0e101a
meta.diff.header.from-file#0e101a
meta.diff.header.to-file#0e101a
entity.name.section#0e101abold
meta.separator, punctuation.definition.heading.markdown#b7b7ba
string.other.link.description.title.markdown#56585f
constant.other.reference.link.markdown, markup.underline.link.markdown#cfcfd1
support.function.text.markdown.writer.wiki-link.ref, punctuation.definition.wiki-link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.constant.markdown#e6f4febold
string.other.link.title.markdown, constant.other.reference.link.markdown#0094f0
support.function.text.markdown.writer.wiki-link.title#0094f0
punctuation.definition.list.begin.markdown#0e101a

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Markdown Writer Theme by mgmeyers - VS Code Theme