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#f8fcfb
  • activityBar.border#00000015
  • activityBar.foreground#4fb8c6
  • activityBar.inactiveForeground#10292e60
  • activityBarBadge.background#4fb8c6
  • activityBarBadge.foreground#f8fcfb
  • button.background#4fb8c6
  • button.foreground#f8fcfb
  • button.hoverBackground#4fb8c6dd
  • editor.background#f8fcfb
  • editor.foreground#10292e
  • editor.inactiveSelectionBackground#a8dfe32580
  • editor.lineHighlightBackground#d9e8e450
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#a8dfe325
  • editorCursor.foreground#4fb8c6
  • editorGroupHeader.tabsBackground#d9e8e4aa
  • editorLineNumber.activeForeground#4fb8c6
  • editorLineNumber.foreground#6f858480
  • focusBorder#4fb8c6
  • foreground#10292e
  • input.background#d9e8e4
  • input.border#00000015
  • input.foreground#10292e
  • input.placeholderForeground#10292e60
  • list.activeSelectionBackground#4fb8c630
  • list.activeSelectionForeground#10292e
  • list.highlightForeground#4fb8c6
  • list.hoverBackground#d9e8e440
  • list.hoverForeground#10292e
  • list.inactiveSelectionBackground#4fb8c615
  • list.inactiveSelectionForeground#10292e
  • selection.background#a8dfe325
  • sideBar.background#d9e8e4
  • sideBar.border#00000015
  • sideBar.foreground#10292e
  • sideBarSectionHeader.background#d9e8e480
  • sideBarSectionHeader.foreground#10292e
  • sideBarTitle.foreground#4fb8c6
  • statusBar.background#f8fcfb
  • statusBar.border#00000015
  • statusBar.foreground#10292e
  • statusBar.noFolderBackground#f8fcfb
  • tab.activeBackground#f8fcfb
  • tab.activeBorderTop#4fb8c6
  • tab.activeForeground#10292e
  • tab.border#00000015
  • tab.inactiveBackground#f8fcfb60
  • tab.inactiveForeground#10292e80
  • terminal.ansiBlack#10292e
  • terminal.ansiBlue#a8dfe3
  • terminal.ansiCyan#e8f6f4
  • terminal.ansiGreen#4fb8c6
  • terminal.ansiMagenta#78cad3
  • terminal.ansiRed#78cad3
  • terminal.ansiWhite#10292e
  • terminal.ansiYellow#e8f6f4
  • terminal.background#f8fcfb
  • terminal.foreground#10292e
  • titleBar.activeBackground#f8fcfb
  • titleBar.activeForeground#10292e
  • titleBar.border#00000015
  • titleBar.inactiveBackground#f8fcfb
  • titleBar.inactiveForeground#10292e60
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6f8584italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#a8dfe3bold
storage.type, storage.modifier#a8dfe3italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#4fb8c6
string, punctuation.definition.string, string.template, meta.template.expression#e8f6f4
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#78cad3
variable, variable.other.readwrite, variable.other.object#10292e
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#10292e
variable.parameter, meta.parameter#10292edditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#10292e80
keyword.operator#10292e
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#e8f6f4bold
entity.other.inherited-class#4fb8c6
entity.name.tag, punctuation.definition.tag#a8dfe3
entity.other.attribute-name#4fb8c6
meta.diff, meta.diff.header#6f8584
markup.deleted#78cad3
markup.inserted#4fb8c6
markup.changed#e8f6f4
markup.heading, markup.heading.setext, punctuation.definition.heading#4fb8c6bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#e8f6f4
string.other.link.title, string.other.link.description#4fb8c6
markup.underline.link#6f8584underline
punctuation.definition.list#a8dfe3
markup.quote, punctuation.definition.quote#6f8584italic