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#1E789F
  • activityBar.background#E5F3FA
  • activityBar.border#CADAE4
  • activityBar.foreground#2F2B26
  • activityBar.inactiveForeground#7B766A
  • activityBarBadge.background#006A94
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D2E5EF
  • badge.foreground#2F2B26
  • button.background#1E789F
  • button.border#FFFFFF1A
  • button.foreground#FFFFFF
  • button.hoverBackground#005E83
  • button.secondaryBackground#D2E5EF
  • button.secondaryForeground#2F2B26
  • button.secondaryHoverBackground#ECF7FD
  • chat.editedFileForeground#516BA0
  • chat.slashCommandBackground#B5E6FF99
  • chat.slashCommandForeground#005E83
  • checkbox.background#F3FCFF
  • checkbox.border#B6CBD7
  • debugToolBar.background#E5F3FA
  • descriptionForeground#7B766A
  • dropdown.background#F3FCFF
  • dropdown.border#B6CBD7
  • dropdown.foreground#2F2B26
  • dropdown.listBackground#F3FCFF
  • editor.background#F3FCFF
  • editor.findMatchBackground#516BA066
  • editor.findMatchHighlightBackground#516BA055
  • editor.foreground#2F2B26
  • editor.inactiveSelectionBackground#D2E5EF
  • editor.lineHighlightBackground#ECF7FD
  • editor.selectionBackground#B5E6FF
  • editor.selectionHighlightBackground#B5E6FF88
  • editor.wordHighlightBackground#516BA040
  • editor.wordHighlightStrongBackground#635A9366
  • editorBracketMatch.background#516BA055
  • editorBracketMatch.border#516BA0
  • editorCursor.foreground#006A94
  • editorGroup.border#CADAE4
  • editorGroupHeader.tabsBackground#E5F3FA
  • editorGroupHeader.tabsBorder#CADAE4
  • editorGutter.addedBackground#346270
  • editorGutter.deletedBackground#9C4343
  • editorGutter.modifiedBackground#006F78
  • editorIndentGuide.activeBackground1#7B766A
  • editorIndentGuide.background1#CADAE4
  • editorLineNumber.activeForeground#1E789F
  • editorLineNumber.foreground#7B766A
  • editorOverviewRuler.border#CADAE4
  • editorSuggestWidget.background#ECF7FD
  • editorSuggestWidget.border#B6CBD7
  • editorSuggestWidget.foreground#2F2B26
  • editorSuggestWidget.highlightForeground#006F78
  • editorSuggestWidget.selectedBackground#D2E5EF
  • editorWidget.background#ECF7FD
  • editorWidget.border#B6CBD7
  • errorForeground#9C4343
  • focusBorder#1E789F
  • foreground#2F2B26
  • icon.foreground#2F2B26
  • input.background#F3FCFF
  • input.border#B6CBD7
  • input.foreground#2F2B26
  • input.placeholderForeground#7B766A
  • inputOption.activeBackground#B5E6FF99
  • inputOption.activeBorder#1E789F
  • inputOption.activeForeground#1F211D
  • keybindingLabel.background#D2E5EF
  • keybindingLabel.border#B6CBD7
  • keybindingLabel.foreground#2F2B26
  • list.activeSelectionBackground#B5E6FF
  • list.activeSelectionForeground#1F211D
  • list.activeSelectionIconForeground#1F211D
  • list.dropBackground#516BA055
  • list.focusAndSelectionOutline#1E789F
  • list.focusBackground#B5E6FF88
  • list.highlightForeground#006F78
  • list.hoverBackground#ECF7FD
  • list.inactiveSelectionBackground#D2E5EF
  • menu.background#F3FCFF
  • menu.border#B6CBD7
  • menu.foreground#2F2B26
  • menu.selectionBackground#1E789F
  • menu.selectionForeground#FFFFFF
  • notebook.cellBorderColor#CADAE4
  • notebook.selectedCellBackground#B5E6FF66
  • notificationCenterHeader.background#E5F3FA
  • notificationCenterHeader.foreground#2F2B26
  • notifications.background#F3FCFF
  • notifications.border#CADAE4
  • notifications.foreground#2F2B26
  • panel.background#ECF7FD
  • panel.border#CADAE4
  • panelInput.border#B6CBD7
  • panelTitle.activeBorder#1E789F
  • panelTitle.activeForeground#2F2B26
  • panelTitle.inactiveForeground#7B766A
  • peekViewEditor.background#F3FCFF
  • peekViewEditor.matchHighlightBackground#516BA066
  • peekViewResult.background#ECF7FD
  • peekViewResult.matchHighlightBackground#516BA066
  • pickerGroup.border#B6CBD7
  • pickerGroup.foreground#346270
  • ports.iconRunningProcessForeground#1E789F
  • progressBar.background#1E789F
  • quickInput.background#ECF7FD
  • quickInput.foreground#2F2B26
  • searchEditor.textInputBorder#B6CBD7
  • settings.dropdownBackground#F3FCFF
  • settings.dropdownBorder#B6CBD7
  • settings.headerForeground#1F1B16
  • settings.modifiedItemIndicator#516BA0
  • settings.numberInputBorder#B6CBD7
  • settings.textInputBorder#B6CBD7
  • sideBar.background#E5F3FA
  • sideBar.border#CADAE4
  • sideBar.foreground#2F2B26
  • sideBarSectionHeader.background#ECF7FD
  • sideBarSectionHeader.border#CADAE4
  • sideBarSectionHeader.foreground#2F2B26
  • sideBarTitle.foreground#1F1B16
  • statusBar.background#E5F3FA
  • statusBar.border#CADAE4
  • statusBar.debuggingBackground#516BA0
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#1E789F
  • statusBar.foreground#2F2B26
  • statusBar.noFolderBackground#F3FCFF
  • statusBarItem.errorBackground#9C4343
  • statusBarItem.focusBorder#1E789F
  • statusBarItem.hoverBackground#1F211D1A
  • statusBarItem.hoverForeground#1F1B16
  • statusBarItem.prominentBackground#D2E5EF
  • statusBarItem.remoteBackground#1E789F
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#F3FCFF
  • tab.activeBorder#F3FCFF
  • tab.activeBorderTop#1E789F
  • tab.activeForeground#1F1B16
  • tab.border#CADAE4
  • tab.hoverBackground#F3FCFF
  • tab.inactiveBackground#E5F3FA
  • tab.inactiveForeground#7B766A
  • tab.lastPinnedBorder#B6CBD7
  • tab.selectedBorderTop#006A94
  • tab.unfocusedActiveBorder#F3FCFF
  • tab.unfocusedActiveBorderTop#CADAE4
  • tab.unfocusedHoverBackground#E5F3FA
  • terminal.ansiBlack#2F2B26
  • terminal.ansiBlue#006F78
  • terminal.ansiBrightBlack#7B766A
  • terminal.ansiBrightBlue#006F78
  • terminal.ansiBrightCyan#207773
  • terminal.ansiBrightGreen#1E789F
  • terminal.ansiBrightMagenta#635A93
  • terminal.ansiBrightRed#006A94
  • terminal.ansiBrightWhite#1F1B16
  • terminal.ansiBrightYellow#516BA0
  • terminal.ansiCyan#207773
  • terminal.ansiGreen#3C678F
  • terminal.ansiMagenta#635A93
  • terminal.ansiRed#9C4343
  • terminal.ansiWhite#E8E1D3
  • terminal.ansiYellow#516BA0
  • terminal.background#F3FCFF
  • terminal.foreground#2F2B26
  • terminal.inactiveSelectionBackground#D2E5EF
  • terminal.tab.activeBorder#1E789F
  • terminalCursor.foreground#006A94
  • textBlockQuote.background#ECF7FD
  • textBlockQuote.border#346270
  • textCodeBlock.background#ECF7FD
  • textLink.activeForeground#006A94
  • textLink.foreground#006F78
  • textPreformat.background#D2E5EF
  • textPreformat.foreground#2F2B26
  • textSeparator.foreground#B6CBD7
  • titleBar.activeBackground#E5F3FA
  • titleBar.activeForeground#2F2B26
  • titleBar.border#CADAE4
  • titleBar.inactiveBackground#F3FCFF
  • titleBar.inactiveForeground#7B766A
  • welcomePage.progress.foreground#1E789F
  • welcomePage.tileBackground#ECF7FD
  • widget.border#B6CBD7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#2F2B26
emphasisitalic
strongbold
comment#346270
constant.language#006F78
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#3C678F
constant.regexp#635A93
entity.name.tag, entity.name.selector#006A94
entity.other.attribute-name#006F78
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.scss#516BA0
invalid#9C4343
markup.underlineunderline
markup.bold#006F78bold
markup.heading#006A94bold
markup.italic#635A93italic
markup.strikethroughstrikethrough
markup.deleted#9C4343
markup.inserted#346270
markup.changed#516BA0
markup.quote#346270
markup.inline.raw#3C678F
meta.diff.header#006F78
storage#006A94
storage.type#006A94
keyword, keyword.control, keyword.operator.expression#006A94
keyword.operator#2F2B26
string, constant.other.symbol#3C678F
punctuation.definition.string, punctuation.definition.comment#7B766A
support.function, entity.name.function#516BA0
support.class, support.type, entity.name.type, entity.name.class, entity.name.namespace#006F78
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#42516A
variable.language, constant.character.escape#006A94
meta.object-literal.key, entity.name.label#42516A
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#516BA0
constant.character.character-class.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#006A94
keyword.operator.quantifier.regexp#2F2B26
constant.character, constant.other.option#006F78