Cyberpunk 2021

Name: Cyberpunk 2021
Author: techwithcarlos

Publisher: techwithcarlosThemes in package: 4

A vibrant and dynamic Cyberpunk theme, optimized for deep focus and an immersive coding experience, with enhancements for JavaScript, TypeScript, Python, Go, and Rust.

GitHub

Color themes

VS Code preview

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

Cyberpunk 2021 — Cyberpunk 2021 (No italics)

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.activeBorder#00FF9D
activityBar.background#131029
activityBar.dropBorder#3D5AFE
activityBar.foreground#00FF9D
activityBar.inactiveForeground#0A6E54
activityBarBadge.background#00FF9D
activityBarBadge.foreground#1c183e
badge.background#00FF9D
badge.foreground#000
breadcrumb.activeSelectionForeground#00FF9D
breadcrumb.background#131029
breadcrumb.focusForeground#00FF9D
breadcrumb.foreground#3D5AFE
breadcrumbPicker.background#1c183e
button.background#35218f
button.foreground#00FF9C
button.hoverBackground#3D5AFE
button.secondaryBackground#35218f
button.secondaryForeground#142335
button.secondaryHoverBackground#3D5AFE
checkbox.background#131129
checkbox.border#00FF9C
checkbox.foreground#00FF9C
debugToolBar.background#1c183e
debugToolBar.border#00FF9D
debugView.exceptionLabelBackground#1c183e
debugView.exceptionLabelForeground#00FF9D
debugView.stateLabelBackground#1c183e
debugView.stateLabelForeground#00FF9D
diffEditor.border#00FF9D
diffEditor.diagonalFill#394e6d
diffEditor.insertedTextBackground#539e2737
diffEditor.removedTextBackground#ff000038
dropdown.background#211c49
dropdown.border#00FF9D
dropdown.foreground#00FF9D
dropdown.listBackground#211c49
editor.background#131029
editor.findMatchBackground#000
editor.findMatchBorder#00FF9C
editor.findMatchHighlightBackground#01300829
editor.findMatchHighlightBorder#007700
editor.focusedStackFrameHighlightBackground#1c183e
editor.foreground#D7DBE0
editor.hoverHighlightBackground#30629ca1
editor.inactiveSelectionBackground#352772ce
editor.lineHighlightBackground#352772a8
editor.selectionBackground#352772a8
editor.selectionHighlightBackground#01300829
editor.selectionHighlightBorder#00FF9C
editor.snippetFinalTabstopHighlightBackground#1c183e
editor.snippetFinalTabstopHighlightBorder#00FF9D
editor.snippetTabstopHighlightBackground#1c183e
editor.snippetTabstopHighlightBorder#00FF9D
editor.stackFrameHighlightBackground#1c183e
editor.wordHighlightBackground#007700fe
editorBracketMatch.background#3D194D
editorBracketMatch.border#FF004C
editorCodeLens.foreground#3D5AFE
editorCursor.background#00FF9D
editorCursor.foreground#00FF9D
editorGroup.dropBackground#00ff9d1e
editorGroup.emptyBackground#011627
editorGroup.focusedEmptyBorder#011627
editorGroupHeader.noTabsBackground#1c183e
editorGroupHeader.tabsBackground#211c49
editorGutter.addedBackground#21a02c
editorGutter.background#131029
editorGutter.deletedBackground#ff0000
editorGutter.foldingControlForeground#D7DBE0
editorGutter.modifiedBackground#fac001
editorHoverWidget.background#211c49
editorHoverWidget.border#00FF9C
editorHoverWidget.foreground#00FF9C
editorIndentGuide.activeBackground1#495cc9
editorIndentGuide.background1#1d2b7690
editorLightBulbAutoFix.foreground#67c722
editorLineNumber.activeForeground#00FF9D
editorLineNumber.foreground#3D5AFE
editorOverviewRuler.addedForeground#67c722
editorOverviewRuler.background#142335
editorOverviewRuler.border#243850
editorOverviewRuler.deletedForeground#940202
editorOverviewRuler.errorForeground#ff0000
editorOverviewRuler.warningForeground#ff8c00
editorStickyScroll.shadow#7B61C1
editorStickyScrollHover.background#171F45
editorSuggestWidget.background#1c183e
editorSuggestWidget.border#00FF9D
editorSuggestWidget.focusHighlightForeground#9c77f2
editorSuggestWidget.foreground#AAAAAA
editorSuggestWidget.highlightForeground#00FF9D
editorSuggestWidget.selectedBackground#352772a8
editorSuggestWidget.selectedIconForeground#fff
editorWidget.background#211c49
editorWidget.border#211c49
focusBorder#1c183e
foreground#B6B8BA
gitDecoration.deletedResourceForeground#C33959
gitDecoration.modifiedResourceForeground#c3ba39
gitDecoration.untrackedResourceForeground#39c362
gitlens.decorations.worktreeHasUncommittedChangesForegroundColor#e2c08d
input.background#1c183e
input.border#00FF9D
input.foreground#00FF9D
input.placeholderForeground#0A6E54
list.activeSelectionBackground#191639
list.activeSelectionForeground#3D5AFE
list.dropBackground#08594377
list.focusBackground#1c183e
list.focusForeground#3D5AFE
list.highlightForeground#FF00FF
list.hoverBackground#191639
list.hoverForeground#3D5AFE
list.inactiveSelectionBackground#191639
list.inactiveSelectionForeground#3D5AFE
menu.background#142335
menu.border#00FF9D
menu.foreground#AAAAAA
menu.selectionBackground#2d1c6fae
menu.selectionBorder#00FF9D
menu.selectionForeground#AAAAAA
menu.separatorBackground#3D5AFE
menubar.selectionBackground#2d1c6fae
menubar.selectionBorder#3D5AFE
menubar.selectionForeground#D7DBE0
minimap.background#1c183e
minimap.errorHighlight#ff0000
minimap.findMatchHighlight#00ff9dfe
minimap.selectionHighlight#00ff9dfc
minimap.warningHighlight#ff8c00
minimapGutter.addedBackground#67c722
minimapGutter.deletedBackground#940202
minimapGutter.modifiedBackground#fac001
minimapSlider.activeBackground#00ff9d68
minimapSlider.background#3d5afe7c
minimapSlider.hoverBackground#0a6e5397
notebook.cellBorderColor#243951
notebook.focusedCellBackground#0A1D2D
notebook.focusedCellBorder#243951
notebook.focusedEditorBorder#243951
notebook.inactiveFocusedCellBorder#243951
notebook.outputContainerBackgroundColor#0A1D2D
notebook.selectedCellBorder#243951
notebookScrollbarSlider.activeBackground#0A1D2D
notebookScrollbarSlider.background#0A1D2D
notebookStatusErrorIcon.foreground#D7DBE0
notebookStatusRunningIcon.foreground#D7DBE0
notebookStatusSuccessIcon.foreground#D7DBE0
notificationCenter.border#00FF9D
notificationCenterHeader.background#211c49
notificationCenterHeader.foreground#3D5AFE
notifications.background#211c49
notifications.border#00FF9D
notifications.foreground#00FF9D
notificationsErrorIcon.foreground#00FF9D
notificationsInfoIcon.foreground#00FF9D
notificationsWarningIcon.foreground#00FF9D
notificationToast.border#00FF9D
panel.background#131029
panel.border#00FF9D
panel.dropBorder#00FF9D
panelSection.border#00FF9D
panelSection.dropBackground#00ff9d1e
panelSectionHeader.background#131129
panelSectionHeader.foreground#AAAAAA
panelTitle.activeBorder#00FF9D
panelTitle.activeForeground#00FF9D
panelTitle.inactiveForeground#3D5AFE
peekView.border#00FF9D
peekViewEditor.background#1c183e
peekViewEditorGutter.background#1c183e
peekViewResult.background#1c183e
peekViewResult.fileForeground#AAAAAA
peekViewResult.lineForeground#AAAAAA
peekViewTitle.background#1c183e
peekViewTitleDescription.foreground#3D5AFE
peekViewTitleLabel.foreground#00FF9D
pickerGroup.border#00FF9D
pickerGroup.foreground#3D5AFE
problemsInfoIcon.foreground#ff0000
progressBar.background#00FF9D
quickInput.background#211c49
quickInput.foreground#00FF9D
sash.hoverBorder#00FF9D
scrollbar.shadow#3D5AFE
scrollbarSlider.activeBackground#00FF9D
scrollbarSlider.background#3D5AFE
scrollbarSlider.hoverBackground#0A6E54
selection.background#49369ea8
settings.checkboxBackground#211c49
settings.checkboxBorder#00FF9D
settings.checkboxForeground#00FF9D
settings.dropdownBackground#211c49
settings.dropdownBorder#00FF9D
settings.dropdownForeground#00FF9D
settings.dropdownListBorder#00FF9D
settings.focusedRowBackground#211c49
settings.headerForeground#3D5AFE
settings.modifiedItemIndicator#00FF9D
settings.numberInputBackground#211c49
settings.numberInputBorder#00FF9D
settings.numberInputForeground#00FF9D
settings.textInputBackground#211c49
settings.textInputBorder#00FF9D
settings.textInputForeground#00FF9D
sideBar.background#211c49
sideBar.border#171F45
sideBar.dropBackground#08594377
sideBar.foreground#00FF9D
sideBarSectionHeader.background#1c183e
sideBarSectionHeader.border#3D5AFE
sideBarSectionHeader.foreground#3D5AFE
sideBarTitle.foreground#00FF9D
statusBar.background#1c183e
statusBar.border#3D5AFE
statusBar.debuggingBackground#00FF9D
statusBar.debuggingBorder#9476EB
statusBar.debuggingForeground#011627
statusBar.foreground#3D5AFE
statusBar.noFolderBackground#212121
statusBarItem.hoverBackground#352772a8
tab.activeBackground#161330
tab.activeBorderTop#00FF9D
tab.activeForeground#00FF9D
tab.border#3D5AFE
tab.hoverBackground#161330
tab.hoverForeground#00FF9D
tab.inactiveBackground#211c49
tab.inactiveForeground#3D5AFE
tab.lastPinnedBorder#3D5AFE
tab.unfocusedActiveBackground#1c183e
tab.unfocusedActiveForeground#AAAAAA
tab.unfocusedHoverForeground#AAAAAA
tab.unfocusedInactiveBackground#1c183e
terminal.ansiBlack#000
terminal.ansiBlue#0066FF
terminal.ansiBrightBlack#808080
terminal.ansiBrightBlue#0066FF
terminal.ansiBrightCyan#35e2ee
terminal.ansiBrightGreen#00FF9D
terminal.ansiBrightMagenta#CC00FF
terminal.ansiBrightRed#ff0000
terminal.ansiBrightWhite#D7DBE0
terminal.ansiBrightYellow#f2ff00
terminal.ansiCyan#0ab6c2
terminal.ansiGreen#33FF00
terminal.ansiMagenta#CC00FF
terminal.ansiRed#ff0000
terminal.ansiWhite#D7DBE0
terminal.ansiYellow#f2ff00
terminal.border#3D5AFE
terminal.foreground#AAAAAA
terminal.selectionBackground#2d1c6fae
terminalCursor.background#00FF9D
terminalCursor.foreground#00FF9D
titleBar.activeBackground#131129
titleBar.activeForeground#3D5AFE
titleBar.inactiveBackground#1c183e
titleBar.inactiveForeground#00FF9D
tree.indentGuidesStroke#395B82
welcomePage.background#1c183e
widget.shadow#00FF9D
window.activeBorder#3D5AFE
window.inactiveBorder#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5566c2
support.class.error	#eb4949	—
entity.name.function	#00B0FF
variable.other.readwrite	#408fe4	—
meta.brace.round, punctuation.definition.block, meta.brace.square, punctuation.accessor, punctuation.terminator.statement, punctuation.separator.key-value, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.parameters.end, punctuation.definition.parameters.begin, punctuation.separator.comma	#D7DBE0	—
punctuation.definition.parameters.end, punctuation.definition.parameters.begin	#A7DBF7	—
keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational, keyword	#3D5AFE	—
storage.type.function.arrow	#3D5AFE
string.quoted.double.json, punctuation.definition.string.end.json, punctuation.definition.string.begin.json	#56ac98	—
constant.numeric	#F78C6C	—
meta.object-literal.key	#C792EA	—
variable.other.object	#cc5c87	—
keyword.control.conditional	#43dee1	—
keyword.control.flow	#3D5AFE
storage.modifier.async	—
variable.parameter	#b4be6d	—
variable.other.property	#6ac4b3	—
variable.other.object.property	#afa44f	—
variable, string constant.other.placeholder	#D7DBE0	—
constant.other.color	#D7DBE0	—
invalid, invalid.illegal	#FF5370	—
storage.type, storage.modifier	#3D5AFE
variable.other.constant	#9c77f2	—
variable.object.property	#54b1a3	—
support.variable.property	#318d58	—
support.class.builtin	#89c058	—
meta.tag.sgml, markup.deleted.git_gutter	#f07178	—
keyword.control	#3D5AFE
meta.function-call, variable.function, support.function, keyword.other.special-method	#82AAFF	—
meta.block variable.other	#f07178	—
support.other.variable, string.other.link	#f07178	—
constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#26cfbe	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#C3E88D	—
support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#ffca67	—
support.type	#B2CCD6	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#B2CCD6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#00BFF9	—
entity.name.method.js	#82AAFF
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#a562bf	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFCB6B
entity.other.attribute-name.class	#FFCB6B	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370
support.type.property-name.json.comments	#aa4ee7	—
string.quoted.double.json.comments	#EAB780	—
source.json meta.structure.dictionary.json support.type.property-name.json	#aa4ee7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#445ce6	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#F78C6C	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF5370	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C17E70	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82AAFF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f07178	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C3E88D	—
text.html.markdown, punctuation.definition.list_item.markdown	#D7DBE0	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
markup.underline.link.image.markdown, markup.underline.link.markdown	#00BFF9	—
string.other.link	#5477ff	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C3E88D	—
markup.	#f07178
markup.bold, markup.bold string	#f07178	bold
markup.bold markup., markup. markup.bold, markup.quote markup.bold, markup.bold markup. string, markup. markup.bold string, markup.quote markup.bold string	#f07178	bold
markup.underline	#F78C6C	underline
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#D7DBE0	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#D7DBE0	—
keyword.other.definition.ini	#26cfbe	—
source.ini	#0397C4	—
string.template	#0397C4	—
meta.jsx.children	#9c6dbb	—
support.class.component	#67d0fa
keyword.control.default	#43dee1
punctuation.definition.string.template.begin.js, punctuation.definition.string.template.end.js, punctuation.definition.string.template.begin.ts, punctuation.definition.string.template.end.ts	#fff	—
keyword.control.import, keyword.control.export, keyword.control.from	#3a8c8d	—
variable.other.readwrite.alias	#6a8dda	—
punctuation.definition.tag.begin, punctuation.definition.tag.end	#058ab3	—
entity.other.attribute-name.class.css	#bf5fbf	—
support.type.property-name.css	#506afc	—
variable.css	#9C77F2	—
keyword.other.unit.vw.css, keyword.other.unit.rem.css, keyword.other.unit.px.css, entity.name.tag.reference.css	#26cfbe	—
punctuation.terminator.rule.css, punctuation.terminator.rule.scss	#D7DBE0	—
constant.numeric.css	#26cfbe	—
support.constant.property-value.css, support.constant.media.css	#c53685	—
variable.scss, meta.property-value.css, meta.property-value.scss	#47a189	—
support.type.property-name.media.css	#68c4d0	—
entity.name.tag.css, entity.name.tag.reference.scss	#3497E8	—
support.type.property-name.css	#CE98EE	—
support.constant.color.w3c-standard-color-name.css	#f36a81	—
source.python	#219FD5	—
meta.attribute.python	#C792EA	—
keyword.control.flow.python	#03cdfa
storage.type.function.python	#3D5AFE	—
entity.name.function.python, punctuation.definition.parameters.end.python, punctuation.definition.parameters.begin.python	#a330ad	—
meta.indexed-name.python	#d1977f	—
constant.numeric.dec.python	#ee9797	—
meta.function-call.generic.python	#b66b98	—
meta.function-call.arguments.python	#39b8a1	—
variable.parameter.function-call.python	#3ccbeb	—
punctuation.definition.decorator.python, entity.name.function.decorator.python	#1b84f5	—
support.variable.magic.python	#aa51f8	—
text.html.derivative	#AAAAAA	—
entity.name.type.interface.ts	#6098f2	—
support.type.primitive.ts	#BE6286	—
entity.name.type.module.ts	#506AFC	—
variable.other.object.ts	#05e992
keyword.control.trycatch.ts	#F78C6C
entity.name.type.ts	#9C77F2	—
punctuation.accessor.ts	#CC9FF0	—
keyword.operator.type.annotation.ts, keyword.operator.optional.ts	#CC9FF0
support.type.builtin.ts	#26CFBE
variable.object.property.ts	#5CC189
keyword.package.go	#00FF9D	—
entity.name.package.go	#CC9FF0	—
source.go	#64CCBE	—
storage.type.string.go, storage.type.numeric.go, storage.type.error.go	#cc5c87
keyword, constant.other.placeholder.go	—
variable.other.assignment.go	#D4AA7D	—
variable.other.go, source.go, variable	#60BAA8
entity.name.function.macro.rust	#B9535F	—
variable.other.rust	#bc9d7d	—
entity.name.type.struct.rust, entity.name.type.rust	#6EADF8	—
keyword.other.rust, keyword.other.fn.rust	#D59DF6
source.rust	#64CCBE	—
variable.other.env, source.env	#64CCBE	—
source.env, text.gitignore	#c53685	—

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