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#ffffff
  • activityBar.background#ff69b4
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffffaa
  • activityBarBadge.background#7a3e9d
  • activityBarBadge.foreground#ffffff
  • badge.background#ffdded
  • badge.foreground#ff1493
  • button.background#ff69b4
  • button.foreground#fffafa
  • button.hoverBackground#e8508a
  • editor.background#fffeff
  • editor.findMatchBackground#ff69b440
  • editor.findMatchHighlightBackground#ff69b420
  • editor.foreground#2d0a20
  • editor.lineHighlightBackground#ffedf5
  • editor.selectionBackground#EAECEA
  • editor.wordHighlightBackground#7a3e9d20
  • editor.wordHighlightStrongBackground#7a3e9d35
  • editorBracketHighlight.foreground1#ea4b90
  • editorBracketHighlight.foreground2#db00b6
  • editorBracketHighlight.foreground3#bc00dd
  • editorBracketHighlight.foreground4#a100f2
  • editorBracketHighlight.foreground5#6a00f4
  • editorBracketHighlight.foreground6#2d00f7
  • editorBracketHighlight.unexpectedBracket.foreground#ff4d6d
  • editorBracketMatch.background#ff69b430
  • editorBracketMatch.border#ff69b4
  • editorCursor.foreground#ff7d9b
  • editorError.foreground#ff4d6d
  • editorGroupHeader.tabsBackground#ffe8f3
  • editorLineNumber.activeForeground#ff69b4
  • editorLineNumber.foreground#c0a0b8
  • editorWarning.foreground#fabc66
  • editorWidget.background#fff5f9
  • editorWidget.border#ff69b460
  • editorWidget.foreground#ff69b4
  • focusBorder#b700ff
  • gitDecoration.addedResourceForeground#60b050
  • gitDecoration.conflictingResourceForeground#ffb341
  • gitDecoration.deletedResourceForeground#e84080
  • gitDecoration.ignoredResourceForeground#c0a0b0
  • gitDecoration.modifiedResourceForeground#9040b0
  • gitDecoration.untrackedResourceForeground#50a870
  • input.background#fffeff
  • input.border#ff1493
  • input.foreground#2d0a20
  • input.placeholderForeground#c090a8
  • list.activeSelectionBackground#ff69b430
  • list.activeSelectionForeground#2d0a20
  • list.hoverBackground#ffe0f0
  • list.inactiveSelectionBackground#ff69b418
  • list.inactiveSelectionForeground#7a3e9d
  • panel.background#fff5f9
  • panel.border#ffd0e8
  • panelTitle.activeBorder#ff69b4
  • panelTitle.activeForeground#ff69b4
  • scrollbarSlider.activeBackground#ff69b470
  • scrollbarSlider.background#ff69b430
  • scrollbarSlider.hoverBackground#ff69b450
  • sideBar.background#fff5f9
  • sideBar.border#ffd0e8
  • sideBar.foreground#5a2040
  • sideBarSectionHeader.background#ffe8f3
  • sideBarSectionHeader.border#ffd0e8
  • sideBarTitle.foreground#ff69b4
  • statusBar.background#7a3e9d
  • statusBar.debuggingBackground#DC87D3
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#7a3e9d
  • statusBarItem.hoverBackground#ff69b440
  • statusBarItem.remoteBackground#ff69b4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#fffeff
  • tab.activeBorderTop#ff69b4
  • tab.activeForeground#2d0a20
  • tab.inactiveBackground#ffe8f3
  • tab.inactiveForeground#a06080
  • terminal.ansiBlue#4B83CD
  • terminal.ansiBrightBlue#78b1fc
  • terminal.ansiBrightCyan#b2e6e1
  • terminal.ansiBrightGreen#58bbbd
  • terminal.ansiBrightMagenta#f090d8
  • terminal.ansiBrightRed#e27b7b
  • terminal.ansiBrightWhite#f0e0ec
  • terminal.ansiBrightYellow#f3d36b
  • terminal.ansiCyan#9DDBD6
  • terminal.ansiGreen#318B8C
  • terminal.ansiMagenta#c080c0
  • terminal.ansiRed#CF426F
  • terminal.ansiWhite#c8b0c0
  • terminal.ansiYellow#ffd686
  • terminal.background#fffeff
  • terminal.foreground#2d0a20
  • textLink.activeForeground#e090d0
  • textLink.foreground#c070a0
  • titleBar.activeBackground#ff69b4
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#f8b8d4
  • titleBar.inactiveForeground#ffffffcc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAAAAAitalic
comment.documentation, comment.block.documentation#70a868—
keyword.operator#1cad24—
storage, keyword.control#ff69b4—
storage.type, support.type#7A3E9D—
constant.language, support.constant, variable.language#ff319f—
variable, support.variable#7A3E9D—
entity.name.function, support.function#ff3ec8bold
entity.other.inherited-class, support.class, entity.name.class, entity.name.type#7A3E9Dbold
constant.numeric, constant.character, constant#B700FF—
keyword#ff69b4—
string, string.quoted, string.template#c04080—
constant.character.escape, string.regexp#f743a9—
punctuation.definition.string#eab42b—
meta.tag, entity.name.tag#ff69b4—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#c060ffitalic
meta.property-name, support.type.property-name#7A3E9D—
meta.property-value, support.constant.property-value#ff69b4—
markup.heading#ff69b4bold
markup.bold—bold
markup.italic—italic
markup.inline.raw#a060a0—
Pink Glaze by Mercy Robert - VS Code Theme