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#E9ECEF
  • activityBar.border#DEE2E6
  • activityBar.foreground#343A40
  • activityBar.inactiveForeground#ADB5BD
  • activityBarBadge.background#0D6EFD
  • activityBarBadge.foreground#FFFFFF
  • badge.background#0D6EFD
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#343A40
  • breadcrumb.focusForeground#343A40
  • breadcrumb.foreground#ADB5BD
  • button.background#0D6EFD
  • button.foreground#FFFFFF
  • button.hoverBackground#0B5ED7
  • descriptionForeground#ADB5BD
  • diffEditor.insertedLineBackground#19875433
  • diffEditor.insertedTextBackground#19875433
  • diffEditor.modifiedTextBackground#DEE2E6
  • diffEditor.removedLineBackground#DC354533
  • diffEditor.removedTextBackground#DC354533
  • dropdown.background#FFFFFF
  • dropdown.border#DEE2E6
  • dropdown.foreground#343A40
  • editor.background#F8F9FA
  • editor.findMatchBackground#CA651066
  • editor.findMatchBorder#D97706
  • editor.findMatchHighlightBackground#CA651033
  • editor.foreground#343A40
  • editor.hoverHighlightBackground#DEE2E666
  • editor.inactiveSelectionBackground#E9ECEF
  • editor.lineHighlightBackground#F1F3F5
  • editor.selectionBackground#DEE2E6
  • editor.selectionHighlightBackground#DEE2E666
  • editor.wordHighlightBackground#DEE2E680
  • editor.wordHighlightStrongBackground#DEE2E6AA
  • editorBracketHighlight.foreground1#0D6EFD
  • editorBracketHighlight.foreground2#6F42C1
  • editorBracketHighlight.foreground3#198754
  • editorBracketHighlight.foreground4#D97706
  • editorBracketMatch.background#0D6EFD33
  • editorBracketMatch.border#0D6EFD
  • editorCursor.foreground#0D6EFD
  • editorError.foreground#DC3545
  • editorGroup.border#DEE2E6
  • editorGroupHeader.tabsBackground#E9ECEF
  • editorGroupHeader.tabsBorder#DEE2E6
  • editorGutter.addedBackground#198754
  • editorGutter.deletedBackground#DC3545
  • editorGutter.modifiedBackground#D97706
  • editorHint.foreground#198754
  • editorIndentGuide.activeBackground1#ADB5BD
  • editorIndentGuide.background1#DEE2E6
  • editorInfo.foreground#0D6EFD
  • editorLineNumber.activeForeground#343A40
  • editorLineNumber.foreground#ADB5BD
  • editorLink.activeForeground#0D6EFD
  • editorWarning.foreground#D97706
  • errorForeground#DC3545
  • focusBorder#0D6EFD
  • foreground#343A40
  • gitDecoration.addedResourceForeground#198754
  • gitDecoration.deletedResourceForeground#DC3545
  • gitDecoration.ignoredResourceForeground#ADB5BD
  • gitDecoration.modifiedResourceForeground#D97706
  • gitDecoration.untrackedResourceForeground#6C757D
  • icon.foreground#343A40
  • input.background#FFFFFF
  • input.border#DEE2E6
  • input.foreground#343A40
  • input.placeholderForeground#ADB5BD
  • list.activeSelectionBackground#DEE2E6
  • list.activeSelectionForeground#343A40
  • list.deemphasizedForeground#6C757D
  • list.focusOutline#0D6EFD
  • list.hoverBackground#F1F3F5
  • list.hoverForeground#343A40
  • list.inactiveSelectionBackground#E9ECEF
  • list.inactiveSelectionForeground#343A40
  • minimap.findMatchHighlight#CA651066
  • minimap.selectionHighlight#DEE2E6
  • notificationCenterHeader.background#E2E6EA
  • notifications.background#E9ECEF
  • notifications.border#DEE2E6
  • notifications.foreground#343A40
  • panel.background#E9ECEF
  • panel.border#DEE2E6
  • panelTitle.activeForeground#343A40
  • panelTitle.inactiveForeground#ADB5BD
  • peekView.border#0D6EFD
  • peekViewEditor.background#E9ECEF
  • peekViewResult.background#E9ECEF
  • peekViewTitle.background#E2E6EA
  • progressBar.background#0D6EFD
  • scrollbarSlider.activeBackground#00000044
  • scrollbarSlider.background#00000022
  • scrollbarSlider.hoverBackground#00000033
  • sideBar.background#E9ECEF
  • sideBar.border#DEE2E6
  • sideBar.foreground#343A40
  • sideBarSectionHeader.background#E2E6EA
  • sideBarSectionHeader.foreground#343A40
  • sideBarTitle.foreground#343A40
  • statusBar.background#E9ECEF
  • statusBar.border#DEE2E6
  • statusBar.debuggingBackground#0D6EFD
  • statusBar.foreground#343A40
  • statusBar.noFolderBackground#E9ECEF
  • tab.activeBackground#F8F9FA
  • tab.activeBorder#0D6EFD
  • tab.activeForeground#343A40
  • tab.border#DEE2E6
  • tab.inactiveBackground#E9ECEF
  • tab.inactiveForeground#ADB5BD
  • terminal.ansiBlack#343A40
  • terminal.ansiBlue#0D6EFD
  • terminal.ansiBrightBlack#ADB5BD
  • terminal.ansiBrightBlue#3D8BFD
  • terminal.ansiBrightCyan#3DD5F3
  • terminal.ansiBrightGreen#28A745
  • terminal.ansiBrightMagenta#8A5CD6
  • terminal.ansiBrightRed#E4606D
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E9A23B
  • terminal.ansiCyan#0DCAF0
  • terminal.ansiGreen#198754
  • terminal.ansiMagenta#6F42C1
  • terminal.ansiRed#DC3545
  • terminal.ansiWhite#F8F9FA
  • terminal.ansiYellow#D97706
  • terminal.background#F8F9FA
  • terminal.foreground#343A40
  • titleBar.activeBackground#E9ECEF
  • titleBar.activeForeground#343A40
  • titleBar.border#DEE2E6
  • titleBar.inactiveBackground#E9ECEF
  • titleBar.inactiveForeground#ADB5BD
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ADB5BDitalic
string, string.quoted, string.template#198754—
constant.numeric#CA6510—
constant.language, constant.language.null#495057—
keyword, keyword.control, storage.modifier, meta.decorator, punctuation.decorator#6F42C1—
keyword.operator#6C757D—
storage.type#0A58CA—
constant.language.boolean#495057—
string.regexp#0D6EFD—
entity.name.function, support.function, meta.function-call#0D6EFD—
entity.name.type, entity.name.class, support.type, support.class#0A58CA—
variable, variable.other, variable.parameter#D97706—
entity.name.tag, meta.tag#6F42C1—
entity.other.attribute-name#D97706—
constant.character.escape#0D6EFD—
invalid, invalid.illegal#DC3545—
markup.heading#0D6EFDbold
markup.bold#343A40bold
markup.italic#6F42C1italic
markup.underline.link, string.other.link#0D6EFD—
markup.inline.raw, markup.fenced_code#CA6510—
markup.fenced_code——
markup.quote#ADB5BDitalic
markup.list, punctuation.definition.list#0A58CA—
markup.inserted#198754—
markup.deleted#DC3545—
punctuation, meta.brace#6C757D—