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#FFD700
  • activityBar.background#000000
  • activityBar.foreground#FFD700
  • activityBar.inactiveForeground#504500
  • activityBarBadge.background#FFD700
  • activityBarBadge.foreground#000000
  • badge.background#FFD700
  • badge.foreground#000000
  • button.background#4D4000
  • button.border#FFD70060
  • button.foreground#FFD700
  • button.hoverBackground#6B5900
  • button.secondaryBackground#1A1A1A
  • button.secondaryForeground#EAEAEA
  • checkbox.background#1A1A1A
  • checkbox.border#FFD70060
  • checkbox.foreground#FFD700
  • debugToolBar.background#000000
  • dropdown.background#1A1A1A
  • dropdown.border#FFD70060
  • editor.background#0A0A0A
  • editor.findMatchBackground#E39B4180
  • editor.findMatchBorder#E39B41
  • editor.findMatchHighlightBackground#E39B4140
  • editor.foreground#EAEAEA
  • editor.lineHighlightBackground#1A1A1A20
  • editor.lineHighlightBorder#FFD70025
  • editor.selectionBackground#FFD70030
  • editor.selectionHighlightBackground#FFD70020
  • editorBracketMatch.background#FFD70020
  • editorBracketMatch.border#FFD700
  • editorError.foreground#F44747
  • editorGutter.addedBackground#FFD70080
  • editorGutter.deletedBackground#F4474780
  • editorGutter.modifiedBackground#E39B4180
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#1A1A1A
  • editorHoverWidget.statusBarBackground#050505
  • editorLineNumber.activeForeground#6C6C6C
  • editorLineNumber.foreground#5A5A5A
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#1A1A1A
  • editorSuggestWidget.highlightForeground#FFD700
  • editorSuggestWidget.selectedBackground#4D4000
  • editorWarning.foreground#E39B41
  • editorWidget.background#000000
  • editorWidget.border#1A1A1A
  • errorForeground#F44747
  • focusBorder#FFD700
  • foreground#EAEAEA
  • input.background#1A1A1A
  • input.border#FFD70060
  • input.placeholderForeground#3A3A3A
  • inputOption.activeBackground#4D4000
  • inputOption.activeForeground#FFD700
  • list.activeSelectionBackground#4D4000
  • list.activeSelectionForeground#FFD700
  • list.focusBackground#1A1A1A40
  • list.focusForeground#EAEAEA
  • list.highlightForeground#FFD700
  • list.hoverBackground#1A1A1A40
  • list.inactiveSelectionBackground#1A1A1A
  • notificationCenterHeader.background#000000
  • notifications.background#1A1A1A
  • notifications.border#1A1A1A
  • panel.background#000000
  • panel.border#1A1A1A50
  • panelTitle.activeForeground#FFD700
  • peekView.border#FFD700
  • peekViewEditor.background#050505
  • peekViewResult.background#000000
  • peekViewResult.selectionBackground#4D4000
  • peekViewTitle.background#000000
  • progressBar.background#FFD700
  • scrollbarSlider.activeBackground#FFD70080
  • scrollbarSlider.background#FFD70030
  • scrollbarSlider.hoverBackground#FFD70050
  • settings.focusedRowBackground#1A1A1A20
  • settings.focusedRowBorder#FFD700
  • settings.headerForeground#FFD700
  • settings.textInputBackground#1A1A1A
  • sideBar.background#000000
  • statusBar.background#000000
  • statusBar.border#1A1A1A50
  • statusBar.debuggingBackground#4D4000
  • statusBar.debuggingForeground#FFD700
  • statusBar.foreground#7D7D7D
  • statusBarItem.remoteBackground#4D4000
  • statusBarItem.remoteForeground#FFD700
  • tab.activeBackground#050505
  • tab.activeBorder#FFD700
  • tab.activeForeground#EAEAEA
  • tab.border#1A1A1A
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#6C7A90
  • terminal.ansiBlue#58A6FF
  • terminal.ansiBrightGreen#FFF000
  • terminal.ansiCyan#7FDBCA
  • terminal.ansiGreen#FFD700
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#F44747
  • terminal.ansiWhite#EAEAEA
  • terminal.ansiYellow#E39B41

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control, storage.type, storage.modifier, keyword.operator, variable.language.this, variable.language.super#A0A0A0—
entity.name.function#FFD700italic bold
entity.name.class, support.class.component#FFD700bold
constant.numeric, constant.language#E39B41—
string, punctuation.definition.string#B5B5A0—
variable.other.readwrite, variable, variable.parameter#EAEAEA—
entity.name.tag, meta.object-literal.key, string.unquoted.label.js, variable.other.object.key.js#6C7A90—
variable.object.property, support.variable.property, variable.other.object.property#EAEAEA—
entity.name.type, support.type, support.class#7FDBCA—
keyword.operator.type, storage.modifier.satisfies#A0A0A0—
comment, punctuation.definition.comment#657B8Aitalic
invalid, invalid.illegal#F44747bold underline