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.activeBackground#fad3e1
  • activityBar.activeBorder#F8BBD0
  • activityBar.background#fad3e1
  • activityBar.border#e2a9c35b
  • activityBar.foreground#83002e
  • activityBarBadge.background#380819
  • activityBarBadge.foreground#fff
  • badge.background#F8BBD0
  • button.background#aa4367
  • button.secondaryBackground#c46989
  • editor.background#ffecf3
  • editor.findMatchBackground#fde0ea
  • editor.findMatchHighlightBackground#dab5c2
  • editor.foreground#001a0c
  • editor.hoverHighlightBackground#ebb6c9
  • editor.inactiveSelectionBackground#fad3e1
  • editor.lineHighlightBackground#fad3e1
  • editor.selectionBackground#e7c3d1
  • editorCursor.foreground#af165b
  • editorGroupHeader.tabsBackground#fde0ea
  • editorHoverWidget.background#ebb6c9
  • editorIndentGuide.activeBackground#58c5c7
  • editorLineNumber.activeForeground#000
  • editorLineNumber.foreground#8f8f8f
  • editorSuggestWidget.background#fad3e1
  • editorSuggestWidget.focusHighlightForeground#26332c
  • editorSuggestWidget.highlightForeground#033110
  • editorSuggestWidget.selectedBackground#fde0ea
  • editorSuggestWidget.selectedForeground#000
  • editorWidget.background#fde0ea
  • focusBorder#424242
  • input.background#f1d9e2
  • input.border#660629
  • input.placeholderForeground#fad3e1
  • list.activeSelectionBackground#ebb6c9
  • list.activeSelectionIconForeground#fff
  • list.hoverBackground#fceaff
  • list.inactiveSelectionBackground#ebb6c9
  • menu.background#fcd9e5
  • menu.border#da317d5d
  • menu.foreground#000
  • menu.selectionBackground#966b7a
  • notifications.background#fde0ea
  • notifications.border#571e38
  • panel.border#e2a9c3bd
  • quickInput.background#fad3e1
  • settings.checkboxBackground#fde0ea
  • settings.dropdownBackground#fde0ea
  • settings.textInputBackground#fde0ea
  • sideBar.background#f8bbd096
  • sideBar.border#e2a9c359
  • sideBar.foreground#000
  • sideBarSectionHeader.background#fad3e1
  • sideBarSectionHeader.border#e2a9c36b
  • sideBarSectionHeader.foreground#000408
  • sideBarTitle.foreground#000
  • statusBar.background#c4275e
  • statusBar.border#e2a9c315
  • statusBar.debuggingBackground#e61c62
  • statusBar.foreground#000
  • statusBar.noFolderBackground#000
  • tab.activeBackground#fad8e4
  • tab.activeBorder#fde0ea
  • tab.activeBorderTop#ff0059
  • tab.activeForeground#000
  • tab.border#fde0ea
  • tab.hoverBackground#0000001a
  • tab.hoverBorder#af165b
  • tab.inactiveBackground#fde0ea
  • terminal.ansiBlack#1D2021
  • terminal.ansiBlue#00a1f9
  • terminal.ansiBrightBlack#665C54
  • terminal.ansiBrightBlue#0D6678
  • terminal.ansiBrightCyan#8BA59B
  • terminal.ansiBrightGreen#0687ff
  • terminal.ansiBrightMagenta#8F4673
  • terminal.ansiBrightRed#FB543F
  • terminal.ansiBrightWhite#FDF4C1
  • terminal.ansiBrightYellow#FFCC80
  • terminal.ansiCyan#8BA59B
  • terminal.ansiGreen#95C085
  • terminal.ansiMagenta#8F4673
  • terminal.ansiRed#FB543F
  • terminal.ansiWhite#A89984
  • terminal.ansiYellow#FAC03B
  • terminal.background#fde0ea
  • terminal.foreground#000
  • terminalCursor.background#000
  • terminalCursor.foreground#cc206b
  • titleBar.activeBackground#F8BBD0
  • titleBar.activeForeground#01250b
  • titleBar.border#e2a9c315

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#817f7fitalic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation#448C27
invalid.illegal#660000
keyword.operator#2081db
keyword, storage#b218d1
storage.type, support.type#29043f
constant.language, support.constant, variable.language#616805
variable, support.variable#7c1d85italic bold
entity.name.function, support.function#0586ffitalic
entity.name.type, entity.other.inherited-class, support.class#068a74bold
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#755320
string#088a6e
constant.character.escape#777777
string.regexp#4B83CD
constant.other.symbol#472202
punctuation#ca4d8b
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#b9b13c
entity.name.tag#041b83italic
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#7e018fitalic
constant.character.entity, punctuation.definition.entity#7e3d05
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#0a9739italic bold
meta.property-name, support.type.property-name#011530
meta.property-value, meta.property-value constant.other, support.constant.property-value#065972
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343