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.activeBorder#FFFFFF
  • activityBar.background#808080
  • activityBar.dropBorder#FFFFFF
  • activityBar.foreground#000000
  • activityBarBadge.background#000080
  • activityBarBadge.foreground#FFFFFF
  • breadcrumb.focusForeground#008080
  • button.border#008080
  • checkbox.border#FFFFFF
  • contrastActiveBorder#FFFFFF
  • debugToolBar.border#FFFFFF
  • diffEditor.border#FFFFFF
  • diffEditor.insertedTextBorder#008080
  • diffEditor.removedTextBorder#008080
  • dropdown.border#008080
  • editor.background#003333
  • editor.findMatchBackground#008080
  • editor.findMatchBorder#FFFFFF
  • editor.findMatchHighlightBackground#008080
  • editor.findRangeHighlightBackground#005A5A
  • editor.foreground#FFFFFF
  • editor.inactiveSelectionBackground#005A5A
  • editor.lineHighlightBackground#005252
  • editor.lineHighlightBorder#000035
  • editor.selectionBackground#008080
  • editor.selectionHighlightBackground#004A4A
  • editor.selectionHighlightBorder#008080
  • editor.wordHighlightBorder#FFFFFF
  • editorBracketMatch.border#FFFFFF
  • editorCursor.foreground#FFFFFF
  • editorError.border#FFFFFF
  • editorGroup.border#FFFFFF
  • editorGroupHeader.border#FFFFFF
  • editorGutter.addedBackground#008080
  • editorGutter.deletedBackground#008080
  • editorGutter.modifiedBackground#008080
  • editorHint.border#FFFFFF
  • editorHoverWidget.border#FFFFFF
  • editorInfo.border#FFFFFF
  • editorLineNumber.foreground#008080
  • editorOverviewRuler.border#FFFFFF
  • editorSuggestWidget.border#FFFFFF
  • editorWarning.border#FFFFFF
  • editorWidget.border#FFFFFF
  • editorWidget.resizeBorder#FFFFFF
  • focusBorder#FFFFFF
  • input.border#008080
  • inputOption.activeBorder#FFFFFF
  • inputValidation.errorBorder#008080
  • inputValidation.infoBorder#008080
  • inputValidation.warningBorder#008080
  • list.activeSelectionBackground#008080
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#008080
  • list.filterMatchBorder#FFFFFF
  • list.focusBackground#008080
  • list.focusForeground#FFFFFF
  • list.highlightForeground#FFFF00
  • list.hoverBackground#004A4A
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#008080
  • list.inactiveSelectionForeground#FFFFFF
  • menu.border#008080
  • menu.selectionBackground#008080
  • menu.selectionBorder#FFFFFF
  • menu.selectionForeground#FFFFFF
  • menu.separatorBackground#008080
  • menubar.selectionBorder#FFFFFF
  • merge.border#FFFFFF
  • notebook.cellBorderColor#FFFFFF
  • notebook.focusedCellBorder#FFFFFF
  • notebook.selectedCellBorder#FFFFFF
  • notificationCenter.border#FFFFFF
  • notificationLink.foreground#008080
  • notifications.border#FFFFFF
  • notificationToast.border#FFFFFF
  • panel.border#008080
  • panel.dropBorder#FFFFFF
  • panelInput.border#FFFFFF
  • panelSection.border#FFFFFF
  • panelSectionHeader.border#FFFFFF
  • panelTitle.activeBorder#FFFFFF
  • panelTitle.inactiveBorder#008080
  • peekView.border#FFFFFF
  • peekViewEditor.matchHighlightBorder#008080
  • peekViewResult.matchHighlightBorder#008080
  • peekViewTitle.background#008080
  • pickerGroup.border#FFFFFF
  • sash.hoverBorder#FFFFFF
  • selection.background#882222
  • settings.checkboxBorder#FFFFFF
  • settings.dropdownBorder#FFFFFF
  • settings.numberInputBorder#FFFFFF
  • settings.textInputBorder#FFFFFF
  • sideBar.background#505050
  • sideBar.border#000000
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.border#008080
  • statusBar.background#003333
  • statusBar.border#008080
  • statusBar.debuggingBorder#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBorder#FFFFFF
  • tab.activeBorder#008080
  • tab.activeBorderTop#FFFFFF
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#FFFFFF
  • tab.border#FFFFFF
  • tab.hoverBorder#008080
  • tab.inactiveForeground#CCCCCC
  • tab.inactiveModifiedBorder#FFFFFF
  • tab.lastPinnedBorder#FFFFFF
  • tab.unfocusedActiveBorder#FFFFFF
  • tab.unfocusedActiveBorderTop#FFFFFF
  • tab.unfocusedActiveModifiedBorder#008080
  • tab.unfocusedHoverBorder#008080
  • tab.unfocusedInactiveModifiedBorder#008080
  • terminal.border#FFFFFF
  • terminal.foreground#00FF00
  • textBlockQuote.border#FFFFFF
  • titleBar.border#FFFFFF
  • window.activeBorder#FFFFFF
  • window.inactiveBorder#FFFFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#00FF00
string#FFFF00
constant.numeric#FF00FF
keyword, storage.type#00FFFF
entity.name.function, entity.name.tag, support.function#FF00FF
variable#FFFFFF
constant.language#FF4500
entity.other.attribute-name#FFFF00