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#f4a7c0
  • activityBar.background#0f0c13
  • activityBar.foreground#e8d5f0
  • activityBarBadge.background#f4a7c0
  • activityBarBadge.foreground#1a1520
  • badge.background#f4a7c0
  • badge.foreground#1a1520
  • button.background#6a5888
  • button.foreground#e8d5f0
  • button.hoverBackground#c8a8d8
  • editor.background#1a1520
  • editor.findMatchBackground#6a588860
  • editor.findMatchHighlightBackground#6a588840
  • editor.foreground#e8d5f0
  • editor.lineHighlightBackground#261d30
  • editor.selectionBackground#4a386080
  • editorBracketMatch.background#c8a8d830
  • editorBracketMatch.border#f4a7c0
  • editorCursor.foreground#f4a7c0
  • editorGroupHeader.tabsBackground#130f18
  • editorLineNumber.activeForeground#f4a7c0
  • editorLineNumber.foreground#7a6888
  • focusBorder#f4a7c080
  • input.background#130f18
  • input.border#7a688840
  • input.foreground#e8d5f0
  • input.placeholderForeground#7a6888
  • list.activeSelectionBackground#4a3860
  • list.activeSelectionForeground#e8d5f0
  • list.hoverBackground#f4a7c020
  • list.inactiveSelectionBackground#4a386080
  • panel.background#130f18
  • panel.border#7a688830
  • panelTitle.activeBorder#f4a7c0
  • panelTitle.activeForeground#f4a7c0
  • scrollbarSlider.activeBackground#c8a8d870
  • scrollbarSlider.background#c8a8d830
  • scrollbarSlider.hoverBackground#c8a8d850
  • sideBar.background#130f18
  • sideBar.border#7a688830
  • sideBar.foreground#e8d5f0
  • sideBarTitle.foreground#f4a7c0
  • statusBar.background#6a5888
  • statusBar.foreground#e8d5f0
  • statusBar.noFolderBackground#6a5888
  • statusBarItem.hoverBackground#c8a8d840
  • tab.activeBackground#1a1520
  • tab.activeBorderTop#f4a7c0
  • tab.activeForeground#e8d5f0
  • tab.inactiveBackground#130f18
  • tab.inactiveForeground#7a6888
  • terminal.ansiBrightGreen#fce4ec
  • terminal.ansiBrightRed#f4a7c0
  • terminal.ansiGreen#c8a8d8
  • terminal.ansiRed#d4a0e8
  • terminal.background#1a1520
  • terminal.foreground#e8d5f0
  • titleBar.activeBackground#130f18
  • titleBar.activeForeground#e8d5f0
  • titleBar.inactiveBackground#0f0c13

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a6888italic
keyword, keyword.control, keyword.operator.new, storage, storage.type, keyword.control.import, keyword.control.export#f4a7c0
keyword.operator, punctuation.separator, punctuation.terminator, punctuation.accessor#c8a8d8
entity.name.function, support.function, meta.function-call.generic#d4a0e8
entity.name.class, entity.name.type, support.class, support.type#f4a7c0italic
string, string.quoted, string.template#fce4ec
constant, constant.numeric, constant.language, constant.character#c8a8d8
variable, variable.other#e8d5f0
variable.parameter#e8d5f0italic
entity.name.tag, meta.tag#d4a0e8
entity.other.attribute-name#f4a7c0
support.type.property-name, entity.other.attribute-name.css#e8d5f0
punctuation.definition.string#c8a8d8
markup.heading#f4a7c0bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code.block#fce4ec
Pink Glaze by Mercy Robert - VS Code Theme