Skip to main content
CodingTheme

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#007070
  • activityBar.border#FFFFFF
  • activityBar.dropBorder#FFFFFF
  • activityBar.foreground#FFFFFF
  • badge.background#252525
  • breadcrumb.background#252525
  • button.background#252525
  • button.hoverBackground#252525
  • checkbox.background#252525
  • checkbox.border#FFFFFF
  • contrastActiveBorder#FFFFFF
  • contrastBorder#FFFFFF
  • debugToolBar.border#FFFFFF
  • diffEditor.border#FFFFFF
  • dropdown.background#252525
  • dropdown.border#FFFFFF
  • editor.background#1D2951
  • editor.findMatchBorder#FFFFFF
  • editor.foldBackground#252525
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#000080
  • editor.lineHighlightBorder#000035
  • editor.wordHighlightBorder#FFFFFF
  • editorBracketMatch.border#FFFFFF
  • editorCursor.foreground#FFFFFF
  • editorError.background#252525
  • editorError.border#FFFFFF
  • editorGroup.border#FFFFFF
  • editorGroupHeader.border#FFFFFF
  • editorHint.border#FFFFFF
  • editorHoverWidget.border#FFFFFF
  • editorInfo.background#252525
  • editorInfo.border#FFFFFF
  • editorLineNumber.foreground#858585
  • editorOverviewRuler.border#FFFFFF
  • editorPane.background#252525
  • editorSuggestWidget.border#FFFFFF
  • editorWarning.border#FFFFFF
  • editorWidget.border#FFFFFF
  • editorWidget.resizeBorder#FFFFFF
  • focusBorder#FFFFFF
  • imagePreview.border#FFFFFF
  • input.background#252525
  • input.border#FFFFFF
  • inputOption.activeBorder#FFFFFF
  • inputValidation.infoBorder#FFFFFF
  • list.dropBackground#252525
  • list.filterMatchBorder#FFFFFF
  • list.focusBackground#252525
  • list.hoverBackground#252525
  • menu.background#252525
  • menu.border#FFFFFF
  • menu.selectionBackground#252525
  • menu.selectionBorder#FFFFFF
  • menubar.selectionBorder#FFFFFF
  • merge.border#FFFFFF
  • minimap.background#252525
  • notebook.cellBorderColor#FFFFFF
  • notebook.focusedCellBorder#FFFFFF
  • notebook.focusedRowBorder#FFFFFF
  • notebook.selectedCellBorder#FFFFFF
  • notificationCenter.border#FFFFFF
  • notifications.border#FFFFFF
  • notificationToast.border#FFFFFF
  • panel.background#252525
  • panel.border#FFFFFF
  • panel.dropBorder#FFFFFF
  • panelInput.border#FFFFFF
  • panelSection.border#FFFFFF
  • panelSectionHeader.border#FFFFFF
  • panelTitle.activeBorder#FFFFFF
  • peekView.border#FFFFFF
  • pickerGroup.border#FFFFFF
  • progressBar.background#252525
  • quickInput.background#252525
  • sash.hoverBorder#FFFFFF
  • scm.providerBorder#FFFFFF
  • selection.background#555555A0
  • settings.checkboxBorder#FFFFFF
  • settings.dropdownBorder#FFFFFF
  • settings.numberInputBorder#FFFFFF
  • settings.textInputBorder#FFFFFF
  • sideBar.background#252525
  • sideBar.border#FFFFFF
  • sideBar.dropBackground#252525
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.border#FFFFFF
  • statusBar.background#252525
  • statusBar.border#FFFFFF
  • statusBar.debuggingBorder#FFFFFF
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBorder#FFFFFF
  • tab.activeBackground#007070
  • tab.activeBorder#FFFFFF
  • tab.activeBorderTop#FFFFFF
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#FFFFFF
  • tab.border#FFFFFF
  • tab.hoverBackground#007070
  • tab.hoverBorder#FFFFFF
  • tab.inactiveForeground#858585
  • tab.inactiveModifiedBorder#FFFFFF
  • tab.lastPinnedBorder#FFFFFF
  • tab.unfocusedActiveBorder#FFFFFF
  • tab.unfocusedActiveBorderTop#FFFFFF
  • tab.unfocusedHoverBorder#FFFFFF
  • terminal.background#252525
  • terminal.border#FFFFFF
  • terminal.foreground#00FF00
  • textBlockQuote.border#FFFFFF
  • titleBar.border#FFFFFF
  • welcomePage.background#252525
  • window.activeBorder#FFFFFF
  • window.inactiveBorder#FFFFFF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A737D
string#00FF00
keyword, storage.type#56B6C2
constant.numeric#D19A66
entity.name.function, support.function#61AFEF
variable#E06C75
constant.language#C678DD
entity.name.tag, entity.other.attribute-name#E5C07B

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...