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#ffe253
  • activityBar.background#0f0e0ff4
  • activityBar.border#16f9ee
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff
  • activityBarBadge.background#0c0b0ef4
  • activityBarBadge.foreground#ffffff
  • activityBarTop.activeBorder#ff1493
  • badge.background#0c0b0ef4
  • badge.foreground#ff1493
  • button.background#ff85c2
  • button.foreground#ffe253
  • button.hoverBackground#e8508a
  • editor.background#101014f4
  • editor.findMatchBackground#ff85c240
  • editor.findMatchHighlightBackground#ff85c220
  • editor.foreground#16f9ee
  • editor.lineHighlightBackground#0c0b0ef4
  • editor.selectionBackground#0a090bf4
  • editor.wordHighlightBackground#cc78fc20
  • editor.wordHighlightStrongBackground#cc78fc35
  • 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
  • editorCursor.foreground#ff7d9b
  • editorError.foreground#ff4d6d
  • editorGroupHeader.tabsBackground#0a090bf4
  • editorLineNumber.activeForeground#ff85c2
  • editorLineNumber.foreground#fffafa
  • editorWarning.foreground#fabc66
  • editorWidget.background#0c0b0ef4
  • editorWidget.border#ff85c260
  • editorWidget.foreground#ff85c2
  • focusBorder#cc78fc
  • gitDecoration.addedResourceForeground#85ea3e
  • gitDecoration.conflictingResourceForeground#ffe253
  • gitDecoration.deletedResourceForeground#ff488e
  • gitDecoration.ignoredResourceForeground#d9bdee
  • gitDecoration.modifiedResourceForeground#9040b0
  • gitDecoration.untrackedResourceForeground#16f9ee
  • input.background#0f0e0ff4
  • input.border#ff1493
  • input.foreground#fffafa
  • input.placeholderForeground#ffffff
  • list.activeSelectionBackground#101014f4
  • list.activeSelectionForeground#ff85c2
  • list.activeSelectionIconForeground#ff85c2
  • list.hoverBackground#fffafa
  • list.inactiveSelectionBackground#101014f4
  • list.inactiveSelectionForeground#16f9ee
  • panel.background#0f0e0ff4
  • panel.border#ff1493
  • panelTitle.activeBorder#ff1493
  • panelTitle.activeForeground#16f9ee
  • panelTitle.border#cc78fc
  • panelTitle.inactiveForeground#ffffff
  • scrollbarSlider.activeBackground#ff85c2
  • scrollbarSlider.background#0f0e0ff4
  • scrollbarSlider.hoverBackground#ffe253
  • sideBar.background#101014f4
  • sideBar.border#16f9ee
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#0f0e0ff4
  • sideBarSectionHeader.border#ff1493
  • sideBarSectionHeader.foreground#ff85c2
  • sideBarTitle.background#0f0e0ff4
  • sideBarTitle.border#ff1493
  • sideBarTitle.foreground#16f9ee
  • statusBar.background#0c0b0ef4
  • statusBar.border#16f9ee
  • statusBar.debuggingBackground#0a090bf4
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#0c0b0ef4
  • statusBarItem.hoverBackground#ff85c240
  • statusBarItem.remoteBackground#0c0b0ef4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#0c0b0ef4
  • tab.activeBorder#ff1493
  • tab.activeForeground#16f9ee
  • tab.inactiveBackground#0a090bf4
  • tab.inactiveForeground#ffffffaa
  • terminal.ansiBlue#4B83CD
  • terminal.ansiBrightBlue#78b1fc
  • terminal.ansiBrightCyan#b2e6e1
  • terminal.ansiBrightGreen#58bbbd
  • terminal.ansiBrightMagenta#f090d8
  • terminal.ansiBrightRed#e27b7b
  • terminal.ansiBrightWhite#fffafa
  • terminal.ansiBrightYellow#f3d36b
  • terminal.ansiCyan#9DDBD6
  • terminal.ansiGreen#318B8C
  • terminal.ansiMagenta#c080c0
  • terminal.ansiRed#CF426F
  • terminal.ansiWhite#c8b0c0
  • terminal.ansiYellow#ffd686
  • terminal.background#101014f4
  • terminal.foreground#fffafa
  • textLink.activeForeground#cc78fc
  • textLink.foreground#ff85c2
  • titleBar.activeBackground#0a090bf4
  • titleBar.activeForeground#ffffff
  • titleBar.border#cc78fc
  • titleBar.inactiveBackground#0a090bf4
  • titleBar.inactiveForeground#f7f6f6

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAAAAAitalic
comment.documentation, comment.block.documentation#85ea3e—
keyword.operator#ffe253—
storage, keyword.control#ffe253—
storage.type, support.type#85ea3e—
constant.language, support.constant, variable.language#ff319f—
variable, support.variable#cc78fc—
entity.name.function, support.function#ffe253bold
entity.other.inherited-class, support.class, entity.name.class, entity.name.type#16f9eebold
constant.numeric, constant.character, constant#16f9ee—
keyword#ff85c2—
string, string.quoted, string.template#ff72b9—
constant.character.escape, string.regexp#16f9ee—
punctuation.definition.string#85ea3e—
meta.tag, entity.name.tag#ff85c2—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#cc78fcitalic
meta.property-name, support.type.property-name#85ea3e—
meta.property-value, support.constant.property-value#16f9ee—
markup.heading#ff85c2bold
markup.bold—bold
markup.italic—italic
markup.inline.raw#ff9ed8—
Pink Pixel Candy Themes by Pink Pixel - VS Code Theme