Cyberpunk Dusk

Name: Cyberpunk Dusk
Author: bobmakhlin

Publisher: bobmakhlinThemes in package: 1

A cyberpunk-inspired dark theme for VS Code

GitHub

VS Code preview

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

Cyberpunk Dusk — Cyberpunk Dusk

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.background#070A10
activityBar.border#141C2A
activityBar.foreground#B7C0CD
activityBar.inactiveForeground#6C7688
activityBarBadge.background#2A766E
activityBarBadge.foreground#0A0F18
badge.background#2A766E
badge.foreground#0A0F18
breadcrumb.activeSelectionForeground#C7CFD8
breadcrumb.background#0A0F18
breadcrumb.focusForeground#C7CFD8
breadcrumb.foreground#8B95A7
breadcrumbPicker.background#0B1220
button.background#2A766E
button.foreground#0A0F18
button.hoverBackground#43908E
button.secondaryBackground#101B2A
button.secondaryForeground#C7CFD8
button.secondaryHoverBackground#142A33
commandCenter.activeBackground#101B2A
commandCenter.activeBorder#2A766E
commandCenter.activeForeground#C7CFD8
commandCenter.background#0B1220
commandCenter.border#141C2A
commandCenter.foreground#A3ACBA
debugConsole.errorForeground#AE826B
debugConsole.infoForeground#C7CFD8
debugConsole.warningForeground#B5966B
debugConsoleInputIcon.foreground#2A766E
debugIcon.breakpointDisabledForeground#6C7688
debugIcon.breakpointForeground#AE826B
debugIcon.continueForeground#79AFAE
debugIcon.pauseForeground#B5966B
debugIcon.restartForeground#79AFAE
debugIcon.startForeground#79AFAE
debugIcon.stepIntoForeground#74A1B0
debugIcon.stepOutForeground#74A1B0
debugIcon.stepOverForeground#74A1B0
debugIcon.stopForeground#AE826B
debugToolBar.background#0B1220
debugToolBar.border#141C2A
descriptionForeground#8B95A7
diffEditor.border#141C2A
diffEditor.diagonalFill#1A2233
diffEditor.insertedLineBackground#5EADAD38
diffEditor.insertedTextBackground#5EADAD60
diffEditor.removedLineBackground#C96A6A35
diffEditor.removedTextBackground#C96A6A55
diffEditorGutter.insertedLineBackground#5EADAD55
diffEditorGutter.removedLineBackground#C96A6A50
diffEditorOverview.insertedForeground#5EADAD
diffEditorOverview.removedForeground#C96A6A
dropdown.background#0B1220
dropdown.border#141C2A
dropdown.foreground#C7CFD8
dropdown.listBackground#0B1220
editor.background#0A0F18
editor.findMatchBackground#2A766E44
editor.findMatchHighlightBackground#2A766E22
editor.foreground#C7CFD8
editor.hoverHighlightBackground#2A766E22
editor.inactiveSelectionBackground#142A3344
editor.lineHighlightBackground#121827
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#142A3333
editor.selectionBackground#142A33
editor.selectionHighlightBackground#142A3355
editor.wordHighlightBackground#2A766E22
editor.wordHighlightStrongBackground#2A766E33
editor.wordHighlightTextBackground#5EADAD25
editorBracketHighlight.foreground1#5B9C9E
editorBracketHighlight.foreground2#7898BE
editorBracketHighlight.foreground3#A39AD1
editorBracketHighlight.foreground4#B5966B
editorBracketHighlight.foreground5#79AFAE
editorBracketHighlight.foreground6#AE826B
editorBracketMatch.background#2A766E33
editorBracketMatch.border#2A766E
editorBracketPairGuide.activeBackground1#27324A
editorBracketPairGuide.background1#151C2A
editorCursor.foreground#43908E
editorGroup.border#141C2A
editorGroupHeader.tabsBackground#080C14
editorGroupHeader.tabsBorder#141C2A
editorGutter.addedBackground#5EADAD
editorGutter.background#0A0F18
editorGutter.commentGlyphForeground#8B7EC8
editorGutter.commentRangeForeground#8B7EC855
editorGutter.commentUnresolvedGlyphForeground#C9A657
editorGutter.deletedBackground#C96A6A
editorGutter.foldingControlForeground#6C7688
editorGutter.modifiedBackground#8B7EC8
editorHoverWidget.background#0B1220
editorHoverWidget.border#141C2A
editorHoverWidget.foreground#C7CFD8
editorIndentGuide.activeBackground1#27324A
editorIndentGuide.background1#151C2A
editorInlayHint.background#8B7EC830
editorInlayHint.foreground#A3ACBA
editorLineNumber.activeForeground#AAB4C2
editorLineNumber.foreground#586174
editorLink.activeForeground#74A1B0
editorOverviewRuler.addedForeground#5EADAD
editorOverviewRuler.border#141C2A
editorOverviewRuler.deletedForeground#C96A6A
editorOverviewRuler.errorForeground#C96A6A
editorOverviewRuler.infoForeground#5EADAD
editorOverviewRuler.modifiedForeground#8B7EC8
editorOverviewRuler.warningForeground#C9A657
editorRuler.foreground#1A2233
editorSuggestWidget.background#0B1220
editorSuggestWidget.border#141C2A
editorSuggestWidget.foreground#C7CFD8
editorSuggestWidget.highlightForeground#2A766E
editorSuggestWidget.selectedBackground#101B2A
editorWidget.background#0B1220
editorWidget.border#141C2A
editorWidget.foreground#C7CFD8
errorForeground#AE826B
extensionBadge.remoteBackground#2A766E
extensionBadge.remoteForeground#0A0F18
extensionButton.prominentBackground#2A766E
extensionButton.prominentForeground#0A0F18
extensionButton.prominentHoverBackground#43908E
focusBorder#203047
foreground#C7CFD8
gitDecoration.addedResourceForeground#79AFAE
gitDecoration.conflictingResourceForeground#B5966B
gitDecoration.deletedResourceForeground#AE826B
gitDecoration.ignoredResourceForeground#586174
gitDecoration.modifiedResourceForeground#74A1B0
gitDecoration.stageDeletedResourceForeground#AE826B
gitDecoration.stageModifiedResourceForeground#74A1B0
gitDecoration.submoduleResourceForeground#74A1B0
gitDecoration.untrackedResourceForeground#79AFAE
icon.foreground#A3ACBA
inlineChat.background#0B1220
inlineChat.border#2A766E
inlineChat.shadow#00000066
inlineChatDiff.inserted#5EADAD50
inlineChatDiff.removed#C96A6A48
inlineChatInput.background#0A0F18
inlineChatInput.border#203047
inlineChatInput.focusBorder#2A766E
inlineChatInput.placeholderForeground#6C7688
input.background#0B1220
input.border#141C2A
input.foreground#C7CFD8
input.placeholderForeground#6C7688
inputOption.activeBackground#2A766E44
inputOption.activeBorder#2A766E
inputOption.activeForeground#C7CFD8
inputValidation.errorBackground#6B3646
inputValidation.errorBorder#6B3646
inputValidation.infoBackground#142A33
inputValidation.infoBorder#2A766E
inputValidation.warningBackground#2A5A74
inputValidation.warningBorder#B5966B
list.activeSelectionBackground#101B2A
list.activeSelectionForeground#C7CFD8
list.errorForeground#AE826B
list.focusBackground#101B2A
list.focusForeground#C7CFD8
list.focusOutline#2A766E55
list.highlightForeground#2A766E
list.hoverBackground#0E1623
list.hoverForeground#C7CFD8
list.inactiveSelectionBackground#0E1623
list.inactiveSelectionForeground#B7C0CD
list.warningForeground#B5966B
merge.border#141C2A
merge.currentContentBackground#5EADAD22
merge.currentHeaderBackground#5EADAD44
merge.incomingContentBackground#8B7EC822
merge.incomingHeaderBackground#8B7EC844
minimap.background#080C14
minimap.findMatchHighlight#2A766E44
minimap.selectionHighlight#2A766E55
minimapGutter.addedBackground#5EADAD
minimapGutter.deletedBackground#C96A6A
minimapGutter.modifiedBackground#8B7EC8
notificationCenterHeader.background#0A0F18
notificationCenterHeader.foreground#C7CFD8
notifications.background#0B1220
notifications.border#141C2A
notifications.foreground#C7CFD8
notificationsErrorIcon.foreground#AE826B
notificationsInfoIcon.foreground#2A766E
notificationsWarningIcon.foreground#B5966B
panel.background#080C14
panel.border#141C2A
panelTitle.activeBorder#2A766E
panelTitle.activeForeground#C7CFD8
panelTitle.inactiveForeground#8B95A7
peekView.border#2A766E
peekViewEditor.background#0B1220
peekViewEditorGutter.background#080C14
peekViewResult.background#080C14
peekViewResult.fileForeground#C7CFD8
peekViewResult.lineForeground#A3ACBA
peekViewResult.matchHighlightBackground#2A766E44
peekViewResult.selectionBackground#101B2A
peekViewResult.selectionForeground#C7CFD8
peekViewTitle.background#0B1220
peekViewTitleDescription.foreground#8B95A7
peekViewTitleLabel.foreground#C7CFD8
progressBar.background#2A766E
quickInput.background#0B1220
quickInput.foreground#C7CFD8
quickInputList.focusBackground#101B2A
quickInputList.focusForeground#C7CFD8
quickInputTitle.background#0A0F18
sash.hoverBorder#2A766E
scrollbar.shadow#00000044
scrollbarSlider.activeBackground#2A766E44
scrollbarSlider.background#2A766E22
scrollbarSlider.hoverBackground#2A766E33
selection.background#2A766E55
settings.checkboxBackground#0B1220
settings.checkboxBorder#141C2A
settings.checkboxForeground#C7CFD8
settings.dropdownBackground#0B1220
settings.dropdownBorder#141C2A
settings.dropdownForeground#C7CFD8
settings.headerForeground#C7CFD8
settings.modifiedItemIndicator#2A766E
settings.numberInputBackground#0B1220
settings.numberInputBorder#141C2A
settings.numberInputForeground#C7CFD8
settings.textInputBackground#0B1220
settings.textInputBorder#141C2A
settings.textInputForeground#C7CFD8
sideBar.background#080C14
sideBar.border#141C2A
sideBar.foreground#A3ACBA
sideBarSectionHeader.background#0A0F18
sideBarSectionHeader.border#141C2A
sideBarSectionHeader.foreground#A3ACBA
sideBarTitle.foreground#B7C0CD
statusBar.background#070A10
statusBar.border#141C2A
statusBar.debuggingBackground#2A766E
statusBar.debuggingForeground#0A0F18
statusBar.foreground#B7C0CD
statusBar.noFolderBackground#070A10
tab.activeBackground#0A0F18
tab.activeBorderTop#2A766E
tab.activeForeground#C7CFD8
tab.border#141C2A
tab.hoverBackground#101B2A
tab.inactiveBackground#080C14
tab.inactiveForeground#8B95A7
tab.unfocusedActiveBackground#0A0F18
tab.unfocusedActiveBorderTop#22314A
tab.unfocusedActiveForeground#A3ACBA
tab.unfocusedInactiveBackground#080C14
tab.unfocusedInactiveForeground#6C7688
terminal.ansiBlack#080C14
terminal.ansiBlue#74A1B0
terminal.ansiBrightBlack#6C7688
terminal.ansiBrightBlue#7898BE
terminal.ansiBrightCyan#43908E
terminal.ansiBrightGreen#7FB8B7
terminal.ansiBrightMagenta#A39AD1
terminal.ansiBrightRed#B4986F
terminal.ansiBrightWhite#C7CFD8
terminal.ansiBrightYellow#B5966B
terminal.ansiCyan#2A766E
terminal.ansiGreen#79AFAE
terminal.ansiMagenta#9A8CC2
terminal.ansiRed#AE826B
terminal.ansiWhite#C7CFD8
terminal.ansiYellow#B5966B
terminal.background#080C14
terminal.foreground#C7CFD8
testing.iconErrored#AE826B
testing.iconFailed#AE826B
testing.iconPassed#79AFAE
testing.iconQueued#8B95A7
testing.iconSkipped#B5966B
testing.iconUnset#6C7688
titleBar.activeBackground#070A10
titleBar.activeForeground#C7CFD8
titleBar.border#141C2A
titleBar.inactiveBackground#070A10
titleBar.inactiveForeground#8B95A7
tree.indentGuidesStroke#1A2233
welcomePage.background#0A0F18
welcomePage.tileBackground#0B1220
welcomePage.tileBorder#141C2A
welcomePage.tileHoverBackground#101B2A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6C7688	italic
string, string.quoted, string.quoted.double, string.quoted.single, string.template, string.interpolated	#B4986F	—
constant.character.escape, string.regexp	#B4986F	—
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary	#AE826B	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#AE826B	—
constant.other, constant.character, variable.other.constant	#A08FB4	—
keyword, keyword.other	#5B9C9E	—
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.exception	#6193A8	—
storage.type, storage.modifier	#5B9C9E	—
storage.type.primitive, support.type.primitive, storage.type.built-in, support.type.builtin	#A39AD1	—
entity.name.type, entity.name.type.class, entity.name.class, support.class, support.type	#9A8CC2	—
entity.name.type.interface, entity.name.type.alias, entity.name.type.enum, entity.name.type.type-parameter	#A39AD1	—
entity.other.inherited-class	#9A8CC2	italic
entity.name.function, support.function, meta.function-call, variable.function	#7898BE	—
variable.parameter, meta.parameter	#8F9BA9	—
variable, variable.other, variable.other.readwrite, entity.name.variable	#9AA6B2	—
variable.other.property, variable.other.field, variable.other.field.java, variable.other.member, variable.other.member.java, variable.other.object.property, variable.other.property.java, support.type.property-name, meta.object-literal.key	#6C9B9B	—
support.type.property-name.json, entity.name.tag.yaml, punctuation.support.type.property-name	#79AFAE	—
meta.annotation, storage.type.annotation, punctuation.definition.annotation, meta.decorator, entity.name.function.decorator, punctuation.decorator	#B5966B	italic
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, meta.import	#74A1B0	—
entity.name.namespace, entity.name.package, entity.name.module, support.other.namespace	#74A1B0	—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.ternary	#8FA4B2	—
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator, meta.brace	#9BA6B2	—
punctuation.bracket, punctuation.section, punctuation.definition.block, punctuation.definition.parameters	#9BA6B2	—
entity.name.tag, punctuation.definition.tag	#5B9C9E	—
entity.other.attribute-name	#79AFAE	—
support.class.component, entity.name.tag.component	#9A8CC2	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css	#9A8CC2	—
support.type.property-name.css, meta.property-name.css	#79AFAE	—
support.constant.property-value.css, meta.property-value.css	#B4986F	—
keyword.other.unit.css, keyword.other.unit	#AE826B	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#A39AD1	—
variable.scss, variable.less, variable.css	#79AFAE	—
heading.1.markdown, heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown, markup.heading	#9A8CC2	bold
markup.bold	—	bold
markup.italic	—	italic
markup.underline.link, string.other.link	#74A1B0	—
markup.inline.raw, markup.fenced_code.block	#B4986F	—
markup.quote	#6C7688	italic
punctuation.definition.list.begin.markdown	#5B9C9E	—
support.function.builtin.shell, entity.name.command.shell	#7898BE	—
variable.other.normal.shell, variable.other.positional.shell, variable.other.special.shell, punctuation.definition.variable.shell	#79AFAE	—
keyword.operator.quantifier.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp	#AE826B	—
constant.other.character-class.regexp, constant.character.character-class.regexp	#A39AD1	—
markup.inserted, punctuation.definition.inserted	#79AFAE	—
markup.deleted, punctuation.definition.deleted	#AE826B	—
markup.changed, punctuation.definition.changed	#74A1B0	—
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql	#5B9C9E	—
invalid.illegal	#AE826B	—
invalid.deprecated	#8B95A7	strikethrough

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