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.boldbold
markup.italicitalic