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#1a1f2e
  • activityBar.border#2d3f56
  • activityBar.foreground#e8eef7
  • activityBar.inactiveForeground#e8eef766
  • activityBarBadge.background#5b6edb
  • activityBarBadge.foreground#1a1f2e
  • badge.background#5b6edb
  • badge.foreground#1a1f2e
  • breadcrumb.activeSelectionForeground#e8eef7
  • breadcrumb.background#1a1f2e
  • breadcrumb.focusForeground#e8eef7
  • breadcrumb.foreground#6b7793
  • breadcrumbPicker.background#1a1f2edd
  • button.background#5b6edb
  • button.foreground#1a1f2e
  • button.hoverBackground#5b6edbdd
  • button.secondaryBackground#5b6edb30
  • button.secondaryForeground#e8eef7
  • button.secondaryHoverBackground#5b6edb50
  • diffEditor.diagonalFill#6b779340
  • diffEditor.insertedLineBackground#7aa55520
  • diffEditor.insertedTextBackground#7aa55540
  • diffEditor.removedLineBackground#e85a5f20
  • diffEditor.removedTextBackground#e85a5f40
  • diffEditorGutter.insertedLineBackground#7aa55530
  • diffEditorGutter.removedLineBackground#e85a5f30
  • dropdown.background#1a1f2edd
  • dropdown.border#2d3f56
  • dropdown.foreground#e8eef7
  • editor.background#1a1f2e
  • editor.findMatchBackground#5b6edb35
  • editor.findMatchBorder#5b6edb
  • editor.findMatchHighlightBackground#5b6edb20
  • editor.foldBackground#2d3a5c40
  • editor.foreground#e8eef7
  • editor.inactiveSelectionBackground#2d3a5c80
  • editor.lineHighlightBackground#2d3a5c60
  • editor.rangeHighlightBackground#5b6edb15
  • editor.selectionBackground#2d3a5c
  • editor.selectionForeground#e8eef7
  • editor.wordHighlightBackground#5b6edb25
  • editor.wordHighlightStrongBackground#5b6edb40
  • editorBracketHighlight.foreground1#9d84b7
  • editorBracketHighlight.foreground2#7da6ce
  • editorBracketHighlight.foreground3#a8d4b8
  • editorBracketMatch.background#5b6edb40
  • editorBracketMatch.border#5b6edb80
  • editorCursor.background#1a1f2e
  • editorCursor.foreground#a8c5e0
  • editorGroup.border#2d3f56
  • editorGroup.dropBackground#5b6edb20
  • editorGroupHeader.noTabsBackground#1a1f2e
  • editorGroupHeader.tabsBackground#1a1f2e
  • editorGutter.addedBackground#7aa555cc
  • editorGutter.background#1a1f2e
  • editorGutter.deletedBackground#e85a5fcc
  • editorGutter.foldingControlForeground#6b7793
  • editorGutter.modifiedBackground#d9a963cc
  • editorHoverWidget.background#1a1f2edd
  • editorHoverWidget.border#2d3f56
  • editorHoverWidget.foreground#e8eef7
  • editorHoverWidget.highlightForeground#5b6edb
  • editorIndentGuide.activeBackground1#2d3f56
  • editorIndentGuide.background1#2d3f5680
  • editorLineNumber.activeForeground#e8eef7
  • editorLineNumber.foreground#6b7793
  • editorOverviewRuler.addedForeground#7aa555cc
  • editorOverviewRuler.background#1a1f2e
  • editorOverviewRuler.border#2d3f56
  • editorOverviewRuler.deletedForeground#e85a5fcc
  • editorOverviewRuler.errorForeground#e85a5f
  • editorOverviewRuler.findMatchForeground#5b6edb80
  • editorOverviewRuler.infoForeground#7da6ce
  • editorOverviewRuler.modifiedForeground#d9a963cc
  • editorOverviewRuler.selectionHighlightForeground#2d3a5caa
  • editorOverviewRuler.warningForeground#d9a963
  • editorSuggestWidget.background#1a1f2edd
  • editorSuggestWidget.border#2d3f56
  • editorSuggestWidget.focusHighlightForeground#5b6edb
  • editorSuggestWidget.foreground#e8eef7
  • editorSuggestWidget.highlightForeground#5b6edb
  • editorSuggestWidget.selectedBackground#2d3a5c
  • editorSuggestWidget.selectedForeground#e8eef7
  • editorSuggestWidget.selectedIconForeground#5b6edb
  • editorWidget.background#1a1f2edd
  • editorWidget.border#2d3f56
  • editorWidget.foreground#e8eef7
  • editorWidget.resizeBorder#5b6edb
  • extensionButton.prominentBackground#5b6edb
  • extensionButton.prominentForeground#1a1f2e
  • extensionButton.prominentHoverBackground#5b6edbdd
  • focusBorder#5b6edb
  • gitDecoration.addedResourceForeground#7aa555
  • gitDecoration.conflictingResourceForeground#d9a963
  • gitDecoration.deletedResourceForeground#e85a5f
  • gitDecoration.ignoredResourceForeground#6b7793
  • gitDecoration.modifiedResourceForeground#d9a963
  • gitDecoration.renamedResourceForeground#7da6ce
  • gitDecoration.submoduleResourceForeground#7da6ce
  • gitDecoration.untrackedResourceForeground#7aa555
  • input.background#1a1f2edd
  • input.border#2d3f56
  • input.foreground#e8eef7
  • input.placeholderForeground#6b7793
  • inputValidation.errorBackground#e85a5f20
  • inputValidation.errorBorder#e85a5f
  • inputValidation.errorForeground#e8eef7
  • inputValidation.infoBackground#7da6ce20
  • inputValidation.infoBorder#7da6ce
  • inputValidation.infoForeground#e8eef7
  • inputValidation.warningBackground#d9a96320
  • inputValidation.warningBorder#d9a963
  • inputValidation.warningForeground#e8eef7
  • keybindingLabel.background#2d3a5c80
  • keybindingLabel.border#2d3f56
  • keybindingLabel.bottomBorder#2d3f56
  • keybindingLabel.foreground#e8eef7
  • list.activeSelectionBackground#2d3a5c
  • list.activeSelectionForeground#e8eef7
  • list.activeSelectionIconForeground#5b6edb
  • list.errorForeground#e85a5f
  • list.focusBackground#5b6edb30
  • list.focusForeground#e8eef7
  • list.focusOutline#5b6edb
  • list.highlightForeground#5b6edb
  • list.hoverBackground#2d3a5c60
  • list.hoverForeground#e8eef7
  • list.inactiveSelectionBackground#2d3a5c80
  • list.inactiveSelectionForeground#e8eef7
  • list.matchHighlightBackground#5b6edb35
  • list.warningForeground#d9a963
  • listFilterWidget.background#1a1f2edd
  • listFilterWidget.border#2d3f56
  • listFilterWidget.noMatchesOutline#e85a5f
  • listFilterWidget.outline#5b6edb
  • menu.background#1a1f2edd
  • menu.border#2d3f56
  • menu.foreground#e8eef7
  • menu.selectionBackground#2d3a5c
  • menu.selectionBorder#5b6edb50
  • menu.selectionForeground#e8eef7
  • menu.separatorBackground#2d3f56
  • menubar.selectionBackground#2d3a5c
  • menubar.selectionBorder#5b6edb50
  • menubar.selectionForeground#e8eef7
  • notificationCenterHeader.background#1a1f2e
  • notificationCenterHeader.foreground#e8eef7
  • notificationLink.foreground#5b6edb
  • notifications.background#1a1f2edd
  • notifications.border#2d3f56
  • notifications.foreground#e8eef7
  • notificationsErrorIcon.foreground#e85a5f
  • notificationsInfoIcon.foreground#7da6ce
  • notificationsWarningIcon.foreground#d9a963
  • panel.background#1a1f2e
  • panel.border#2d3f56
  • panel.dropBorder#5b6edb
  • panelInput.border#2d3f56
  • panelTitle.activeBorder#5b6edb
  • panelTitle.activeForeground#e8eef7
  • panelTitle.inactiveForeground#6b7793
  • peekView.border#5b6edb
  • peekViewEditor.background#1a1f2edd
  • peekViewEditor.matchHighlightBackground#5b6edb35
  • peekViewEditor.matchHighlightBorder#5b6edb70
  • peekViewEditorGutter.background#1a1f2edd
  • peekViewResult.background#1a1f2e
  • peekViewResult.fileForeground#e8eef7
  • peekViewResult.lineForeground#6b7793
  • peekViewResult.matchHighlightBackground#5b6edb25
  • peekViewResult.selectionBackground#2d3a5c
  • peekViewResult.selectionForeground#e8eef7
  • peekViewTitle.background#1a1f2e
  • peekViewTitleDescription.foreground#6b7793
  • peekViewTitleLabel.foreground#e8eef7
  • progressBar.background#5b6edb
  • quickInput.background#1a1f2edd
  • quickInput.foreground#e8eef7
  • quickInputList.focusBackground#2d3a5c
  • quickInputList.focusForeground#e8eef7
  • quickInputList.focusIconForeground#5b6edb
  • quickInputTitle.background#1a1f2e
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#6b779380
  • scrollbarSlider.background#6b779340
  • scrollbarSlider.hoverBackground#6b779360
  • sideBar.background#1a1f2e
  • sideBar.border#2d3f56
  • sideBar.foreground#e8eef7
  • sideBarSectionHeader.background#2d3a5c60
  • sideBarSectionHeader.border#2d3f56
  • sideBarSectionHeader.foreground#e8eef7
  • sideBarTitle.foreground#e8eef7
  • statusBar.background#1a1f2e
  • statusBar.border#2d3f56
  • statusBar.debuggingBackground#d9a963
  • statusBar.debuggingForeground#1a1f2e
  • statusBar.foreground#e8eef7
  • statusBar.noFolderBackground#1a1f2e
  • statusBar.noFolderForeground#e8eef7
  • statusBarItem.activeBackground#5b6edb50
  • statusBarItem.errorBackground#e85a5f
  • statusBarItem.errorForeground#e8eef7
  • statusBarItem.hoverBackground#5b6edb30
  • statusBarItem.remoteBackground#5b6edb
  • statusBarItem.remoteForeground#1a1f2e
  • statusBarItem.warningBackground#d9a963
  • statusBarItem.warningForeground#1a1f2e
  • symbolIcon.booleanForeground#9d84b7
  • symbolIcon.classForeground#7da6ce
  • symbolIcon.constantForeground#c7a8b8
  • symbolIcon.enumForeground#7da6ce
  • symbolIcon.enumMemberForeground#c7a8b8
  • symbolIcon.fieldForeground#d4b88d
  • symbolIcon.functionForeground#7da6ce
  • symbolIcon.interfaceForeground#7da6ce
  • symbolIcon.keywordForeground#9d84b7
  • symbolIcon.methodForeground#7da6ce
  • symbolIcon.nullForeground#9d84b7
  • symbolIcon.numberForeground#c7a8b8
  • symbolIcon.propertyForeground#d4b88d
  • symbolIcon.stringForeground#a8d4b8
  • symbolIcon.variableForeground#d4b88d
  • tab.activeBackground#1a1f2e
  • tab.activeForeground#e8eef7
  • tab.activeModifiedBorder#7da6ce
  • tab.border#2d3f56
  • tab.hoverBackground#2d3a5c60
  • tab.inactiveBackground#1a1f2ecc
  • tab.inactiveForeground#6b779399
  • tab.inactiveModifiedBorder#7da6ce80
  • tab.unfocusedActiveBackground#1a1f2edd
  • tab.unfocusedActiveModifiedBorder#7da6ce60
  • terminal.ansiBlack#0f1419
  • terminal.ansiBlue#7da6ce
  • terminal.ansiBrightBlack#6b7793
  • terminal.ansiBrightBlue#9dbbdb
  • terminal.ansiBrightCyan#94d6de
  • terminal.ansiBrightGreen#99c977
  • terminal.ansiBrightMagenta#c4a3d9
  • terminal.ansiBrightRed#e89c9f
  • terminal.ansiBrightWhite#e8eef7
  • terminal.ansiBrightYellow#e5bf99
  • terminal.ansiCyan#6fb8c0
  • terminal.ansiGreen#7aa555
  • terminal.ansiMagenta#9d84b7
  • terminal.ansiRed#e85a5f
  • terminal.ansiWhite#d4d8e0
  • terminal.ansiYellow#d9a963
  • terminal.background#1a1f2e
  • terminal.cursorBackground#1a1f2e
  • terminal.cursorForeground#a8c5e0
  • terminal.foreground#e8eef7
  • terminal.inactiveSelectionBackground#2d3a5c80
  • terminal.selectionBackground#2d3a5c
  • terminalCursor.background#1a1f2e
  • terminalCursor.foreground#a8c5e0
  • titleBar.activeBackground#1a1f2e
  • titleBar.activeForeground#e8eef7
  • titleBar.border#2d3f56
  • titleBar.inactiveBackground#1a1f2edd
  • titleBar.inactiveForeground#e8eef799
  • tree.indentGuidesStroke#2d3f56
  • widget.shadow#00000040
  • window.activeBorder#5b6edb
  • window.inactiveBorder#5b6edb66

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6b7793italic
comment.block.documentation#6b7793italic
string, string.quoted, string.quoted.single, string.quoted.double#a8d4b8
constant.character.escape, string constant.other.placeholder#c7a8b8
constant.numeric#c7a8b8
constant.language#c7a8b8
keyword, keyword.control#9d84b7
storage, storage.modifier, storage.type, keyword.declaration#9d84b7
keyword.operator#9d84b7
entity.name.function#7da6ce
meta.function-call entity.name.function, meta.method-call entity.name.function#7da6ce
variable.parameter#d4b88d
variable#d4b88d
variable.language.this, variable.other.this#9d84b7italic
variable.language#9d84b7
entity.name.tag#9d84b7
entity.other.attribute-name#d4b88d
entity.name.class#7da6ce
entity.name.type#7da6ce
meta.type.parameters entity.name.type#7da6ce
punctuation#6b7793
invalid#e85a5f
markup.bold#9d84b7bold
markup.italic#9d84b7italic
markup.underline.link#7da6ce
markup.heading#9d84b7bold
meta.function.decorator#9d84b7
meta.declaration.annotation#9d84b7
support.type.property-name#d4b88d
support.constant.property-value#a8d4b8
entity.name.tag.yaml#d4b88d