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.activeBackground#efefef
  • activityBar.activeBorder#000
  • activityBar.background#efefef
  • activityBar.foreground#000
  • activityBar.inactiveForeground#000
  • activityBarBadge.background#ebeb0f
  • activityBarBadge.foreground#000
  • button.background#efefef
  • button.foreground#000
  • descriptionForeground#000
  • editor.background#efefef
  • editor.findMatchBackground#ebeb0f
  • editor.findMatchHighlightBackground#ebeb0f
  • editor.foreground#000
  • editor.lineHighlightBackground#dedede
  • editor.selectionBackground#ebeb0f
  • editor.selectionHighlightBackground#ebeb0f
  • editorBracketHighlight.foreground1#000
  • editorBracketHighlight.foreground2#000
  • editorBracketHighlight.foreground3#000
  • editorBracketHighlight.foreground4#000
  • editorBracketHighlight.foreground5#000
  • editorGroupHeader.tabsBackground#efefef
  • editorLineNumber.foreground#000
  • focusBorder#efefef
  • gitDecoration.addedResourceForeground#000
  • gitDecoration.conflictingResourceForeground#000
  • gitDecoration.ignoredResourceForeground#000
  • gitDecoration.modifiedResourceForeground#000
  • gitDecoration.renamedResourceForeground#000
  • gitDecoration.stageDeletedResourceForeground#000
  • gitDecoration.stageModifiedResourceForeground#000
  • gitDecoration.submoduleResourceForeground#000
  • gitDecoration.untrackedResourceForeground#000
  • list.activeSelectionBackground#dadada
  • list.activeSelectionForeground#000
  • list.activeSelectionIconForeground#000
  • list.highlightForeground#000
  • list.hoverBackground#dadada
  • list.inactiveSelectionBackground#efefef
  • list.inactiveSelectionIconForeground#000
  • panel.background#efefef
  • sideBar.background#efefef
  • sideBar.foreground#000
  • sideBarSectionHeader.foreground#000
  • sideBarTitle.foreground#000
  • tab.activeBackground#e5e5e5
  • tab.activeForeground#000
  • tab.border#e5e5e5
  • tab.inactiveBackground#efefef
  • textLink.foreground#000
  • titleBar.activeBackground#efefef
  • titleBar.activeForeground#000
  • titleBar.inactiveBackground#efefef
  • titleBar.inactiveForeground#000
  • toolbar.activeBackground#efefef
  • toolbar.hoverBackground#efefef

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#000italic underline
comment.block.preprocessor#000italic underline
comment.documentation, comment.block.documentation#000italic underline
invalid.illegal#000
keyword.operator#000
keyword, storage#000
storage.type, support.type#000
constant.language, support.constant, variable.language#000
variable, support.variable#000
entity.name.function, support.function#000bold
entity.name.type, entity.other.inherited-class, support.class#000bold
entity.name.exception#000
entity.name.section
constant.numeric, constant.character, constant#000
string#000
constant.character.escape#000
string.regexp#000
constant.other.symbol#000
punctuation#000
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#000
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#000
entity.name.tag#000
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#000italic
constant.character.entity, punctuation.definition.entity#000
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#000
meta.property-name, support.type.property-name#000
meta.property-value, meta.property-value constant.other, support.constant.property-value#000
keyword.other.important
markup.changed#000
markup.deleted#000
markup.italicitalic
markup.error#000
markup.inserted#000
meta.link#000
markup.output, markup.raw#000
markup.prompt#000
markup.heading#000
markup.bold
markup.traceback#000
markup.underlineunderline
markup.quote#000
markup.list#000
markup., markup.italic#000
markup.inline.raw#000
meta.diff.range, meta.diff.index, meta.separator#000
meta.diff.header.from-file#000
meta.diff.header.to-file#000

Shiki preview

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

Loading...

Simple Black White Theme - Coding Theme