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#0F172A
  • activityBar.border#1E293B
  • activityBar.foreground#94A3B8
  • activityBar.inactiveForeground#4B5563
  • activityBarBadge.background#38BDF8
  • activityBarBadge.foreground#0F172A
  • badge.background#38BDF8
  • badge.foreground#0F172A
  • breadcrumb.activeSelectionForeground#E2E8F0
  • breadcrumb.foreground#64748B
  • button.background#2563EB
  • button.foreground#FFFFFF
  • button.hoverBackground#3B82F6
  • descriptionForeground#94A3B8
  • diffEditor.insertedTextBackground#34D39915
  • diffEditor.removedTextBackground#F8717115
  • dropdown.background#0F172A
  • dropdown.border#334155
  • dropdown.foreground#CBD5E1
  • editor.background#111827
  • editor.findMatchBackground#F59E0B44
  • editor.findMatchHighlightBackground#F59E0B22
  • editor.foreground#E2E8F0
  • editor.hoverHighlightBackground#38BDF822
  • editor.lineHighlightBackground#1E2D4520
  • editor.selectionBackground#2D4A7A
  • editor.selectionHighlightBackground#2D4A7A50
  • editor.wordHighlightBackground#38BDF822
  • editor.wordHighlightStrongBackground#38BDF833
  • editorBracketMatch.background#38BDF830
  • editorBracketMatch.border#38BDF8
  • editorCursor.foreground#38BDF8
  • editorGroupHeader.tabsBackground#0F172A
  • editorGroupHeader.tabsBorder#1E293B
  • editorGutter.addedBackground#34D399
  • editorGutter.background#111827
  • editorGutter.deletedBackground#F87171
  • editorGutter.modifiedBackground#FBBF24
  • editorIndentGuide.background#1E293B88
  • editorInlayHint.background#1E293B
  • editorInlayHint.foreground#94A3B8
  • editorLineNumber.activeForeground#94A3B8
  • editorLineNumber.foreground#4B5563
  • editorLink.activeForeground#38BDF8
  • editorOverviewRuler.addedForeground#34D399
  • editorOverviewRuler.deletedForeground#F87171
  • editorOverviewRuler.errorForeground#F87171
  • editorOverviewRuler.findMatchForeground#38BDF855
  • editorOverviewRuler.modifiedForeground#FBBF24
  • editorOverviewRuler.warningForeground#FBBF24
  • editorRuler.foreground#1E293B
  • editorSuggestWidget.foreground#E2E8F0
  • editorSuggestWidget.highlightForeground#38BDF8
  • editorSuggestWidget.selectedBackground#1E3A5F
  • errorForeground#F87171
  • focusBorder#38BDF8
  • foreground#CBD5E1
  • gitDecoration.addedResourceForeground#34D399
  • gitDecoration.conflictingResourceForeground#FBBF24
  • gitDecoration.deletedResourceForeground#F87171
  • gitDecoration.ignoredResourceForeground#475569
  • gitDecoration.modifiedResourceForeground#60A5FA
  • gitDecoration.untrackedResourceForeground#34D399
  • input.background#0F172A
  • input.border#334155
  • input.foreground#E2E8F0
  • input.placeholderForeground#4B5563
  • inputOption.activeBackground#1E3A5F
  • inputOption.activeBorder#38BDF8
  • list.activeSelectionBackground#1E3A5F
  • list.activeSelectionForeground#E2E8F0
  • list.highlightForeground#38BDF8
  • list.hoverBackground#1E293B
  • list.inactiveSelectionBackground#1A2744
  • menu.background#0F172A
  • menu.border#334155
  • menu.foreground#CBD5E1
  • menu.selectionBackground#1E3A5F
  • menu.selectionForeground#E2E8F0
  • menu.separatorBackground#1E293B
  • notifications.background#0F172A
  • notifications.border#334155
  • notifications.foreground#E2E8F0
  • panel.background#0F172A
  • panel.border#1E293B
  • panelTitle.activeBorder#38BDF8
  • panelTitle.activeForeground#E2E8F0
  • panelTitle.inactiveForeground#64748B
  • peekViewEditor.background#0D1526
  • peekViewResult.background#0F172A
  • peekViewResult.selectionBackground#1E3A5F
  • peekViewTitle.background#0D1526
  • peekViewTitleDescription.foreground#94A3B8
  • peekViewTitleLabel.foreground#E2E8F0
  • progressBar.background#38BDF8
  • scrollbarSlider.activeBackground#60748080
  • scrollbarSlider.background#33415580
  • scrollbarSlider.hoverBackground#47556980
  • selection.background#2D4A7A
  • sideBar.background#0F172A
  • sideBar.border#1E293B
  • sideBar.foreground#CBD5E1
  • sideBarSectionHeader.background#0F172A
  • sideBarSectionHeader.border#1E293B
  • sideBarSectionHeader.foreground#64748B
  • sideBarTitle.foreground#64748B
  • statusBar.background#0D1526
  • statusBar.border#1E293B
  • statusBar.foreground#94A3B8
  • statusBar.noFolderBackground#0F172A
  • statusBarItem.hoverBackground#1E293B
  • statusBarItem.remoteBackground#38BDF8
  • statusBarItem.remoteForeground#0F172A
  • tab.activeBackground#111827
  • tab.activeBorderTop#38BDF8
  • tab.activeForeground#E2E8F0
  • tab.border#1E293B
  • tab.hoverBackground#1E293B
  • tab.inactiveBackground#0F172A
  • tab.inactiveForeground#64748B
  • terminal.ansiBlack#1E293B
  • terminal.ansiBlue#60A5FA
  • terminal.ansiBrightBlack#475569
  • terminal.ansiBrightBlue#93C5FD
  • terminal.ansiBrightCyan#7DD3FC
  • terminal.ansiBrightGreen#6EE7B7
  • terminal.ansiBrightMagenta#C4B5FD
  • terminal.ansiBrightRed#FCA5A5
  • terminal.ansiBrightWhite#F8FAFC
  • terminal.ansiBrightYellow#FDE68A
  • terminal.ansiCyan#38BDF8
  • terminal.ansiGreen#34D399
  • terminal.ansiMagenta#A78BFA
  • terminal.ansiRed#F87171
  • terminal.ansiWhite#E2E8F0
  • terminal.ansiYellow#FBBF24
  • terminal.background#0F172A
  • terminal.foreground#CBD5E1
  • terminal.selectionBackground#2D4A7A
  • terminalCursor.foreground#38BDF8
  • titleBar.activeBackground#0F172A
  • titleBar.activeForeground#CBD5E1
  • titleBar.border#1E293B
  • titleBar.inactiveBackground#0F172A
  • titleBar.inactiveForeground#64748B
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, punctuation.definition.comment#4B6080italic
string, string.quoted, string.quoted.single, string.quoted.double, punctuation.definition.string#FB923C—
constant.character.escape#FB923C—
constant.numeric#C084FC—
constant.language#C084FCitalic
constant.character, constant.other#C084FC—
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#60A5FAbold
keyword.other.tableextension.al, keyword.other.pageextension.al, keyword.other.reportextension.al, keyword.other.enumextension.al, keyword.other.interfaceextension.al, keyword.other.permissionsetextension.al#60A5FAbold italic
entity.name.type.al, entity.name.class.al, entity.name.object.al#34D399bold
entity.name.function.al, meta.function.al entity.name.function#22D3EEbold
entity.name.function.trigger.al, entity.name.trigger.al, support.function.trigger.al#22D3EEitalic
keyword.other.event.al, storage.type.event.al, keyword.other.eventsubscriber.al#22D3EEbold italic
entity.name.field.al, variable.other.field.al#5EEAD4—
support.type.property-name.al, entity.other.attribute-name.al#2DD4BF—
variable.language.rec.al, variable.other.rec.al, variable.language.al#86EFACbold
support.type.al, storage.type.primitive.al#818CF8—
constant.other.enum.al, variable.other.enummember.al#C084FC—
storage.modifier.al, keyword.other.local.al#60A5FAitalic
keyword, keyword.control, keyword.other, storage.type, storage.modifier#60A5FA—
keyword.operator#94A3B8—
keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational#94A3B8—
punctuation#64748B—
variable.other#E2E8F0—
variable.language.this#86EFAC—
variable.parameter#FCA5A5—
entity.name.function, support.function.any-method, variable.function#22D3EEbold
support.function#22D3EE—
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#818CF8—
entity.other.attribute-name#2DD4BF—
support.type.property-name.json#60A5FA—
entity.name.tag.yaml#60A5FA—
entity.name.tag#60A5FA—
entity.name.namespace, entity.name.module#818CF8—
invalid#F87171underline
markup.heading#60A5FAbold
markup.underline.link#22D3EE—
markup.bold—bold
markup.italic—italic
ALchemy by Yahya Touil - VS Code Theme