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#0F172A
  • activityBar.border#ffffff15
  • activityBar.foreground#182A56
  • activityBar.inactiveForeground#F6F3EB60
  • activityBarBadge.background#182A56
  • activityBarBadge.foreground#0F172A
  • button.background#182A56
  • button.foreground#0F172A
  • button.hoverBackground#182A56dd
  • editor.background#0F172A
  • editor.foreground#F6F3EB
  • editor.inactiveSelectionBackground#2C4A7A3580
  • editor.lineHighlightBackground#0B0E1340
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#2C4A7A35
  • editorCursor.foreground#182A56
  • editorGroupHeader.tabsBackground#0F172Add
  • editorLineNumber.activeForeground#182A56
  • editorLineNumber.foreground#555C6680
  • focusBorder#182A56
  • foreground#F6F3EB
  • input.background#0B0E13
  • input.border#ffffff15
  • input.foreground#F6F3EB
  • input.placeholderForeground#F6F3EB60
  • list.activeSelectionBackground#182A5630
  • list.activeSelectionForeground#F6F3EB
  • list.highlightForeground#182A56
  • list.hoverBackground#0B0E1340
  • list.hoverForeground#F6F3EB
  • list.inactiveSelectionBackground#182A5615
  • list.inactiveSelectionForeground#F6F3EB
  • selection.background#2C4A7A35
  • sideBar.background#0B0E13
  • sideBar.border#ffffff15
  • sideBar.foreground#F6F3EB
  • sideBarSectionHeader.background#0F172A80
  • sideBarSectionHeader.foreground#F6F3EB
  • sideBarTitle.foreground#182A56
  • statusBar.background#0F172A
  • statusBar.border#ffffff15
  • statusBar.foreground#F6F3EB
  • statusBar.noFolderBackground#0F172A
  • tab.activeBackground#0F172A
  • tab.activeBorderTop#182A56
  • tab.activeForeground#F6F3EB
  • tab.border#ffffff15
  • tab.inactiveBackground#0B0E1360
  • tab.inactiveForeground#F6F3EB80
  • terminal.ansiBlack#0F172A
  • terminal.ansiBlue#2C4A7A
  • terminal.ansiCyan#556B2F
  • terminal.ansiGreen#182A56
  • terminal.ansiMagenta#6F7F3A
  • terminal.ansiRed#6F7F3A
  • terminal.ansiWhite#F6F3EB
  • terminal.ansiYellow#556B2F
  • terminal.background#0F172A
  • terminal.foreground#F6F3EB
  • titleBar.activeBackground#0F172A
  • titleBar.activeForeground#F6F3EB
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#0F172A
  • titleBar.inactiveForeground#F6F3EB60
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555C66italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#2C4A7Abold
storage.type, storage.modifier#2C4A7Aitalic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#182A56
string, punctuation.definition.string, string.template, meta.template.expression#556B2F
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#6F7F3A
variable, variable.other.readwrite, variable.other.object#F6F3EB
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#F6F3EB
variable.parameter, meta.parameter#F6F3EBdditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#F6F3EB80
keyword.operator#F6F3EB
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#556B2Fbold
entity.other.inherited-class#182A56
entity.name.tag, punctuation.definition.tag#2C4A7A
entity.other.attribute-name#182A56
meta.diff, meta.diff.header#555C66
markup.deleted#6F7F3A
markup.inserted#182A56
markup.changed#556B2F
markup.heading, markup.heading.setext, punctuation.definition.heading#182A56bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#556B2F
string.other.link.title, string.other.link.description#182A56
markup.underline.link#555C66underline
punctuation.definition.list#2C4A7A
markup.quote, punctuation.definition.quote#555C66italic
Morphous Theme by Ameyanagi - VS Code Theme