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.background#B98A9A
  • activityBar.border#B98A9A
  • activityBar.foreground#3A2E33
  • activityBar.inactiveForeground#D9BAC5
  • activityBarBadge.background#B25B75
  • activityBarBadge.foreground#F5EDF0
  • badge.background#B25B75
  • badge.foreground#F5EDF0
  • button.background#B25B75
  • button.foreground#F5EDF0
  • button.hoverBackground#994B63
  • button.secondaryBackground#E1CCD4
  • button.secondaryForeground#3A2E33
  • contrastBorder#E1CCD4
  • dropdown.background#FFFFFF
  • dropdown.border#E1CCD4
  • editor.background#F5EDF0
  • editor.findMatchBackground#B25B7560
  • editor.findMatchHighlightBackground#B25B7535
  • editor.foreground#3A2E33
  • editor.inactiveSelectionBackground#A78BAD25
  • editor.lineHighlightBackground#EFE1E6
  • editor.selectionBackground#A78BAD50
  • editor.selectionHighlightBackground#A78BAD30
  • editor.wordHighlightBackground#7C8FB030
  • editorBracketMatch.background#A78BAD40
  • editorBracketMatch.border#B25B75
  • editorCursor.foreground#B25B75
  • editorGroup.border#E1CCD4
  • editorGroupHeader.tabsBackground#EFE1E6
  • editorGutter.addedBackground#6E8F6A
  • editorGutter.deletedBackground#BE6C63
  • editorGutter.modifiedBackground#7C8FB0
  • editorHoverWidget.background#EFE1E6
  • editorHoverWidget.border#E1CCD4
  • editorIndentGuide.activeBackground1#B25B7570
  • editorIndentGuide.background1#E1CCD4
  • editorLineNumber.activeForeground#B25B75
  • editorLineNumber.foreground#BB9FA9
  • editorRuler.foreground#E1CCD4
  • editorSuggestWidget.background#EFE1E6
  • editorSuggestWidget.border#E1CCD4
  • editorSuggestWidget.selectedBackground#A78BAD40
  • editorWhitespace.foreground#E1CCD4
  • editorWidget.background#EFE1E6
  • editorWidget.border#E1CCD4
  • extensionButton.prominentBackground#B25B75
  • extensionButton.prominentHoverBackground#994B63
  • focusBorder#B25B7580
  • foreground#3A2E33
  • input.background#FFFFFF
  • input.border#E1CCD4
  • input.foreground#3A2E33
  • input.placeholderForeground#BB9FA9
  • list.activeSelectionBackground#A78BAD70
  • list.activeSelectionForeground#3A2E33
  • list.highlightForeground#B25B75
  • list.hoverBackground#E6D3DA
  • list.inactiveSelectionBackground#E6D3DA
  • notificationCenterHeader.background#EFE1E6
  • notifications.background#EFE1E6
  • notifications.border#E1CCD4
  • notifications.foreground#3A2E33
  • panel.background#EFE1E6
  • panel.border#E1CCD4
  • panelTitle.activeForeground#3A2E33
  • panelTitle.inactiveForeground#6B5760
  • peekView.border#B25B75
  • peekViewEditor.background#F5EDF0
  • peekViewResult.background#EFE1E6
  • progressBar.background#B25B75
  • scrollbarSlider.activeBackground#B25B7580
  • scrollbarSlider.background#E1CCD470
  • scrollbarSlider.hoverBackground#E1CCD4A0
  • sideBar.background#EFE1E6
  • sideBar.border#E1CCD4
  • sideBar.foreground#6B5760
  • sideBarSectionHeader.background#E6D3DA
  • sideBarSectionHeader.foreground#3A2E33
  • sideBarTitle.foreground#3A2E33
  • statusBar.background#B25B75
  • statusBar.debuggingBackground#BE6C63
  • statusBar.foreground#F5EDF0
  • statusBar.noFolderBackground#B25B75
  • statusBarItem.hoverBackground#994B63
  • tab.activeBackground#F5EDF0
  • tab.activeBorderTop#B25B75
  • tab.activeForeground#3A2E33
  • tab.border#E1CCD4
  • tab.inactiveBackground#E6D3DA
  • tab.inactiveForeground#6B5760
  • terminal.ansiBlack#3A2E33
  • terminal.ansiBlue#7C8FB0
  • terminal.ansiBrightBlack#BB9FA9
  • terminal.ansiBrightBlue#9BACC9
  • terminal.ansiBrightCyan#8AB0AB
  • terminal.ansiBrightGreen#8AAB85
  • terminal.ansiBrightMagenta#AA8CBB
  • terminal.ansiBrightRed#D3897F
  • terminal.ansiBrightWhite#F5EDF0
  • terminal.ansiBrightYellow#D1AA78
  • terminal.ansiCyan#6E9490
  • terminal.ansiGreen#6E8F6A
  • terminal.ansiMagenta#8E6F9E
  • terminal.ansiRed#BE6C63
  • terminal.ansiWhite#6B5760
  • terminal.ansiYellow#B9925C
  • terminal.background#F5EDF0
  • terminal.foreground#3A2E33
  • titleBar.activeBackground#A87A8B
  • titleBar.activeForeground#3A2E33
  • titleBar.inactiveBackground#A87A8B
  • titleBar.inactiveForeground#D9BAC5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#3A2E33
comment, punctuation.definition.comment#A68A93italic
keyword, keyword.control, storage.type, storage.modifier#6E8F6Abold
string, string.quoted#B25B75
constant.numeric, constant.language, constant.character#7C8FB0
entity.name.function, support.function, meta.function-call#BE6C63
variable, variable.parameter#3A2E33
entity.name.type, entity.name.class, support.class, support.type#8E6F9Ebold
entity.name.tag#B25B75
entity.other.attribute-name#B9925C
keyword.operator, punctuation#8A727B
variable.other.property, meta.object-literal.key#6E9490
markup.heading#B25B75bold
markup.boldbold
markup.italicitalic
invalid, invalid.illegal#F5EDF0