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.boldbold
markup.italicitalic
ALchemy by Yahya Touil - VS Code Theme