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 Aquarelle Hydrangea

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#6394f126
activityBar.activeBorder#6394f1
activityBar.background#1e2235
activityBar.border#171a28
activityBar.dropBorder#515d8c33
activityBar.foreground#6394f1
activityBar.inactiveForeground#585d79
activityBarBadge.background#6394f1
activityBarBadge.foreground#1e2235
activityBarTop.activeBorder#6394f1
activityBarTop.dropBorder#515d8c33
activityBarTop.foreground#6394f1
activityBarTop.inactiveForeground#54586c
badge.background#6394f1
badge.foreground#1e2235
breadcrumb.background#22273c
breadcrumbPicker.background#2b324c
button.background#6394f180
button.border#ffffff26
button.foreground#cadbfa
button.hoverBackground#6394f199
button.secondaryBackground#2f3653
button.secondaryForeground#dadde9cc
button.secondaryHoverBackground#343c5d
button.separator#ffffff4d
charts.blue#afd9ec
charts.foreground#dadde9
charts.green#c3e5a1
charts.lines#dadde9
charts.orange#f0bba2
charts.purple#edc1ea
charts.red#eca099
charts.yellow#f3e1ac
checkbox.foreground#dadde9
commandCenter.activeBackground#2b324c61
commandCenter.activeForeground#b9bfd78f
commandCenter.background#22273c
commandCenter.border#171a28
commandCenter.foreground#515d8c
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#e87a70
debugConsole.infoForeground#73bee9
debugConsole.warningForeground#eea064
debugExceptionWidget.background#2b324c
debugExceptionWidget.border#171a28
debugIcon.breakpointCurrentStackframeForeground#e87a70
debugIcon.breakpointDisabledForeground#e87a7080
debugIcon.breakpointForeground#e87a70
debugIcon.continueForeground#73bee9
debugIcon.disconnectForeground#e87a70
debugIcon.pauseForeground#e87a70
debugIcon.restartForeground#aada77
debugIcon.startForeground#aada77
debugIcon.stepBackForeground#73bee9
debugIcon.stepIntoForeground#73bee9
debugIcon.stepOutForeground#73bee9
debugIcon.stepOverForeground#73bee9
debugIcon.stopForeground#e87a70
debugToolBar.background#29314c
descriptionForeground#dadde980
diffEditor.border#171a28
diffEditor.diagonalFill#2b324c
diffEditor.insertedLineBackground#aae76a1a
diffEditor.insertedTextBackground#aae76a1a
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#f3e1ac4d
diffEditor.moveActive.border#f3e1acb3
diffEditor.removedLineBackground#f470641a
diffEditor.removedTextBackground#f470641a
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#1c2032
diffEditor.unchangedRegionBackground#1c2032
diffEditor.unchangedRegionShadow#00000066
diffEditorGutter.insertedLineBackground#00000000
diffEditorGutter.removedLineBackground#00000000
diffEditorOverview.insertedForeground#aada7726
diffEditorOverview.removedForeground#e87a7030
disabledForeground#dadde94d
dropdown.background#272c44
dropdown.border#424969
dropdown.foreground#dadde9
dropdown.listBackground#272c44
editor.background#22273c
editor.findMatchBackground#6394f130
editor.findMatchBorder#6394f161
editor.findMatchHighlightBackground#6394f13d
editor.findMatchHighlightBorder#6394f15c
editor.foldBackground#00000033
editor.foldPlaceholderForeground#515d8c
editor.foreground#dadde9
editor.hoverHighlightBackground#6394f14d
editor.inactiveSelectionBackground#6394f14d
editor.lineHighlightBackground#6394f10f
editor.lineHighlightBorder#6394f126
editor.linkedEditingBackground#a5ddf633
editor.rangeHighlightBackground#6394f13d
editor.selectionBackground#6394f14d
editor.selectionForeground#dadde9
editor.selectionHighlightBackground#6394f114
editor.selectionHighlightBorder#6394f14d
editor.wordHighlightBackground#6394f173
editor.wordHighlightBorder#6394f18a
editor.wordHighlightStrongBackground#6394f14d
editorBracketHighlight.foreground1#f3e1ac
editorBracketHighlight.foreground2#edc1ea
editorBracketHighlight.foreground3#afd9ec
editorBracketHighlight.foreground4#bcb1f1
editorBracketHighlight.foreground5#a9edd9
editorBracketHighlight.foreground6#f3aabc
editorBracketHighlight.unexpectedBracket.foreground#e87a70
editorBracketMatch.background#6394f14d
editorBracketMatch.border#6394f173
editorCodeLens.foreground#b9bfd780
editorCursor.background#6394f1
editorCursor.foreground#f3e1ac
editorError.border#00000000
editorError.foreground#e87a70
editorGhostText.border#00000000
editorGhostText.foreground#dadde970
editorGroup.border#171a28
editorGroup.dropBackground#6394f114
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#22273c
editorGroupHeader.tabsBackground#1e2235
editorGroupHeader.tabsBorder#171a28
editorGutter.addedBackground#aada77cc
editorGutter.background#22273c
editorGutter.commentRangeForeground#2b324c
editorGutter.deletedBackground#e87a70cc
editorGutter.modifiedBackground#73bee9cc
editorHoverWidget.background#2b324c
editorHoverWidget.border#171a28
editorIndentGuide.activeBackground1#515d8ccc
editorIndentGuide.background1#515d8c33
editorInfo.border#00000000
editorInlayHint.background#b9bfd71a
editorInlayHint.foreground#b9bfd7b3
editorInlayHint.parameterBackground#b9bfd71a
editorInlayHint.parameterForeground#b9bfd7b3
editorInlayHint.typeBackground#b9bfd71a
editorInlayHint.typeForeground#b9bfd7b3
editorLineNumber.activeForeground#999fbe
editorLineNumber.foreground#474c68
editorLink.activeForeground#dadde9
editorMarkerNavigation.background#1e2235
editorMarkerNavigationError.background#e87a708f
editorMarkerNavigationInfo.background#73bee98f
editorMarkerNavigationWarning.background#eea0648f
editorOverviewRuler.addedForeground#aada7780
editorOverviewRuler.border#171a28
editorOverviewRuler.deletedForeground#e87a7080
editorOverviewRuler.errorForeground#e87a70
editorOverviewRuler.incomingContentForeground#aada7780
editorOverviewRuler.infoForeground#73bee980
editorOverviewRuler.modifiedForeground#73bee980
editorOverviewRuler.selectionHighlightForeground#6394f180
editorOverviewRuler.warningForeground#eea064
editorRuler.foreground#515d8c33
editorStickyScroll.shadow#00000066
editorStickyScrollHover.background#282d46
editorSuggestWidget.background#262b43
editorSuggestWidget.border#171a28
editorSuggestWidget.foreground#b9bfd7
editorSuggestWidget.highlightForeground#f3e1ac
editorSuggestWidget.selectedBackground#343c5d
editorSuggestWidget.selectedIconForeground#dadde9
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000aa
editorWarning.border#00000000
editorWarning.foreground#f3e1ac
editorWhitespace.foreground#515d8c60
editorWidget.background#2b324c
editorWidget.border#343c5d
editorWidget.resizeBorder#6394f150
errorForeground#e87a70
errorLens.errorForeground#e87a70fc
errorLens.hintForeground#73bee9fc
errorLens.infoForeground#73bee9fc
errorLens.warningForeground#eea064fc
extensionButton.background#6394f180
extensionButton.foreground#cadbfa
extensionButton.hoverBackground#6394f199
extensionButton.prominentBackground#6394f19d
extensionButton.prominentForeground#dadde9
extensionButton.prominentHoverBackground#6394f1
focusBorder#47517d
foreground#b9bfd7
gitDecoration.conflictingResourceForeground#6394f1
gitDecoration.deletedResourceForeground#e87a70
gitDecoration.ignoredResourceForeground#515d8c
gitDecoration.modifiedResourceForeground#73bee9
gitDecoration.untrackedResourceForeground#aada77
icon.foreground#b9bfd7ab
inlineChat.background#2b324c
inlineChat.border#343c5d
inlineChatInput.background#262b43
inlineChatInput.border#343c5d
inlineChatInput.focusBorder#47517d
inlineEdit.gutterIndicator.background#b9bfd780
inlineEdit.gutterIndicator.primaryBackground#e6c153b3
inlineEdit.gutterIndicator.primaryBorder#e6c153
inlineEdit.gutterIndicator.primaryForeground#10121b
inlineEdit.gutterIndicator.secondaryBackground#1458dab3
inlineEdit.gutterIndicator.secondaryBorder#1458da
inlineEdit.gutterIndicator.secondaryForeground#000000
inlineEdit.gutterIndicator.successfulBackground#78b932b3
inlineEdit.gutterIndicator.successfulBorder#78b932
inlineEdit.gutterIndicator.successfulForeground#000000
inlineEdit.modifiedBackground#aada7726
inlineEdit.modifiedBorder#aada77cc
inlineEdit.modifiedChangedLineBackground#aada7714
inlineEdit.modifiedChangedTextBackground#00000000
inlineEdit.originalBackground#eca09926
inlineEdit.originalBorder#eca099cc
inlineEdit.originalChangedLineBackground#eca099cc
inlineEdit.originalChangedTextBackground#00000000
inlineEdit.tabWillAcceptModifiedBorder#aada77
inlineEdit.tabWillAcceptOriginalBorder#eca099
input.background#272c44
input.border#424969
input.foreground#dadde9
input.placeholderForeground#606a97
inputOption.activeBackground#59669e
inputOption.activeBorder#00000000
inputOption.activeForeground#dadde9
inputOption.hoverBackground#343c5d
inputValidation.errorBackground#2b324c
inputValidation.errorBorder#f3e1ac
inputValidation.infoBackground#2b324c
inputValidation.infoBorder#6394f1
inputValidation.warningBackground#2b324c
inputValidation.warningBorder#f3e1ac
keybindingLabel.background#2b324c
keybindingLabel.border#5b6382
keybindingLabel.bottomBorder#5b6382
keybindingLabel.foreground#9198b2
list.activeSelectionBackground#3d476d73
list.activeSelectionForeground#dadde9
list.dropBackground#6394f115
list.errorForeground#e87a70
list.focusBackground#6394f140
list.focusForeground#b9bfd7
list.highlightForeground#f3e1ac
list.hoverBackground#3d476d4d
list.hoverForeground#ffffff
list.inactiveSelectionBackground#3d476d40
list.inactiveSelectionForeground#dadde9
list.warningForeground#eea064
menu.background#2b324c
menu.border#171a28
menu.foreground#afb4c7
menu.selectionForeground#ffffff
menu.separatorBackground#171a2865
menubar.selectionBackground#2b324c
menubar.selectionForeground#b9bfd7
merge.border#171a28
merge.commonContentBackground#f3e1ac30
merge.commonHeaderBackground#f3e1ac80
merge.currentContentBackground#aada7730
merge.currentHeaderBackground#aada7780
merge.incomingContentBackground#73bee930
merge.incomingHeaderBackground#73bee980
minimap.background#22273c
minimap.errorHighlight#e87a70
minimap.findMatchHighlight#6394f1
minimap.selectionHighlight#6394f1
minimap.selectionOccurrenceHighlight#6394f1
minimap.warningHighlight#eea064
minimapGutter.addedBackground#aada77
minimapGutter.deletedBackground#e87a70
minimapGutter.modifiedBackground#73bee9
multiDiffEditor.border#171a28
multiDiffEditor.headerBackground#2b324c
notificationCenterHeader.background#2b324c
notificationCenterHeader.foreground#dadde9
notificationLink.foreground#f3e1ac
notifications.background#2b324c
notifications.border#171a28
notifications.foreground#b9bfd7
notificationsErrorIcon.foreground#eca099
notificationsInfoIcon.foreground#afd9ec
notificationsWarningIcon.foreground#f0bba2
panel.background#202438
panel.border#171a28
panel.dropBorder#515d8c80
panelInput.border#343c5d
panelSection.border#171a28
panelSectionHeader.background#262a42
panelSectionHeader.border#171a28
panelSectionHeader.foreground#dadde9
panelTitle.activeBorder#6394f1
panelTitle.activeForeground#6394f1
panelTitle.inactiveForeground#515d8c
peekView.border#171a28
peekViewEditor.background#292f49
peekViewEditor.matchHighlightBackground#2b324c40
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#292f49
peekViewEditorStickyScroll.background#282d46
peekViewResult.background#272c44
peekViewResult.fileForeground#dadde9
peekViewResult.lineForeground#b9bfd7
peekViewResult.matchHighlightBackground#6394f180
peekViewResult.selectionBackground#6394f133
peekViewResult.selectionForeground#dadde9
peekViewTitle.background#2b324c
peekViewTitleDescription.foreground#dadde9
peekViewTitleLabel.foreground#dadde9
pickerGroup.border#171a28
pickerGroup.foreground#dadde9
profileBadge.background#6394f1
profileBadge.foreground#22273c
progressBar.background#f3e1ac
quickInput.background#282d46
quickInput.foreground#dadde9b3
quickInputList.focusBackground#505d8d73
quickInputList.focusForeground#ffffff
quickInputList.focusIconForeground#dadde9
quickInputTitle.background#1e2235
sash.hoverBorder#6394f150
scmGraph.foreground1#afd9ec
scmGraph.foreground2#edc1ea
scmGraph.foreground3#d1e796
scmGraph.foreground4#a9edd9
scmGraph.foreground5#f3aabc
scmGraph.historyItemBaseRefColor#bcb1f1
scmGraph.historyItemHoverAdditionsForeground#aada77
scmGraph.historyItemHoverDefaultLabelBackground#b9bfd7
scmGraph.historyItemHoverDefaultLabelForeground#06070b
scmGraph.historyItemHoverDeletionsForeground#e87a70
scmGraph.historyItemHoverLabelForeground#06070b
scmGraph.historyItemRefColor#f3e1ac
scmGraph.historyItemRemoteRefColor#afd9ec
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#dadde94d
scrollbarSlider.background#dadde926
scrollbarSlider.hoverBackground#dadde933
selection.background#6394f161
settings.headerForeground#dadde9
settings.modifiedItemIndicator#6394f1
settings.settingsHeaderHoverForeground#dadde9
sideBar.background#1e2235
sideBar.border#171a28
sideBar.foreground#b9bfd7cc
sideBarSectionHeader.background#1e2235
sideBarSectionHeader.border#171a28
sideBarSectionHeader.foreground#dadde9
sideBarStickyScroll.background#1a1e2e
sideBarStickyScroll.shadow#00000066
sideBarTitle.foreground#515d8c
statusBar.background#22273c
statusBar.border#171a28
statusBar.debuggingBackground#2f3b5d
statusBar.debuggingForeground#9fa5e5
statusBar.foreground#b9bfd780
statusBar.noFolderBackground#1e2235
statusBar.noFolderBorder#171a28
statusBar.noFolderForeground#b9bfd7cc
statusBarItem.activeBackground#2b324c
statusBarItem.compactHoverBackground#6394f1cc
statusBarItem.errorBackground#e87a70
statusBarItem.errorForeground#4d120c
statusBarItem.errorHoverBackground#efa39c
statusBarItem.errorHoverForeground#22273c
statusBarItem.hoverBackground#35456e
statusBarItem.hoverForeground#dadde9
statusBarItem.offlineBackground#edc1ea
statusBarItem.offlineForeground#882781
statusBarItem.offlineHoverBackground#f8e9f7
statusBarItem.offlineHoverForeground#22273c
statusBarItem.prominentBackground#22273c
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#343c5d
statusBarItem.prominentHoverForeground#22273c
statusBarItem.remoteBackground#a9edd9
statusBarItem.remoteForeground#1a7d60
statusBarItem.remoteHoverBackground#d3f6ec
statusBarItem.remoteHoverForeground#22273c
statusBarItem.warningBackground#eea064
statusBarItem.warningForeground#4b2508
statusBarItem.warningHoverBackground#f3bc92
statusBarItem.warningHoverForeground#22273c
tab.activeBackground#22273c
tab.activeBorder#22273c
tab.activeBorderTop#6394f1
tab.activeForeground#dadde9
tab.border#171a28
tab.hoverBackground#22273c
tab.inactiveBackground#1e2235
tab.inactiveForeground#515d8c
tab.lastPinnedBorder#171a28
tab.unfocusedActiveBorder#22273c
tab.unfocusedActiveForeground#6394f1
tab.unfocusedHoverBackground#22273c
tab.unfocusedInactiveForeground#515d8c
terminal.ansiBlack#22273c
terminal.ansiBlue#73bee9
terminal.ansiBrightBlack#454e79
terminal.ansiBrightBlue#5dc4ff
terminal.ansiBrightCyan#99fddf
terminal.ansiBrightGreen#abf45d
terminal.ansiBrightMagenta#f9b5f4
terminal.ansiBrightRed#ff6759
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffe7a0
terminal.ansiCyan#a9edd9
terminal.ansiGreen#aada77
terminal.ansiMagenta#edc1ea
terminal.ansiRed#e87a70
terminal.ansiWhite#dadde9
terminal.ansiYellow#f3e1ac
terminal.background#202438
terminal.foreground#dadde9
terminal.selectionForeground#dadde9
terminalCursor.background#22273c
terminalCursor.foreground#f3e1ac
terminalStickyScrollHover.background#282d46
textBlockQuote.background#73bee933
textBlockQuote.border#73bee9b9
textCodeBlock.background#73bee933
textLink.activeForeground#6394f1
textLink.foreground#6394f1
textPreformat.background#494751
textPreformat.foreground#f3e1ac
textSeparator.foreground#6394f1
titleBar.activeBackground#181c2b
titleBar.activeForeground#dadde966
titleBar.border#171a28
titleBar.inactiveBackground#181c2b
titleBar.inactiveForeground#515d8c
toolbar.activeBackground#515d8c80
toolbar.hoverBackground#515d8c4d
tree.indentGuidesStroke#515d8c70
walkThrough.embeddedEditorBackground#22273c
welcomePage.progress.background#2b324c
welcomePage.progress.foreground#6394f1
welcomePage.tileBackground#b9bfd71a
welcomePage.tileBorder#b9bfd733
welcomePage.tileHoverBackground#b9bfd733
widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#515d8c	italic
string	#c3e5a1	—
constant.numeric	#f0bba2	—
comment.line	#515d8c	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	#515d8c	italic
comment.line.fold.krl, meta.fold.krl, keyword.control.fold.krl	#828596	italic
keyword.control.krl	#bcb1f1	bold
keyword.function.movement.krl	#afd9ec	bold
storage.type.krl, storage.type.interrupt.krl, storage.type.trigger.krl	#f3e1ac	italic
variable.language.system.krl	#eca099
constant.numeric.krl, constant.numeric.hex.krl, constant.numeric.binary.krl	#f0bba2	—
string.quoted.double.krl	#c3e5a1	—
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}!`;
}