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#0078d4
  • activityBar.background#181818
  • activityBar.border#ffffff15
  • activityBar.foreground#d7d7d7
  • 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#cccccc
  • dropdown.listBackground#313131
  • editor.background#1f1f1f
  • editor.findMatchBackground#9e6a03
  • editor.foreground#cccccc
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#ffffff15
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#0078d4
  • editorInlayHint.background#8b949e33
  • editorInlayHint.foreground#8b949e
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#8b949e
  • editorLineNumber.activeForeground#cccccc
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#010409
  • editorWidget.background#1f1f1f
  • errorForeground#f85149
  • focusBorder#0078d4
  • foreground#cccccc
  • icon.foreground#cccccc
  • input.background#ffffff0f
  • input.border#ffffff1f
  • input.foreground#cccccc
  • input.placeholderForeground#ffffff79
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#cccccc
  • list.activeSelectionBackground#ffffff0f
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • menu.background#1f1f1f
  • 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
  • progressBar.background#0078d4
  • quickInput.background#1f1f1f
  • quickInput.foreground#cccccc
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#6e768187
  • scrollbarSlider.background#6e768133
  • scrollbarSlider.hoverBackground#6e768145
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#ffffff1f
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#181818
  • sideBar.border#ffffff15
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#ffffff15
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#181818
  • statusBar.border#ffffff15
  • statusBar.debuggingBackground#0078d4
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#cccccc
  • statusBar.noFolderBackground#1f1f1f
  • statusBarItem.focusBorder#0078d4
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0078d4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1f1f1f
  • tab.activeBorder#1f1f1f
  • tab.activeBorderTop#0078d4
  • tab.activeForeground#ffffff
  • tab.border#ffffff15
  • tab.hoverBackground#1f1f1f
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#ffffff80
  • tab.unfocusedActiveBorder#1f1f1f
  • tab.unfocusedActiveBorderTop#ffffff15
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.ansiBlack#363b54
  • terminal.ansiBlue#7aa2f7
  • terminal.ansiBrightBlack#363b54
  • terminal.ansiBrightBlue#7aa2f7
  • terminal.ansiBrightCyan#7dcfff
  • terminal.ansiBrightGreen#41a6b5
  • terminal.ansiBrightMagenta#bb9af7
  • terminal.ansiBrightRed#f7768e
  • terminal.ansiBrightWhite#acb0d0
  • terminal.ansiBrightYellow#e0af68
  • terminal.ansiCyan#7dcfff
  • terminal.ansiGreen#41a6b5
  • terminal.ansiMagenta#bb9af7
  • terminal.ansiRed#f7768e
  • terminal.ansiWhite#787c99
  • terminal.ansiYellow#e0af68
  • terminal.foreground#cccccc
  • terminal.tab.activeBorder#0078d4
  • textBlockQuote.background#010409
  • textBlockQuote.border#ffffff14
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#40A6FF
  • textLink.foreground#40A6FF
  • textPreformat.foreground#f85149
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#cccccc
  • titleBar.border#ffffff15
  • titleBar.inactiveBackground#1f1f1f
  • titleBar.inactiveForeground#8b949e
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#ffffff0f
  • widgetBorder#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, source.python punctuation.definition.comment#BBBBBB4Ditalic
constant#F09483E6—
constant.character.escape#25B0BCE6—
entity.name#FAC29AE6—
entity.name.function, entity.name.function.python, meta.function-call.generic.python#60c5ff—
entity.name.tag#E95678E6
entity.name.type, storage.type.cs#FAC29AE6—
entity.other.attribute-name#F09483E6
entity.other.inherited-class#FAB795E6—
entity.other.attribute-name.id#25B0BCE6—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#FAB795E6—
entity.name.variable, variable, meta.attribute.python, meta.member.access.python, source.python, source.python meta.function-call.arguments, source.python entity.other.inherited-class#E95678E6—
source.python meta.function-call, source.python punctuation.definition.parameters, source.python punctuation.definition.arguments, source.python meta.function.parameters, source.python punctuation.parenthesis, source.python definition.arguments, source.python punctuation.definition, source.python punctuation.section.class, source.python punctuation.section.function#A9B1D6—
keyword#B877DBE6
keyword.operator#BBBBBB—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#B877DBE6—
keyword.other.unit#F09483E6—
markup.quote#FAB795B3italic
markup.heading, entity.name.section#E95678E6—
markup.bold#B877DBE6bold
markup.italic#25B0BCE6italic
markup.inline.raw, markup.fenced_code.block#F09483E6—
markup.underline.link#FAB795E6—
storage#B877DBE6
string.quoted, string.template, punctuation.definition.string#FAB795E6—
string.regexp#F09483E6—
string.other.link#F09483E6—
support#FAC29AE6—
support.function#60c5ff—
support.variable#E95678E6—
support.type.property-name, meta.object-literal.key#E95678E6—
support.type.property-name.css#BBBBBB—
variable.language#FAC29AE6italic
variable.parameter—italic
string.template meta.embedded#BBBBBB—
punctuation.definition.tag#E95678B3
punctuation.separator#BBBBBB—
punctuation.definition.template-expression#B877DBE6—
punctuation.section.embedded#B877DBE6—
punctuation.definition.list#F09483E6—