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#000000
  • activityBar.border#D92B8266
  • activityBar.foreground#D92B82
  • activityBar.inactiveForeground#6A2952
  • activityBarBadge.background#D92B82
  • activityBarBadge.foreground#000000
  • badge.background#D92B82
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#D92B82
  • button.background#D92B82
  • button.foreground#000000
  • button.hoverBackground#AD2368
  • button.secondaryBackground#111320
  • button.secondaryHoverBackground#1a1f2e
  • debugIcon.continueForeground#D92B82
  • debugIcon.restartForeground#7ee787
  • debugIcon.stepIntoForeground#D92B82
  • debugIcon.stepOutForeground#D92B82
  • debugIcon.stepOverForeground#D92B82
  • debugIcon.stopForeground#ff6b6b
  • debugToolBar.background#111320
  • descriptionForeground#4a5568
  • diffEditor.insertedTextBackground#7ee78722
  • diffEditor.insertedTextBorder#7ee78755
  • diffEditor.removedTextBackground#ff6b6b22
  • diffEditor.removedTextBorder#ff6b6b55
  • disabledForeground#4a5568
  • dropdown.background#111320
  • dropdown.border#1a1f2e
  • editor.background#000000
  • editor.findMatchBackground#D92B8244
  • editor.findMatchHighlightBackground#D92B8222
  • editor.foreground#c8d1da
  • editor.lineHighlightBackground#D92B8211
  • editor.lineHighlightBorder#D92B8222
  • editor.selectionBackground#D92B8233
  • editor.selectionHighlightBackground#D92B8222
  • editor.wordHighlightBackground#D92B8222
  • editor.wordHighlightStrongBackground#D92B8233
  • editorBracketMatch.background#D92B8233
  • editorBracketMatch.border#D92B82
  • editorCursor.foreground#D92B82
  • editorError.foreground#ff6b6b
  • editorGroup.border#D92B8244
  • editorGroupHeader.tabsBackground#0d0e17
  • editorGroupHeader.tabsBorder#131726
  • editorHoverWidget.background#111320
  • editorHoverWidget.border#D92B8255
  • editorIndentGuide.activeBackground1#D92B8255
  • editorIndentGuide.background1#131726
  • editorInfo.foreground#D92B82
  • editorLineNumber.activeForeground#D92B82
  • editorLineNumber.foreground#341627
  • editorOverviewRuler.currentContentForeground#D92B82
  • editorOverviewRuler.errorForeground#ff6b6b
  • editorOverviewRuler.incomingContentForeground#7ee787
  • editorOverviewRuler.infoForeground#D92B82
  • editorOverviewRuler.warningForeground#f1fa8c
  • editorRuler.foreground#131726
  • editorSuggestWidget.background#111320
  • editorSuggestWidget.border#D92B8255
  • editorSuggestWidget.highlightForeground#D92B82
  • editorSuggestWidget.selectedBackground#D92B8233
  • editorWarning.foreground#f1fa8c
  • editorWhitespace.foreground#1a1f2e
  • editorWidget.background#111320
  • editorWidget.border#D92B8255
  • errorForeground#ff6b6b
  • focusBorder#D92B82
  • foreground#c8d1da
  • gitDecoration.conflictingResourceForeground#D967A8
  • gitDecoration.deletedResourceForeground#ff6b6b
  • gitDecoration.modifiedResourceForeground#D92B82
  • gitDecoration.untrackedResourceForeground#7ee787
  • icon.foreground#ffffff
  • input.background#111320
  • input.border#D92B8233
  • input.foreground#c8d1da
  • input.placeholderForeground#4a5568
  • inputOption.activeBackground#D92B8233
  • inputOption.activeBorder#D92B82
  • inputValidation.infoBackground#111320
  • inputValidation.infoBorder#D92B82
  • list.activeSelectionBackground#D92B8255
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#D92B8244
  • list.focusForeground#ffffff
  • list.focusOutline#00000000
  • list.highlightForeground#D92B82
  • list.hoverBackground#D92B8215
  • list.hoverForeground#D92B82
  • list.inactiveSelectionBackground#D92B8222
  • list.inactiveSelectionForeground#a0aab5
  • menu.background#111320
  • menu.foreground#D92B82
  • menu.selectionBackground#D92B8244
  • menu.selectionBorder#D92B82
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#1a1f2e
  • menubar.selectionBackground#D92B82
  • menubar.selectionForeground#000000
  • merge.currentContentBackground#D92B8222
  • merge.currentHeaderBackground#D92B8244
  • merge.incomingContentBackground#7ee78722
  • merge.incomingHeaderBackground#7ee78744
  • notificationCenter.border#D92B8255
  • notificationCenterHeader.background#0d0e17
  • notificationCenterHeader.foreground#D92B82
  • notificationLink.foreground#D92B82
  • notifications.background#111320
  • notifications.border#D92B8255
  • panel.background#0d0e17
  • panel.border#D92B8233
  • panelTitle.activeBorder#D92B82
  • panelTitle.activeForeground#D92B82
  • peekView.border#D92B82
  • peekViewEditor.background#08090f
  • peekViewEditor.matchHighlightBackground#D92B8233
  • peekViewResult.background#0d0e17
  • peekViewResult.matchHighlightBackground#D92B8233
  • peekViewResult.selectionBackground#D92B8233
  • peekViewTitle.background#0d0e17
  • pickerGroup.border#1a1f2e
  • pickerGroup.foreground#D92B82
  • quickInput.background#111320
  • quickInputTitle.background#111320
  • scm.providerBorder#D92B82
  • scrollbarSlider.activeBackground#D92B8277
  • scrollbarSlider.background#34162755
  • scrollbarSlider.hoverBackground#D92B8255
  • selection.background#D92B8233
  • sideBar.background#0d0e17
  • sideBar.border#D92B8266
  • sideBar.foreground#a0aab5
  • sideBarSectionHeader.background#111320
  • sideBarSectionHeader.border#D92B82
  • sideBarSectionHeader.foreground#D92B82
  • sideBarTitle.background#000000
  • sideBarTitle.foreground#D92B82
  • statusBar.background#000000
  • statusBar.border#D92B8266
  • statusBar.foreground#D92B82
  • statusBar.noFolderBackground#08090f
  • statusBar.noFolderForeground#D92B82
  • statusBarItem.hoverBackground#D92B82
  • statusBarItem.hoverForeground#000000
  • statusBarItem.remoteBackground#000000
  • statusBarItem.remoteForeground#D92B82
  • tab.activeBackground#000000
  • tab.activeBorder#D92B82
  • tab.activeForeground#D92B82
  • tab.border#131726
  • tab.hoverBackground#111320
  • tab.inactiveBackground#0d0e17
  • terminal.ansiBlack#0b0c15
  • terminal.ansiBlue#38bdf8
  • terminal.ansiBrightBlack#1a1f2e
  • terminal.ansiBrightBlue#7dd3fc
  • terminal.ansiBrightCyan#67e8f9
  • terminal.ansiBrightGreen#a5f3fc
  • terminal.ansiBrightMagenta#D97CBE
  • terminal.ansiBrightRed#ff8e8e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f1fa8c
  • terminal.ansiCyan#00f0ff
  • terminal.ansiGreen#7ee787
  • terminal.ansiMagenta#D967A8
  • terminal.ansiRed#ff6b6b
  • terminal.ansiWhite#c8d1da
  • terminal.ansiYellow#f1fa8c
  • terminal.background#000000
  • terminal.foreground#D95999
  • terminalCursor.background#000000
  • terminalCursor.foreground#D92B82
  • textLink.activeForeground#D92B82
  • textLink.foreground#D95999
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#D92B82
  • titleBar.border#D92B8266
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#6A2952
  • tree.indentGuidesStroke#D92B8299
  • window.activeBorder#D92882
  • window.inactiveBorder#4a5568

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a5568italic
variable, string constant.other.placeholder#c8d1da—
keyword, storage.type, storage.modifier#D92B82—
keyword.operator#D92B82—
constant.numeric, constant.language, support.constant#e0b3cc—
entity.name.function, meta.function-call, support.function#c5689a—
entity.name.type, entity.name.class, support.type, support.class#d95e99—
string, constant.other.symbol, constant.character#d999b8—
entity.name.tag, punctuation.definition.tag#D92B82—
entity.other.attribute-name#d97eb0—
invalid, invalid.illegal#ff6b6b—
punctuation.definition.string, punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.dict, punctuation.section#4a5568—