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.parameteritalic
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
Tokyo Night Horizon by Mario Paraschiv - VS Code Theme