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#000000
  • activityBar.border#FF1188
  • activityBar.foreground#FF1188
  • activityBar.inactiveForeground#ffff12
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#3BFFBE
  • breadcrumb.activeSelectionForeground#3BFFBE
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#FF1188
  • breadcrumb.foreground#3BFFBE
  • breadcrumbPicker.background#000000
  • button.background#3BFFBE50
  • contrastBorder#00000040
  • debugToolBar.background#000000
  • diffEditor.insertedTextBackground#4C28FF15
  • diffEditor.removedTextBackground#00000020
  • dropdown.background#000000
  • dropdown.border#FF1188
  • editor.background#000000
  • editor.compositionBorder#fdfdff
  • editor.findMatchBackground#00ff0d
  • editor.findMatchBorder#3BFFBE
  • editor.findMatchHighlightBackground#3BFFBE93
  • editor.findMatchHighlightBorder#07bd80af
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#36363644
  • editor.selectionBackground#ff1212c9
  • editor.selectionHighlightBackground#3BFFBE6b
  • editor.selectionHighlightBorder#c2c2ac00
  • editorBracketHighlight.foreground1#ff1188
  • editorBracketHighlight.foreground2#4C28FF
  • editorBracketHighlight.foreground3#3BFFBE
  • editorBracketHighlight.foreground4#FFFF12
  • editorBracketHighlight.foreground5#fdfdff
  • editorBracketMatch.background#000000
  • editorBracketMatch.border#3BFFBE7f
  • editorCursor.foreground#3BFFBE
  • editorError.foreground#dd0a0a70
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#4C28FF60
  • editorGutter.deletedBackground#00000060
  • editorGutter.modifiedBackground#FFFF1260
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#3BFFBE10
  • editorIndentGuide.activeBackground1#000000
  • editorIndentGuide.background1#00000070
  • editorInfo.foreground#FFFF1270
  • editorLineNumber.activeForeground#FFFF12
  • editorLineNumber.foreground#fdfdff
  • editorLink.activeForeground#FF1188
  • editorMarkerNavigation.background#FF118805
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.errorForeground#00000040
  • editorOverviewRuler.findMatchForeground#3bffbe33
  • editorOverviewRuler.infoForeground#FFFF1240
  • editorOverviewRuler.warningForeground#3BFFBE70
  • editorRuler.foreground#000000
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#3BFFBE10
  • editorSuggestWidget.foreground#FF1188
  • editorSuggestWidget.highlightForeground#3BFFBE
  • editorSuggestWidget.selectedBackground#3BFFBE20
  • editorWarning.foreground#4C28FF
  • editorWhitespace.foreground#FF118840
  • editorWidget.background#000000
  • editorWidget.border#3BFFBE
  • editorWidget.resizeBorder#3BFFBE
  • extensionButton.prominentBackground#4C28FF90
  • extensionButton.prominentHoverBackground#000000
  • focusBorder#3BFFBE00
  • gitDecoration.conflictingResourceForeground#3BFFBE
  • gitDecoration.deletedResourceForeground#000000
  • gitDecoration.ignoredResourceForeground#3BFFBE
  • gitDecoration.modifiedResourceForeground#3BFFBE
  • gitDecoration.untrackedResourceForeground#FFFF12
  • input.background#000000
  • input.border#FF1188
  • input.foreground#FF1188
  • input.placeholderForeground#fdfdff
  • inputOption.activeBackground#FF118830
  • inputOption.activeBorder#FF118830
  • inputOption.activeForeground#fdfdff
  • inputValidation.errorBorder#00000050
  • inputValidation.infoBorder#FFFF1250
  • inputValidation.warningBorder#3BFFBE50
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#3BFFBE
  • list.focusAndSelectionOutline#00ff0d
  • list.focusBackground#000000
  • list.focusForeground#FFFF12
  • list.highlightForeground#3BFFBE
  • list.hoverBackground#000000
  • list.hoverForeground#3BFFBE
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#3BFFBE
  • list.warningForeground#3BFFBE
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#000000
  • menu.border#FF1188
  • menu.foreground#3BFFBE
  • menu.selectionBackground#fd8e8e00
  • menu.selectionBorder#FF1188
  • menu.selectionForeground#3BFFBE
  • menu.separatorBackground#ff118800
  • menubar.selectionBackground#000000
  • menubar.selectionBorder#000000
  • menubar.selectionForeground#FF1188
  • minimap.background#000000a8
  • minimapGutter.addedBackground#000000
  • minimapGutter.deletedBackground#3BFFBE
  • minimapGutter.modifiedBackground#4C28FF
  • minimapSlider.activeBackground#4C28FFb0
  • minimapSlider.background#4C28FF80
  • minimapSlider.hoverBackground#4C28FFa0
  • notificationLink.foreground#3BFFBE
  • notifications.background#000000
  • notifications.foreground#FF1188
  • panel.background#000000
  • panel.border#FF1188
  • panelTitle.activeBorder#FF1188
  • panelTitle.activeForeground#3BFFBE
  • panelTitle.inactiveForeground#fdfdff
  • peekView.border#00000030
  • peekViewEditor.background#FF118805
  • peekViewEditor.matchHighlightBackground#3BFFBE50
  • peekViewEditorGutter.background#FF118805
  • peekViewResult.background#FF118805
  • peekViewResult.matchHighlightBackground#3BFFBE50
  • peekViewResult.selectionBackground#3BFFBE70
  • peekViewTitle.background#FF118805
  • peekViewTitleDescription.foreground#FF118860
  • pickerGroup.foreground#3BFFBE
  • progressBar.background#3BFFBE
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#FF1188
  • scrollbarSlider.background#3BFFBE
  • scrollbarSlider.hoverBackground#FFFF12
  • selection.background#3BFFBE
  • settings.checkboxBackground#000000
  • settings.checkboxForeground#FF1188
  • settings.dropdownBackground#000000
  • settings.dropdownForeground#FF1188
  • settings.headerForeground#3BFFBE
  • settings.modifiedItemIndicator#3BFFBE
  • settings.numberInputBackground#000000
  • settings.numberInputForeground#FF1188
  • settings.textInputBackground#000000
  • settings.textInputForeground#FF1188
  • sideBar.background#000000
  • sideBar.border#FF1188
  • sideBar.foreground#fdfdff
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#00000060
  • sideBarSectionHeader.foreground#FF1188
  • sideBarTitle.foreground#FF1188
  • statusBar.background#000000
  • statusBar.border#FF1188
  • statusBar.debuggingBackground#3BFFBE
  • statusBar.debuggingForeground#3BFFBE
  • statusBar.foreground#3BFFBE
  • statusBar.noFolderBackground#000000
  • statusBarItem.hoverBackground#3BFFBE20
  • statusBarItem.remoteBackground#3BFFBE
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#3bffbe00
  • tab.activeBorder#FF1188
  • tab.activeForeground#3BFFBE
  • tab.activeModifiedBorder#3BFFBE
  • tab.border#000000
  • tab.inactiveBackground#3bffbe00
  • tab.inactiveForeground#FF118860
  • tab.unfocusedActiveBackground#3BFFBE40
  • tab.unfocusedActiveBorder#3BFFBE
  • tab.unfocusedActiveForeground#FF1188
  • tab.unfocusedInactiveBackground#3BFFBE10
  • tab.unfocusedInactiveForeground#FF11887f
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#df1616
  • terminal.ansiBrightBlack#fdfdff
  • terminal.ansiBrightBlue#FFFF12
  • terminal.ansiBrightCyan#FF1188
  • terminal.ansiBrightGreen#4C28FF
  • terminal.ansiBrightMagenta#3BFFBE
  • terminal.ansiBrightRed#3BFFBE
  • terminal.ansiBrightWhite#fdfdff
  • terminal.ansiBrightYellow#3BFFBE
  • terminal.ansiCyan#FF1188
  • terminal.ansiGreen#4C28FF
  • terminal.ansiMagenta#3BFFBE
  • terminal.ansiRed#3BFFBE
  • terminal.ansiWhite#fdfdff
  • terminal.ansiYellow#3BFFBE
  • terminalCursor.background#000000
  • terminalCursor.foreground#3BFFBE
  • textLink.activeForeground#FF1188
  • textLink.foreground#3BFFBE
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#3BFFBE
  • titleBar.border#FF1188
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#3BFFBE
  • tree.indentGuidesStroke#000000
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable#3BFFBE
string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#FF1188
variable, string constant.other.placeholder, entity.name.function, entity.name.method, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssitalic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#4C28FF
constant.other.php#3BFFBE
constant.other.color#3BFFBE
invalid, invalid.illegal#fbfbfb
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#FFFF12
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js#00ff0d
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js#a200ff
punctuation.definition, string.quoted.single.scss#fdfdff
keyword.controlbold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html#6D6F7C
text.html.derivative#fdfdff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF1188
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#3BFFBE
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js#3BFFBE
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control#FF1188
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#fdfdff
support.other.variable, string.other.link, markup.table#FFFF12
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other#FFFF12
variable.parameter.function.language.special, variable.parameter#fdfdff
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js#4C28FF
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html#FF1188
punctuation.separator.key-value.html, punctuation.separator.key-value.json#fdfdff
support.type#fdfdff
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#3BFFBE
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#fdfdff
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#FFFF12italic
entity.other.attribute-name, support.function#3BFFBE
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key#ffffff
source.scss keyword.control#3BFFBE
markup.inserted#4C28FF
markup.deleted#fdfdff
markup.changed#3BFFBE
string.regexp#FF1188
constant.character.escape#fdfdff
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#FF1188italic
support.type.property-name.json#fdfdff
text.html.markdown, punctuation.definition.list_item.markdown#FF1188
text.html.markdown markup.inline.raw.markdown#3BFFBE
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown#3BFFBE50
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#3BFFBEbold
markup.underline#FFFF12underline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#3BFFBE50
markup.quoteitalic
string.other.link.description.title.markdown#3BFFBE
constant.other.reference.link.markdown#3BFFBE
markup.raw.block#3BFFBE
punctuation.definition.raw.markdown, punctuation.definition.markdown#FF1188
variable.language.fenced.markdown#3BFFBE
meta.separator#fdfdffbold
token.info-token#3BFFBE
token.warn-token#3BFFBE
token.error-token#FF293B
token.debug-token#FF1188
Pink Pixel Fruity Themes by Pink Pixel - VS Code Theme