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#FBDBE7
  • activityBar.foreground#BC1F68
  • activityBar.inactiveForeground#BC1F6899
  • activityBarBadge.background#518053
  • activityBarBadge.foreground#FFFFFF
  • badge.background#518053
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#BC1F68
  • breadcrumb.background#FBF2F5
  • breadcrumb.focusForeground#BC1F68
  • breadcrumb.foreground#6E5A64
  • button.background#D33F7C
  • button.foreground#FFFFFF
  • button.hoverBackground#BC1F68
  • button.secondaryBackground#518053
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#3F6841
  • editor.background#FBF2F5
  • editor.findMatchBackground#FBAECC
  • editor.findMatchHighlightBackground#FBAECC80
  • editor.foreground#40313A
  • editor.lineHighlightBackground#F4E2EA
  • editor.lineHighlightBorder#F4E2EA00
  • editor.selectionBackground#F7C9DC
  • editor.selectionHighlightBackground#D8E7D980
  • editor.wordHighlightBackground#D8E7D9A0
  • editorBracketMatch.background#D8E7D980
  • editorBracketMatch.border#1B7A8600
  • editorCursor.foreground#BC1F68
  • editorGroup.border#EFD3DF
  • editorGroup.dropBackground#D33F7C25
  • editorGroupHeader.tabsBackground#F3E6EB
  • editorHoverWidget.background#F3E6EB
  • editorHoverWidget.border#EFD3DF
  • editorIndentGuide.activeBackground1#D9B8C7
  • editorIndentGuide.background1#EEDCE4
  • editorLineNumber.activeForeground#BC1F68
  • editorLineNumber.foreground#9C8290
  • editorSuggestWidget.background#F3E6EB
  • editorSuggestWidget.border#EFD3DF
  • editorSuggestWidget.highlightForeground#BC1F68
  • editorSuggestWidget.selectedBackground#F3C6DA
  • editorWhitespace.foreground#E6CBD8
  • editorWidget.background#F3E6EB
  • editorWidget.border#EFD3DF
  • focusBorder#D33F7C66
  • gitDecoration.addedResourceForeground#3F6841
  • gitDecoration.conflictingResourceForeground#96650A
  • gitDecoration.deletedResourceForeground#BC1F68
  • gitDecoration.ignoredResourceForeground#9C8290
  • gitDecoration.modifiedResourceForeground#2C56AE
  • gitDecoration.untrackedResourceForeground#4C7A4E
  • input.background#FFFBFC
  • input.border#EFD3DF
  • input.foreground#40313A
  • input.placeholderForeground#8A7580
  • inputOption.activeBackground#BC1F6830
  • inputOption.activeBorder#BC1F6800
  • inputOption.activeForeground#40313A
  • list.activeSelectionBackground#F6CFDF
  • list.activeSelectionForeground#BC1F68
  • list.dropBackground#F5C4D9
  • list.focusBackground#F3C6DA
  • list.focusForeground#BC1F68
  • list.highlightForeground#BC1F68
  • list.hoverBackground#F7DBE6
  • list.hoverForeground#BC1F68
  • list.inactiveSelectionBackground#F1DCE5
  • list.inactiveSelectionForeground#40313A
  • menu.background#F3E6EB
  • menu.foreground#40313A
  • menu.selectionBackground#F3C6DA
  • menu.selectionForeground#BC1F68
  • menu.separatorBackground#BC1F6840
  • menubar.selectionBackground#F6CFDF
  • menubar.selectionForeground#BC1F68
  • notificationCenter.border#EFD3DF
  • notificationLink.foreground#2C56AE
  • notifications.background#F3E6EB
  • notifications.border#EFD3DF
  • notifications.foreground#40313A
  • notificationsErrorIcon.foreground#BC1F68
  • notificationsInfoIcon.foreground#2C56AE
  • notificationsWarningIcon.foreground#96650A
  • panel.background#F3E6EB
  • panel.border#EFD3DF
  • panelTitle.activeBorder#BC1F68
  • panelTitle.activeForeground#BC1F68
  • panelTitle.inactiveForeground#6E5A64
  • peekView.border#BC1F68
  • peekViewEditor.background#FBF2F5
  • peekViewEditor.matchHighlightBackground#F7C9DC
  • peekViewResult.background#F3E6EB
  • peekViewResult.matchHighlightBackground#F7C9DC
  • peekViewResult.selectionBackground#F3C6DA
  • peekViewTitle.background#FBDBE7
  • peekViewTitleLabel.foreground#BC1F68
  • pickerGroup.border#EFD3DF
  • pickerGroup.foreground#BC1F68
  • progressBar.background#D33F7C
  • quickInput.background#F3E6EB
  • quickInput.foreground#40313A
  • scrollbarSlider.activeBackground#D33F7C77
  • scrollbarSlider.background#D33F7C33
  • scrollbarSlider.hoverBackground#D33F7C55
  • selection.background#F7C9DC
  • settings.headerForeground#BC1F68
  • settings.modifiedItemIndicator#BC1F68
  • sideBar.background#F3E6EB
  • sideBar.foreground#40313A
  • sideBarSectionHeader.background#FBDBE7
  • sideBarSectionHeader.foreground#BC1F68
  • sideBarTitle.foreground#BC1F68
  • statusBar.background#FBDBE7
  • statusBar.debuggingBackground#BC1F68
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#BC1F68
  • statusBar.noFolderBackground#D4E6D5
  • statusBar.noFolderForeground#3F6841
  • statusBarItem.activeBackground#BC1F6830
  • statusBarItem.hoverBackground#BC1F6820
  • statusBarItem.remoteBackground#518053
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#FBF2F5
  • tab.activeBorder#BC1F68
  • tab.activeBorderTop#00000000
  • tab.activeForeground#BC1F68
  • tab.border#F3E6EB
  • tab.inactiveBackground#F3E6EB
  • tab.inactiveForeground#6E5A64
  • tab.unfocusedActiveBorder#BC1F6899
  • terminal.ansiBlack#40313A
  • terminal.ansiBlue#2C56AE
  • terminal.ansiBrightBlack#8A7580
  • terminal.ansiBrightBlue#3F6AC0
  • terminal.ansiBrightCyan#2793A0
  • terminal.ansiBrightGreen#518053
  • terminal.ansiBrightMagenta#C42472
  • terminal.ansiBrightRed#D33F7C
  • terminal.ansiBrightWhite#FBF2F5
  • terminal.ansiBrightYellow#B07E1A
  • terminal.ansiCyan#1B7A86
  • terminal.ansiGreen#3F6841
  • terminal.ansiMagenta#D33F7C
  • terminal.ansiRed#BC1F68
  • terminal.ansiWhite#E6DBE0
  • terminal.ansiYellow#96650A
  • terminal.background#FBF2F5
  • terminal.foreground#40313A
  • terminal.selectionBackground#F7C9DC
  • titleBar.activeBackground#FBDBE7
  • titleBar.activeForeground#BC1F68
  • titleBar.inactiveBackground#F3E6EB
  • titleBar.inactiveForeground#BC1F6899

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4C7A4Eitalic
string, punctuation.definition.string#3F6841—
keyword, storage.type, storage.modifier#B81C69—
entity.name.function, support.function#2C56AE—
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#96650A—
variable, entity.name.variable#40313A—
variable.other.constant, support.constant#BE2E6B—
constant.numeric#BE2E6B—
punctuation#6E5A64—
meta.brace.square, punctuation.definition.bracket#1B7A86—
meta.brace.curly, punctuation.definition.block#96650A—
meta.brace.round, punctuation.definition.parameters, punctuation.definition.group#B81C69—
entity.name.tag, punctuation.definition.tag#B81C69—
entity.other.attribute-name#96650A—
markup.heading#B81C69bold
markup.bold#40313Abold
markup.italic#40313Aitalic
markup.underline.link#2C56AE—
string.regexp#1B7A86—
constant.character.escape#1B7A86—
support.type.property-name.json#B81C69—
string.quoted.double.json#3F6841—
support.type.property-name.css#B81C69—
support.constant.property-value.css#3F6841—
entity.name.tag.css, entity.other.attribute-name.class.css#B81C69—
entity.name.tag.html#B81C69—
entity.other.attribute-name.html#96650A—
variable.other.readwrite.js, variable.other.object.js#40313A—
support.type.primitive.ts, support.type.builtin.ts#96650A—
variable.parameter.function.language.python#96650A—
meta.function-call.python#2C56AE—
markup.underline.link.markdown#2C56AE—
markup.heading.markdown#B81C69—
markup.bold.markdown#B81C69bold
markup.italic.markdown#B81C69italic
markup.inline.raw.markdown#3F6841—