Skip to main content
Coding Theme

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#252323
  • activityBar.border#252323
  • activityBar.foreground#d5d8dab3
  • activityBarBadge.background#e95378
  • activityBarBadge.foreground#06060c
  • badge.background#252323
  • badge.foreground#252323
  • breadcrumbPicker.background#1f1d1d
  • button.background#252323
  • debugToolBar.background#1f1d1d
  • diffEditor.insertedTextBackground#09f7a01a
  • diffEditor.removedTextBackground#f43e5c1a
  • dropdown.background#252323
  • dropdown.listBackground#252323
  • editor.background#252323
  • editor.findMatchBackground#52473d
  • editor.findMatchHighlightBackground#38373688
  • editor.findRangeHighlightBackground#38373688
  • editor.hoverHighlightBackground#38373688
  • editor.inactiveSelectionBackground#38373688
  • editor.lineHighlightBackground#38373688
  • editor.rangeHighlightBackground#38373688
  • editor.selectionBackground#383736
  • editor.selectionHighlightBackground#38373688
  • editor.wordHighlightBackground#38373688
  • editor.wordHighlightStrongBackground#38373688
  • editorBracketMatch.background#383736
  • editorBracketMatch.border#93706c00
  • editorCodeLens.foreground#383736
  • editorCursor.background#1f1d1d
  • editorCursor.foreground#e95378
  • editorError.foreground#f43e5c
  • editorGroup.border#1f1d1d
  • editorGroup.dropBackground#52473d4d
  • editorGroupHeader.tabsBackground#252323
  • editorGutter.addedBackground#09f7a0b3
  • editorGutter.deletedBackground#f43e5cb3
  • editorGutter.modifiedBackground#21bfc2b3
  • editorIndentGuide.activeBackground1#383736
  • editorIndentGuide.background1#383736
  • editorLineNumber.activeForeground#9f876c
  • editorLineNumber.foreground#5f5952
  • editorOverviewRuler.addedForeground#09f7a080
  • editorOverviewRuler.border#383736b3
  • editorOverviewRuler.bracketMatchForeground#d5d8da80
  • editorOverviewRuler.deletedForeground#f43e5c80
  • editorOverviewRuler.errorForeground#f43e5ce6
  • editorOverviewRuler.findMatchForeground#52473d76
  • editorOverviewRuler.modifiedForeground#21bfc280
  • editorOverviewRuler.warningForeground#27d79780
  • editorRuler.foreground#52473d4d
  • editorSuggestWidget.background#252323
  • editorSuggestWidget.highlightForeground#e95378
  • editorWarning.foreground#27d797b3
  • editorWidget.background#252323
  • editorWidget.border#252323
  • errorForeground#f43e5c
  • extensionButton.prominentBackground#e95378
  • extensionButton.prominentHoverBackground#e9436d
  • focusBorder#252323
  • foreground#d5d8da
  • gitDecoration.addedResourceForeground#27d797b3
  • gitDecoration.deletedResourceForeground#f43e5c
  • gitDecoration.ignoredResourceForeground#d5d8da4d
  • gitDecoration.modifiedResourceForeground#fab38e
  • gitDecoration.untrackedResourceForeground#27d797
  • input.background#1f1d1d
  • inputOption.activeBorder#e9436d80
  • inputValidation.errorBackground#f43e5c80
  • inputValidation.errorBorder#f43e5c00
  • list.activeSelectionBackground#383736
  • list.activeSelectionForeground#d5d8da
  • list.dropBackground#383736
  • list.errorForeground#f43e5ce6
  • list.focusBackground#383736
  • list.focusForeground#d5d8da
  • list.highlightForeground#e95378
  • list.hoverBackground#383736
  • list.hoverForeground#d5d8da
  • list.inactiveFocusBackground#2e2e2d
  • list.inactiveSelectionBackground#383736
  • list.inactiveSelectionForeground#d5d8da
  • list.warningForeground#27d797b3
  • panelTitle.activeBorder#e95378
  • peekView.border#1f1d1d
  • peekViewEditor.background#1f1d1d
  • peekViewEditor.matchHighlightBackground#383736
  • peekViewResult.background#1f1d1d
  • peekViewResult.matchHighlightBackground#383736
  • peekViewResult.selectionBackground#38373680
  • peekViewTitle.background#1f1d1d
  • pickerGroup.foreground#e95378e6
  • progressBar.background#e95378
  • scrollbar.shadow#1c1a16
  • scrollbarSlider.activeBackground#93846c80
  • scrollbarSlider.background#93816c1a
  • scrollbarSlider.hoverBackground#938e6c4d
  • selection.background#383736
  • sideBar.background#252323
  • sideBar.dropBackground#93846c4d
  • sideBar.foreground#d5d8da80
  • sideBarSectionHeader.background#252323
  • sideBarSectionHeader.foreground#d5d8dab3
  • statusBar.background#252323
  • statusBar.debuggingBackground#383434
  • statusBar.debuggingForeground#f6e7d6
  • statusBar.foreground#93846c
  • statusBar.noFolderBackground#1f1d1d
  • statusBarItem.compactHoverBackground#93846c80
  • statusBarItem.hoverBackground#383736
  • statusBarItem.prominentBackground#383736
  • statusBarItem.prominentHoverBackground#383736
  • tab.activeBackground#52473d44
  • tab.activeBorder#e95378
  • tab.activeForeground#ffe4b8
  • tab.border#1f1d1d00
  • tab.inactiveBackground#252323
  • tab.inactiveForeground#93846c
  • terminal.ansiBlue#26bbd9
  • terminal.ansiBrightBlue#3fc4de
  • terminal.ansiBrightCyan#6be4e6
  • terminal.ansiBrightGreen#3fdaa4
  • terminal.ansiBrightMagenta#f075b5
  • terminal.ansiBrightRed#ec6a88
  • terminal.ansiBrightYellow#fbc3a7
  • terminal.ansiCyan#59e1e3
  • terminal.ansiGreen#29d398
  • terminal.ansiMagenta#ee64ac
  • terminal.ansiRed#e95678
  • terminal.ansiYellow#fab795
  • terminal.foreground#93846c
  • terminal.selectionBackground#52473d4d
  • terminalCursor.background#ffe4b8
  • terminalCursor.foreground#52473d
  • textLink.activeForeground#e9436d
  • textLink.foreground#e95378
  • titleBar.activeBackground#252323
  • titleBar.inactiveBackground#222020
  • walkThrough.embeddedEditorBackground#1f1d1d
  • widget.shadow#16161c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ffffff63italic
constant#F09483E6
constant.character.escape#25B0BCE6
entity.name#FAC29AE6
entity.name.function#25B0BCE6
entity.name.tag#a6e3a1
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#E95678E6
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#5fc8b3
string.quoted, string.template#FAB795E6
string.regexp#F09483E6
string.other.link#F09483E6
support#FAC29AE6
support.function#25B0BCE6
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#89b4fa
punctuation.separator#BBBBBB
punctuation.definition.template-expression, punctuation.quasi.element#B877DBE6
punctuation.section.embedded#B877DBE6
punctuation.definition.list#F09483E6
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
kpp-dark by Zachary granger - VS Code Theme