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#0B222A
  • activityBar.border#ffffff15
  • activityBar.foreground#5E682F
  • activityBar.inactiveForeground#FAFCFD60
  • activityBarBadge.background#5E682F
  • activityBarBadge.foreground#0B222A
  • button.background#5E682F
  • button.foreground#0B222A
  • button.hoverBackground#5E682Fdd
  • editor.background#0B222A
  • editor.foreground#FAFCFD
  • editor.inactiveSelectionBackground#97A97A3580
  • editor.lineHighlightBackground#282F3140
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#97A97A35
  • editorCursor.foreground#5E682F
  • editorGroupHeader.tabsBackground#0B222Add
  • editorLineNumber.activeForeground#5E682F
  • editorLineNumber.foreground#97A97A80
  • focusBorder#5E682F
  • foreground#FAFCFD
  • input.background#282F31
  • input.border#ffffff15
  • input.foreground#FAFCFD
  • input.placeholderForeground#FAFCFD60
  • list.activeSelectionBackground#5E682F30
  • list.activeSelectionForeground#FAFCFD
  • list.highlightForeground#5E682F
  • list.hoverBackground#282F3140
  • list.hoverForeground#FAFCFD
  • list.inactiveSelectionBackground#5E682F15
  • list.inactiveSelectionForeground#FAFCFD
  • selection.background#97A97A35
  • sideBar.background#282F31
  • sideBar.border#ffffff15
  • sideBar.foreground#FAFCFD
  • sideBarSectionHeader.background#0B222A80
  • sideBarSectionHeader.foreground#FAFCFD
  • sideBarTitle.foreground#5E682F
  • statusBar.background#0B222A
  • statusBar.border#ffffff15
  • statusBar.foreground#FAFCFD
  • statusBar.noFolderBackground#0B222A
  • tab.activeBackground#0B222A
  • tab.activeBorderTop#5E682F
  • tab.activeForeground#FAFCFD
  • tab.border#ffffff15
  • tab.inactiveBackground#282F3160
  • tab.inactiveForeground#FAFCFD80
  • terminal.ansiBlack#0B222A
  • terminal.ansiBlue#97A97A
  • terminal.ansiCyan#4F7F97
  • terminal.ansiGreen#5E682F
  • terminal.ansiMagenta#D07A8E
  • terminal.ansiRed#D07A8E
  • terminal.ansiWhite#FAFCFD
  • terminal.ansiYellow#4F7F97
  • terminal.background#0B222A
  • terminal.foreground#FAFCFD
  • titleBar.activeBackground#0B222A
  • titleBar.activeForeground#FAFCFD
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#0B222A
  • titleBar.inactiveForeground#FAFCFD60
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#97A97Aitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#97A97Abold
storage.type, storage.modifier#97A97Aitalic
entity.name.function, support.function, keyword.other.special-method, meta.function-call#5E682F
string, punctuation.definition.string, string.template, meta.template.expression#4F7F97
constant.numeric, constant.language, constant.character, constant.other, variable.other.constant#D07A8E
variable, variable.other.readwrite, variable.other.object#FAFCFD
variable.other.property, support.variable.property, meta.object-literal.key, meta.object.member#FAFCFD
variable.parameter, meta.parameter#FAFCFDdditalic
punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.block, punctuation.section, meta.brace#FAFCFD80
keyword.operator#FAFCFD
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution, support.type, support.class, support.other.namespace#4F7F97bold
entity.other.inherited-class#5E682F
entity.name.tag, punctuation.definition.tag#97A97A
entity.other.attribute-name#5E682F
meta.diff, meta.diff.header#97A97A
markup.deleted#D07A8E
markup.inserted#5E682F
markup.changed#4F7F97
markup.heading, markup.heading.setext, punctuation.definition.heading#5E682Fbold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw.block#4F7F97
string.other.link.title, string.other.link.description#5E682F
markup.underline.link#97A97Aunderline
punctuation.definition.list#97A97A
markup.quote, punctuation.definition.quote#97A97Aitalic
Morphous Theme by Ameyanagi - VS Code Theme