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.background#101313
  • activityBar.border#ffffff15
  • activityBar.foreground#2b2f2f
  • activityBar.inactiveForeground#f4f5f160
  • activityBarBadge.background#2b2f2f
  • activityBarBadge.foreground#101313
  • button.background#2b2f2f
  • button.foreground#101313
  • button.hoverBackground#2b2f2fdd
  • editor.background#101313
  • editor.foreground#f4f5f1
  • editor.inactiveSelectionBackground#d9ddd93580
  • editor.lineHighlightBackground#171a1a40
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#d9ddd935
  • editorCursor.foreground#2b2f2f
  • editorGroupHeader.tabsBackground#101313dd
  • editorLineNumber.activeForeground#2b2f2f
  • editorLineNumber.foreground#d9ddd980
  • focusBorder#2b2f2f
  • foreground#f4f5f1
  • input.background#171a1a
  • input.border#ffffff15
  • input.foreground#f4f5f1
  • input.placeholderForeground#f4f5f160
  • list.activeSelectionBackground#2b2f2f30
  • list.activeSelectionForeground#f4f5f1
  • list.highlightForeground#2b2f2f
  • list.hoverBackground#171a1a40
  • list.hoverForeground#f4f5f1
  • list.inactiveSelectionBackground#2b2f2f15
  • list.inactiveSelectionForeground#f4f5f1
  • selection.background#d9ddd935
  • sideBar.background#171a1a
  • sideBar.border#ffffff15
  • sideBar.foreground#f4f5f1
  • sideBarSectionHeader.background#10131380
  • sideBarSectionHeader.foreground#f4f5f1
  • sideBarTitle.foreground#2b2f2f
  • statusBar.background#101313
  • statusBar.border#ffffff15
  • statusBar.foreground#f4f5f1
  • statusBar.noFolderBackground#101313
  • tab.activeBackground#101313
  • tab.activeBorderTop#2b2f2f
  • tab.activeForeground#f4f5f1
  • tab.border#ffffff15
  • tab.inactiveBackground#171a1a60
  • tab.inactiveForeground#f4f5f180
  • terminal.ansiBlack#101313
  • terminal.ansiBlue#d9ddd9
  • terminal.ansiCyan#1f4a36
  • terminal.ansiGreen#2b2f2f
  • terminal.ansiMagenta#55745c
  • terminal.ansiRed#55745c
  • terminal.ansiWhite#f4f5f1
  • terminal.ansiYellow#1f4a36
  • terminal.background#101313
  • terminal.foreground#f4f5f1
  • titleBar.activeBackground#101313
  • titleBar.activeForeground#f4f5f1
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#101313
  • titleBar.inactiveForeground#f4f5f160
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#d9ddd9italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#d9ddd9bold
storage.type, storage.modifier#d9ddd9italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#2b2f2f
string, punctuation.definition.string, string.template, meta.template.expression#1f4a36
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#55745c
variable, variable.other.readwrite, variable.other.object#f4f5f1
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#f4f5f1
variable.parameter, meta.parameter#f4f5f1dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#f4f5f180
keyword.operator#f4f5f1
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#1f4a36bold
entity.other.inherited-class#2b2f2f
entity.name.tag, punctuation.definition.tag#d9ddd9
entity.other.attribute-name#2b2f2f
meta.diff, meta.diff.header#d9ddd9
markup.deleted#55745c
markup.inserted#2b2f2f
markup.changed#1f4a36
markup.heading, markup.heading.setext, punctuation.definition.heading#2b2f2fbold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#1f4a36
string.other.link.title, string.other.link.description#2b2f2f
markup.underline.link#d9ddd9underline
punctuation.definition.list#d9ddd9
markup.quote, punctuation.definition.quote#d9ddd9italic