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#111111
  • activityBar.activeBorder#eeeeee
  • activityBar.background#111111
  • activityBar.foreground#eeeeee
  • activityBar.inactiveForeground#eeeeee
  • activityBarBadge.background#a7a701
  • activityBarBadge.foreground#eeeeee
  • button.background#111111
  • button.foreground#eeeeee
  • descriptionForeground#eeeeee
  • editor.background#111111
  • editor.findMatchBackground#a7a701
  • editor.findMatchHighlightBackground#a7a701
  • editor.foreground#eeeeee
  • editor.lineHighlightBackground#3a3a3a
  • editor.selectionBackground#a7a701
  • editor.selectionHighlightBackground#a7a701
  • editorBracketHighlight.foreground1#eeeeee
  • editorBracketHighlight.foreground2#eeeeee
  • editorBracketHighlight.foreground3#eeeeee
  • editorBracketHighlight.foreground4#eeeeee
  • editorBracketHighlight.foreground5#eeeeee
  • editorCursor.foreground#eeeeee
  • editorGroupHeader.tabsBackground#111111
  • editorHoverWidget.background#333333
  • editorLineNumber.activeForeground#a7a701
  • editorLineNumber.foreground#eeeeee
  • focusBorder#111111
  • gitDecoration.addedResourceForeground#eeeeee
  • gitDecoration.conflictingResourceForeground#eeeeee
  • gitDecoration.ignoredResourceForeground#eeeeee
  • gitDecoration.modifiedResourceForeground#eeeeee
  • gitDecoration.renamedResourceForeground#eeeeee
  • gitDecoration.stageDeletedResourceForeground#eeeeee
  • gitDecoration.stageModifiedResourceForeground#eeeeee
  • gitDecoration.submoduleResourceForeground#eeeeee
  • gitDecoration.untrackedResourceForeground#eeeeee
  • list.activeSelectionBackground#555555
  • list.activeSelectionForeground#eeeeee
  • list.activeSelectionIconForeground#eeeeee
  • list.highlightForeground#eeeeee
  • list.hoverBackground#555555
  • list.inactiveSelectionBackground#111111
  • list.inactiveSelectionIconForeground#eeeeee
  • panel.background#111111
  • panelTitle.activeForeground#eeeeee
  • sideBar.background#111111
  • sideBar.foreground#eeeeee
  • sideBarSectionHeader.foreground#eeeeee
  • sideBarTitle.foreground#eeeeee
  • tab.activeBackground#333333
  • tab.activeForeground#eeeeee
  • tab.border#333333
  • tab.inactiveBackground#111111
  • terminal.foreground#cccccc
  • textLink.foreground#eeeeee
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#eeeeee
  • titleBar.inactiveBackground#111111
  • titleBar.inactiveForeground#eeeeee
  • toolbar.activeBackground#111111
  • toolbar.hoverBackground#111111

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...

Simple Black White Theme - Coding Theme