KUKA KRL Extension

Name: KUKA KRL Extension
Author: LiskinLabs

Publisher: LiskinLabsThemes in package: 67

Professional language support for KUKA Robot Language (KRL) in VS Code

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

KUKA KRL Extension — KRL Bearded Stained Purple

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#a948ef26
activityBar.activeBorder#a948ef
activityBar.background#1b1524
activityBar.border#120e18
activityBar.dropBorder#5c497b33
activityBar.foreground#a948ef
activityBar.inactiveForeground#574c69
activityBarBadge.background#a948ef
activityBarBadge.foreground#1b1524
activityBarTop.activeBorder#a948ef
activityBarTop.dropBorder#5c497b33
activityBarTop.foreground#a948ef
activityBarTop.inactiveForeground#50485c
badge.background#a948ef
badge.foreground#1b1524
breadcrumb.background#20192b
breadcrumbPicker.background#2c223b
button.background#a948ef80
button.border#ffffff26
button.foreground#d9aff8
button.hoverBackground#a948ef99
button.secondaryBackground#312642
button.secondaryForeground#d2cadfcc
button.secondaryHoverBackground#382c4b
button.separator#ffffff4d
charts.blue#3398DB
charts.foreground#d2cadf
charts.green#37ae6f
charts.lines#d2cadf
charts.orange#D26D32
charts.purple#CC71BC
charts.red#C13838
charts.yellow#c9a022
checkbox.foreground#d2cadf
commandCenter.activeBackground#2c223b61
commandCenter.activeForeground#b7aacc8f
commandCenter.background#20192b
commandCenter.border#120e18
commandCenter.foreground#5c497b
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#C13838
debugConsole.infoForeground#3398DB
debugConsole.warningForeground#c9a022
debugExceptionWidget.background#2c223b
debugExceptionWidget.border#120e18
debugIcon.breakpointCurrentStackframeForeground#C13838
debugIcon.breakpointDisabledForeground#c1383880
debugIcon.breakpointForeground#C13838
debugIcon.continueForeground#3398DB
debugIcon.disconnectForeground#C13838
debugIcon.pauseForeground#C13838
debugIcon.restartForeground#37ae6f
debugIcon.startForeground#37ae6f
debugIcon.stepBackForeground#3398DB
debugIcon.stepIntoForeground#3398DB
debugIcon.stepOutForeground#3398DB
debugIcon.stepOverForeground#3398DB
debugIcon.stopForeground#C13838
debugToolBar.background#2c1e3c
descriptionForeground#d2cadf80
diffEditor.border#120e18
diffEditor.diagonalFill#2c223b
diffEditor.insertedLineBackground#26bf6e1a
diffEditor.insertedTextBackground#26bf6e1a
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#c9a0224d
diffEditor.moveActive.border#c9a022b3
diffEditor.removedLineBackground#d425251a
diffEditor.removedTextBackground#d425251a
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#191321
diffEditor.unchangedRegionBackground#191321
diffEditor.unchangedRegionShadow#00000066
diffEditorGutter.insertedLineBackground#00000000
diffEditorGutter.removedLineBackground#00000000
diffEditorOverview.insertedForeground#37ae6f26
diffEditorOverview.removedForeground#c1383830
disabledForeground#d2cadf4d
dropdown.background#261e33
dropdown.border#453958
dropdown.foreground#d2cadf
dropdown.listBackground#261e33
editor.background#20192b
editor.findMatchBackground#a948ef30
editor.findMatchBorder#a948ef61
editor.findMatchHighlightBackground#a948ef3d
editor.findMatchHighlightBorder#a948ef5c
editor.foldBackground#00000033
editor.foldPlaceholderForeground#5c497b
editor.foreground#d2cadf
editor.hoverHighlightBackground#a948ef4d
editor.inactiveSelectionBackground#a948ef4d
editor.lineHighlightBackground#a948ef0f
editor.lineHighlightBorder#a948ef26
editor.linkedEditingBackground#1b9df333
editor.rangeHighlightBackground#a948ef3d
editor.selectionBackground#a948ef4d
editor.selectionForeground#d2cadf
editor.selectionHighlightBackground#a948ef14
editor.selectionHighlightBorder#a948ef4d
editor.wordHighlightBackground#a948ef73
editor.wordHighlightBorder#a948ef8a
editor.wordHighlightStrongBackground#a948ef4d
editorBracketHighlight.foreground1#c9a022
editorBracketHighlight.foreground2#CC71BC
editorBracketHighlight.foreground3#3398DB
editorBracketHighlight.foreground4#935cd1
editorBracketHighlight.foreground5#24B5A8
editorBracketHighlight.foreground6#de456b
editorBracketHighlight.unexpectedBracket.foreground#C13838
editorBracketMatch.background#a948ef4d
editorBracketMatch.border#a948ef73
editorCodeLens.foreground#b7aacc80
editorCursor.background#a948ef
editorCursor.foreground#c9a022
editorError.border#00000000
editorError.foreground#C13838
editorGhostText.border#00000000
editorGhostText.foreground#d2cadf70
editorGroup.border#120e18
editorGroup.dropBackground#a948ef14
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#20192b
editorGroupHeader.tabsBackground#1b1524
editorGroupHeader.tabsBorder#120e18
editorGutter.addedBackground#37ae6fcc
editorGutter.background#20192b
editorGutter.commentRangeForeground#2c223b
editorGutter.deletedBackground#c13838cc
editorGutter.modifiedBackground#3398dbcc
editorHoverWidget.background#2c223b
editorHoverWidget.border#120e18
editorIndentGuide.activeBackground1#5c497bcc
editorIndentGuide.background1#5c497b33
editorInfo.border#00000000
editorInlayHint.background#b7aacc1a
editorInlayHint.foreground#b7aaccb3
editorInlayHint.parameterBackground#b7aacc1a
editorInlayHint.parameterForeground#b7aaccb3
editorInlayHint.typeBackground#b7aacc1a
editorInlayHint.typeForeground#b7aaccb3
editorLineNumber.activeForeground#998ab3
editorLineNumber.foreground#473c57
editorLink.activeForeground#d2cadf
editorMarkerNavigation.background#1b1524
editorMarkerNavigationError.background#c138388f
editorMarkerNavigationInfo.background#3398db8f
editorMarkerNavigationWarning.background#c9a0228f
editorOverviewRuler.addedForeground#37ae6f80
editorOverviewRuler.border#120e18
editorOverviewRuler.deletedForeground#c1383880
editorOverviewRuler.errorForeground#C13838
editorOverviewRuler.incomingContentForeground#37ae6f80
editorOverviewRuler.infoForeground#3398db80
editorOverviewRuler.modifiedForeground#3398db80
editorOverviewRuler.selectionHighlightForeground#a948ef80
editorOverviewRuler.warningForeground#c9a022
editorRuler.foreground#5c497b33
editorStickyScroll.shadow#00000066
editorStickyScrollHover.background#271f35
editorSuggestWidget.background#251d31
editorSuggestWidget.border#120e18
editorSuggestWidget.foreground#b7aacc
editorSuggestWidget.highlightForeground#c9a022
editorSuggestWidget.selectedBackground#382c4b
editorSuggestWidget.selectedIconForeground#d2cadf
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000aa
editorWarning.border#00000000
editorWarning.foreground#c9a022
editorWhitespace.foreground#5c497b60
editorWidget.background#2c223b
editorWidget.border#382c4b
editorWidget.resizeBorder#a948ef50
errorForeground#C13838
errorLens.errorForeground#c13838fc
errorLens.hintForeground#3398dbfc
errorLens.infoForeground#3398dbfc
errorLens.warningForeground#c9a022fc
extensionButton.background#a948ef80
extensionButton.foreground#d9aff8
extensionButton.hoverBackground#a948ef99
extensionButton.prominentBackground#a948ef9d
extensionButton.prominentForeground#d2cadf
extensionButton.prominentHoverBackground#a948ef
focusBorder#503e6c
foreground#b7aacc
gitDecoration.conflictingResourceForeground#a948ef
gitDecoration.deletedResourceForeground#C13838
gitDecoration.ignoredResourceForeground#5c497b
gitDecoration.modifiedResourceForeground#3398DB
gitDecoration.untrackedResourceForeground#37ae6f
icon.foreground#b7aaccab
inlineChat.background#2c223b
inlineChat.border#382c4b
inlineChatInput.background#251d31
inlineChatInput.border#382c4b
inlineChatInput.focusBorder#503e6c
inlineEdit.gutterIndicator.background#b7aacc80
inlineEdit.gutterIndicator.primaryBackground#725b13b3
inlineEdit.gutterIndicator.primaryBorder#725b13
inlineEdit.gutterIndicator.primaryForeground#08060b
inlineEdit.gutterIndicator.secondaryBackground#7711c0b3
inlineEdit.gutterIndicator.secondaryBorder#7711c0
inlineEdit.gutterIndicator.secondaryForeground#000000
inlineEdit.gutterIndicator.successfulBackground#1f603eb3
inlineEdit.gutterIndicator.successfulBorder#1f603e
inlineEdit.gutterIndicator.successfulForeground#000000
inlineEdit.modifiedBackground#37ae6f26
inlineEdit.modifiedBorder#37ae6fcc
inlineEdit.modifiedChangedLineBackground#37ae6f14
inlineEdit.modifiedChangedTextBackground#00000000
inlineEdit.originalBackground#c1383826
inlineEdit.originalBorder#c13838cc
inlineEdit.originalChangedLineBackground#c13838cc
inlineEdit.originalChangedTextBackground#00000000
inlineEdit.tabWillAcceptModifiedBorder#37ae6f
inlineEdit.tabWillAcceptOriginalBorder#C13838
input.background#261e33
input.border#453958
input.foreground#d2cadf
input.placeholderForeground#695786
inputOption.activeBackground#68518c
inputOption.activeBorder#00000000
inputOption.activeForeground#d2cadf
inputOption.hoverBackground#382c4b
inputValidation.errorBackground#2c223b
inputValidation.errorBorder#c9a022
inputValidation.infoBackground#2c223b
inputValidation.infoBorder#a948ef
inputValidation.warningBackground#2c223b
inputValidation.warningBorder#c9a022
keybindingLabel.background#2c223b
keybindingLabel.border#5e5172
keybindingLabel.bottomBorder#5e5172
keybindingLabel.foreground#9183a6
list.activeSelectionBackground#44355b73
list.activeSelectionForeground#d2cadf
list.dropBackground#a948ef15
list.errorForeground#C13838
list.focusBackground#a948ef40
list.focusForeground#b7aacc
list.highlightForeground#c9a022
list.hoverBackground#44355b4d
list.hoverForeground#fafafb
list.inactiveSelectionBackground#44355b40
list.inactiveSelectionForeground#d2cadf
list.warningForeground#c9a022
menu.background#2c223b
menu.border#120e18
menu.foreground#aba0bc
menu.selectionForeground#fafafb
menu.separatorBackground#120e1865
menubar.selectionBackground#2c223b
menubar.selectionForeground#b7aacc
merge.border#120e18
merge.commonContentBackground#c9a02230
merge.commonHeaderBackground#c9a02280
merge.currentContentBackground#37ae6f30
merge.currentHeaderBackground#37ae6f80
merge.incomingContentBackground#3398db30
merge.incomingHeaderBackground#3398db80
minimap.background#20192b
minimap.errorHighlight#C13838
minimap.findMatchHighlight#a948ef
minimap.selectionHighlight#a948ef
minimap.selectionOccurrenceHighlight#a948ef
minimap.warningHighlight#c9a022
minimapGutter.addedBackground#37ae6f
minimapGutter.deletedBackground#C13838
minimapGutter.modifiedBackground#3398DB
multiDiffEditor.border#120e18
multiDiffEditor.headerBackground#2c223b
notificationCenterHeader.background#2c223b
notificationCenterHeader.foreground#d2cadf
notificationLink.foreground#c9a022
notifications.background#2c223b
notifications.border#120e18
notifications.foreground#b7aacc
notificationsErrorIcon.foreground#C13838
notificationsInfoIcon.foreground#3398DB
notificationsWarningIcon.foreground#D26D32
panel.background#1d1727
panel.border#120e18
panel.dropBorder#5c497b80
panelInput.border#382c4b
panelSection.border#120e18
panelSectionHeader.background#241d31
panelSectionHeader.border#120e18
panelSectionHeader.foreground#d2cadf
panelTitle.activeBorder#a948ef
panelTitle.activeForeground#a948ef
panelTitle.inactiveForeground#5c497b
peekView.border#120e18
peekViewEditor.background#2a2138
peekViewEditor.matchHighlightBackground#2c223b40
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#2a2138
peekViewEditorStickyScroll.background#271f35
peekViewResult.background#261e33
peekViewResult.fileForeground#d2cadf
peekViewResult.lineForeground#b7aacc
peekViewResult.matchHighlightBackground#a948ef80
peekViewResult.selectionBackground#a948ef33
peekViewResult.selectionForeground#d2cadf
peekViewTitle.background#2c223b
peekViewTitleDescription.foreground#d2cadf
peekViewTitleLabel.foreground#d2cadf
pickerGroup.border#120e18
pickerGroup.foreground#d2cadf
profileBadge.background#a948ef
profileBadge.foreground#20192b
progressBar.background#c9a022
quickInput.background#271f35
quickInput.foreground#d2cadfb3
quickInputList.focusBackground#5c477c73
quickInputList.focusForeground#fafafb
quickInputList.focusIconForeground#d2cadf
quickInputTitle.background#1b1524
sash.hoverBorder#a948ef50
scmGraph.foreground1#3398DB
scmGraph.foreground2#CC71BC
scmGraph.foreground3#7E9E2D
scmGraph.foreground4#24B5A8
scmGraph.foreground5#de456b
scmGraph.historyItemBaseRefColor#935cd1
scmGraph.historyItemHoverAdditionsForeground#37ae6f
scmGraph.historyItemHoverDefaultLabelBackground#b7aacc
scmGraph.historyItemHoverDefaultLabelForeground#000000
scmGraph.historyItemHoverDeletionsForeground#C13838
scmGraph.historyItemHoverLabelForeground#000000
scmGraph.historyItemRefColor#c9a022
scmGraph.historyItemRemoteRefColor#3398DB
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#d2cadf4d
scrollbarSlider.background#d2cadf26
scrollbarSlider.hoverBackground#d2cadf33
selection.background#a948ef61
settings.headerForeground#d2cadf
settings.modifiedItemIndicator#a948ef
settings.settingsHeaderHoverForeground#d2cadf
sideBar.background#1b1524
sideBar.border#120e18
sideBar.foreground#b7aacccc
sideBarSectionHeader.background#1b1524
sideBarSectionHeader.border#120e18
sideBarSectionHeader.foreground#d2cadf
sideBarStickyScroll.background#16111e
sideBarStickyScroll.shadow#00000066
sideBarTitle.foreground#5c497b
statusBar.background#20192b
statusBar.border#120e18
statusBar.debuggingBackground#39234e
statusBar.debuggingForeground#b287d4
statusBar.foreground#b7aacc80
statusBar.noFolderBackground#1b1524
statusBar.noFolderBorder#120e18
statusBar.noFolderForeground#b7aacccc
statusBarItem.activeBackground#2c223b
statusBarItem.compactHoverBackground#a948efcc
statusBarItem.errorBackground#C13838
statusBarItem.errorForeground#000000
statusBarItem.errorHoverBackground#d05c5c
statusBarItem.errorHoverForeground#20192b
statusBarItem.hoverBackground#462860
statusBarItem.hoverForeground#d2cadf
statusBarItem.offlineBackground#CC71BC
statusBarItem.offlineForeground#2e1028
statusBarItem.offlineHoverBackground#d997ce
statusBarItem.offlineHoverForeground#20192b
statusBarItem.prominentBackground#20192b
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#382c4b
statusBarItem.prominentHoverForeground#20192b
statusBarItem.remoteBackground#24B5A8
statusBarItem.remoteForeground#000000
statusBarItem.remoteHoverBackground#35d7c8
statusBarItem.remoteHoverForeground#20192b
statusBarItem.warningBackground#c9a022
statusBarItem.warningForeground#000000
statusBarItem.warningHoverBackground#dfb83f
statusBarItem.warningHoverForeground#20192b
tab.activeBackground#20192b
tab.activeBorder#20192b
tab.activeBorderTop#a948ef
tab.activeForeground#d2cadf
tab.border#120e18
tab.hoverBackground#20192b
tab.inactiveBackground#1b1524
tab.inactiveForeground#5c497b
tab.lastPinnedBorder#120e18
tab.unfocusedActiveBorder#20192b
tab.unfocusedActiveForeground#a948ef
tab.unfocusedHoverBackground#20192b
tab.unfocusedInactiveForeground#5c497b
terminal.ansiBlack#20192b
terminal.ansiBlue#3398DB
terminal.ansiBrightBlack#4d3d67
terminal.ansiBrightBlue#0f9fff
terminal.ansiBrightCyan#03d6c3
terminal.ansiBrightGreen#15d06d
terminal.ansiBrightMagenta#e954cf
terminal.ansiBrightRed#e61313
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ebb100
terminal.ansiCyan#24B5A8
terminal.ansiGreen#37ae6f
terminal.ansiMagenta#CC71BC
terminal.ansiRed#C13838
terminal.ansiWhite#d2cadf
terminal.ansiYellow#c9a022
terminal.background#1d1727
terminal.foreground#d2cadf
terminal.selectionForeground#d2cadf
terminalCursor.background#20192b
terminalCursor.foreground#c9a022
terminalStickyScrollHover.background#271f35
textBlockQuote.background#3398db33
textBlockQuote.border#3398dbb9
textCodeBlock.background#3398db33
textLink.activeForeground#a948ef
textLink.foreground#a948ef
textPreformat.background#40302f
textPreformat.foreground#c9a022
textSeparator.foreground#a948ef
titleBar.activeBackground#140f1a
titleBar.activeForeground#d2cadf66
titleBar.border#120e18
titleBar.inactiveBackground#140f1a
titleBar.inactiveForeground#5c497b
toolbar.activeBackground#5c497b80
toolbar.hoverBackground#5c497b4d
tree.indentGuidesStroke#5c497b70
walkThrough.embeddedEditorBackground#20192b
welcomePage.progress.background#2c223b
welcomePage.progress.foreground#a948ef
welcomePage.tileBackground#b7aacc1a
welcomePage.tileBorder#b7aacc33
welcomePage.tileHoverBackground#b7aacc33
widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5c497b	italic
string	#37ae6f	—
constant.numeric	#D26D32	—
comment.line	#5c497b	italic
comment.line, comment.line.semicolon.krl, comment.line.ampersand.krl, comment.line.bug.krl, comment.line.fixme.krl, comment.line.hack.krl, comment.line.note.krl, comment.line.todo.krl	#5c497b	italic
comment.line.fold.krl, meta.fold.krl, keyword.control.fold.krl	#7d6360	italic
keyword.control.krl	#935cd1	bold
keyword.function.movement.krl	#3398DB	bold
storage.type.krl, storage.type.interrupt.krl, storage.type.trigger.krl	#c9a022	italic
variable.language.system.krl	#C13838
constant.numeric.krl, constant.numeric.hex.krl, constant.numeric.binary.krl	#D26D32	—
string.quoted.double.krl	#37ae6f	—
variable.function.krl	—	—
constant.language.enum.krl, variable.other.enummember.krl	—	—
support.function.builtin.krl	—	—
keyword.operator.krl, keyword.operator.comparison.krl, keyword.operator.arithmetic.krl, keyword.operator.bitwise.krl, keyword.operator.logical.krl	—	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}