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#e0e0e0
  • activityBar.border#c0c0c0
  • activityBar.foreground#1e1e1e
  • activityBarBadge.background#78b0c0
  • activityBarBadge.foreground#000000
  • badge.background#78b0c0
  • badge.foreground#000000
  • button.background#c0c0c0
  • debugToolBar.background#e0e0e0
  • diffEditor.insertedTextBackground#93ae7c30
  • diffEditor.removedTextBackground#af515a30
  • dropdown.background#e0e0e0
  • dropdown.border#c0c0c0
  • editor.background#ffffff
  • editor.foreground#1e1e1e
  • editor.lineHighlightBackground#c0c0c0
  • editor.selectionBackground#78b0c050
  • editor.selectionHighlightBackground#78b0c020
  • editorBracketMatch.background#7fabb0
  • editorBracketMatch.border#c0c0c0
  • editorCursor.foreground#1e1e1e
  • editorError.foreground#af515a
  • editorGroup.border#c0c0c0
  • editorGroupHeader.tabsBackground#e0e0e0
  • editorGutter.addedBackground#93ae7c
  • editorGutter.deletedBackground#af515a
  • editorGutter.modifiedBackground#dbbb7b
  • editorHoverWidget.background#e0e0e0
  • editorHoverWidget.border#c0c0c0
  • editorIndentGuide.background#c0c0c0
  • editorLineNumber.foreground#3c466a
  • editorLink.activeForeground#1e1e1e
  • editorMarkerNavigation.background#c0c0c0
  • editorOverviewRuler.border#c0c0c0
  • editorRuler.foreground#c0c0c0
  • editorSuggestWidget.background#e0e0e0
  • editorSuggestWidget.border#c0c0c0
  • editorSuggestWidget.foreground#1e1e1e
  • editorSuggestWidget.highlightForeground#7fabb0
  • editorSuggestWidget.selectedBackground#c0c0c0
  • editorWarning.foreground#dbbb7b
  • editorWhitespace.foreground#c0c0c0
  • editorWidget.background#e0e0e0
  • extensionButton.prominentBackground#93ae7c
  • extensionButton.prominentHoverBackground#b3d88d
  • focusBorder#c0c0c0
  • input.background#ffffff
  • input.border#c0c0c0
  • input.foreground#1e1e1e
  • input.placeholderForeground#3c466a
  • inputValidation.errorBorder#af515a
  • inputValidation.infoBorder#7191b1
  • inputValidation.warningBorder#dbbb7b
  • list.activeSelectionBackground#c0c0c0
  • list.activeSelectionForeground#1e1e1e
  • list.focusBackground#78b0c099
  • list.focusForeground#1e1e1e
  • list.highlightForeground#78b0c0
  • list.hoverBackground#c0c0c0
  • list.hoverForeground#1e1e1e
  • list.inactiveSelectionBackground#c0c0c0
  • list.inactiveSelectionForeground#1e1e1e
  • notebook.cellBorderColor#c0c0c0
  • notebook.cellEditorBackground#ffffff
  • notebook.focusedCellBorder#78b0c0
  • notebook.focusedEditorBorder#78b0c0
  • notebook.outputContainerBackgroundColor#e0e0e0
  • notebook.selectedCellBorder#78b0c0
  • panel.background#e0e0e0
  • panel.border#c0c0c0
  • panelTitle.activeForeground#1e1e1e
  • peekView.border#c0c0c0
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#78b0c050
  • peekViewEditorGutter.background#ffffff
  • peekViewResult.background#ffffff
  • peekViewResult.matchHighlightBackground#78b0c050
  • peekViewTitle.background#ffffff
  • peekViewTitleDescription.foreground#3c466a
  • pickerGroup.foreground#78b0c0
  • progressBar.background#78b0c0
  • scrollbar.shadow#c0c0c0
  • scrollbarSlider.activeBackground#78b0c0
  • scrollbarSlider.background#c0c0c0
  • scrollbarSlider.hoverBackground#c0c0c0
  • selection.background#78b0c0
  • sideBar.background#e0e0e0
  • sideBar.border#c0c0c0
  • sideBar.foreground#1e1e1e
  • sideBarSectionHeader.background#e0e0e0
  • sideBarTitle.foreground#1e1e1e
  • statusBar.background#e0e0e0
  • statusBar.border#c0c0c0
  • statusBar.debuggingBackground#a48ead
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#1e1e1e
  • statusBar.noFolderBackground#e0e0e0
  • tab.activeBorder#78b0c0
  • tab.activeForeground#1e1e1e
  • tab.border#c0c0c0
  • tab.hoverBackground#c0c0c0
  • tab.inactiveBackground#e0e0e0
  • tab.inactiveForeground#3c466a
  • tab.unfocusedActiveBorder#c0c0c0
  • tab.unfocusedActiveForeground#1e1e1e
  • terminal.ansiBlack#2b3252
  • terminal.ansiBlue#7191b1
  • terminal.ansiBrightBlack#3c466a
  • terminal.ansiBrightBlue#7191b1
  • terminal.ansiBrightCyan#7fabb0
  • terminal.ansiBrightGreen#93ae7c
  • terminal.ansiBrightMagenta#a48ead
  • terminal.ansiBrightRed#af515a
  • terminal.ansiBrightWhite#dceff4
  • terminal.ansiBrightYellow#dbbb7b
  • terminal.ansiCyan#78b0c0
  • terminal.ansiGreen#93ae7c
  • terminal.ansiMagenta#a48ead
  • terminal.ansiRed#af515a
  • terminal.ansiWhite#1e1e1e
  • terminal.ansiYellow#dbbb7b
  • terminal.foreground#1e1e1e
  • textLink.activeForeground#1e1e1e
  • textLink.foreground#78b0c0
  • titleBar.activeBackground#e0e0e0
  • titleBar.activeForeground#1e1e1e
  • titleBar.border#c0c0c0
  • titleBar.inactiveBackground#e0e0e0
  • titleBar.inactiveForeground#3c466a
  • widget.shadow#c0c0c0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle