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#202330
  • activityBar.foreground#fde3e8
  • activityBarBadge.background#fe7c8e
  • button.background#fe7c8ecc
  • dropdown.background#202330
  • editor.background#202330
  • editor.foreground#FFF0F5
  • editor.lineHighlightBackground#472541
  • editor.selectionBackground#472541
  • editor.selectionHighlightBackground#575b6180
  • editor.wordHighlightBackground#4747a180
  • editor.wordHighlightStrongBackground#6767ce80
  • editorBracketMatch.border#d0963a
  • editorCursor.foreground#ffedf0
  • editorError.foreground#ff62a5
  • editorGroup.background#1e1e1e
  • 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#d0963a
  • list.errorForeground#ff62a5
  • list.focusBackground#707070
  • list.highlightForeground#FFFFFF
  • list.hoverBackground#565970
  • list.inactiveSelectionBackground#765d36
  • 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
  • sideBarSectionHeader.background#202330
  • statusBar.background#f3b4bf
  • statusBar.debuggingBackground#f3b4bf
  • statusBar.noFolderBackground#f3b4bf
  • tab.activeBorderTop#fe7c8e
  • tab.activeForeground#fe7c8e
  • tab.border#9498a144
  • tab.inactiveBackground#2d2f42
  • tab.inactiveForeground#9498a1
  • terminal.ansiWhite#ffffff
  • titleBar.activeBackground#2d2f42

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#FFF0F5
By uonick#c5c8c6ff
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, keyword.type, support.type#DCBFF2italic
entity.name.function, storage.type.modifier#ffc85b
variable.parameter, entity.name.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.object.property, 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
entity.name.type#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
keyword.control.directive, meta.preprocessor, keyword.preprocessor, entity.other.attribute-name#9A9A9Aitalic
keyword.other.class.cs, keyword.other.struct.cs, keyword.other.interface.cs, keyword.other.enum.cs, keyword.other.record.cs, keyword.other.var.cs, keyword.other.delegate.cs, keyword.other.global.cs, keyword.other.event.cs#DCBFF2italic
entity.name.type.namespace#FFFFFF

Shiki preview

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

Loading...

PinkCPP - Coding Theme