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.activeBorder#E8A0BF
  • activityBar.background#0F0F0F
  • activityBar.foreground#FF1493
  • activityBar.inactiveForeground#E8A0BF
  • badge.background#FF1493
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#FF1493
  • breadcrumb.focusForeground#FF69B4
  • breadcrumb.foreground#E8A0BF
  • button.background#FF1493
  • button.foreground#FFFFFF
  • button.hoverBackground#FF69B4
  • dropdown.background#252525
  • dropdown.border#FF1493
  • dropdown.foreground#F0C0D8
  • editor.background#1A1A1A
  • editor.findMatchBackground#E8A0BF50
  • editor.findMatchHighlightBackground#E8A0BF30
  • editor.foreground#F0C0D8
  • editor.hoverHighlightBackground#FF69B420
  • editor.inactiveSelectionBackground#E8A0BF45
  • editor.lineHighlightBackground#E8A0BF15
  • editor.selectionBackground#E8A0BF70
  • editor.wordHighlightBackground#E8A0BF25
  • editorCursor.background#1A1A1A
  • editorCursor.foreground#FF1493
  • editorGroupHeader.tabsBackground#1A1A1A
  • editorGroupHeader.tabsBorder#FF1493
  • editorGutter.background#1A1A1A
  • editorIndentGuide.activeBackground#FF69B460
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#FF1493
  • editorLineNumber.foreground#FF69B4
  • editorWidget.background#2a0a1a
  • editorWidget.border#FF1493
  • extensionButton.prominentBackground#FF1493
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#FF69B4
  • focusBorder#FF1493
  • gitDecoration.addedResourceForeground#00FF88
  • gitDecoration.deletedResourceForeground#FF1493
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#FFD700
  • gitDecoration.renamedResourceForeground#00B7EB
  • gitDecoration.stageDeletedResourceForeground#FF1493
  • gitDecoration.stageModifiedResourceForeground#FFD700
  • gitDecoration.untrackedResourceForeground#00FF88
  • input.background#252525
  • input.border#FF1493
  • input.foreground#F0C0D8
  • input.placeholderForeground#E8A0BF80
  • inputOption.activeBorder#FF1493
  • list.activeSelectionBackground#FF69B4
  • list.activeSelectionForeground#1A1A1A
  • list.focusBackground#FF149320
  • list.focusForeground#FF69B4
  • list.hoverBackground#FF149325
  • list.hoverForeground#FF69B4
  • list.inactiveSelectionBackground#FF149330
  • list.inactiveSelectionForeground#FF69B4
  • menu.background#1A1A1A
  • menu.border#FF1493
  • menu.foreground#F0C0D8
  • menu.selectionBackground#FF1493
  • menu.selectionForeground#FFFFFF
  • menubar.selectionBackground#FF149320
  • minimap.findMatchHighlight#E8A0BF50
  • minimap.selectionHighlight#E8A0BF70
  • minimapGutter.addedBackground#00FF88
  • minimapGutter.deletedBackground#FF1493
  • minimapGutter.modifiedBackground#FFD700
  • notificationCenterHeader.background#0F0F0F
  • notificationCenterHeader.foreground#FF1493
  • notifications.background#252525
  • notifications.foreground#F0C0D8
  • notificationsErrorIcon.foreground#FF1493
  • notificationsInfoIcon.foreground#00B7EB
  • notificationsWarningIcon.foreground#FFD700
  • panel.border#FF1493
  • panelTitle.activeBorder#FF1493
  • panelTitle.activeForeground#FF1493
  • panelTitle.inactiveForeground#E8A0BF
  • peekView.border#FF1493
  • peekViewEditor.background#2a0a1a
  • peekViewEditor.matchHighlightBackground#E8A0BF40
  • peekViewResult.background#1A1A1A
  • peekViewResult.fileForeground#FF69B4
  • peekViewResult.matchHighlightBackground#E8A0BF40
  • peekViewResult.selectionBackground#FF149330
  • peekViewTitle.background#0F0F0F
  • peekViewTitleDescription.foreground#E8A0BF
  • peekViewTitleLabel.foreground#FF1493
  • progressBar.background#FF1493
  • scrollbarSlider.activeBackground#E8A0BF90
  • scrollbarSlider.background#E8A0BF40
  • scrollbarSlider.hoverBackground#E8A0BF70
  • sideBar.background#1A1A1A
  • sideBar.border#FF1493
  • sideBar.foreground#FF69B4
  • sideBarSectionHeader.background#0F0F0F
  • sideBarSectionHeader.foreground#FF1493
  • sideBarTitle.foreground#FF1493
  • statusBar.background#FF1493
  • statusBar.border#FF1493
  • statusBar.foreground#FFFFFF
  • tab.activeBackground#252525
  • tab.activeForeground#FF69B4
  • tab.border#FF69B430
  • tab.inactiveBackground#1A1A1A
  • tab.inactiveForeground#FF69B480
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#00B7EB
  • terminal.ansiBrightBlack#404040
  • terminal.ansiBrightBlue#00B7EB
  • terminal.ansiBrightCyan#00FFFF
  • terminal.ansiBrightGreen#00FF88
  • terminal.ansiBrightMagenta#FF69B4
  • terminal.ansiBrightRed#FF1493
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD700
  • terminal.ansiCyan#00FFFF
  • terminal.ansiGreen#00FF88
  • terminal.ansiMagenta#FF69B4
  • terminal.ansiRed#FF1493
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFD700
  • terminal.background#1A1A1A
  • terminal.foreground#FF69B4
  • textLink.activeForeground#FF1493
  • textLink.foreground#FF69B4
  • titleBar.activeBackground#FF1493
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#CC1077
  • titleBar.inactiveForeground#FFFFFF99
  • tree.indentGuidesStroke#FF69B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A4060italic
