Skip to main content
Coding Theme

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#2B1C3D
  • activityBar.foreground#C7B8E0
  • activityBar.inactiveForeground#886C9C
  • activityBarBadge.background#7FC9AB
  • activityBarBadge.foreground#2B1C3D
  • badge.background#7FC9AB
  • badge.foreground#2B1C3D
  • breadcrumb.background#2B1C3D
  • breadcrumb.focusForeground#C7B8E0
  • breadcrumb.foreground#886C9C
  • breadcrumbPicker.background#2B1C3D
  • button.background#7FC9AB
  • button.foreground#2B1C3D
  • button.hoverBackground#9FDBC1
  • dropdown.background#2B1C3D
  • dropdown.border#5A3D6E
  • dropdown.foreground#C7B8E0
  • editor.background#3A2A4D
  • editor.findMatchBackground#7FC9AB44
  • editor.findMatchHighlightBackground#7FC9AB22
  • editor.foreground#C7B8E0
  • editor.lineHighlightBackground#47345E
  • editor.selectionBackground#47345E
  • editor.selectionHighlightBackground#47345E88
  • editor.wordHighlightBackground#47345E
  • editor.wordHighlightStrongBackground#5A3D6E
  • editorBracketMatch.background#47345E
  • editorBracketMatch.border#C78DFC
  • editorCursor.foreground#C7B8E0
  • editorError.foreground#E88A9A
  • editorGroupHeader.tabsBackground#2B1C3D
  • editorHint.foreground#8AD4D4
  • editorIndentGuide.activeBackground1#886C9C
  • editorIndentGuide.background1#5A3D6E
  • editorInfo.foreground#9AABE8
  • editorLineNumber.activeForeground#C7B8E0
  • editorLineNumber.foreground#886C9C
  • editorWarning.foreground#E3C0A8
  • editorWhitespace.foreground#5A3D6E
  • focusBorder#7FC9AB
  • gitDecoration.addedResourceForeground#7FC9AB
  • gitDecoration.deletedResourceForeground#E88A9A
  • gitDecoration.ignoredResourceForeground#886C9C
  • gitDecoration.modifiedResourceForeground#E3C0A8
  • gitDecoration.untrackedResourceForeground#8AD4D4
  • input.background#2B1C3D
  • input.border#5A3D6E
  • input.foreground#C7B8E0
  • input.placeholderForeground#886C9C
  • inputOption.activeBorder#7FC9AB
  • list.activeSelectionBackground#47345E
  • list.activeSelectionForeground#EBE4F5
  • list.highlightForeground#7FC9AB
  • list.hoverBackground#47345E66
  • list.inactiveSelectionBackground#47345E88
  • panel.background#2B1C3D
  • panel.border#3A2A4D
  • panelTitle.activeBorder#7FC9AB
  • panelTitle.activeForeground#C7B8E0
  • panelTitle.inactiveForeground#886C9C
  • peekView.border#7FC9AB
  • peekViewEditor.background#2B1C3D
  • peekViewResult.background#2B1C3D
  • peekViewTitle.background#3A2A4D
  • scrollbar.shadow#1F152900
  • scrollbarSlider.activeBackground#886C9CAA
  • scrollbarSlider.background#886C9C44
  • scrollbarSlider.hoverBackground#886C9C88
  • selection.background#47345E
  • sideBar.background#2B1C3D
  • sideBar.foreground#C7B8E0
  • sideBarSectionHeader.background#3A2A4D
  • sideBarSectionHeader.foreground#C7B8E0
  • sideBarTitle.foreground#C7B8E0
  • statusBar.background#2B1C3D
  • statusBar.debuggingBackground#C97DB2
  • statusBar.debuggingForeground#2B1C3D
  • statusBar.foreground#C7B8E0
  • statusBar.noFolderBackground#3A2A4D
  • tab.activeBackground#3A2A4D
  • tab.activeBorder#7FC9AB
  • tab.activeForeground#C7B8E0
  • tab.border#2B1C3D
  • tab.inactiveBackground#2B1C3D
  • tab.inactiveForeground#886C9C
  • terminal.ansiBlack#2B1C3D
  • terminal.ansiBlue#9AABE8
  • terminal.ansiBrightBlack#886C9C
  • terminal.ansiBrightBlue#B4C1F0
  • terminal.ansiBrightCyan#A8E4E4
  • terminal.ansiBrightGreen#9FDBC1
  • terminal.ansiBrightMagenta#D99DC6
  • terminal.ansiBrightRed#F0A0AE
  • terminal.ansiBrightWhite#EBE4F5
  • terminal.ansiBrightYellow#F0D4BE
  • terminal.ansiCyan#8AD4D4
  • terminal.ansiGreen#7FC9AB
  • terminal.ansiMagenta#C97DB2
  • terminal.ansiRed#E88A9A
  • terminal.ansiWhite#C7B8E0
  • terminal.ansiYellow#E3C0A8
  • terminal.background#2B1C3D
  • terminal.foreground#C7B8E0
  • titleBar.activeBackground#2B1C3D
  • titleBar.activeForeground#C7B8E0
  • titleBar.inactiveBackground#2B1C3D
  • titleBar.inactiveForeground#886C9C
  • widget.shadow#1F152966

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#886C9Citalic
string, string.quoted, string.template#E3C0A8
constant.numeric, constant.language, constant.character, constant.other#E3C0A8
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier#C97DB2
keyword.operator, punctuation.accessor#C97DB2
entity.name.function, support.function, meta.function-call#7FC9AB
variable.parameter, meta.parameter#C7B8E0
entity.name.type, entity.name.class, entity.name.namespace, entity.name.module, support.type, support.class#C78DFC
entity.name.type.interface#C78DFC
variable, variable.other, variable.language#C7B8E0
variable.language.this, variable.language.self, variable.language.super#C78DFCbold
variable.other.property, variable.other.object.property, support.variable.property#C7B8E0
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator#C7B8E0
entity.name.tag, punctuation.definition.tag#E3C0A8
entity.other.attribute-name#C7B8E0
markup.heading, entity.name.section#E3C0A8bold
markup.boldbold
markup.italicitalic
markup.underline.link, string.other.link#C78DFCunderline
markup.inline.raw, markup.fenced_code, markup.raw#7FC9AB
markup.list punctuation.definition.list#C97DB2
markup.quote#886C9C
markup.inserted#7FC9AB
markup.deleted#E88A9A
markup.changed#E3C0A8
constant.character.escape#8AD4D4
string.regexp#8AD4D4
invalid, invalid.deprecated#E88A9Astrikethrough
support.type.property-name.json#C7B8E0
support.type.property-name.css, meta.property-name.css#C7B8E0
support.constant.property-value.css, meta.property-value.css#E3C0A8
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7FC9AB
Boo Berry by CCPRN - VS Code Theme