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#13141c
  • activityBar.border#2a3d56
  • activityBar.foreground#e8eef7
  • activityBar.inactiveForeground#e8eef766
  • activityBarBadge.background#6b7edb
  • activityBarBadge.foreground#0f1419
  • badge.background#6b7edb
  • badge.foreground#0f1419
  • breadcrumb.activeSelectionForeground#e8eef7
  • breadcrumb.background#0f1419
  • breadcrumb.focusForeground#e8eef7
  • breadcrumb.foreground#5a6b8d
  • breadcrumbPicker.background#13141c
  • button.background#6b7edb
  • button.foreground#0f1419
  • button.hoverBackground#6b7edbdd
  • button.secondaryBackground#6b7edb30
  • button.secondaryForeground#e8eef7
  • button.secondaryHoverBackground#6b7edb50
  • diffEditor.diagonalFill#5a6b8d40
  • diffEditor.insertedLineBackground#7aa55520
  • diffEditor.insertedTextBackground#7aa55540
  • diffEditor.removedLineBackground#e85a5f20
  • diffEditor.removedTextBackground#e85a5f40
  • diffEditorGutter.insertedLineBackground#7aa55530
  • diffEditorGutter.removedLineBackground#e85a5f30
  • dropdown.background#13141c
  • dropdown.border#2a3d56
  • dropdown.foreground#e8eef7
  • editor.background#0f1419
  • editor.findMatchBackground#6b7edb35
  • editor.findMatchBorder#6b7edb
  • editor.findMatchHighlightBackground#6b7edb20
  • editor.foldBackground#1f2a5240
  • editor.foreground#e8eef7
  • editor.inactiveSelectionBackground#1f2a5280
  • editor.lineHighlightBackground#1f2a5260
  • editor.rangeHighlightBackground#6b7edb15
  • editor.selectionBackground#1f2a52
  • editor.selectionForeground#e8eef7
  • editor.wordHighlightBackground#6b7edb25
  • editor.wordHighlightStrongBackground#6b7edb40
  • editorBracketHighlight.foreground1#a48fbe
  • editorBracketHighlight.foreground2#86b5d9
  • editorBracketHighlight.foreground3#b0dcc0
  • editorBracketMatch.background#6b7edb40
  • editorBracketMatch.border#6b7edb80
  • editorCursor.background#0f1419
  • editorCursor.foreground#b0d0eb
  • editorGroup.border#2a3d56
  • editorGroup.dropBackground#6b7edb20
  • editorGroupHeader.noTabsBackground#13141c
  • editorGroupHeader.tabsBackground#13141c
  • editorGutter.addedBackground#7aa555cc
  • editorGutter.background#0f1419
  • editorGutter.deletedBackground#e85a5fcc
  • editorGutter.foldingControlForeground#5a6b8d
  • editorGutter.modifiedBackground#d9a963cc
  • editorHoverWidget.background#13141c
  • editorHoverWidget.border#2a3d56
  • editorHoverWidget.foreground#e8eef7
  • editorHoverWidget.highlightForeground#6b7edb
  • editorIndentGuide.activeBackground1#2a3d56
  • editorIndentGuide.background1#2a3d5680
  • editorLineNumber.activeForeground#e8eef7
  • editorLineNumber.foreground#5a6b8d
  • editorOverviewRuler.addedForeground#7aa555cc
  • editorOverviewRuler.background#0f1419
  • editorOverviewRuler.border#2a3d56
  • editorOverviewRuler.deletedForeground#e85a5fcc
  • editorOverviewRuler.errorForeground#e85a5f
  • editorOverviewRuler.findMatchForeground#6b7edb80
  • editorOverviewRuler.infoForeground#7da6ce
  • editorOverviewRuler.modifiedForeground#d9a963cc
  • editorOverviewRuler.selectionHighlightForeground#1f2a52aa
  • editorOverviewRuler.warningForeground#d9a963
  • editorSuggestWidget.background#13141c
  • editorSuggestWidget.border#2a3d56
  • editorSuggestWidget.focusHighlightForeground#6b7edb
  • editorSuggestWidget.foreground#e8eef7
  • editorSuggestWidget.highlightForeground#6b7edb
  • editorSuggestWidget.selectedBackground#1f2a52
  • editorSuggestWidget.selectedForeground#e8eef7
  • editorSuggestWidget.selectedIconForeground#6b7edb
  • editorWidget.background#13141c
  • editorWidget.border#2a3d56
  • editorWidget.foreground#e8eef7
  • editorWidget.resizeBorder#6b7edb
  • extensionButton.prominentBackground#6b7edb
  • extensionButton.prominentForeground#0f1419
  • extensionButton.prominentHoverBackground#6b7edbdd
  • focusBorder#6b7edb
  • gitDecoration.addedResourceForeground#7aa555
  • gitDecoration.conflictingResourceForeground#d9a963
  • gitDecoration.deletedResourceForeground#e85a5f
  • gitDecoration.ignoredResourceForeground#5a6b8d
  • gitDecoration.modifiedResourceForeground#d9a963
  • gitDecoration.renamedResourceForeground#7da6ce
  • gitDecoration.submoduleResourceForeground#7da6ce
  • gitDecoration.untrackedResourceForeground#7aa555
  • input.background#13141c
  • input.border#2a3d56
  • input.foreground#e8eef7
  • input.placeholderForeground#5a6b8d
  • 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#1f2a5280
  • keybindingLabel.border#2a3d56
  • keybindingLabel.bottomBorder#2a3d56
  • keybindingLabel.foreground#e8eef7
  • list.activeSelectionBackground#1f2a52
  • list.activeSelectionForeground#e8eef7
  • list.activeSelectionIconForeground#6b7edb
  • list.errorForeground#e85a5f
  • list.focusBackground#6b7edb30
  • list.focusForeground#e8eef7
  • list.focusOutline#6b7edb
  • list.highlightForeground#6b7edb
  • list.hoverBackground#1f2a5260
  • list.hoverForeground#e8eef7
  • list.inactiveSelectionBackground#1f2a5280
  • list.inactiveSelectionForeground#e8eef7
  • list.matchHighlightBackground#6b7edb35
  • list.warningForeground#d9a963
  • listFilterWidget.background#13141c
  • listFilterWidget.border#2a3d56
  • listFilterWidget.noMatchesOutline#e85a5f
  • listFilterWidget.outline#6b7edb
  • menu.background#13141c
  • menu.border#2a3d56
  • menu.foreground#e8eef7
  • menu.selectionBackground#1f2a52
  • menu.selectionBorder#6b7edb50
  • menu.selectionForeground#e8eef7
  • menu.separatorBackground#2a3d56
  • menubar.selectionBackground#1f2a52
  • menubar.selectionBorder#6b7edb50
  • menubar.selectionForeground#e8eef7
  • notificationCenterHeader.background#13141c
  • notificationCenterHeader.foreground#e8eef7
  • notificationLink.foreground#6b7edb
  • notifications.background#13141c
  • notifications.border#2a3d56
  • notifications.foreground#e8eef7
  • notificationsErrorIcon.foreground#e85a5f
  • notificationsInfoIcon.foreground#7da6ce
  • notificationsWarningIcon.foreground#d9a963
  • panel.background#13141c
  • panel.border#2a3d56
  • panel.dropBorder#6b7edb
  • panelInput.border#2a3d56
  • panelTitle.activeBorder#6b7edb
  • panelTitle.activeForeground#e8eef7
  • panelTitle.inactiveForeground#5a6b8d
  • peekView.border#6b7edb
  • peekViewEditor.background#13141c
  • peekViewEditor.matchHighlightBackground#6b7edb35
  • peekViewEditor.matchHighlightBorder#6b7edb70
  • peekViewEditorGutter.background#13141c
  • peekViewResult.background#13141c
  • peekViewResult.fileForeground#e8eef7
  • peekViewResult.lineForeground#5a6b8d
  • peekViewResult.matchHighlightBackground#6b7edb25
  • peekViewResult.selectionBackground#1f2a52
  • peekViewResult.selectionForeground#e8eef7
  • peekViewTitle.background#13141c
  • peekViewTitleDescription.foreground#5a6b8d
  • peekViewTitleLabel.foreground#e8eef7
  • progressBar.background#6b7edb
  • quickInput.background#13141c
  • quickInput.foreground#e8eef7
  • quickInputList.focusBackground#1f2a52
  • quickInputList.focusForeground#e8eef7
  • quickInputList.focusIconForeground#6b7edb
  • quickInputTitle.background#13141c
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#5a6b8d80
  • scrollbarSlider.background#5a6b8d40
  • scrollbarSlider.hoverBackground#5a6b8d60
  • sideBar.background#13141c
  • sideBar.border#2a3d56
  • sideBar.foreground#e8eef7
  • sideBarSectionHeader.background#1f2a5260
  • sideBarSectionHeader.border#2a3d56
  • sideBarSectionHeader.foreground#e8eef7
  • sideBarTitle.foreground#e8eef7
  • statusBar.background#13141c
  • statusBar.border#2a3d56
  • statusBar.debuggingBackground#d9a963
  • statusBar.debuggingForeground#0f1419
  • statusBar.foreground#e8eef7
  • statusBar.noFolderBackground#13141c
  • statusBar.noFolderForeground#e8eef7
  • statusBarItem.activeBackground#6b7edb50
  • statusBarItem.errorBackground#e85a5f
  • statusBarItem.errorForeground#e8eef7
  • statusBarItem.hoverBackground#6b7edb30
  • statusBarItem.remoteBackground#6b7edb
  • statusBarItem.remoteForeground#0f1419
  • statusBarItem.warningBackground#d9a963
  • statusBarItem.warningForeground#0f1419
  • symbolIcon.booleanForeground#a48fbe
  • symbolIcon.classForeground#86b5d9
  • symbolIcon.constantForeground#d0b1c0
  • symbolIcon.enumForeground#86b5d9
  • symbolIcon.enumMemberForeground#d0b1c0
  • symbolIcon.fieldForeground#ddc295
  • symbolIcon.functionForeground#86b5d9
  • symbolIcon.interfaceForeground#86b5d9
  • symbolIcon.keywordForeground#a48fbe
  • symbolIcon.methodForeground#86b5d9
  • symbolIcon.nullForeground#a48fbe
  • symbolIcon.numberForeground#d0b1c0
  • symbolIcon.propertyForeground#ddc295
  • symbolIcon.stringForeground#b0dcc0
  • symbolIcon.variableForeground#ddc295
  • tab.activeBackground#0f1419
  • tab.activeForeground#e8eef7
  • tab.activeModifiedBorder#7da6ce
  • tab.border#2a3d56
  • tab.hoverBackground#1f2a5260
  • tab.inactiveBackground#13141c
  • tab.inactiveForeground#5a6b8d99
  • tab.inactiveModifiedBorder#7da6ce80
  • tab.unfocusedActiveBackground#0f1419dd
  • 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#0f1419
  • terminal.cursorBackground#0f1419
  • terminal.cursorForeground#b0d0eb
  • terminal.foreground#e8eef7
  • terminal.inactiveSelectionBackground#1f2a5280
  • terminal.selectionBackground#1f2a52
  • terminalCursor.background#0f1419
  • terminalCursor.foreground#b0d0eb
  • titleBar.activeBackground#13141c
  • titleBar.activeForeground#e8eef7
  • titleBar.border#2a3d56
  • titleBar.inactiveBackground#13141cdd
  • titleBar.inactiveForeground#e8eef799
  • tree.indentGuidesStroke#2a3d56
  • widget.shadow#00000040
  • window.activeBorder#6b7edb
  • window.inactiveBorder#6b7edb66

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#647a93italic
comment.block.documentation#647a93italic
string, string.quoted, string.quoted.single, string.quoted.double#b0dcc0
constant.character.escape, string constant.other.placeholder#d0b1c0
constant.numeric#d0b1c0
constant.language#d0b1c0
keyword, keyword.control#a48fbe
storage, storage.modifier, storage.type, keyword.declaration#a48fbe
keyword.operator#a48fbe
entity.name.function#86b5d9
meta.function-call entity.name.function, meta.method-call entity.name.function#86b5d9
variable.parameter#ddc295
variable#ddc295
variable.language.this, variable.other.this#a48fbeitalic
variable.language#a48fbe
entity.name.tag#a48fbe
entity.other.attribute-name#ddc295
entity.name.class#86b5d9
entity.name.type#86b5d9
meta.type.parameters entity.name.type#86b5d9
punctuation#5a6b8d
invalid#e85a5f
markup.bold#a48fbebold
markup.italic#a48fbeitalic
markup.underline.link#86b5d9
markup.heading#a48fbebold
meta.function.decorator#a48fbe
meta.declaration.annotation#a48fbe
support.type.property-name#ddc295
support.constant.property-value#b0dcc0
entity.name.tag.yaml#ddc295
Equinox Colors by EquinoxTeam - VS Code Theme