WL-Cyber Punk

Name: WL-Cyber Punk
Author: Watkins Labs

Publisher: Watkins LabsThemes in package: 1

Dark with neon accents

GitHub

VS Code preview

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

WL-Cyber Punk — WL-Cyber Punk

fetchUser.ts

index.ts

README.md

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#3c3c3c
activityBar.activeBorder#ffffff
activityBar.background#0D0C1D
activityBar.border#333333
activityBar.foreground#FF00FF
activityBar.inactiveForeground#FFFFFF99
activityBarBadge.background#FF00FF
activityBarBadge.foreground#0D0C1D
badge.background#4d4d4d
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#e0e0e0
breadcrumb.background#1e1e1e
breadcrumb.focusForeground#e0e0e0
breadcrumb.foreground#cccccccc
breadcrumbPicker.background#252526
button.background#FF00FF
button.foreground#0D0C1D
button.hoverBackground#00FFFF
button.secondaryBackground#3a3a3a
button.secondaryForeground#ffffff
button.secondaryHoverBackground#45494e
editor.background#0D0C1D
editor.findMatchBackground#515c6a
editor.findMatchHighlightBackground#ea5c0055
editor.findRangeHighlightBackground#3a3d4166
editor.foreground#B8B8D0
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#3a3d41
editor.lineHighlightBackground#24243E40
editor.lineHighlightBorder#282828
editor.rangeHighlightBackground#ffffff0b
editor.selectionBackground#00FFFF80
editor.selectionForeground#ffffff
editor.selectionHighlightBackground#add6ff26
editor.wordHighlightBackground#575757b8
editor.wordHighlightStrongBackground#004972b8
editorBracketMatch.background#0064001a
editorBracketMatch.border#888888
editorCodeLens.foreground#999999
editorCursor.background#000000
editorCursor.foreground#00FF00
editorError.border#f4877100
editorError.foreground#FF0000
editorGroup.border#444444
editorGroupHeader.tabsBackground#2d2d30
editorGroupHeader.tabsBorder#252526
editorGutter.addedBackground#587c0c
editorGutter.background#1e1e1e
editorGutter.deletedBackground#94151b
editorGutter.modifiedBackground#0c7d9d
editorHint.foreground#eeeeeeb3
editorHoverWidget.background#252526
editorHoverWidget.border#454545
editorIndentGuide.activeBackground#707070
editorIndentGuide.background#404040
editorInfo.border#75beff00
editorInfo.foreground#00FF00
editorLineNumber.activeForeground#c6c6c6
editorLineNumber.foreground#858585
editorLink.activeForeground#4e94ce
editorRuler.foreground#5a5a5a
editorSuggestWidget.background#252526
editorSuggestWidget.border#454545
editorSuggestWidget.foreground#d4d4d4
editorSuggestWidget.highlightForeground#0097fb
editorSuggestWidget.selectedBackground#062f4a
editorWarning.border#cca70000
editorWarning.foreground#FFFF00
editorWhitespace.foreground#e3e4e229
editorWidget.background#252526
editorWidget.border#454545
editorWidget.foreground#cccccc
extensionButton.prominentBackground#327e36
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#28632b
gitDecoration.addedResourceForeground#00FF00
gitDecoration.conflictingResourceForeground#6c6cc4
gitDecoration.deletedResourceForeground#FF0000
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#FFFF00
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#73c991
input.background#24243E
input.border#00FFFF80
input.foreground#B8B8D0
input.placeholderForeground#a6a6a6
inputOption.activeBackground#007acc
inputOption.activeBorder#007acc
inputOption.activeForeground#ffffff
inputValidation.errorBackground#5a1d1d
inputValidation.errorBorder#be1100
inputValidation.errorForeground#ffffff
inputValidation.infoBackground#063b49
inputValidation.infoBorder#007acc
inputValidation.infoForeground#ffffff
inputValidation.warningBackground#352a05
inputValidation.warningBorder#b89500
inputValidation.warningForeground#ffffff
list.activeSelectionBackground#00FFFF
list.activeSelectionForeground#B8B8D0
list.dropBackground#062f4a
list.highlightForeground#0097fb
list.hoverBackground#24243E80
list.hoverForeground#cccccc
list.inactiveSelectionBackground#37373d
list.inactiveSelectionForeground#cccccc
listFilterWidget.background#653723
listFilterWidget.noMatchesOutline#be1100
listFilterWidget.outline#00000000
menu.background#252526
menu.border#00000085
menu.foreground#cccccc
menu.selectionBackground#094771
menu.selectionBorder#00000000
menu.selectionForeground#ffffff
menu.separatorBackground#bbbbbb
menubar.selectionBackground#ffffff1a
menubar.selectionBorder#00000000
menubar.selectionForeground#cccccc
merge.border#c3c3c3
merge.commonContentBackground#282828
merge.commonHeaderBackground#383838
merge.currentContentBackground#27403B
merge.currentHeaderBackground#367366
merge.incomingContentBackground#28384B
merge.incomingHeaderBackground#395F8F
notificationCenter.border#474747
notificationCenterHeader.background#303031
notificationCenterHeader.foreground#cccccc
notificationLink.foreground#3794ff
notifications.background#252526
notifications.border#303031
notifications.foreground#cccccc
notificationToast.border#474747
panel.background#1e1e1e
panel.border#80808059
panel.dropBackground#164c7e
panelTitle.activeBorder#007acc
panelTitle.activeForeground#e7e7e7
panelTitle.inactiveForeground#e7e7e799
peekView.border#007acc
peekViewEditor.background#001f33
peekViewEditor.matchHighlightBackground#ff8f0099
peekViewEditor.matchHighlightBorder#ee931e
peekViewResult.background#252526
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#1e1e1e
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#ffffff
progressBar.background#0e70c0
scrollbar.shadow#000000
scrollbarSlider.activeBackground#bfbfbf66
scrollbarSlider.background#79797966
scrollbarSlider.hoverBackground#646464b3
sideBar.background#24243E
sideBar.border#333333
sideBar.foreground#FFFFFF
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#33333300
sideBarSectionHeader.foreground#cccccc
sideBarTitle.foreground#FF00FF
statusBar.background#FF00FF
statusBar.border#007acc
statusBar.debuggingBackground#FFFF00
statusBar.debuggingBorder#cc6633
statusBar.debuggingForeground#0D0C1D
statusBar.foreground#0D0C1D
statusBar.noFolderBackground#68217a
statusBar.noFolderBorder#68217a
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#ffffff2e
statusBarItem.hoverBackground#ffffff1f
statusBarItem.prominentBackground#00000080
statusBarItem.prominentHoverBackground#0000004d
tab.activeBackground#1e1e1e
tab.activeBorder#1e1e1e
tab.activeForeground#ffffff
tab.border#252526
tab.inactiveBackground#2d2d30
tab.inactiveForeground#969696
tab.unfocusedActiveBorder#1e1e1e
tab.unfocusedActiveForeground#cccccc
tab.unfocusedInactiveForeground#969696
terminal.ansiBlack#000000
terminal.ansiBlue#00FF00
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#00FF00
terminal.ansiBrightCyan#00FF00
terminal.ansiBrightGreen#00FF00
terminal.ansiBrightMagenta#00FFFF
terminal.ansiBrightRed#FF0000
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFFF00
terminal.ansiCyan#00FF00
terminal.ansiGreen#00FF00
terminal.ansiMagenta#00FFFF
terminal.ansiRed#FF0000
terminal.ansiWhite#B8B8D0
terminal.ansiYellow#FFFF00
terminal.background#0D0C1D
terminal.foreground#B8B8D0
terminal.selectionBackground#ffffff40
terminalCursor.background#000000
terminalCursor.foreground#00FF00
titleBar.activeBackground#3c3c3c
titleBar.activeForeground#cccccc
titleBar.border#00000000
titleBar.inactiveBackground#3c3c3c99
titleBar.inactiveForeground#cccccc99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#808080	italic
string, string.quoted	#E6D06A	—
constant.numeric	#D0D0B8	—
keyword, keyword.control, storage.type, storage.modifier	#00FF00	bold
entity.name.function, support.function	#FF00FF	—
variable, variable.other	#00FFFF	—
entity.name.type, entity.name.class, support.type, support.class	#B8D0D0	—
constant, constant.language, support.constant	#00FF00	—
entity.name.tag, meta.tag	#00FF00	—
entity.other.attribute-name	#00FFFF	—
invalid, invalid.illegal	#FF0000	—

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