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.activeBorder#007ACC
  • activityBar.background#EFEFEF
  • activityBar.border#E4E4E4
  • activityBar.foreground#333333
  • activityBar.inactiveForeground#999999
  • activityBarBadge.background#007ACC
  • button.background#007ACC
  • editor.background#FFFFFF
  • editor.foreground#2C2C2C
  • editor.selectionBackground#8C6EFF33
  • editor.selectionHighlightBackground#9C7CFF22
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#7B5EA7
  • editorCursor.foreground#5A8FEF
  • editorGroup.border#00000000
  • editorIndentGuide.activeBackground#BBBBBB
  • editorIndentGuide.background#DEDEDE
  • focusBorder#AAAAAA
  • input.placeholderForeground#AAAAAA
  • list.activeSelectionBackground#E3DEFF
  • list.dropBackground#D8DADE
  • list.hoverBackground#0000000A
  • list.inactiveSelectionBackground#0000000A
  • menu.background#F8F8F8
  • menu.foreground#333333
  • menu.separatorBackground#E0E0E0
  • panel.background#F7F7F7
  • panel.border#00000000
  • scrollbarSlider.activeBackground#00000033
  • scrollbarSlider.background#00000012
  • scrollbarSlider.hoverBackground#00000022
  • settings.numberInputBackground#F0F0F0
  • settings.textInputBackground#F0F0F0
  • sideBar.background#F7F7F7
  • sideBar.border#00000000
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#F7F7F7
  • sideBarSectionHeader.border#E4E4E4
  • sideBarTitle.foreground#555555
  • statusBar.background#F7F7F7
  • statusBar.border#E4E4E4
  • statusBar.foreground#444444
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#FFFFFF
  • tab.border#00000000
  • tab.inactiveBackground#EFEFEF
  • titleBar.activeBackground#E8E8E8
  • titleBar.inactiveBackground#E8E8E8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9A9080italic
string.quoted.double, string.quoted.single, string.constant, string.template, string.quoted.template#3A9A36
string.quoted.other, string support, string keyword#0E7A9E
entity.name.type, entity.name.namespace, storage.type.namespace.definition, entity.name.scope-resolution#0E7A9E
punctuation.definition.template-expression, punctuation.section.embedded#9040C0
constant.language, constant.other, support.constant#0E7A9E
variable, variable.other, variable.parameter, variable.other.exported.go#2060B0
keyword, keyword.operator.arithmetic.shell, storage, support.type.return, support.type.receiver#C94040
entity.name.class, entity.name.type.class, entity.name.type.interface, entity.section.ini, entity.name.section#9040C0
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.static, meta.function-call.ts#9040C0
entity.name.tag, entity.tag.apacheconf#0E7A9E
entity.other.attribute-name, entity.other.pseudo-element#9040C0
support.type, support.other.namespace, support.class, source.js support.type, support.constant.color#0E7A9E
constant.numeric, constant.character.entity#0E7A9E
invalid#fafbfc
meta.property-name.css, meta.property-value.css support, meta.property-value.css support.constant, meta.property-value.css#0E7A9E
meta.property-value.css punctuation#2C2C2C
string.quoted.single.dart, string.quoted.double.dart, punctuation.definition.string.begin.dart, punctuation.definition.string.end.dart#3A9A36