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.

  • activityBarBadge.background#0a0a0a
  • activityBarBadge.foreground#fafafa
  • badge.background#0a0a0a
  • badge.foreground#fafafa
  • button.background#0a0a0a
  • button.border#0a0a0a
  • button.foreground#fafafa
  • button.hoverBackground#262626
  • button.secondaryBackground#f5f5f5
  • button.secondaryForeground#0a0a0a
  • button.secondaryHoverBackground#d4d4d4
  • button.separator#737373
  • charts.blue#3b82f6
  • charts.green#22c55e
  • charts.orange#f97316
  • charts.purple#8b5cf6
  • charts.red#ef4444
  • charts.yellow#eab308
  • contrastActiveBorder#0a0a0a
  • contrastBorder#262626
  • debugConsole.errorForeground#ef4444
  • descriptionForeground#262626
  • editor.background#fafafa
  • editor.findMatchBackground#262626
  • editor.findMatchBorder#525252
  • editor.findMatchHighlightBackground#525252e1
  • editor.findRangeHighlightBackground#525252e1
  • editor.foreground#0a0a0a
  • editor.hoverHighlightBackground#a3a3a3d7
  • editor.lineHighlightBorder#525252
  • editor.selectionBackground#0a0a0a
  • editor.selectionForeground#fafafa
  • editor.selectionHighlightBackground#e5e5e5dd
  • editor.selectionHighlightBorder#0a0a0a
  • editorBracketHighlight.unexpectedBracket.foreground#ef4444
  • editorHoverWidget.background#f5f5f5
  • editorHoverWidget.statusBarBackground#f5f5f5
  • editorLightBulb.foreground#f59e0b
  • editorLightBulbAutoFix.foreground#f97316
  • editorLineNumber.activeForeground#0a0a0a
  • editorLineNumber.foreground#525252
  • editorLink.activeForeground#93c5fd
  • editorMarkerNavigation.background#fafafa
  • editorMarkerNavigationError.headerBackground#f5f5f5
  • editorMarkerNavigationInfo.headerBackground#f5f5f5
  • editorMarkerNavigationWarning.headerBackground#f5f5f5
  • editorOverviewRuler.errorForeground#ef4444
  • editorOverviewRuler.modifiedForeground#6b7280
  • editorOverviewRuler.warningForeground#f97316
  • editorWidget.background#f5f5f5
  • errorForeground#ef4444
  • focusBorder#262626
  • foreground#171717
  • input.background#f5f5f5
  • input.border#262626
  • input.foreground#0a0a0a
  • input.placeholderForeground#525252
  • inputOption.activeBackground#262626
  • inputOption.activeBorder#0a0a0a
  • inputOption.activeForeground#fafafa
  • minimap.errorHighlight#ef4444
  • minimap.warningHighlight#f97316
  • panelTitle.inactiveForeground#262626
  • panelTitleBadge.background#0a0a0a
  • panelTitleBadge.foreground#fafafa
  • peekViewEditor.background#f5f5f5
  • peekViewResult.background#fafafa
  • peekViewTitle.background#fafafa
  • progressBar.background#d4d4d4
  • selection.background#737373
  • settings.modifiedItemIndicator#737373
  • statusBar.foreground#0a0a0a
  • statusBarItem.errorForeground#ef4444
  • tab.hoverBackground#f5f5f5
  • terminal.ansiBlack#f5f5f5
  • terminal.ansiBlue#2563eb
  • terminal.ansiBrightBlack#fafafa
  • terminal.ansiBrightBlue#3b82f6
  • terminal.ansiBrightCyan#06b6d4
  • terminal.ansiBrightGreen#22c55e
  • terminal.ansiBrightMagenta#f43f5e
  • terminal.ansiBrightRed#ef4444
  • terminal.ansiBrightWhite#0a0a0a
  • terminal.ansiBrightYellow#fde047
  • terminal.ansiCyan#0891b2
  • terminal.ansiGreen#16a34a
  • terminal.ansiMagenta#e11d48
  • terminal.ansiRed#dc2626
  • terminal.ansiWhite#0a0a0a
  • terminal.ansiYellow#facc15
  • terminal.foreground#262626
  • textLink.activeForeground#93c5fd
  • textLink.foreground#60a5fa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
meta.diff.header#171717—
comment#737373—
constant.language#0ea5e9—
constant.numeric, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#22c55e—
constant.regexp#ec4899—
entity.name.tag#0ea5e9—
entity.name.tag.css#eab308—
entity.other.attribute-name#0284c7—
source.css entity.other.attribute-name, source.css.less entity.other.attribute-name.id, source.scss entity.other.attribute-name#eab308—
invalid#ef4444—
markup.underline—underline
markup.bold—bold
markup.heading#3b82f6—
markup.italic—italic
markup.inserted#22c55e—
markup.deleted#f87171—
markup.changed#0ea5e9—
meta.selector#eab308—
punctuation.definition.tag#808080—
meta.preprocessor#0ea5e9—
meta.preprocessor.string#f87171—
meta.preprocessor.numeric#10b981—
meta.structure.dictionary.key.python#0ea5e9—
storage#0ea5e9—
storage.type#0ea5e9—
storage.modifier#0ea5e9—
string#f59e0b—
string.tag#f59e0b—
string.value#f59e0b—
string.regexp#f59e0b—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#0ea5e9—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less#14b8a6—
keyword#0ea5e9—
keyword.control#0ea5e9—
keyword.operator, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python#0ea5e9—
keyword.other.unit#b5cea8—
support.function.git-rebase#d4d4d4—
constant.sha.git-rebase#14b8a6—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4—
variable.language.this#0ea5e9—
entity.name.function, support.function, support.constant.handlebars#f59e0b—
meta.return-type, support.class, support.type, entity.name.type, entity.name.class, source.cs storage.type#14b8a6—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#14b8a6—
keyword.control#fb7185—
variable, meta.definition.variable.name, support.variable#3b82f6—
meta.object-literal.key, meta.object-literal.key entity.name.function#3b82f6—
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#fb7185—