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#D96C6C
  • activityBar.background#F2E6ED
  • activityBar.foreground#D96C6C
  • activityBarBadge.background#D96C6C
  • activityBarBadge.foreground#FAF5F8
  • badge.background#D96C6C
  • badge.foreground#FAF5F8
  • button.background#E0CAD6
  • button.foreground#3B2D3E
  • button.hoverBackground#D4B8C9
  • dropdown.background#F2E6ED
  • dropdown.border#E0CAD6
  • dropdown.foreground#3B2D3E
  • editor.background#FAF5F8
  • editor.findMatchBackground#C94C6A
  • editor.findMatchHighlightBackground#E8B4B8
  • editor.foreground#3B2D3E
  • editor.lineHighlightBackground#F5E8F0
  • editor.lineHighlightBorder#D96C6C
  • editor.selectionBackground#D4B8C9
  • editor.selectionHighlightBackground#E0CAD6
  • editorBracketMatch.background#E8D9E844
  • editorBracketMatch.border#D96C6C
  • editorCursor.foreground#D96C6C
  • editorGroupHeader.tabsBackground#FAF5F8
  • editorIndentGuide.activeBackground#D96C6C
  • editorIndentGuide.background#C5B5C2
  • editorLineNumber.activeForeground#D96C6C
  • editorLineNumber.foreground#C5B5C2
  • editorWhitespace.foreground#C5B5C2
  • focusBorder#D96C6C
  • gitDecoration.conflictingResourceForeground#E5C07B
  • gitDecoration.deletedResourceForeground#D96C6C
  • gitDecoration.modifiedResourceForeground#D96C6C
  • gitDecoration.untrackedResourceForeground#A8C691
  • input.background#F2E6ED
  • input.border#E0CAD6
  • input.foreground#3B2D3E
  • input.placeholderForeground#9A8FA3
  • inputOption.activeBorder#D96C6C
  • list.activeSelectionBackground#D4B8C9
  • list.activeSelectionForeground#3B2D3E
  • list.focusBackground#D4B8C9
  • list.highlightForeground#D96C6C
  • list.hoverBackground#E0CAD6
  • minimap.background#FAF5F8
  • minimapSlider.activeBackground#D96C6C66
  • minimapSlider.background#9A8FA322
  • minimapSlider.hoverBackground#9A8FA344
  • panel.background#FAF5F8
  • panel.border#E0CAD6
  • panelTitle.activeBorder#D96C6C
  • panelTitle.activeForeground#D96C6C
  • panelTitle.inactiveForeground#9A8FA3
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D96C6C88
  • scrollbarSlider.background#9A8FA344
  • scrollbarSlider.hoverBackground#9A8FA388
  • sideBar.background#F2E6ED
  • sideBar.foreground#3B2D3E
  • sideBarSectionHeader.background#E8D9E2
  • sideBarSectionHeader.foreground#D96C6C
  • sideBarTitle.foreground#D96C6C
  • statusBar.background#E0CAD6
  • statusBar.debuggingBackground#C9A5B4
  • statusBar.foreground#3B2D3E
  • statusBar.noFolderBackground#E0CAD6
  • statusBarItem.hoverBackground#D4B8C9
  • tab.activeBackground#E0CAD6
  • tab.activeBorder#D96C6C
  • tab.activeForeground#3B2D3E
  • tab.border#E8D9E2
  • tab.inactiveBackground#FAF5F8
  • tab.inactiveForeground#9A8FA3
  • terminal.ansiBlue#6A8FBF
  • terminal.ansiBrightBlue#81A1C1
  • terminal.ansiBrightCyan#70C0B1
  • terminal.ansiBrightGreen#B5D99A
  • terminal.ansiBrightMagenta#D96C6C
  • terminal.ansiBrightRed#FF6F61
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#5FA8AB
  • terminal.ansiGreen#A8C691
  • terminal.ansiMagenta#C94C6A
  • terminal.ansiRed#D96C6C
  • terminal.ansiYellow#E5C07B
  • terminal.background#FAF5F8
  • terminal.foreground#3B2D3E
  • titleBar.activeBackground#E8D9E2
  • titleBar.activeForeground#3B2D3E
  • titleBar.inactiveBackground#FAF5F8
  • titleBar.inactiveForeground#9A8FA3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9A8FA3italic
string, string.quoted, string.template#C94C6A
keyword, storage.type, storage.modifier#D96C6Cbold
keyword.operator, punctuation.accessor#A89AB8
variable, variable.other#5F4C6B
variable.parameter#5F4C6Bitalic
entity.name.function, support.function#6A8FBF
meta.function-call#6A8FBF
entity.name.class, entity.name.type.class, support.class#D96C6Cbold
entity.name.type, support.type#D96C6C
entity.name.type.interface#D96C6Citalic
constant.numeric#5F4C6B
constant, constant.language, constant.character#5F4C6B
constant.language.boolean#5F4C6Bbold
variable.other.property, support.variable.property#6A8FBF
meta.object-literal.key#6A8FBF
entity.name.tag, punctuation.definition.tag#D96C6C
entity.other.attribute-name#A89AB8italic
punctuation, meta.brace#A89AB8
string.regexp#C94C6A
constant.character.escape#A89AB8
meta.decorator, punctuation.decorator#E5C07B
invalid, invalid.illegal#FF6F61strikethrough
markup.heading, entity.name.section#D96C6Cbold
markup.bold#D96C6Cbold
markup.italic#A89AB8italic
markup.underline.link#6A8FBF
markup.inline.raw, markup.fenced_code#6A8FBF
support.type.property-name.json#D96C6C
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E5C07B
support.type.property-name.css#6A8FBF
support.constant.property-value.css#E5C07B