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 Monokai Black

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#8f8f8f26
activityBar.activeBorder#8f8f8f
activityBar.background#0e0e0e
activityBar.border#050505
activityBar.dropBorder#54545433
activityBar.foreground#8f8f8f
activityBar.inactiveForeground#484f4b
activityBarBadge.background#8f8f8f
activityBarBadge.foreground#0e0e0e
activityBarTop.activeBorder#8f8f8f
activityBarTop.dropBorder#54545433
activityBarTop.foreground#8f8f8f
activityBarTop.inactiveForeground#434343
badge.background#8f8f8f
badge.foreground#0e0e0e
breadcrumb.background#141414
breadcrumbPicker.background#212121
button.background#8f8f8f80
button.border#ffffff26
button.foreground#c7c7c7
button.hoverBackground#8f8f8f99
button.secondaryBackground#262626
button.secondaryForeground#c7c7c7cc
button.secondaryHoverBackground#2e2e2e
button.separator#ffffff4d
charts.blue#78dce8
charts.foreground#c7c7c7
charts.green#a9dc76
charts.lines#c7c7c7
charts.orange#fc9867
charts.purple#e991e3
charts.red#fc6a67
charts.yellow#ffd866
checkbox.foreground#c7c7c7
commandCenter.activeBackground#21212161
commandCenter.activeForeground#adadad8f
commandCenter.background#141414
commandCenter.border#050505
commandCenter.foreground#545454
contrastActiveBorder#00000000
contrastBorder#00000000
debugConsole.errorForeground#fc6a67
debugConsole.infoForeground#78dce8
debugConsole.warningForeground#ffd866
debugExceptionWidget.background#212121
debugExceptionWidget.border#050505
debugIcon.breakpointCurrentStackframeForeground#fc6a67
debugIcon.breakpointDisabledForeground#fc6a6780
debugIcon.breakpointForeground#fc6a67
debugIcon.continueForeground#78dce8
debugIcon.disconnectForeground#fc6a67
debugIcon.pauseForeground#fc6a67
debugIcon.restartForeground#a9dc76
debugIcon.startForeground#a9dc76
debugIcon.stepBackForeground#78dce8
debugIcon.stepIntoForeground#78dce8
debugIcon.stepOutForeground#78dce8
debugIcon.stepOverForeground#78dce8
debugIcon.stopForeground#fc6a67
debugToolBar.background#1f1f1f
descriptionForeground#c7c7c780
diffEditor.border#050505
diffEditor.diagonalFill#212121
diffEditor.insertedLineBackground#a9e9691a
diffEditor.insertedTextBackground#a9e9691a
diffEditor.insertedTextBorder#00000000
diffEditor.move.border#ffd8664d
diffEditor.moveActive.border#ffd866b3
diffEditor.removedLineBackground#ff67641a
diffEditor.removedTextBackground#ff67641a
diffEditor.removedTextBorder#00000000
diffEditor.unchangedCodeBackground#0b0b0b
diffEditor.unchangedRegionBackground#0b0b0b
diffEditor.unchangedRegionShadow#00000066
diffEditorGutter.insertedLineBackground#00000000
diffEditorGutter.removedLineBackground#00000000
diffEditorOverview.insertedForeground#a9dc7626
diffEditorOverview.removedForeground#fc6a6730
disabledForeground#c7c7c74d
dropdown.background#1a1a1a
dropdown.border#3a3a3a
dropdown.foreground#c7c7c7
dropdown.listBackground#1a1a1a
editor.background#141414
editor.findMatchBackground#8f8f8f30
editor.findMatchBorder#8f8f8f61
editor.findMatchHighlightBackground#8f8f8f3d
editor.findMatchHighlightBorder#8f8f8f5c
editor.foldBackground#00000033
editor.foldPlaceholderForeground#545454
editor.foreground#c7c7c7
editor.hoverHighlightBackground#8f8f8f4d
editor.inactiveSelectionBackground#8f8f8f4d
editor.lineHighlightBackground#8f8f8f0f
editor.lineHighlightBorder#8f8f8f26
editor.linkedEditingBackground#68e8f833
editor.rangeHighlightBackground#8f8f8f3d
editor.selectionBackground#8f8f8f4d
editor.selectionForeground#c7c7c7
editor.selectionHighlightBackground#8f8f8f14
editor.selectionHighlightBorder#8f8f8f4d
editor.wordHighlightBackground#8f8f8f73
editor.wordHighlightBorder#8f8f8f8a
editor.wordHighlightStrongBackground#8f8f8f4d
editorBracketHighlight.foreground1#ffd866
editorBracketHighlight.foreground2#e991e3
editorBracketHighlight.foreground3#78dce8
editorBracketHighlight.foreground4#ab9df2
editorBracketHighlight.foreground5#78e8c6
editorBracketHighlight.foreground6#ff6188
editorBracketHighlight.unexpectedBracket.foreground#fc6a67
editorBracketMatch.background#8f8f8f4d
editorBracketMatch.border#8f8f8f73
editorCodeLens.foreground#adadad80
editorCursor.background#8f8f8f
editorCursor.foreground#ffd866
editorError.border#00000000
editorError.foreground#fc6a67
editorGhostText.border#00000000
editorGhostText.foreground#c7c7c770
editorGroup.border#050505
editorGroup.dropBackground#8f8f8f14
editorGroupHeader.border#00000000
editorGroupHeader.noTabsBackground#141414
editorGroupHeader.tabsBackground#0e0e0e
editorGroupHeader.tabsBorder#050505
editorGutter.addedBackground#a9dc76cc
editorGutter.background#141414
editorGutter.commentRangeForeground#212121
editorGutter.deletedBackground#fc6a67cc
editorGutter.modifiedBackground#78dce8cc
editorHoverWidget.background#212121
editorHoverWidget.border#050505
editorIndentGuide.activeBackground1#545454cc
editorIndentGuide.background1#54545433
editorInfo.border#00000000
editorInlayHint.background#adadad1a
editorInlayHint.foreground#adadadb3
editorInlayHint.parameterBackground#adadad1a
editorInlayHint.parameterForeground#adadadb3
editorInlayHint.typeBackground#adadad1a
editorInlayHint.typeForeground#adadadb3
editorLineNumber.activeForeground#919191
editorLineNumber.foreground#383e3a
editorLink.activeForeground#c7c7c7
editorMarkerNavigation.background#0e0e0e
editorMarkerNavigationError.background#fc6a678f
editorMarkerNavigationInfo.background#78dce88f
editorMarkerNavigationWarning.background#ffd8668f
editorOverviewRuler.addedForeground#a9dc7680
editorOverviewRuler.border#050505
editorOverviewRuler.deletedForeground#fc6a6780
editorOverviewRuler.errorForeground#fc6a67
editorOverviewRuler.incomingContentForeground#a9dc7680
editorOverviewRuler.infoForeground#78dce880
editorOverviewRuler.modifiedForeground#78dce880
editorOverviewRuler.selectionHighlightForeground#8f8f8f80
editorOverviewRuler.warningForeground#ffd866
editorRuler.foreground#54545433
editorStickyScroll.shadow#00000066
editorStickyScrollHover.background#1c1c1c
editorSuggestWidget.background#191919
editorSuggestWidget.border#050505
editorSuggestWidget.foreground#adadad
editorSuggestWidget.highlightForeground#ffd866
editorSuggestWidget.selectedBackground#2e2e2e
editorSuggestWidget.selectedIconForeground#c7c7c7
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#000000aa
editorWarning.border#00000000
editorWarning.foreground#ffd866
editorWhitespace.foreground#54545460
editorWidget.background#212121
editorWidget.border#2e2e2e
editorWidget.resizeBorder#8f8f8f50
errorForeground#fc6a67
errorLens.errorForeground#fc6a67fc
errorLens.hintForeground#78dce8fc
errorLens.infoForeground#78dce8fc
errorLens.warningForeground#ffd866fc
extensionButton.background#8f8f8f80
extensionButton.foreground#c7c7c7
extensionButton.hoverBackground#8f8f8f99
extensionButton.prominentBackground#8f8f8f9d
extensionButton.prominentForeground#c7c7c7
extensionButton.prominentHoverBackground#8f8f8f
focusBorder#474747
foreground#adadad
gitDecoration.conflictingResourceForeground#8f8f8f
gitDecoration.deletedResourceForeground#fc6a67
gitDecoration.ignoredResourceForeground#545454
gitDecoration.modifiedResourceForeground#78dce8
gitDecoration.untrackedResourceForeground#a9dc76
icon.foreground#adadadab
inlineChat.background#212121
inlineChat.border#2e2e2e
inlineChatInput.background#191919
inlineChatInput.border#2e2e2e
inlineChatInput.focusBorder#474747
inlineEdit.gutterIndicator.background#adadad80
inlineEdit.gutterIndicator.primaryBackground#ffbe00b3
inlineEdit.gutterIndicator.primaryBorder#ffbe00
inlineEdit.gutterIndicator.primaryForeground#000000
inlineEdit.gutterIndicator.secondaryBackground#5c5c5cb3
inlineEdit.gutterIndicator.secondaryBorder#5c5c5c
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#fc6a6726
inlineEdit.originalBorder#fc6a67cc
inlineEdit.originalChangedLineBackground#fc6a67cc
inlineEdit.originalChangedTextBackground#00000000
inlineEdit.tabWillAcceptModifiedBorder#a9dc76
inlineEdit.tabWillAcceptOriginalBorder#fc6a67
input.background#1a1a1a
input.border#3a3a3a
input.foreground#c7c7c7
input.placeholderForeground#616161
inputOption.activeBackground#616161
inputOption.activeBorder#00000000
inputOption.activeForeground#c7c7c7
inputOption.hoverBackground#2e2e2e
inputValidation.errorBackground#212121
inputValidation.errorBorder#ffd866
inputValidation.infoBackground#212121
inputValidation.infoBorder#8f8f8f
inputValidation.warningBackground#212121
inputValidation.warningBorder#ffd866
keybindingLabel.background#212121
keybindingLabel.border#545454
keybindingLabel.bottomBorder#545454
keybindingLabel.foreground#878787
list.activeSelectionBackground#3b3b3b73
list.activeSelectionForeground#c7c7c7
list.dropBackground#8f8f8f15
list.errorForeground#fc6a67
list.focusBackground#8f8f8f40
list.focusForeground#adadad
list.highlightForeground#ffd866
list.hoverBackground#3b3b3b4d
list.hoverForeground#ededed
list.inactiveSelectionBackground#3b3b3b40
list.inactiveSelectionForeground#c7c7c7
list.warningForeground#ffd866
menu.background#212121
menu.border#050505
menu.foreground#a1a1a1
menu.selectionForeground#ededed
menu.separatorBackground#05050565
menubar.selectionBackground#212121
menubar.selectionForeground#adadad
merge.border#050505
merge.commonContentBackground#ffd86630
merge.commonHeaderBackground#ffd86680
merge.currentContentBackground#a9dc7630
merge.currentHeaderBackground#a9dc7680
merge.incomingContentBackground#78dce830
merge.incomingHeaderBackground#78dce880
minimap.background#141414
minimap.errorHighlight#fc6a67
minimap.findMatchHighlight#8f8f8f
minimap.selectionHighlight#8f8f8f
minimap.selectionOccurrenceHighlight#8f8f8f
minimap.warningHighlight#ffd866
minimapGutter.addedBackground#a9dc76
minimapGutter.deletedBackground#fc6a67
minimapGutter.modifiedBackground#78dce8
multiDiffEditor.border#050505
multiDiffEditor.headerBackground#212121
notificationCenterHeader.background#212121
notificationCenterHeader.foreground#c7c7c7
notificationLink.foreground#ffd866
notifications.background#212121
notifications.border#050505
notifications.foreground#adadad
notificationsErrorIcon.foreground#fc6a67
notificationsInfoIcon.foreground#78dce8
notificationsWarningIcon.foreground#fc9867
panel.background#111111
panel.border#050505
panel.dropBorder#54545480
panelInput.border#2e2e2e
panelSection.border#050505
panelSectionHeader.background#191919
panelSectionHeader.border#050505
panelSectionHeader.foreground#c7c7c7
panelTitle.activeBorder#8f8f8f
panelTitle.activeForeground#8f8f8f
panelTitle.inactiveForeground#545454
peekView.border#050505
peekViewEditor.background#1e1e1e
peekViewEditor.matchHighlightBackground#21212140
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#1e1e1e
peekViewEditorStickyScroll.background#1c1c1c
peekViewResult.background#1a1a1a
peekViewResult.fileForeground#c7c7c7
peekViewResult.lineForeground#adadad
peekViewResult.matchHighlightBackground#8f8f8f80
peekViewResult.selectionBackground#8f8f8f33
peekViewResult.selectionForeground#c7c7c7
peekViewTitle.background#212121
peekViewTitleDescription.foreground#c7c7c7
peekViewTitleLabel.foreground#c7c7c7
pickerGroup.border#050505
pickerGroup.foreground#c7c7c7
profileBadge.background#8f8f8f
profileBadge.foreground#141414
progressBar.background#ffd866
quickInput.background#1c1c1c
quickInput.foreground#c7c7c7b3
quickInputList.focusBackground#54545473
quickInputList.focusForeground#ededed
quickInputList.focusIconForeground#c7c7c7
quickInputTitle.background#0e0e0e
sash.hoverBorder#8f8f8f50
scmGraph.foreground1#78dce8
scmGraph.foreground2#e991e3
scmGraph.foreground3#b7d175
scmGraph.foreground4#78e8c6
scmGraph.foreground5#ff6188
scmGraph.historyItemBaseRefColor#ab9df2
scmGraph.historyItemHoverAdditionsForeground#a9dc76
scmGraph.historyItemHoverDefaultLabelBackground#adadad
scmGraph.historyItemHoverDefaultLabelForeground#000000
scmGraph.historyItemHoverDeletionsForeground#fc6a67
scmGraph.historyItemHoverLabelForeground#000000
scmGraph.historyItemRefColor#ffd866
scmGraph.historyItemRemoteRefColor#78dce8
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#c7c7c74d
scrollbarSlider.background#c7c7c726
scrollbarSlider.hoverBackground#c7c7c733
selection.background#8f8f8f61
settings.headerForeground#c7c7c7
settings.modifiedItemIndicator#8f8f8f
settings.settingsHeaderHoverForeground#c7c7c7
sideBar.background#0e0e0e
sideBar.border#050505
sideBar.foreground#adadadcc
sideBarSectionHeader.background#0e0e0e
sideBarSectionHeader.border#050505
sideBarSectionHeader.foreground#c7c7c7
sideBarStickyScroll.background#090909
sideBarStickyScroll.shadow#00000066
sideBarTitle.foreground#545454
statusBar.background#141414
statusBar.border#050505
statusBar.debuggingBackground#2a2a2a
statusBar.debuggingForeground#9a9a9a
statusBar.foreground#adadad80
statusBar.noFolderBackground#0e0e0e
statusBar.noFolderBorder#050505
statusBar.noFolderForeground#adadadcc
statusBarItem.activeBackground#212121
statusBarItem.compactHoverBackground#8f8f8fcc
statusBarItem.errorBackground#fc6a67
statusBarItem.errorForeground#620402
statusBarItem.errorHoverBackground#fd9b99
statusBarItem.errorHoverForeground#141414
statusBarItem.hoverBackground#353535
statusBarItem.hoverForeground#c7c7c7
statusBarItem.offlineBackground#e991e3
statusBarItem.offlineForeground#661461
statusBarItem.offlineHoverBackground#f2bbee
statusBarItem.offlineHoverForeground#141414
statusBarItem.prominentBackground#141414
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#2e2e2e
statusBarItem.prominentHoverForeground#141414
statusBarItem.remoteBackground#78e8c6
statusBarItem.remoteForeground#0e533e
statusBarItem.remoteHoverBackground#a4efd8
statusBarItem.remoteHoverForeground#141414
statusBarItem.warningBackground#ffd866
statusBarItem.warningForeground#664c00
statusBarItem.warningHoverBackground#ffe599
statusBarItem.warningHoverForeground#141414
tab.activeBackground#141414
tab.activeBorder#141414
tab.activeBorderTop#8f8f8f
tab.activeForeground#c7c7c7
tab.border#050505
tab.hoverBackground#141414
tab.inactiveBackground#0e0e0e
tab.inactiveForeground#545454
tab.lastPinnedBorder#050505
tab.unfocusedActiveBorder#141414
tab.unfocusedActiveForeground#8f8f8f
tab.unfocusedHoverBackground#141414
tab.unfocusedInactiveForeground#545454
terminal.ansiBlack#141414
terminal.ansiBlue#78dce8
terminal.ansiBrightBlack#444444
terminal.ansiBrightBlue#61eeff
terminal.ansiBrightCyan#61ffcf
terminal.ansiBrightGreen#a9f65c
terminal.ansiBrightMagenta#fd7df4
terminal.ansiBrightRed#ff6764
terminal.ansiBrightWhite#fafafa
terminal.ansiBrightYellow#ffd866
terminal.ansiCyan#78e8c6
terminal.ansiGreen#a9dc76
terminal.ansiMagenta#e991e3
terminal.ansiRed#fc6a67
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#ffd866
terminal.background#111111
terminal.foreground#c7c7c7
terminal.selectionForeground#c7c7c7
terminalCursor.background#141414
terminalCursor.foreground#ffd866
terminalStickyScrollHover.background#1c1c1c
textBlockQuote.background#78dce833
textBlockQuote.border#78dce8b9
textCodeBlock.background#78dce833
textLink.activeForeground#78dce8
textLink.foreground#78dce8
textPreformat.background#3c3524
textPreformat.foreground#ffd866
textSeparator.foreground#8f8f8f
titleBar.activeBackground#060606
titleBar.activeForeground#c7c7c766
titleBar.border#050505
titleBar.inactiveBackground#060606
titleBar.inactiveForeground#545454
toolbar.activeBackground#54545480
toolbar.hoverBackground#5454544d
tree.indentGuidesStroke#54545470
walkThrough.embeddedEditorBackground#141414
welcomePage.progress.background#212121
welcomePage.progress.foreground#8f8f8f
welcomePage.tileBackground#adadad1a
welcomePage.tileBorder#adadad33
welcomePage.tileHoverBackground#adadad33
widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#545454	italic
string	#a9dc76	—
constant.numeric	#fc9867	—
comment.line	#545454	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	#545454	italic
comment.line.fold.krl, meta.fold.krl, keyword.control.fold.krl	#877c59	italic
keyword.control.krl	#ab9df2	bold
keyword.function.movement.krl	#78dce8	bold
storage.type.krl, storage.type.interrupt.krl, storage.type.trigger.krl	#ffd866	italic
variable.language.system.krl	#fc6a67
constant.numeric.krl, constant.numeric.hex.krl, constant.numeric.binary.krl	#fc9867	—
string.quoted.double.krl	#a9dc76	—
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}!`;
}