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.

  • button.background#e5e5e5
  • button.border#e5e5e5
  • button.foreground#0a0a0a
  • button.hoverBackground#d4d4d4
  • button.secondaryBackground#171717
  • button.secondaryForeground#fafafa
  • button.secondaryHoverBackground#262626
  • button.separator#737373
  • charts.blue#3b82f6
  • charts.green#22c55e
  • charts.orange#f97316
  • charts.purple#8b5cf6
  • charts.red#ef4444
  • charts.yellow#eab308
  • contrastActiveBorder#e5e5e5
  • contrastBorder#d4d4d4
  • debugConsole.errorForeground#ef4444
  • descriptionForeground#f5f5f5
  • editor.background#0a0a0a
  • editor.findMatchBackground#d4d4d4
  • editor.findMatchBorder#a3a3a3d8
  • editor.findMatchHighlightBackground#a3a3a3d8
  • editor.findRangeHighlightBackground#a3a3a3d8
  • editor.foreground#fafafa
  • editor.hoverHighlightBackground#404040bd
  • editor.lineHighlightBorder#a3a3a3d8
  • editor.selectionBackground#e5e5e5
  • editor.selectionForeground#0a0a0a
  • editor.selectionHighlightBackground#525252cb
  • editorBracketHighlight.unexpectedBracket.foreground#ef4444
  • editorHoverWidget.background#171717
  • editorHoverWidget.statusBarBackground#171717
  • editorLightBulb.foreground#f59e0b
  • editorLightBulbAutoFix.foreground#f97316
  • editorLineNumber.activeForeground#fafafa
  • editorLineNumber.foreground#a3a3a3
  • editorMarkerNavigation.background#0a0a0a
  • editorMarkerNavigationError.headerBackground#171717
  • editorMarkerNavigationInfo.headerBackground#171717
  • editorMarkerNavigationWarning.headerBackground#171717
  • editorOverviewRuler.errorForeground#ef4444
  • editorOverviewRuler.modifiedForeground#6b7280
  • editorOverviewRuler.warningForeground#f97316
  • editorWidget.background#171717
  • errorForeground#ef4444
  • focusBorder#d4d4d4
  • foreground#fafafa
  • input.background#171717
  • input.border#f5f5f5
  • input.foreground#fafafa
  • input.placeholderForeground#a3a3a3
  • inputOption.activeBackground#d4d4d4
  • inputOption.activeBorder#E5E5E5
  • inputOption.activeForeground#0A0A0A
  • minimap.errorHighlight#ef4444
  • minimap.warningHighlight#f97316
  • panelTitle.inactiveForeground#d4d4d4
  • peekViewEditor.background#171717
  • peekViewResult.background#0a0a0a
  • peekViewTitle.background#0a0a0a
  • progressBar.background#262626
  • selection.background#737373
  • settings.modifiedItemIndicator#737373
  • statusBar.foreground#e5e5e5
  • statusBarItem.errorForeground#ef4444
  • tab.hoverBackground#171717
  • terminal.ansiBlack#0a0a0a
  • terminal.ansiBlue#3b82f6
  • terminal.ansiBrightBlack#030712
  • terminal.ansiBrightBlue#60a5fa
  • terminal.ansiBrightCyan#22d3ee
  • terminal.ansiBrightGreen#4ade80
  • terminal.ansiBrightMagenta#fb7185
  • terminal.ansiBrightRed#ef4444
  • terminal.ansiBrightWhite#fafafa
  • terminal.ansiBrightYellow#facc15
  • terminal.ansiCyan#06b6d4
  • terminal.ansiGreen#22c55e
  • terminal.ansiMagenta#f87171
  • terminal.ansiRed#dc2626
  • terminal.ansiWhite#fafafa
  • terminal.ansiYellow#eab308
  • terminal.foreground#f5f5f5
  • textLink.activeForeground#60a5fa
  • textLink.foreground#93c5fd

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
meta.diff.header#171717—
comment#a3a3a3—
constant.language#60a5fa—
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#86efac—
constant.regexp#f9a8d4—
entity.name.tag#60a5fa—
entity.name.tag.css#fde68a—
entity.other.attribute-name#bae6fd—
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name#fde68a—
invalid#f87171—
markup.underline—underline
markup.bold—bold
markup.heading#3b82f6—
markup.italic—italic
markup.inserted#22c55e—
markup.deleted#f87171—
markup.changed#60a5fa—
meta.selector#fde68a—
punctuation.definition.tag#808080—
meta.preprocessor#60a5fa—
meta.preprocessor.string#f87171—
meta.preprocessor.numeric#b5cea8—
meta.structure.dictionary.key.python#bae6fd—
storage#60a5fa—
storage.type#60a5fa—
storage.modifier#60a5fa—
string#fdba74—
string.tag#fdba74—
string.value#fdba74—
string.regexp#fdba74—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#60a5fa—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less#d4d4d4—
keyword#60a5fa—
keyword.control#60a5fa—
keyword.operator#d4d4d4—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#60a5fa—
keyword.other.unit#b5cea8—
support.function.git-rebase#d4d4d4—
constant.sha.git-rebase#b5cea8—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4—
variable.language.this#60a5fa—
entity.name.function, support.function, support.constant.handlebars#fde68a—
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type#6ee7b7—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#6ee7b7—
keyword.control#fca5a5—
variable, meta.definition.variable.name, support.variable#bae6fd—
meta.object-literal.key, meta.object-literal.key entity.name.function#bae6fd—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#f87171—