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#F7F3EC
  • activityBar.border#00000015
  • activityBar.foreground#F2C14E
  • activityBar.inactiveForeground#0E3A4D60
  • activityBarBadge.background#F2C14E
  • activityBarBadge.foreground#F7F3EC
  • button.background#F2C14E
  • button.foreground#F7F3EC
  • button.hoverBackground#F2C14Edd
  • editor.background#F7F3EC
  • editor.foreground#0E3A4D
  • editor.inactiveSelectionBackground#FFF6E52580
  • editor.lineHighlightBackground#2E907A50
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#FFF6E525
  • editorCursor.foreground#F2C14E
  • editorGroupHeader.tabsBackground#2E907Aaa
  • editorLineNumber.activeForeground#F2C14E
  • editorLineNumber.foreground#FFF6E580
  • focusBorder#F2C14E
  • foreground#0E3A4D
  • input.background#2E907A
  • input.border#00000015
  • input.foreground#0E3A4D
  • input.placeholderForeground#0E3A4D60
  • list.activeSelectionBackground#F2C14E30
  • list.activeSelectionForeground#0E3A4D
  • list.highlightForeground#F2C14E
  • list.hoverBackground#2E907A40
  • list.hoverForeground#0E3A4D
  • list.inactiveSelectionBackground#F2C14E15
  • list.inactiveSelectionForeground#0E3A4D
  • selection.background#FFF6E525
  • sideBar.background#2E907A
  • sideBar.border#00000015
  • sideBar.foreground#0E3A4D
  • sideBarSectionHeader.background#2E907A80
  • sideBarSectionHeader.foreground#0E3A4D
  • sideBarTitle.foreground#F2C14E
  • statusBar.background#F7F3EC
  • statusBar.border#00000015
  • statusBar.foreground#0E3A4D
  • statusBar.noFolderBackground#F7F3EC
  • tab.activeBackground#F7F3EC
  • tab.activeBorderTop#F2C14E
  • tab.activeForeground#0E3A4D
  • tab.border#00000015
  • tab.inactiveBackground#F7F3EC60
  • tab.inactiveForeground#0E3A4D80
  • terminal.ansiBlack#0E3A4D
  • terminal.ansiBlue#FFF6E5
  • terminal.ansiCyan#4DB6D6
  • terminal.ansiGreen#F2C14E
  • terminal.ansiMagenta#8A6A19
  • terminal.ansiRed#8A6A19
  • terminal.ansiWhite#0E3A4D
  • terminal.ansiYellow#4DB6D6
  • terminal.background#F7F3EC
  • terminal.foreground#0E3A4D
  • titleBar.activeBackground#F7F3EC
  • titleBar.activeForeground#0E3A4D
  • titleBar.border#00000015
  • titleBar.inactiveBackground#F7F3EC
  • titleBar.inactiveForeground#0E3A4D60
  • widget.border#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#FFF6E5italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#FFF6E5bold
storage.type, storage.modifier#FFF6E5italic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#F2C14E
string, punctuation.definition.string, string.template, meta.template.expression#4DB6D6
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#8A6A19
variable, variable.other.readwrite, variable.other.object#0E3A4D
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#0E3A4D
variable.parameter, meta.parameter#0E3A4Ddditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#0E3A4D80
keyword.operator#0E3A4D
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#4DB6D6bold
entity.other.inherited-class#F2C14E
entity.name.tag, punctuation.definition.tag#FFF6E5
entity.other.attribute-name#F2C14E
meta.diff, meta.diff.header#FFF6E5
markup.deleted#8A6A19
markup.inserted#F2C14E
markup.changed#4DB6D6
markup.heading, markup.heading.setext, punctuation.definition.heading#F2C14Ebold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#4DB6D6
string.other.link.title, string.other.link.description#F2C14E
markup.underline.link#FFF6E5underline
punctuation.definition.list#FFF6E5
markup.quote, punctuation.definition.quote#FFF6E5italic