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