keyword, keyword.control, storage.type, storage.modifier#FF1493
keyword.operator#FF1493
string, string.quoted#FFB3C6
string.template, string.interpolated#FFB3C6
punctuation.definition.template-expression, punctuation.section.embedded#FF1493
constant.character.escape#FF69B4
string.regexp#FF69B4
constant.numeric#FF85A1
constant.language#FF1493italic
variable.other.constant, constant.other#FF69B4
entity.name.function, meta.definition.method entity.name.function#FF69B4
meta.function-call entity.name.function, support.function#FF69B4
variable.parameter#E8A0BF
entity.name.type, entity.name.class, entity.name.interface, entity.name.enum, support.type, support.class#DDA0DD
meta.type.annotation, meta.return.type, support.type.primitive#DDA0DD
meta.decorator, entity.name.function.decorator, punctuation.decorator#E8A0BFitalic
variable, variable.other.readwrite#F0C0D8
variable.other.property, support.variable.property, meta.object-literal.key, variable.other.object.property#FFD0E8
variable.language.this, variable.language.self#FF1493italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#FF1493
entity.name.tag#FF1493
entity.other.attribute-name#FF69B4
string.quoted.double.html, string.quoted.single.html#FFB3C6
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#DDA0DD
support.type.property-name.css#FF69B4
support.constant.property-value.css, constant.other.color, constant.other.unit#FFB3C6
keyword.control.at-rule#FF1493
support.type.property-name.json#FF69B4
markup.heading, entity.name.section.markdown#FF1493bold
markup.bold#FF69B4bold
markup.italic#E8A0BFitalic
markup.inline.raw, markup.fenced_code.block#FFB3C6
string.other.link.title.markdown, markup.underline.link.markdown#DDA0DD
punctuation.definition.list.begin.markdown#FF1493
punctuation.definition.block, punctuation.separator, punctuation.terminator, meta.brace#C46A90
invalid, invalid.deprecated#FF1493strikethrough
Rosy Byte by Andreea Isabela - VS Code Theme