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#f5f7f3
  • activityBar.border#00000015
  • activityBar.foreground#617a43
  • activityBar.inactiveForeground#1f2a2360
  • activityBarBadge.background#617a43
  • activityBarBadge.foreground#f5f7f3
  • button.background#617a43
  • button.foreground#f5f7f3
  • button.hoverBackground#617a43dd
  • editor.background#f5f7f3
  • editor.foreground#1f2a23
  • editor.inactiveSelectionBackground#a7c9c62580
  • editor.lineHighlightBackground#c9c2b350
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#a7c9c625
  • editorCursor.foreground#617a43
  • editorGroupHeader.tabsBackground#c9c2b3aa
  • editorLineNumber.activeForeground#617a43
  • editorLineNumber.foreground#a7c9c680
  • focusBorder#617a43
  • foreground#1f2a23
  • input.background#c9c2b3
  • input.border#00000015
  • input.foreground#1f2a23
  • input.placeholderForeground#1f2a2360
  • list.activeSelectionBackground#617a4330
  • list.activeSelectionForeground#1f2a23
  • list.highlightForeground#617a43
  • list.hoverBackground#c9c2b340
  • list.hoverForeground#1f2a23
  • list.inactiveSelectionBackground#617a4315
  • list.inactiveSelectionForeground#1f2a23
  • selection.background#a7c9c625
  • sideBar.background#c9c2b3
  • sideBar.border#00000015
  • sideBar.foreground#1f2a23
  • sideBarSectionHeader.background#c9c2b380
  • sideBarSectionHeader.foreground#1f2a23
  • sideBarTitle.foreground#617a43
  • statusBar.background#f5f7f3
  • statusBar.border#00000015
  • statusBar.foreground#1f2a23
  • statusBar.noFolderBackground#f5f7f3
  • tab.activeBackground#f5f7f3
  • tab.activeBorderTop#617a43
  • tab.activeForeground#1f2a23
  • tab.border#00000015
  • tab.inactiveBackground#f5f7f360
  • tab.inactiveForeground#1f2a2380
  • terminal.ansiBlack#1f2a23
  • terminal.ansiBlue#a7c9c6
  • terminal.ansiCyan#e6e0ce
  • terminal.ansiGreen#617a43
  • terminal.ansiMagenta#8a966f
  • terminal.ansiRed#8a966f
  • terminal.ansiWhite#1f2a23
  • terminal.ansiYellow#e6e0ce
  • terminal.background#f5f7f3
  • terminal.foreground#1f2a23
  • titleBar.activeBackground#f5f7f3
  • titleBar.activeForeground#1f2a23
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f5f7f3
  • titleBar.inactiveForeground#1f2a2360
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a7c9c6italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#a7c9c6bold
storage.type, storage.modifier#a7c9c6italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#617a43
string, punctuation.definition.string, string.template, meta.template.expression#e6e0ce
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#8a966f
variable, variable.other.readwrite, variable.other.object#1f2a23
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#1f2a23
variable.parameter, meta.parameter#1f2a23dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#1f2a2380
keyword.operator#1f2a23
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#e6e0cebold
entity.other.inherited-class#617a43
entity.name.tag, punctuation.definition.tag#a7c9c6
entity.other.attribute-name#617a43
meta.diff, meta.diff.header#a7c9c6
markup.deleted#8a966f
markup.inserted#617a43
markup.changed#e6e0ce
markup.heading, markup.heading.setext, punctuation.definition.heading#617a43bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#e6e0ce
string.other.link.title, string.other.link.description#617a43
markup.underline.link#a7c9c6underline
punctuation.definition.list#a7c9c6
markup.quote, punctuation.definition.quote#a7c9c6italic