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#000000
  • activityBar.border#008000
  • activityBar.dropBorder#FFFFFF
  • activityBar.foreground#00FF00
  • activityBarBadge.background#008000
  • activityBarBadge.foreground#00FF00
  • badge.background#008000
  • badge.foreground#00FF00
  • button.background#008000
  • button.border#004000
  • button.foreground#00FF00
  • checkbox.border#FFFFFF
  • contrastActiveBorder#FFFFFF
  • contrastBorder#FFFFFF
  • debugToolBar.border#FFFFFF
  • diffEditor.border#FFFFFF
  • dropdown.background#000000
  • dropdown.border#008000
  • editor.background#000000
  • editor.findMatchBorder#FFFFFF
  • editor.foreground#00FF00
  • editor.lineHighlightBackground#001000
  • editor.lineHighlightBorder#000035
  • editor.wordHighlightBorder#FFFFFF
  • editorBracketMatch.border#FFFFFF
  • editorCursor.foreground#00FF00
  • editorError.border#FFFFFF
  • editorGroup.border#FFFFFF
  • editorGroupHeader.border#FFFFFF
  • editorHint.border#FFFFFF
  • editorHoverWidget.border#FFFFFF
  • editorInfo.border#FFFFFF
  • editorLineNumber.foreground#008000
  • editorOverviewRuler.border#FFFFFF
  • editorSuggestWidget.border#FFFFFF
  • editorWarning.border#FFFFFF
  • editorWidget.border#FFFFFF
  • editorWidget.resizeBorder#FFFFFF
  • focusBorder#FFFFFF
  • input.background#000000
  • input.border#008000
  • input.foreground#00FF00
  • input.placeholderForeground#005500
  • inputOption.activeBorder#FFFFFF
  • inputValidation.infoBorder#FFFFFF
  • list.activeSelectionBackground#008000
  • list.activeSelectionForeground#00FF00
  • list.filterMatchBorder#FFFFFF
  • list.focusBackground#008000
  • list.focusForeground#00FF00
  • list.hoverBackground#002000
  • list.hoverForeground#00FF00
  • list.inactiveSelectionBackground#004000
  • list.inactiveSelectionForeground#00FF00
  • menu.background#000000
  • menu.border#008000
  • menu.foreground#00FF00
  • menu.selectionBackground#008000
  • menu.selectionBorder#FFFFFF
  • menu.selectionForeground#00FF00
  • menubar.selectionBorder#FFFFFF
  • merge.border#FFFFFF
  • notebook.cellBorderColor#FFFFFF
  • notebook.focusedCellBorder#FFFFFF
  • notebook.selectedCellBorder#FFFFFF
  • notificationCenter.border#FFFFFF
  • notifications.border#FFFFFF
  • notificationToast.border#FFFFFF
  • panel.background#000000
  • panel.border#008000
  • panel.dropBorder#FFFFFF
  • panelInput.border#FFFFFF
  • panelSection.border#FFFFFF
  • panelSectionHeader.border#FFFFFF
  • panelTitle.activeBorder#FFFFFF
  • peekView.border#FFFFFF
  • pickerGroup.border#FFFFFF
  • sash.hoverBorder#FFFFFF
  • scrollbarSlider.activeBackground#004000
  • scrollbarSlider.background#00400050
  • scrollbarSlider.hoverBackground#004000A0
  • selection.background#00200050
  • settings.checkboxBorder#FFFFFF
  • settings.dropdownBorder#FFFFFF
  • settings.numberInputBorder#FFFFFF
  • settings.textInputBorder#FFFFFF
  • sideBar.background#000000
  • sideBar.border#008000
  • sideBar.foreground#00FF00
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#008000
  • sideBarSectionHeader.foreground#00FF00
  • statusBar.background#000000
  • statusBar.border#008000
  • statusBar.debuggingBorder#FFFFFF
  • statusBar.foreground#00FF00
  • statusBar.noFolderBorder#FFFFFF
  • tab.activeBackground#000000
  • tab.activeBorder#00FF00
  • tab.activeBorderTop#FFFFFF
  • tab.activeForeground#00FF00
  • tab.activeModifiedBorder#FFFFFF
  • tab.border#008000
  • tab.hoverBackground#001000
  • tab.hoverBorder#008000
  • tab.inactiveBackground#001000
  • tab.inactiveForeground#005500
  • tab.inactiveModifiedBorder#FFFFFF
  • tab.lastPinnedBorder#FFFFFF
  • tab.unfocusedActiveBorder#FFFFFF
  • tab.unfocusedActiveBorderTop#FFFFFF
  • tab.unfocusedHoverBorder#004000
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3333FF
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#6666FF
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#66FF66
  • terminal.ansiBrightMagenta#FF66FF
  • terminal.ansiBrightRed#FF6666
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF66
  • terminal.ansiCyan#00FFFF
  • terminal.ansiGreen#33FF00
  • terminal.ansiMagenta#FF00FF
  • terminal.ansiRed#FF0000
  • terminal.ansiWhite#CCCCCC
  • terminal.ansiYellow#FFFF00
  • terminal.border#FFFFFF
  • terminal.foreground#00FF00
  • terminalCursor.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#6A9955
string#3FA34D
constant.numeric#2C662D
keyword, storage.type#519259
entity.name.function, entity.name.tag, support.function#27632A
variable#4C8B3A
constant.language#529658
entity.other.attribute-name#67AA6C

Shiki preview

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

Loading...