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#101010
  • activityBar.border#10101080
  • activityBar.foreground#ffffff80
  • activityBarBadge.background#78b0c0
  • activityBarBadge.foreground#000000
  • badge.background#78b0c0
  • badge.foreground#000000
  • button.background#515151
  • debugToolBar.background#101010
  • diffEditor.insertedTextBackground#b3d88d20
  • diffEditor.removedTextBackground#AF515A
  • dropdown.background#101010
  • dropdown.border#ffffff20
  • editor.background#101010
  • editor.foreground#c8dce9ff
  • editor.lineHighlightBackground#00000070
  • editor.selectionBackground#51515170
  • editor.selectionHighlightBackground#ffcc0030
  • editorBracketMatch.background#a48ead
  • editorBracketMatch.border#101010
  • editorCursor.foreground#dbbb7b
  • editorError.foreground#AF515A
  • editorGroup.border#00000050
  • editorGroupHeader.tabsBackground#101010
  • editorGutter.addedBackground#93ae7c
  • editorGutter.deletedBackground#AF515A
  • editorGutter.modifiedBackground#dbbb7b
  • editorHoverWidget.background#101010
  • editorHoverWidget.border#ffffff20
  • editorIndentGuide.background#32323290
  • editorLineNumber.foreground#323232
  • editorLink.activeForeground#ffffff
  • editorMarkerNavigation.background#ffffff10
  • editorOverviewRuler.border#101010
  • editorRuler.foreground#32323290
  • editorSuggestWidget.background#101010
  • editorSuggestWidget.border#ffffff20
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.highlightForeground#7fabb0
  • editorSuggestWidget.selectedBackground#00000070
  • editorWarning.foreground#93ae7c
  • editorWhitespace.foreground#ffffff20
  • editorWidget.background#101010
  • extensionButton.prominentBackground#93ae7c
  • extensionButton.prominentHoverBackground#b3d88d
  • focusBorder#ffffff10
  • input.background#ffffff10
  • input.border#ffffff20
  • input.foreground#ffffff
  • input.placeholderForeground#ffffff80
  • inputValidation.errorBorder#AF515A
  • inputValidation.infoBorder#7191b1
  • inputValidation.warningBorder#dbbb7b
  • list.activeSelectionBackground#101010
  • list.activeSelectionForeground#78b0c0
  • list.focusBackground#78b0c099
  • list.focusForeground#ffffff
  • list.highlightForeground#78b0c0
  • list.hoverBackground#101010
  • list.hoverForeground#c8dce9ff
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#78b0c0
  • notebook.cellBorderColor#ffffff80
  • notebook.cellEditorBackground#151515
  • notebook.focusedCellBorder#78b0c0
  • notebook.focusedEditorBorder#78b0c0
  • notebook.outputContainerBackgroundColor#1f1f1f
  • notebook.selectedCellBorder#78b0c0
  • panel.background#101010
  • panel.border#10101080
  • panelTitle.activeForeground#ffffff
  • peekView.border#00000050
  • peekViewEditor.background#ffffff10
  • peekViewEditor.matchHighlightBackground#51515170
  • peekViewEditorGutter.background#ffffff10
  • peekViewResult.background#ffffff10
  • peekViewResult.matchHighlightBackground#51515170
  • peekViewTitle.background#ffffff10
  • peekViewTitleDescription.foreground#ffffff80
  • pickerGroup.foreground#78b0c0
  • progressBar.background#78b0c0
  • scrollbar.shadow#10101010
  • scrollbarSlider.activeBackground#78b0c0
  • scrollbarSlider.background#00000070
  • scrollbarSlider.hoverBackground#00000050
  • selection.background#ffffff
  • sideBar.background#101010
  • sideBar.border#10101080
  • sideBar.foreground#515151
  • sideBarSectionHeader.background#101010
  • sideBarTitle.foreground#ffffff
  • statusBar.background#101010
  • statusBar.border#10101080
  • statusBar.debuggingBackground#a48ead
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#515151
  • statusBar.noFolderBackground#101010
  • tab.activeBorder#78b0c0
  • tab.activeForeground#ffffff
  • tab.border#101010
  • tab.hoverBackground#32323220
  • tab.inactiveBackground#101010
  • tab.inactiveForeground#515151
  • tab.unfocusedActiveBorder#3a3a3a
  • tab.unfocusedActiveForeground#ffffff
  • 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#d5d9f0
  • terminal.ansiYellow#dbbb7b
  • terminal.foreground#c8dce9
  • textLink.activeForeground#ffffff
  • textLink.foreground#78b0c0
  • titleBar.activeBackground#101010
  • titleBar.activeForeground#3a3a3a
  • titleBar.border#10101080
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#3a3a3a
  • widget.shadow#00000050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle