Skip to main content
CodingTheme

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#202330
  • activityBar.foreground#ff928b
  • activityBarBadge.background#ff928b
  • breadcrumb.foreground#ffffff
  • button.background#fe7c8ecc
  • dropdown.background#202330
  • editor.background#202330
  • editor.foreground#fff8f8
  • editor.lineHighlightBackground#472541
  • editor.selectionBackground#472541
  • editor.selectionHighlightBackground#575b6180
  • editor.wordHighlightBackground#4747a180
  • editor.wordHighlightStrongBackground#6767ce80
  • editorBracketMatch.border#d0963a
  • editorCursor.foreground#ffedf0
  • editorError.foreground#ff62a5
  • editorGroupHeader.tabsBackground#2d2f42
  • editorWarning.foreground#3bc089
  • extensionButton.prominentBackground#fe7c8e
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#fe7c8e
  • focusBorder#fe7c8e
  • input.background#202330
  • inputOption.activeBorder#fe7c8e
  • list.activeSelectionBackground#729760
  • list.errorForeground#ff62a5
  • list.focusBackground#707070
  • list.highlightForeground#ffffff
  • list.hoverBackground#565970
  • list.inactiveSelectionBackground#729760
  • menu.separatorBackground#f3b4bf
  • notificationCenter.border#f3b4bf
  • notificationCenterHeader.background#f3b4bf
  • notificationCenterHeader.foreground#ffffff
  • notificationLink.foreground#fe7c8e
  • notifications.background#6d5d72
  • notifications.foreground#f3b4bf
  • panelTitle.activeForeground#ffffff
  • peekView.border#d0963a
  • scrollbarSlider.activeBackground#e9a6b288
  • scrollbarSlider.background#f3b4bf48
  • scrollbarSlider.hoverBackground#f3b4bf66
  • sideBar.background#2d2f42
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#202330
  • statusBar.background#ff928b
  • statusBar.debuggingBackground#f3b4bf
  • statusBar.noFolderBackground#f3b4bf
  • tab.activeBorderTop#fe7c8e
  • tab.activeForeground#fe7c8e
  • tab.border#9498a144
  • tab.inactiveBackground#2d2f42
  • tab.inactiveForeground#ffffff
  • terminal.ansiWhite#ffffff
  • titleBar.activeBackground#2d2f42

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#C5C8C6
comment#6D7A72
string#FAE8B6
constant.numeric#FF38A2
constant.language#58B896
constant.character, constant.other#FF7F9D
keyword#FF4791
storage#FEC831
storage.type#DCBFF2italic
entity.name.class#F5A6C6underline
entity.other.inherited-class#37E884italic underline
entity.name.function#FFC85B
variable.parameter#9CD162italic
entity.name.tag#FA508C
support.function#A2C2EBbold
variable.other, variable.js, punctuation.separator.variable#EBA4AC
invalid#FFFFFF
variable.other.php, variable.other.normal#EBA4AC
variable.other.property#DCBFF2
meta.tag#FFF0F5
entity.name.tag#FA508C
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#73B5D7
meta.tag.inline source, text.html.php.source#73B5D7
entity.other.attribute-name, meta.tag punctuation.definition.string#E6A1FF
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#6089B4
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#D0B344
meta.toc-list.id#73B5D7
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#FFF0F5
support.type, support.class#94AFE8italic
punctuation.definition.template-expression, punctuation.section.embedded.coffee#D08442
meta.template.expression#C5C8C6
punctuation.definition.string.end.php, punctuation.definition.string.begin.php#E1ECF2
source.php.embedded.line.html#787878
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#EC9A5E
keyword.other.DML.sql#D0B344
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#DC322F
markup.changed#E53C70
markup.inserted#219186
markup.quote#9E6DBC
markup.list#73B5D7
markup.bold, markup.italic#6089B4
markup.inline.raw#FF0080
markup.heading#D0B344
markup.heading.setext#D0B344
token.info-token#6796E6
token.warn-token#E5AC40
token.error-token#F44747
token.debug-token#B267E6
comment#729760
punctuation.definition.comment#729760
string#FF928B
meta.embedded.assembly#FF928B
keyword - keyword.operator#CDEAC0
keyword.control#CDEAC0
storage#CDEAC0
storage.type#CDEAC0
constant.numeric#FFAC81
entity.name.type#FEC3D6
entity.name.class#FEC3D6
support.type#FEC3D6
support.class#FEC3D6
entity.name.function#EFE9AE
support.function#EFE9AE
variable#9B9999
entity.name.variable#9B9999

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Peachy Themes by VoxelwaveStudio - VS Code Theme