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.background#F1F5F9
  • activityBar.border#E2E8F0
  • activityBar.foreground#475569
  • activityBar.inactiveForeground#94A3B8
  • activityBarBadge.background#2563EB
  • activityBarBadge.foreground#FFFFFF
  • badge.background#2563EB
  • badge.foreground#FFFFFF
  • button.background#2563EB
  • button.foreground#FFFFFF
  • diffEditor.insertedTextBackground#05966915
  • diffEditor.removedTextBackground#DC262615
  • dropdown.background#FFFFFF
  • dropdown.border#CBD5E1
  • editor.background#F9FAFB
  • editor.findMatchBackground#FCD34D60
  • editor.foreground#1E293B
  • editor.hoverHighlightBackground#0284C715
  • editor.lineHighlightBackground#EFF6FF
  • editor.selectionBackground#BFDBFE
  • editor.wordHighlightBackground#0284C720
  • editorBracketMatch.background#BFDBFE
  • editorBracketMatch.border#2563EB
  • editorCursor.foreground#1D4ED8
  • editorGroupHeader.tabsBackground#F1F5F9
  • editorGutter.addedBackground#059669
  • editorGutter.background#F9FAFB
  • editorGutter.deletedBackground#DC2626
  • editorGutter.modifiedBackground#D97706
  • editorIndentGuide.background#E2E8F0
  • editorLineNumber.activeForeground#475569
  • editorLineNumber.foreground#94A3B8
  • editorLink.activeForeground#2563EB
  • editorRuler.foreground#E2E8F0
  • editorSuggestWidget.foreground#1E293B
  • editorSuggestWidget.highlightForeground#2563EB
  • editorSuggestWidget.selectedBackground#DBEAFE
  • focusBorder#2563EB
  • foreground#334155
  • gitDecoration.addedResourceForeground#059669
  • gitDecoration.deletedResourceForeground#DC2626
  • gitDecoration.ignoredResourceForeground#94A3B8
  • gitDecoration.modifiedResourceForeground#2563EB
  • input.background#FFFFFF
  • input.border#CBD5E1
  • input.foreground#1E293B
  • list.activeSelectionBackground#DBEAFE
  • list.activeSelectionForeground#1E293B
  • list.highlightForeground#2563EB
  • list.hoverBackground#E2E8F0
  • menu.background#FFFFFF
  • menu.border#E2E8F0
  • menu.foreground#334155
  • menu.selectionBackground#DBEAFE
  • panel.background#F1F5F9
  • panel.border#E2E8F0
  • panelTitle.activeBorder#2563EB
  • panelTitle.activeForeground#1E293B
  • peekViewEditor.background#EFF6FF
  • peekViewResult.background#F1F5F9
  • peekViewTitle.background#EFF6FF
  • progressBar.background#2563EB
  • scrollbarSlider.background#CBD5E180
  • sideBar.background#F1F5F9
  • sideBar.border#E2E8F0
  • sideBar.foreground#334155
  • sideBarSectionHeader.background#F1F5F9
  • sideBarSectionHeader.border#E2E8F0
  • sideBarTitle.foreground#64748B
  • statusBar.background#E2E8F0
  • statusBar.border#CBD5E1
  • statusBar.foreground#475569
  • statusBarItem.remoteBackground#2563EB
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#F9FAFB
  • tab.activeBorderTop#2563EB
  • tab.activeForeground#1E293B
  • tab.border#E2E8F0
  • tab.inactiveBackground#F1F5F9
  • tab.inactiveForeground#64748B
  • terminal.ansiBlack#334155
  • terminal.ansiBlue#2563EB
  • terminal.ansiBrightBlack#64748B
  • terminal.ansiCyan#0891B2
  • terminal.ansiGreen#059669
  • terminal.ansiMagenta#7C3AED
  • terminal.ansiRed#DC2626
  • terminal.ansiWhite#F8FAFC
  • terminal.ansiYellow#D97706
  • terminal.background#F1F5F9
  • terminal.foreground#1E293B
  • terminal.selectionBackground#BFDBFE
  • titleBar.activeBackground#F1F5F9
  • titleBar.activeForeground#334155
  • titleBar.border#E2E8F0
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, punctuation.definition.comment#94A3B8italic
string, string.quoted, string.quoted.single, string.quoted.double, punctuation.definition.string#EA580C—
constant.character.escape#EA580C—
constant.numeric#7C3AED—
constant.language#7C3AEDitalic
constant.character, constant.other#7C3AED—
keyword.other.table.al, keyword.other.page.al, keyword.other.codeunit.al, keyword.other.report.al, keyword.other.xmlport.al, keyword.other.enum.al, keyword.other.interface.al, keyword.other.permissionset.al, keyword.other.object.al, storage.type.object.al, keyword.other.query.al, keyword.other.controladdin.al, keyword.other.entitlement.al, keyword.other.profile.al, keyword.other.requestpage.al#1D4ED8bold
keyword.other.tableextension.al, keyword.other.pageextension.al, keyword.other.reportextension.al, keyword.other.enumextension.al, keyword.other.interfaceextension.al, keyword.other.permissionsetextension.al#1D4ED8bold italic
entity.name.type.al, entity.name.class.al, entity.name.object.al#047857bold
entity.name.function.al, meta.function.al entity.name.function#0E7490bold
entity.name.function.trigger.al, entity.name.trigger.al, support.function.trigger.al#0891B2italic
keyword.other.event.al, storage.type.event.al, keyword.other.eventsubscriber.al#0891B2bold italic
entity.name.field.al, variable.other.field.al#0D9488—
support.type.property-name.al, entity.other.attribute-name.al#0F766E—
variable.language.rec.al, variable.other.rec.al, variable.language.al#047857bold
support.type.al, storage.type.primitive.al#6D28D9—
constant.other.enum.al, variable.other.enummember.al#7C3AED—
storage.modifier.al, keyword.other.local.al#1D4ED8italic
keyword, keyword.control, keyword.other, storage.type, storage.modifier#1D4ED8—
keyword.operator#475569—
keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational#475569—
punctuation#94A3B8—
variable.other#1E293B—
variable.language.this#047857—
variable.parameter#DC2626—
entity.name.function, support.function.any-method, variable.function#0E7490bold
support.function#0E7490—
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#6D28D9—
entity.other.attribute-name#0F766E—
support.type.property-name.json#1D4ED8—
entity.name.tag.yaml#1D4ED8—
entity.name.tag#1D4ED8—
entity.name.namespace, entity.name.module#6D28D9—
invalid#F87171underline
markup.heading#1D4ED8bold
markup.underline.link#0E7490—
markup.bold—bold
markup.italic—italic