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#063F4A
  • activityBar.border#ffffff15
  • activityBar.foreground#1677FF
  • activityBar.inactiveForeground#F8FBF760
  • activityBarBadge.background#1677FF
  • activityBarBadge.foreground#063F4A
  • button.background#1677FF
  • button.foreground#063F4A
  • button.hoverBackground#1677FFdd
  • editor.background#063F4A
  • editor.foreground#F8FBF7
  • editor.inactiveSelectionBackground#20D88F3580
  • editor.lineHighlightBackground#18212440
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#20D88F35
  • editorCursor.foreground#1677FF
  • editorGroupHeader.tabsBackground#063F4Add
  • editorLineNumber.activeForeground#1677FF
  • editorLineNumber.foreground#B7793E80
  • focusBorder#1677FF
  • foreground#F8FBF7
  • input.background#182124
  • input.border#ffffff15
  • input.foreground#F8FBF7
  • input.placeholderForeground#F8FBF760
  • list.activeSelectionBackground#1677FF30
  • list.activeSelectionForeground#F8FBF7
  • list.highlightForeground#1677FF
  • list.hoverBackground#18212440
  • list.hoverForeground#F8FBF7
  • list.inactiveSelectionBackground#1677FF15
  • list.inactiveSelectionForeground#F8FBF7
  • selection.background#20D88F35
  • sideBar.background#182124
  • sideBar.border#ffffff15
  • sideBar.foreground#F8FBF7
  • sideBarSectionHeader.background#063F4A80
  • sideBarSectionHeader.foreground#F8FBF7
  • sideBarTitle.foreground#1677FF
  • statusBar.background#063F4A
  • statusBar.border#ffffff15
  • statusBar.foreground#F8FBF7
  • statusBar.noFolderBackground#063F4A
  • tab.activeBackground#063F4A
  • tab.activeBorderTop#1677FF
  • tab.activeForeground#F8FBF7
  • tab.border#ffffff15
  • tab.inactiveBackground#18212460
  • tab.inactiveForeground#F8FBF780
  • terminal.ansiBlack#063F4A
  • terminal.ansiBlue#20D88F
  • terminal.ansiCyan#FF7A24
  • terminal.ansiGreen#1677FF
  • terminal.ansiMagenta#60E6F2
  • terminal.ansiRed#60E6F2
  • terminal.ansiWhite#F8FBF7
  • terminal.ansiYellow#FF7A24
  • terminal.background#063F4A
  • terminal.foreground#F8FBF7
  • titleBar.activeBackground#063F4A
  • titleBar.activeForeground#F8FBF7
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#063F4A
  • titleBar.inactiveForeground#F8FBF760
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#B7793Eitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#20D88Fbold
storage.type, storage.modifier#20D88Fitalic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#1677FF
string, punctuation.definition.string, string.template, meta.template.expression#FF7A24
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#60E6F2
variable, variable.other.readwrite, variable.other.object#F8FBF7
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#F8FBF7
variable.parameter, meta.parameter#F8FBF7dditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#F8FBF780
keyword.operator#F8FBF7
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#FF7A24bold
entity.other.inherited-class#1677FF
entity.name.tag, punctuation.definition.tag#20D88F
entity.other.attribute-name#1677FF
meta.diff, meta.diff.header#B7793E
markup.deleted#60E6F2
markup.inserted#1677FF
markup.changed#FF7A24
markup.heading, markup.heading.setext, punctuation.definition.heading#1677FFbold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#FF7A24
string.other.link.title, string.other.link.description#1677FF
markup.underline.link#B7793Eunderline
punctuation.definition.list#20D88F
markup.quote, punctuation.definition.quote#B7793Eitalic
Morphous Theme by Ameyanagi - VS Code Theme