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#052529
  • activityBar.foreground#39575a
  • activityBarBadge.background#163639
  • activityBarBadge.foreground#7e999c
  • dropdown.background#052529
  • dropdown.border#163639
  • dropdown.foreground#b2cacd
  • editor.background#052529
  • editor.findMatchBackground#1b3432
  • editor.findMatchHighlightBackground#1b3432
  • editor.findRangeHighlightBackground#1b3432
  • editor.foreground#b2cacd
  • editor.hoverHighlightBackground#102c2d
  • editor.inactiveSelectionBackground#0a2a2e
  • editor.lineHighlightBackground#08282c
  • editor.rangeHighlightBackground#102c2d
  • editor.selectionBackground#102c2d
  • editor.wordHighlightBackground#102c2d
  • editor.wordHighlightStrongBackground#e4b781
  • editorBracketMatch.background#052529
  • editorBracketMatch.border#163639
  • editorCursor.foreground#e4b781
  • editorGroup.border#07272b
  • editorGroupHeader.tabsBackground#052529
  • editorGutter.addedBackground#0e2d31
  • editorGutter.deletedBackground#0e2d31
  • editorGutter.modifiedBackground#0e2d31
  • editorIndentGuide.background#052529
  • editorLineNumber.foreground#1b3432
  • editorRuler.foreground#163639
  • editorWhitespace.foreground#1b3432
  • editorWidget.background#052529
  • editorWidget.border#28464a
  • editorWidget.foreground#b2cacd
  • editorWidget.resizeBorder#e4b781
  • focusBorder#e4b781
  • foreground#7e999c
  • input.background#052529
  • input.border#163639
  • input.foreground#b2cacd
  • input.placeholderForeground#8fa9ac
  • inputOption.activeBorder#e4b781
  • list.activeSelectionBackground#102c2d
  • list.activeSelectionForeground#7e999c
  • list.focusBackground#1b3432
  • list.hoverBackground#0a2a2e
  • list.inactiveSelectionBackground#0e2d31
  • panel.border#163639
  • peekViewEditor.matchHighlightBackground#163639
  • peekViewResult.matchHighlightBackground#102c2d
  • quickInput.background#052529
  • quickInput.foreground#b2cacd
  • quickInputTitle.background#0e2d31
  • scrollbarSlider.activeBackground#b2cacd30
  • scrollbarSlider.background#b2cacd10
  • scrollbarSlider.hoverBackground#b2cacd20
  • sideBar.background#052529
  • sideBar.border#163639
  • sideBar.foreground#b2cacd
  • sideBarSectionHeader.background#052529
  • sideBarSectionHeader.foreground#7e999c
  • statusBar.background#052529
  • statusBar.foreground#7e999c
  • tab.activeBackground#052529
  • tab.activeBorder#052529
  • tab.activeForeground#7e999c
  • tab.border#163639
  • tab.inactiveBackground#052529
  • tab.inactiveForeground#39575a
  • titleBar.activeBackground#052529
  • titleBar.activeForeground#7e999c
  • titleBar.inactiveBackground#052529
  • titleBar.inactiveForeground#39575a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#39575aitalic
comment.block.preprocessor#39575a
comment.documentation, comment.block.documentation#e4b781
invalid.illegal#e4b781
keyword.operator#6d888b
keyword, storage#e4b781
storage.type, support.type#e4b781
constant.language, support.constant, variable.language#b2cacd
variable, support.variable#e4b781
entity.name.function, support.function#e4b781
entity.name.type, entity.other.inherited-class, support.class#e4b781bold
entity.name.exception#e4b781
constant.numeric, constant.character, constant#b2cacd
string#b2cacd
constant.character.escape#6d888b
string.regexp#e4b781
constant.other.symbol#e4b781
punctuation#28464a
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#39575a
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#8b7d5e
entity.name.tag#e4b781
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#8b7d5eitalic
constant.character.entity, punctuation.definition.entity#e4b781
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#e4b781
meta.property-name, support.type.property-name#e4b781
meta.property-value, meta.property-value constant.other, support.constant.property-value#e4b781
keyword.other.importantbold
markup.changed#b2cacd
markup.deleted#b2cacd
markup.italicitalic
markup.error#e4b781
markup.inserted#b2cacd
meta.link#e4b781
markup.output, markup.raw#b2cacd
markup.prompt#b2cacd
markup.heading#b2cacd
markup.boldbold
markup.traceback#e4b781
markup.underlineunderline
markup.quote#6d888bitalic
markup.list#b2cacd
markup.bold, markup.italic#b2cacd
markup.inline.raw#b2cacd
meta.diff.range, meta.diff.index#b2cacd
meta.diff.header.from-file#b2cacd
meta.diff.header.to-file#b2cacd
entity.name.section#b2cacdbold
meta.separator, punctuation.definition.heading.markdown#39575a
string.other.link.description.title.markdown#7e999c
constant.other.reference.link.markdown, markup.underline.link.markdown#28464a
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#1b3432bold
string.other.link.title.markdown, constant.other.reference.link.markdown#e4b781
support.function.text.markdown.writer.wiki-link.title#e4b781
punctuation.definition.list.begin.markdown#b2cacd

Shiki preview

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

Loading...

Markdown Writer Theme by mgmeyers - VS Code Theme