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.bold—bold
markup.italic—italic
markup.inline.raw#ffb7d9—
Pink Pixel Fruity Themes by Pink Pixel - VS Code Theme