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.activeBorder#ff1493
  • activityBar.activeFocusBorder#ff1493
  • activityBar.background#0c0500
  • activityBar.border#312e2e
  • activityBar.foreground#ff85c2
  • activityBar.inactiveForeground#ffe9de
  • activityBarBadge.background#0c0500
  • activityBarBadge.foreground#ffcddf
  • activityBarTop.activeBorder#ff1493
  • badge.background#0c0500
  • badge.foreground#ff1493
  • button.background#ff85c2
  • button.foreground#ffe9de
  • button.hoverBackground#e8508a
  • commandCenter.activeBackground#0c0500
  • commandCenter.activeBorder#ff1493
  • commandCenter.activeForeground#ff85c2
  • commandCenter.background#0c0500
  • commandCenter.border#312e2e
  • commandCenter.inactiveForeground#ffe9de
  • editor.background#0c0500
  • editor.findMatchBackground#ff149340
  • editor.findMatchHighlightBackground#ff85c210
  • editor.foreground#ffe9de
  • editor.lineHighlightBackground#ff85c210
  • editor.selectionBackground#ff149340
  • editor.wordHighlightBackground#d79ef820
  • editor.wordHighlightStrongBackground#d79ef835
  • editorBracketHighlight.foreground1#ea4b90
  • editorBracketHighlight.foreground2#db00b6
  • editorBracketHighlight.foreground3#bc00dd
  • editorBracketHighlight.foreground4#a100f2
  • editorBracketHighlight.foreground5#6a00f4
  • editorBracketHighlight.foreground6#2d00f7
  • editorBracketHighlight.unexpectedBracket.foreground#ff4d6d
  • editorBracketMatch.background#ff85c230
  • editorBracketMatch.border#ff85c2
  • editorBracketMatch.foreground#ffe9de
  • editorCursor.foreground#ff7d9b
  • editorError.foreground#ff4d6d
  • editorGroupHeader.tabsBackground#0c0500
  • editorLineNumber.activeForeground#ff85c2
  • editorLineNumber.foreground#ffe9de
  • editorWarning.foreground#ffa54a
  • editorWidget.background#0c0500
  • editorWidget.border#ff85c260
  • editorWidget.foreground#ff85c2
  • focusBorder#ff85c2
  • gitDecoration.addedResourceForeground#85ea3e
  • gitDecoration.conflictingResourceForeground#ffe9de
  • gitDecoration.deletedResourceForeground#ff488e
  • gitDecoration.ignoredResourceForeground#d9bdee
  • gitDecoration.modifiedResourceForeground#9040b0
  • gitDecoration.untrackedResourceForeground#16f9ee
  • input.background#0c0500
  • input.border#ff1493
  • input.foreground#ffe9de
  • input.placeholderForeground#ffe9deaa
  • list.activeSelectionBackground#0c0500f4
  • list.activeSelectionForeground#ff1493
  • list.activeSelectionIconForeground#ff85c2
  • list.hoverBackground#ff149340
  • list.inactiveSelectionBackground#0c0500f4
  • list.inactiveSelectionForeground#ffe9de
  • panel.background#0c0500
  • panel.border#ffb7d9
  • panelTitle.activeBorder#ff1493
  • panelTitle.activeForeground#ff85c2
  • panelTitle.border#312e2e
  • panelTitle.inactiveForeground#ffe9de
  • scrollbarSlider.activeBackground#ff319f
  • scrollbarSlider.background#0f0e0ff4
  • scrollbarSlider.hoverBackground#ffe9de
  • search.resultsInfoForeground#ffe9de
  • searchEditor.findMatchBackground#ff149340
  • searchEditor.findMatchBorder#ff85c2
  • searchEditor.textInputBorder#ff149340
  • sideBar.background#100600
  • sideBar.border#312e2e
  • sideBar.foreground#ffe9de
  • sideBarSectionHeader.background#1a0a00
  • sideBarSectionHeader.border#312e2e
  • sideBarSectionHeader.foreground#ff85c2
  • sideBarTitle.background#0c0500
  • sideBarTitle.border#312e2e
  • sideBarTitle.foreground#ff1493
  • statusBar.background#1a0a00
  • statusBar.border#ffb7d9
  • statusBar.debuggingBackground#100600
  • statusBar.foreground#ffe9de
  • statusBar.noFolderBackground#100600
  • statusBarItem.hoverBackground#ff85c240
  • statusBarItem.remoteBackground#100600
  • statusBarItem.remoteForeground#ffcddf
  • tab.activeBackground#1a0a00
  • tab.activeBorder#ff1493
  • tab.activeForeground#ff85c2
  • tab.border#312e2e
  • tab.inactiveBackground#130700
  • tab.inactiveForeground#ffe9deaa
  • terminal.ansiBlack#0c0500
  • terminal.ansiBlue#4775ff
  • terminal.ansiBrightBlue#86a4ff
  • terminal.ansiBrightCyan#89fff5
  • terminal.ansiBrightGreen#7ffda5
  • terminal.ansiBrightMagenta#ed96fc
  • terminal.ansiBrightRed#ff85c2
  • terminal.ansiBrightWhite#fffaf8
  • terminal.ansiBrightYellow#ffff7a
  • terminal.ansiCyan#28ffed
  • terminal.ansiGreen#36ff72
  • terminal.ansiMagenta#e554ff
  • terminal.ansiRed#ff319f
  • terminal.ansiWhite#fff2eb
  • terminal.ansiYellow#ffff36
  • terminal.background#100600
  • terminal.foreground#fff2eb
  • terminal.selectionBackground#ff85c240
  • terminal.selectionForeground#ffcddf
  • terminal.tab.activeBorder#ff1493
  • textLink.activeForeground#ff85c2
  • textLink.foreground#ffcddf
  • titleBar.activeBackground#1a0a00
  • titleBar.activeForeground#ffe9de
  • titleBar.border#ffb7d9
  • titleBar.inactiveBackground#1a0a00
  • titleBar.inactiveForeground#f7f6f6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAAAAAitalic
comment.documentation, comment.block.documentation#ffb7d9
keyword.operator#ffe9de
storage, keyword.control#ff319f
storage.type, support.type#ff319f
constant.language, support.constant, variable.language#ffb7d9
variable, support.variable#ffb7d9
entity.name.function, support.function#ff85c2bold
entity.other.inherited-class, support.class, entity.name.class, entity.name.type#ffe9debold
constant.numeric, constant.character, constant#ff319f
keyword#ffb7d9
string, string.quoted, string.template#ffe9de
constant.character.escape, string.regexp#ff319f
punctuation.definition.string#ff85c2
meta.tag, entity.name.tag#ff85c2
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#ffb7d9italic
meta.property-name, support.type.property-name#ffe9de
meta.property-value, support.constant.property-value#ff319f
markup.heading#ff85c2bold
markup.boldbold
markup.italicitalic
markup.inline.raw#ffb7d9
Pink Pixel Fruity Themes by Pink Pixel - VS Code Theme