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 Surprising Watermelon

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#da6c6226
activityBar.activeBorder#da6c62
activityBar.background#101c1f
activityBar.border#091112
activityBar.dropBorder#416f7933
activityBar.foreground#da6c62
activityBar.inactiveForeground#465f64
activityBarBadge.background#da6c62
activityBarBadge.foreground#101c1f
activityBarTop.activeBorder#da6c62
activityBarTop.dropBorder#416f7933
activityBarTop.foreground#da6c62
activityBarTop.inactiveForeground#425457
badge.background#da6c62
badge.foreground#101c1f
breadcrumb.background#142326
breadcrumbPicker.background#1d3237
button.background#da6c6280
button.border#ffffff26
button.foreground#efc1bd
button.hoverBackground#da6c6299
button.secondaryBackground#20393d
button.secondaryForeground#c1d9decc
button.secondaryHoverBackground#264247
button.separator#ffffff4d
charts.blue#00B3BD
charts.foreground#c1d9de
charts.green#a9dc76
charts.lines#c1d9de
charts.orange#5288BA
charts.purple#c47cbf
charts.red#C13838
charts.yellow#da6c62
checkbox.foreground#c1d9de
commandCenter.activeBackground#5f333361
commandCenter.activeForeground#a0c5cc8f
commandCenter.background#142326
commandCenter.border#091112
commandCenter.foreground#416f79
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#E35535
debugConsole.infoForeground#00B3BD
debugConsole.warningForeground#d1a456
debugExceptionWidget.background#5f3333
debugExceptionWidget.border#091112
debugIcon.breakpointCurrentStackframeForeground#E35535
debugIcon.breakpointDisabledForeground#e3553580
debugIcon.breakpointForeground#E35535
debugIcon.continueForeground#00B3BD
debugIcon.disconnectForeground#E35535
debugIcon.pauseForeground#E35535
debugIcon.restartForeground#a9dc76
debugIcon.startForeground#a9dc76
debugIcon.stepBackForeground#00B3BD
debugIcon.stepIntoForeground#00B3BD
debugIcon.stepOutForeground#00B3BD
debugIcon.stepOverForeground#00B3BD
debugIcon.stopForeground#E35535
debugToolBar.background#282b2c
descriptionForeground#c1d9de80
diffEditor.border#091112
diffEditor.diagonalFill#1d3237
diffEditor.insertedLineBackground#a9e9691a
diffEditor.insertedTextBackground#a9e9691a
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#da6c624d
diffEditor.moveActive.border#da6c62b3
diffEditor.removedLineBackground#f44a241a
diffEditor.removedTextBackground#f44a241a
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#0e191c
diffEditor.unchangedRegionBackground#0e191c
diffEditor.unchangedRegionShadow#00000066
diffEditorGutter.insertedLineBackground#00000000
diffEditorGutter.removedLineBackground#00000000
diffEditorOverview.insertedForeground#a9dc7626
diffEditorOverview.removedForeground#e3553530
disabledForeground#c1d9de4d
dropdown.background#182b2e
dropdown.border#324f55
dropdown.foreground#c1d9de
dropdown.listBackground#182b2e
editor.background#142326
editor.findMatchBackground#da6c6230
editor.findMatchBorder#da6c6261
editor.findMatchHighlightBackground#da6c623d
editor.findMatchHighlightBorder#da6c625c
editor.foldBackground#00000033
editor.foldPlaceholderForeground#416f79
editor.foreground#c1d9de
editor.hoverHighlightBackground#da6c624d
editor.inactiveSelectionBackground#da6c624d
editor.lineHighlightBackground#da6c620f
editor.lineHighlightBorder#da6c6226
editor.linkedEditingBackground#00b3bd33
editor.rangeHighlightBackground#da6c623d
editor.selectionBackground#da6c624d
editor.selectionForeground#c1d9de
editor.selectionHighlightBackground#da6c6214
editor.selectionHighlightBorder#da6c624d
editor.wordHighlightBackground#da6c6273
editor.wordHighlightBorder#da6c628a
editor.wordHighlightStrongBackground#da6c624d
editorBracketHighlight.foreground1#da6c62
editorBracketHighlight.foreground2#c47cbf
editorBracketHighlight.foreground3#00B3BD
editorBracketHighlight.foreground4#CC9B52
editorBracketHighlight.foreground5#da6c62
editorBracketHighlight.foreground6#B85C40
editorBracketHighlight.unexpectedBracket.foreground#E35535
editorBracketMatch.background#da6c624d
editorBracketMatch.border#da6c6273
editorCodeLens.foreground#a0c5cc80
editorCursor.background#da6c62
editorCursor.foreground#da6c62
editorError.border#00000000
editorError.foreground#E35535
editorGhostText.border#00000000
editorGhostText.foreground#c1d9de70
editorGroup.border#091112
editorGroup.dropBackground#da6c6214
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#142326
editorGroupHeader.tabsBackground#101c1f
editorGroupHeader.tabsBorder#091112
editorGutter.addedBackground#a9dc76cc
editorGutter.background#142326
editorGutter.commentRangeForeground#5f3333
editorGutter.deletedBackground#e35535cc
editorGutter.modifiedBackground#00b3bdcc
editorHoverWidget.background#5f3333
editorHoverWidget.border#091112
editorIndentGuide.activeBackground1#416f79cc
editorIndentGuide.background1#416f7933
editorInfo.border#00000000
editorInlayHint.background#a0c5cc1a
editorInlayHint.foreground#a0c5ccb3
editorInlayHint.parameterBackground#a0c5cc1a
editorInlayHint.parameterForeground#a0c5ccb3
editorInlayHint.typeBackground#a0c5cc1a
editorInlayHint.typeForeground#a0c5ccb3
editorLineNumber.activeForeground#7faab4
editorLineNumber.foreground#374d52
editorLink.activeForeground#c1d9de
editorMarkerNavigation.background#101c1f
editorMarkerNavigationError.background#e355358f
editorMarkerNavigationInfo.background#00b3bd8f
editorMarkerNavigationWarning.background#d1a4568f
editorOverviewRuler.addedForeground#a9dc7680
editorOverviewRuler.border#091112
editorOverviewRuler.deletedForeground#e3553580
editorOverviewRuler.errorForeground#E35535
editorOverviewRuler.incomingContentForeground#a9dc7680
editorOverviewRuler.infoForeground#00b3bd80
editorOverviewRuler.modifiedForeground#00b3bd80
editorOverviewRuler.selectionHighlightForeground#da6c6280
editorOverviewRuler.warningForeground#d1a456
editorRuler.foreground#416f7933
editorStickyScroll.shadow#00000066
editorStickyScrollHover.background#192c30
editorSuggestWidget.background#18292d
editorSuggestWidget.border#091112
editorSuggestWidget.foreground#a0c5cc
editorSuggestWidget.highlightForeground#da6c62
editorSuggestWidget.selectedBackground#264247
editorSuggestWidget.selectedIconForeground#c1d9de
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000aa
editorWarning.border#00000000
editorWarning.foreground#da6c62
editorWhitespace.foreground#416f7960
editorWidget.background#5f3333
editorWidget.border#264247
editorWidget.resizeBorder#da6c6250
errorForeground#E35535
errorLens.errorForeground#e35535fc
errorLens.hintForeground#00b3bdfc
errorLens.infoForeground#00b3bdfc
errorLens.warningForeground#d1a456fc
extensionButton.background#da6c6280
extensionButton.foreground#efc1bd
extensionButton.hoverBackground#da6c6299
extensionButton.prominentBackground#da6c629d
extensionButton.prominentForeground#c1d9de
extensionButton.prominentHoverBackground#da6c62
focusBorder#376169
foreground#a0c5cc
gitDecoration.conflictingResourceForeground#da6c62
gitDecoration.deletedResourceForeground#E35535
gitDecoration.ignoredResourceForeground#416f79
gitDecoration.modifiedResourceForeground#00B3BD
gitDecoration.untrackedResourceForeground#a9dc76
icon.foreground#a0c5ccab
inlineChat.background#1d3237
inlineChat.border#264247
inlineChatInput.background#18292d
inlineChatInput.border#264247
inlineChatInput.focusBorder#376169
inlineEdit.gutterIndicator.background#a0c5cc80
inlineEdit.gutterIndicator.primaryBackground#ad3429b3
inlineEdit.gutterIndicator.primaryBorder#ad3429
inlineEdit.gutterIndicator.primaryForeground#020405
inlineEdit.gutterIndicator.secondaryBackground#ad3429b3
inlineEdit.gutterIndicator.secondaryBorder#ad3429
inlineEdit.gutterIndicator.secondaryForeground#000000
inlineEdit.gutterIndicator.successfulBackground#76bc30b3
inlineEdit.gutterIndicator.successfulBorder#76bc30
inlineEdit.gutterIndicator.successfulForeground#000000
inlineEdit.modifiedBackground#a9dc7626
inlineEdit.modifiedBorder#a9dc76cc
inlineEdit.modifiedChangedLineBackground#a9dc7614
inlineEdit.modifiedChangedTextBackground#00000000
inlineEdit.originalBackground#c1383826
inlineEdit.originalBorder#c13838cc
inlineEdit.originalChangedLineBackground#c13838cc
inlineEdit.originalChangedTextBackground#00000000
inlineEdit.tabWillAcceptModifiedBorder#a9dc76
inlineEdit.tabWillAcceptOriginalBorder#C13838
input.background#182b2e
input.border#324f55
input.foreground#c1d9de
input.placeholderForeground#4e7c85
inputOption.activeBackground#497f8a
inputOption.activeBorder#00000000
inputOption.activeForeground#c1d9de
inputOption.hoverBackground#264247
inputValidation.errorBackground#5f3333
inputValidation.errorBorder#da6c62
inputValidation.infoBackground#5f3333
inputValidation.infoBorder#da6c62
inputValidation.warningBackground#5f3333
inputValidation.warningBorder#da6c62
keybindingLabel.background#5f3333
keybindingLabel.border#956363
keybindingLabel.bottomBorder#956363
keybindingLabel.foreground#bf9f9f
list.activeSelectionBackground#80454573
list.activeSelectionForeground#c1d9de
list.dropBackground#da6c6215
list.errorForeground#E35535
list.focusBackground#da6c6240
list.focusForeground#a0c5cc
list.highlightForeground#da6c62
list.hoverBackground#8045454d
list.hoverForeground#ffffff
list.inactiveSelectionBackground#80454540
list.inactiveSelectionForeground#c1d9de
list.warningForeground#d1a456
menu.background#5f3333
menu.border#091112
menu.foreground#d3bebe
menu.selectionForeground#ffffff
menu.separatorBackground#09111265
menubar.selectionBackground#5f3333
menubar.selectionForeground#a0c5cc
merge.border#091112
merge.commonContentBackground#da6c6230
merge.commonHeaderBackground#da6c6280
merge.currentContentBackground#a9dc7630
merge.currentHeaderBackground#a9dc7680
merge.incomingContentBackground#00b3bd30
merge.incomingHeaderBackground#00b3bd80
minimap.background#142326
minimap.errorHighlight#E35535
minimap.findMatchHighlight#da6c62
minimap.selectionHighlight#da6c62
minimap.selectionOccurrenceHighlight#da6c62
minimap.warningHighlight#d1a456
minimapGutter.addedBackground#a9dc76
minimapGutter.deletedBackground#E35535
minimapGutter.modifiedBackground#00B3BD
multiDiffEditor.border#091112
multiDiffEditor.headerBackground#1d3237
notificationCenterHeader.background#5f3333
notificationCenterHeader.foreground#c1d9de
notificationLink.foreground#da6c62
notifications.background#5f3333
notifications.border#091112
notifications.foreground#a0c5cc
notificationsErrorIcon.foreground#C13838
notificationsInfoIcon.foreground#00B3BD
notificationsWarningIcon.foreground#5288BA
panel.background#121f22
panel.border#091112
panel.dropBorder#416f7980
panelInput.border#264247
panelSection.border#091112
panelSectionHeader.background#17282c
panelSectionHeader.border#091112
panelSectionHeader.foreground#c1d9de
panelTitle.activeBorder#da6c62
panelTitle.activeForeground#da6c62
panelTitle.inactiveForeground#416f79
peekView.border#091112
peekViewEditor.background#1b2f33
peekViewEditor.matchHighlightBackground#5f333340
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#1b2f33
peekViewEditorStickyScroll.background#192c30
peekViewResult.background#182b2e
peekViewResult.fileForeground#c1d9de
peekViewResult.lineForeground#a0c5cc
peekViewResult.matchHighlightBackground#da6c6280
peekViewResult.selectionBackground#da6c6233
peekViewResult.selectionForeground#c1d9de
peekViewTitle.background#1d3237
peekViewTitleDescription.foreground#c1d9de
peekViewTitleLabel.foreground#c1d9de
pickerGroup.border#091112
pickerGroup.foreground#c1d9de
profileBadge.background#da6c62
profileBadge.foreground#142326
progressBar.background#da6c62
quickInput.background#192c30
quickInput.foreground#c1d9deb3
quickInputList.focusBackground#a1575773
quickInputList.focusForeground#ffffff
quickInputList.focusIconForeground#c1d9de
quickInputTitle.background#101c1f
sash.hoverBorder#da6c6250
scmGraph.foreground1#00B3BD
scmGraph.foreground2#c47cbf
scmGraph.foreground3#b7d175
scmGraph.foreground4#da6c62
scmGraph.foreground5#B85C40
scmGraph.historyItemBaseRefColor#CC9B52
scmGraph.historyItemHoverAdditionsForeground#a9dc76
scmGraph.historyItemHoverDefaultLabelBackground#a0c5cc
scmGraph.historyItemHoverDefaultLabelForeground#000000
scmGraph.historyItemHoverDeletionsForeground#E35535
scmGraph.historyItemHoverLabelForeground#000000
scmGraph.historyItemRefColor#da6c62
scmGraph.historyItemRemoteRefColor#00B3BD
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#c1d9de4d
scrollbarSlider.background#c1d9de26
scrollbarSlider.hoverBackground#c1d9de33
selection.background#da6c6261
settings.headerForeground#c1d9de
settings.modifiedItemIndicator#da6c62
settings.settingsHeaderHoverForeground#c1d9de
sideBar.background#101c1f
sideBar.border#091112
sideBar.foreground#a0c5cccc
sideBarSectionHeader.background#101c1f
sideBarSectionHeader.border#091112
sideBarSectionHeader.foreground#c1d9de
sideBarStickyScroll.background#0d1618
sideBarStickyScroll.shadow#00000066
sideBarTitle.foreground#416f79
statusBar.background#142326
statusBar.border#091112
statusBar.debuggingBackground#3b3231
statusBar.debuggingForeground#c49a91
statusBar.foreground#a0c5cc80
statusBar.noFolderBackground#101c1f
statusBar.noFolderBorder#091112
statusBar.noFolderForeground#a0c5cccc
statusBarItem.activeBackground#5f3333
statusBarItem.compactHoverBackground#da6c62cc
statusBarItem.errorBackground#E35535
statusBarItem.errorForeground#160703
statusBarItem.errorHoverBackground#e97b62
statusBarItem.errorHoverForeground#142326
statusBarItem.hoverBackground#4e3a37
statusBarItem.hoverForeground#c1d9de
statusBarItem.offlineBackground#c47cbf
statusBarItem.offlineForeground#2d142b
statusBarItem.offlineHoverBackground#d49fd0
statusBarItem.offlineHoverForeground#142326
statusBarItem.prominentBackground#142326
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#264247
statusBarItem.prominentHoverForeground#142326
statusBarItem.remoteBackground#da6c62
statusBarItem.remoteForeground#310f0c
statusBarItem.remoteHoverBackground#e4938b
statusBarItem.remoteHoverForeground#142326
statusBarItem.warningBackground#d1a456
statusBarItem.warningForeground#1f1709
statusBarItem.warningHoverBackground#dcba7e
statusBarItem.warningHoverForeground#142326
tab.activeBackground#142326
tab.activeBorder#142326
tab.activeBorderTop#da6c62
tab.activeForeground#c1d9de
tab.border#091112
tab.hoverBackground#142326
tab.inactiveBackground#101c1f
tab.inactiveForeground#416f79
tab.lastPinnedBorder#091112
tab.unfocusedActiveBorder#142326
tab.unfocusedActiveForeground#da6c62
tab.unfocusedHoverBackground#142326
tab.unfocusedInactiveForeground#416f79
terminal.ansiBlack#142326
terminal.ansiBlue#00B3BD
terminal.ansiBrightBlack#355c65
terminal.ansiBrightBlue#00b3bd
terminal.ansiBrightCyan#f75445
terminal.ansiBrightGreen#a9f65c
terminal.ansiBrightMagenta#e15fd8
terminal.ansiBrightRed#ff4319
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#f75445
terminal.ansiCyan#da6c62
terminal.ansiGreen#a9dc76
terminal.ansiMagenta#c47cbf
terminal.ansiRed#E35535
terminal.ansiWhite#c1d9de
terminal.ansiYellow#da6c62
terminal.background#121f22
terminal.foreground#c1d9de
terminal.selectionForeground#c1d9de
terminalCursor.background#142326
terminalCursor.foreground#da6c62
terminalStickyScrollHover.background#192c30
textBlockQuote.background#00b3bd33
textBlockQuote.border#00b3bdb9
textCodeBlock.background#00b3bd33
textLink.activeForeground#da6c62
textLink.foreground#da6c62
textPreformat.background#3b3231
textPreformat.foreground#da6c62
textSeparator.foreground#da6c62
titleBar.activeBackground#0b1315
titleBar.activeForeground#c1d9de66
titleBar.border#091112
titleBar.inactiveBackground#0b1315
titleBar.inactiveForeground#416f79
toolbar.activeBackground#416f7980
toolbar.hoverBackground#416f794d
tree.indentGuidesStroke#416f7970
walkThrough.embeddedEditorBackground#142326
welcomePage.progress.background#5f3333
welcomePage.progress.foreground#da6c62
welcomePage.tileBackground#a0c5cc1a
welcomePage.tileBorder#a0c5cc33
welcomePage.tileHoverBackground#a0c5cc33
widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#416f79	—
string	#a9dc76	—
constant.numeric	#5288BA	—
constant.language, constant.other	#C13838	—
keyword.operator	#c1d9de	—
storage.type, storage.modifier	#da6c62	—
comment.line	#416f79	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	#416f79	italic
comment.line.fold.krl, meta.fold.krl, keyword.control.fold.krl	#6f6e72	italic
keyword.control.krl	#c47cbf	bold
keyword.function.movement.krl	#00B3BD	bold
storage.type.krl, storage.type.interrupt.krl, storage.type.trigger.krl	#da6c62	italic
variable.language.system.krl	#C13838
constant.numeric.krl, constant.numeric.hex.krl, constant.numeric.binary.krl	#5288BA	—
string.quoted.double.krl	#a9dc76	—
variable.function.krl	—	—
constant.language.enum.krl, variable.other.enummember.krl	#C13838	—
support.function.builtin.krl	—	—
keyword.operator.krl, keyword.operator.comparison.krl, keyword.operator.arithmetic.krl, keyword.operator.bitwise.krl, keyword.operator.logical.krl	#c1d9de	—

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}!`;
}