Skip to main content
Coding Theme

ServiceNow ® AI Experience Lab for VS Code

Publisher: ServiceNowThemes in package: 2

The all-in-one ServiceNow developer toolkit for AI native platform experience (AINPX) applications. Build, preview, deploy, and explore live instance data — all without leaving VS Code.

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.activeBorder#22c55e
  • activityBar.background#d8dee4
  • activityBar.border#b0b8c440
  • activityBar.foreground#111827
  • activityBar.inactiveForeground#6b7280
  • activityBarBadge.background#22c55e
  • activityBarBadge.foreground#111827
  • badge.background#22c55e
  • badge.foreground#111827
  • breadcrumb.activeSelectionForeground#22c55e
  • breadcrumb.focusForeground#111827
  • breadcrumb.foreground#374151
  • breadcrumbPicker.background#fffdf8
  • button.background#22c55e
  • button.foreground#111827
  • button.hoverBackground#16a34a
  • button.secondaryBackground#b0b8c4
  • button.secondaryForeground#111827
  • button.secondaryHoverBackground#909aa8
  • commandCenter.activeBackground#fffdf8
  • commandCenter.activeBorder#b0b8c4
  • commandCenter.activeForeground#111827
  • commandCenter.background#f0f2f4
  • commandCenter.border#b0b8c440
  • commandCenter.foreground#374151
  • descriptionForeground#374151
  • diffEditor.insertedLineBackground#22c55e0f
  • diffEditor.insertedTextBackground#22c55e14
  • diffEditor.removedLineBackground#dc26260f
  • diffEditor.removedTextBackground#dc262614
  • diffEditorGutter.insertedLineBackground#22c55e30
  • diffEditorGutter.removedLineBackground#dc262630
  • disabledForeground#6b7280
  • dropdown.background#fffdf8
  • dropdown.border#b0b8c4
  • dropdown.foreground#111827
  • dropdown.listBackground#fffdf8
  • editor.background#e5e9ed
  • editor.findMatchBackground#d9770640
  • editor.findMatchHighlightBackground#d9770626
  • editor.foreground#111827
  • editor.hoverHighlightBackground#2563eb14
  • editor.inactiveSelectionBackground#2563eb26
  • editor.lineHighlightBackground#fffdf821
  • editor.lineHighlightBorder#b0b8c430
  • editor.rangeHighlightBackground#2563eb0f
  • editor.selectionBackground#2563eb40
  • editor.selectionHighlightBackground#2563eb21
  • editor.wordHighlightBackground#2563eb21
  • editor.wordHighlightStrongBackground#2563eb30
  • editorBracketHighlight.foreground1#22c55e
  • editorBracketHighlight.foreground2#2563eb
  • editorBracketHighlight.foreground3#d97706
  • editorBracketHighlight.foreground4#7c3aed
  • editorBracketHighlight.foreground5#0891b2
  • editorBracketHighlight.foreground6#db2777
  • editorBracketMatch.background#2563eb21
  • editorBracketMatch.border#2563eb61
  • editorCursor.foreground#22c55e
  • editorError.foreground#dc2626
  • editorGroup.border#b0b8c4
  • editorGroup.dropBackground#2563eb21
  • editorGroupHeader.tabsBackground#f0f2f4
  • editorGroupHeader.tabsBorder#f0f2f4
  • editorGutter.addedBackground#22c55e80
  • editorGutter.deletedBackground#dc262680
  • editorGutter.modifiedBackground#2563eb80
  • editorHint.foreground#0d9488
  • editorHoverWidget.background#fffdf8
  • editorHoverWidget.border#b0b8c4
  • editorIndentGuide.activeBackground#b0b8c461
  • editorIndentGuide.background#b0b8c426
  • editorInfo.foreground#2563eb
  • editorLineNumber.activeForeground#374151
  • editorLineNumber.foreground#6b7280
  • editorOverviewRuler.addedForeground#22c55e80
  • editorOverviewRuler.deletedForeground#dc262680
  • editorOverviewRuler.modifiedForeground#2563eb80
  • editorRuler.foreground#b0b8c430
  • editorSuggestWidget.background#fffdf8
  • editorSuggestWidget.border#b0b8c4
  • editorSuggestWidget.foreground#111827
  • editorSuggestWidget.highlightForeground#22c55e
  • editorSuggestWidget.selectedBackground#b0b8c440
  • editorWarning.foreground#d97706
  • editorWhitespace.foreground#b0b8c440
  • editorWidget.background#fffdf8
  • editorWidget.border#b0b8c4
  • editorWidget.foreground#111827
  • errorForeground#dc2626
  • focusBorder#2563eb80
  • foreground#111827
  • gitDecoration.addedResourceForeground#22c55e
  • gitDecoration.conflictingResourceForeground#ea580c
  • gitDecoration.deletedResourceForeground#dc2626
  • gitDecoration.ignoredResourceForeground#6b7280
  • gitDecoration.modifiedResourceForeground#d97706
  • gitDecoration.stageDeletedResourceForeground#dc2626
  • gitDecoration.stageModifiedResourceForeground#22c55e
  • gitDecoration.untrackedResourceForeground#0d9488
  • icon.foreground#374151
  • input.background#fffdf8
  • input.border#b0b8c4
  • input.foreground#111827
  • input.placeholderForeground#6b7280
  • inputOption.activeBackground#2563eb40
  • inputOption.activeBorder#2563eb
  • inputOption.activeForeground#111827
  • inputValidation.errorBackground#fffdf8
  • inputValidation.errorBorder#dc2626
  • inputValidation.infoBackground#fffdf8
  • inputValidation.infoBorder#2563eb
  • inputValidation.warningBackground#fffdf8
  • inputValidation.warningBorder#d97706
  • keybindingLabel.background#b0b8c430
  • keybindingLabel.border#b0b8c461
  • keybindingLabel.bottomBorder#b0b8c480
  • keybindingLabel.foreground#111827
  • list.activeSelectionBackground#b0b8c440
  • list.activeSelectionForeground#111827
  • list.activeSelectionIconForeground#22c55e
  • list.errorForeground#dc2626
  • list.focusBackground#b0b8c436
  • list.focusForeground#111827
  • list.highlightForeground#22c55e
  • list.hoverBackground#b0b8c421
  • list.hoverForeground#111827
  • list.inactiveSelectionBackground#b0b8c426
  • list.inactiveSelectionForeground#111827
  • list.warningForeground#d97706
  • merge.currentContentBackground#22c55e14
  • merge.currentHeaderBackground#22c55e40
  • merge.incomingContentBackground#2563eb14
  • merge.incomingHeaderBackground#2563eb40
  • minimap.errorHighlight#dc262680
  • minimap.findMatchHighlight#d9770661
  • minimap.selectionHighlight#2563eb40
  • minimap.warningHighlight#d9770680
  • minimapSlider.activeBackground#b0b8c461
  • minimapSlider.background#b0b8c421
  • minimapSlider.hoverBackground#b0b8c440
  • notification.background#fffdf8
  • notification.border#b0b8c4
  • notification.foreground#111827
  • notificationCenterHeader.background#fffdf8
  • notificationCenterHeader.foreground#111827
  • panel.background#e5e9ed
  • panel.border#b0b8c440
  • panelTitle.activeBorder#22c55e
  • panelTitle.activeForeground#111827
  • panelTitle.inactiveForeground#6b7280
  • peekView.border#2563eb
  • peekViewEditor.background#fffdf8
  • peekViewEditor.matchHighlightBackground#d9770640
  • peekViewResult.background#f0f2f4
  • peekViewResult.fileForeground#111827
  • peekViewResult.lineForeground#374151
  • peekViewResult.matchHighlightBackground#d9770640
  • peekViewResult.selectionBackground#b0b8c440
  • peekViewResult.selectionForeground#111827
  • peekViewTitle.background#fffdf8
  • peekViewTitleDescription.foreground#374151
  • peekViewTitleLabel.foreground#111827
  • progressBar.background#22c55e
  • quickInput.background#fffdf8
  • quickInput.foreground#111827
  • quickInputList.focusBackground#b0b8c440
  • quickInputList.focusForeground#111827
  • quickInputList.focusIconForeground#22c55e
  • quickInputTitle.background#fffdf8
  • scrollbar.shadow#00000015
  • scrollbarSlider.activeBackground#b0b8c480
  • scrollbarSlider.background#b0b8c440
  • scrollbarSlider.hoverBackground#b0b8c461
  • selection.background#2563eb40
  • settings.checkboxBackground#fffdf8
  • settings.checkboxBorder#b0b8c4
  • settings.dropdownBackground#fffdf8
  • settings.dropdownBorder#b0b8c4
  • settings.headerForeground#111827
  • settings.modifiedItemIndicator#22c55e
  • settings.numberInputBackground#fffdf8
  • settings.numberInputBorder#b0b8c4
  • settings.textInputBackground#fffdf8
  • settings.textInputBorder#b0b8c4
  • sideBar.background#f0f2f4
  • sideBar.border#b0b8c440
  • sideBar.foreground#374151
  • sideBarSectionHeader.background#fffdf8
  • sideBarSectionHeader.border#b0b8c430
  • sideBarSectionHeader.foreground#374151
  • sideBarTitle.foreground#111827
  • statusBar.background#16a34a
  • statusBar.border#b0b8c440
  • statusBar.debuggingBackground#2563eb
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#fffdf8
  • statusBar.noFolderForeground#374151
  • statusBarItem.activeBackground#00000030
  • statusBarItem.hoverBackground#00000020
  • statusBarItem.prominentBackground#22c55e30
  • statusBarItem.prominentForeground#22c55e
  • statusBarItem.remoteBackground#22c55e
  • statusBarItem.remoteForeground#111827
  • tab.activeBackground#e5e9ed
  • tab.activeBorderTop#22c55e
  • tab.activeForeground#111827
  • tab.border#f0f2f4
  • tab.hoverBackground#fffdf8
  • tab.inactiveBackground#f0f2f4
  • tab.inactiveForeground#6b7280
  • terminal.ansiBlack#d8dee4
  • terminal.ansiBlue#2563eb
  • terminal.ansiBrightBlack#6b7280
  • terminal.ansiBrightBlue#3b82f6
  • terminal.ansiBrightCyan#06b6d4
  • terminal.ansiBrightGreen#22c55e
  • terminal.ansiBrightMagenta#8b5cf6
  • terminal.ansiBrightRed#ef4444
  • terminal.ansiBrightWhite#111827
  • terminal.ansiBrightYellow#eab308
  • terminal.ansiCyan#0891b2
  • terminal.ansiGreen#22c55e
  • terminal.ansiMagenta#7c3aed
  • terminal.ansiRed#dc2626
  • terminal.ansiWhite#111827
  • terminal.ansiYellow#d97706
  • terminal.background#e5e9ed
  • terminal.foreground#111827
  • terminal.selectionBackground#2563eb40
  • terminalCursor.foreground#22c55e
  • textBlockQuote.background#fffdf8
  • textBlockQuote.border#b0b8c4
  • textCodeBlock.background#fffdf8
  • textLink.activeForeground#1d4ed8
  • textLink.foreground#2563eb
  • titleBar.activeBackground#d8dee4
  • titleBar.activeForeground#111827
  • titleBar.border#b0b8c440
  • titleBar.inactiveBackground#d8dee4
  • titleBar.inactiveForeground#6b7280
  • tree.indentGuidesStroke#b0b8c440
  • walkThrough.embeddedEditorBackground#f0f2f4
  • welcomePage.progress.foreground#22c55e
  • welcomePage.tileBackground#fffdf8
  • welcomePage.tileBorder#b0b8c4
  • widget.shadow#00000015

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b7280italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier#7c3aed—
string, string.quoted, string.template#d97706—
constant.character.escape#ea580c—
entity.name.function, support.function, meta.function-call#2563eb—
variable.parameter#ea580citalic
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#0d9488—
entity.name.type.interface, entity.name.type.parameter#0d9488italic
variable, variable.other#111827—
variable.other.constant, constant.other, support.constant#0891b2—
constant.numeric#ea580c—
constant.language#7c3aed—
keyword.operator, punctuation.accessor#374151—
punctuation.definition, punctuation.separator, punctuation.terminator, meta.brace#374151—
entity.name.tag, punctuation.definition.tag#db2777—
entity.other.attribute-name#0d9488italic
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#db2777—
support.type.property-name.css#2563eb—
support.constant.property-value.css, constant.other.color.rgb-value.hex.css#d97706—
support.type.property-name.json#2563eb—
string.regexp#0891b2—
markup.heading, entity.name.section.markdown#22c55ebold
markup.bold#d97706bold
markup.italic#7c3aeditalic
markup.underline.link#2563eb—
markup.inline.raw, markup.fenced_code.block#0d9488—