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#ffffff00
  • activityBar.activeFocusBorder#ffffff00
  • activityBar.background#000000
  • activityBar.border#ffffff15
  • activityBar.foreground#ffffffcc
  • activityBar.inactiveForeground#ffffff80
  • activityBarBadge.background#0078d4
  • activityBarBadge.foreground#ffffff
  • badge.background#0078d4
  • badge.foreground#ffffff
  • button.background#0078d4
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#0078d4e6
  • button.secondaryBackground#ffffff0f
  • button.secondaryForeground#cccccc
  • button.secondaryHoverBackground#ffffff15
  • checkbox.background#313131
  • checkbox.border#ffffff1f
  • debugToolBar.background#181818
  • descriptionForeground#8b949e
  • diffEditor.insertedLineBackground#23863633
  • diffEditor.insertedTextBackground#2386364d
  • diffEditor.removedLineBackground#da363333
  • diffEditor.removedTextBackground#da36334d
  • dropdown.background#313131
  • dropdown.border#ffffff1f
  • dropdown.foreground#434343
  • dropdown.listBackground#1f1f1f
  • editor.background#000000
  • editor.findMatchBackground#9e6a03
  • editor.foreground#cccccc
  • editor.hoverHighlightBackground#a5a4a48c
  • editor.inactiveSelectionBackground#3a3d41f8
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#b0b0b071
  • editor.selectionHighlightBackground#ffffff28
  • editorBracketMatch.background#ffffff28
  • editorBracketMatch.border#00000000
  • editorBracketPairGuide.activeBackground1#fdda2c
  • editorCursor.foreground#FFFFFF
  • editorGhostText.foreground#434343
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#ffffff00
  • editorGroupHeader.tabsBorder#ffffff15
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#0078d4
  • editorIndentGuide.activeBackground1#ffffff28
  • editorIndentGuide.background1#ffffff00
  • editorInlayHint.background#8b949e1b
  • editorInlayHint.typeBackground#8b949e1b
  • editorLineNumber.activeForeground#625f5a
  • editorLineNumber.foreground#625f5a
  • editorLink.activeForeground#cccccc
  • editorOverviewRuler.border#010409
  • editorRuler.foreground#ffffff28
  • editorStickyScrollHover.background#363636
  • editorWidget.background#222222
  • editorWidget.border#ffffff00
  • errorForeground#f85149
  • focusBorder#0078d4
  • foreground#cccccc
  • gitDecoration.addedResourceForeground#0dce0d
  • gitDecoration.deletedResourceForeground#ff1d1d
  • gitDecoration.modifiedResourceForeground#FFA500
  • gitDecoration.untrackedResourceForeground#808080
  • icon.foreground#cccccc
  • input.background#ffffff22
  • input.border#ffffff00
  • input.foreground#ffffff
  • input.placeholderForeground#ffffff77
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#cccccc
  • list.activeSelectionBackground#323232
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • list.focusForeground#ffffffb6
  • list.hoverBackground#4949558e
  • list.inactiveSelectionBackground#ffffff2e
  • list.inactiveSelectionForeground#ffffffe0
  • menu.background#000000
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#1f1f1f
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#1f1f1f
  • notifications.border#ffffff15
  • notifications.foreground#cccccc
  • panel.background#181818
  • panel.border#ffffff15
  • panelInput.border#ffffff15
  • panelTitle.activeBorder#0078d4
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#8b949e
  • peekViewEditor.background#1f1f1f
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#1f1f1f
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#ffffff15
  • pickerGroup.foreground#8b949e
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0078d4
  • quickInput.background#1f1f1f
  • quickInput.foreground#cccccc
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#ffffff70
  • scrollbarSlider.background#ffffff46
  • scrollbarSlider.hoverBackground#6e768145
  • selection.background#ffffff44
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#ffffff1f
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#000000
  • sideBar.border#ffffff15
  • sideBar.foreground#ffffffab
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#ffffff15
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#000000
  • statusBar.border#ffffff15
  • statusBar.debuggingBackground#0078d4
  • statusBar.debuggingForeground#ffffffab
  • statusBar.focusBorder#0078d4
  • statusBar.foreground#ffffff82
  • statusBar.noFolderBackground#000000
  • statusBarItem.focusBorder#0078d4
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0078d4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff22
  • tab.activeBorder#1f1f1f
  • tab.activeBorderTop#ffffffda
  • tab.activeForeground#ffffff
  • tab.border#ffffff15
  • tab.hoverBackground#1f1f1f
  • tab.inactiveBackground#00000000
  • tab.inactiveForeground#ffffff98
  • tab.lastPinnedBorder#cccccc33
  • tab.unfocusedActiveBorder#1f1f1f
  • tab.unfocusedActiveBorderTop#ffffff15
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.foreground#cccccc
  • terminal.inactiveSelectionBackground#3a3d41
  • terminal.tab.activeBorder#ffffffca
  • textBlockQuote.background#080901
  • textBlockQuote.border#ffffff14
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#cccccc
  • textLink.foreground#cccccc
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#ffffffaf
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#1f1f1f
  • titleBar.inactiveForeground#ffffffa4
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#ffffff0f
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string.json.comments#54AAD8
support.type.property-name.json#d84646bold
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json#ffffff
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#54cedc
comment#807C76
string.quoted.docstring#FFF3AA
punctuation.definition.decorator, punctuation.definition.annotation, entity.name.function.decorator.python, storage.type.annotation.java#CAAE87
storage.type, variable.language, keyword.control, keyword.operator.logical, keyword.other, storage.modifier, support.function, constant.language.python, variable.parameter.function.language.special.self.python, constant.language.json#c92d44bold
keyword.other.unit#B5CEA8
source.groovy.embedded, string meta.image.inline.markdown, source.python, meta.function, meta.funcion-call#d2d2d2
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template#2d8f44
string.python, constant.other.set.regexp, constant.character.set.regexp, storage.type.string.python#83a70e
meta.fstring.python#d2d2d2
entity.name.method, support.constant.handlebars, source.powershell variable.other.member, entity.name.function, entity.name.operator.custom-literal, meta.function-call.generic, meta.class.python, support.function.magic.python, support.function.builtin.python, support.type.python#33d59f
entity.name.function.python, support.function.magic.python, entity.name.type.class.python#6AB49Bbold
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#cd3e3e
token.debug-token#B267E6
string.quoted.docstring.multi.python#807C76
meta.function.parameters.python#e1754a
meta.member.access.python#d1cbab
meta.function-call.arguments.python#eb8275
constant.other.caps.python#b66380bold underline
variable.parameter.function-call.python#6a9be4
keyword.operator.assignment.python#ffffff
punctuation.definition.arguments, punctuation.definition.parameters#fff710
entity.name.type, entity.name.namespace, entity.name.scope-resolution, entity.other.inherited-class, support.class#dbd2a2
meta.object.member.js#e68054
meta.function-call#8eabe9
meta.tag.attributes.js#da7878