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#FFECF5
  • activityBar.foreground#FF87AB
  • activityBarBadge.background#FFA6C9
  • button.background#FFA6C9
  • button.hoverBackground#FF95C8
  • contrastActiveBorder#FF4E8C
  • contrastBorder#FF87AB
  • dropdown.background#FFFAFC
  • editor.background#FFFAFC
  • editor.findMatchBackground#FFB7C533
  • editor.findMatchHighlightBackground#FFA6C944
  • editor.foreground#2A1A2F
  • editor.hoverHighlightBackground#FFE4F022
  • editor.lineHighlightBackground#FFF8FA
  • editor.lineHighlightBorder#FFD6E8
  • editor.selectionBackground#FFD6E8
  • editor.selectionHighlightBackground#FFD6E833
  • editor.wordHighlightBackground#FFE4F033
  • editor.wordHighlightStrongBackground#FFD6E866
  • editorBracketMatch.background#FFD6E8
  • editorBracketMatch.border#FF87AB
  • editorCodeLens.foreground#FFB7C5
  • editorCursor.foreground#FF87AB
  • editorError.foreground#D42D6E
  • editorGroupHeader.tabsBackground#FFD6E8
  • editorGutter.addedBackground#FFB7C5
  • editorGutter.deletedBackground#FFA6C9
  • editorGutter.modifiedBackground#C71585
  • editorIndentGuide.activeBackground#FFB7C5
  • editorIndentGuide.background#FFE4F0
  • editorInfo.foreground#B86CB9
  • editorLineNumber.foreground#9E7A9E
  • editorOverviewRuler.border#FF87AB
  • editorRuler.foreground#FFB7C5
  • editorWarning.foreground#E55A8C
  • editorWhitespace.foreground#E6CFE6
  • extensionButton.prominentBackground#FFA6C9
  • extensionButton.prominentForeground#FFFAFC
  • extensionButton.prominentHoverBackground#FF87AB
  • input.background#FFFFFF
  • input.border#FFB7C5
  • inputOption.activeBorder#FF87AB
  • list.activeSelectionBackground#FFD6E8
  • list.activeSelectionForeground#2A1A2F
  • list.focusBackground#FFE4F0
  • list.highlightForeground#2A1A2F
  • list.hoverBackground#FFF0F5
  • list.inactiveSelectionBackground#FFD6E8
  • notificationCenter.border#FF87AB
  • notificationCenterHeader.background#FFD6E8
  • notificationLink.foreground#FF87AB
  • notifications.background#FFFAFC
  • notifications.foreground#2A1A2F
  • panelTitle.activeForeground#2A1A2F
  • peekView.border#FF87AB
  • scrollbarSlider.activeBackground#FFB7C555
  • scrollbarSlider.background#FFB7C533
  • scrollbarSlider.hoverBackground#FFB7C544
  • sideBar.background#FFF5F9
  • sideBarSectionHeader.background#FFE4F0
  • sideBarTitle.background#FFE4F0
  • sideBarTitle.foreground#2A1A2F
  • statusBar.background#FFD6E8
  • statusBar.debuggingBackground#FFD6E8
  • statusBar.foreground#2A1A2F
  • statusBar.noFolderBackground#FFD6E8
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#FF87AB
  • tab.activeForeground#C71585
  • tab.border#FF87AB
  • tab.inactiveBackground#FFF0F5
  • tab.inactiveForeground#8A7F8A
  • terminal.ansiWhite#2A1A2F
  • titleBar.activeBackground#FFD6E8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#8A7F8Aitalic
comment.todo, comment.fixme, comment.note, comment.warning#D42D6Ebold
constant.numeric, constant.language.boolean, constant.other, constant.language, constant.other.null, constant.other.undefined#F4A4B6
constant.numeric.string#FFB7C5bold
constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#FFB7C5bold
string, string.quoted, string.template, string.attribute-value.html, string.quoted.double.html#E55A8C
string.quoted.multi, string.template#E55A8Citalic
variable, variable.other, support.variable, meta.definition.variable.name, meta.property-name#A8365E
variable.parameter, variable.language#D87A95italic
variable.local, variable.other.readwrite#E891A6
keyword, storage, storage.type, keyword.control, keyword.operator#B86CB9bold
entity.name.function, support.function, meta.function-call, support.function.builtin#B86CB9italic
entity.name.type, support.type, support.class, support.class.builtin, support.type.primitive#FF87ABitalic
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, support.class.component#B86CB9bold
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx#E55A8C
entity.other.attribute-name.boolean.html, entity.other.attribute-name.event.html#E55A8Citalic
punctuation, meta.brace, meta.delimiter#8A7F8A
invalid, invalid.illegal, markup.error#D42D6Eunderline
markup.warning#E55A8Citalic
markup.info#B86CB9italic
markup.heading#B86CB9bold
markup.bold#E55A8Cbold
markup.italic#B86CB9italic
markup.underline.link, markup.underline.link.image#E55A8Cunderline
support.constant, support.type.property-name#F4A4B6
meta.preprocessor, meta.preprocessor.string#B86CB9
meta.decorator, annotation#E55A8Citalic
ThemeDatabase All Themes by enes ozturk - VS Code Theme