Cyberpunk theme dark

Name: Cyberpunk theme dark
Author: Collins Oduor

Publisher: Collins OduorThemes in package: 2

A dark theme for vs code inspired by bold cyberpunk colors

Open in VS Code GitHub

Color themes

VS Code preview

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

Cyberpunk theme dark — Cyberpunk Bold Dark

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#000030
activityBar.border#00003060
activityBar.foreground#F0D2E9
activityBarBadge.background#90A9F0
activityBarBadge.foreground#000030
badge.background#00003030
badge.foreground#C030D8
breadcrumb.activeSelectionForeground#C030D8
breadcrumb.background#000030
breadcrumb.focusForeground#F0D2E9
breadcrumb.foreground#D848D0
breadcrumbPicker.background#000030
button.background#C030D850
contrastBorder#C030D840
debugToolBar.background#000030
diffEditor.insertedTextBackground#D8187815
diffEditor.removedTextBackground#3048C020
dropdown.background#000030
dropdown.border#F0E8EF10
editor.background#000030
editor.findMatchBackground#000030
editor.findMatchBorder#C030D8
editor.findMatchHighlightBackground#C030D893
editor.findMatchHighlightBorder#F0E8EF30
editor.foreground#F0D2E9
editor.lineHighlightBackground#00003050
editor.selectionBackground#90A9F030
editor.selectionHighlightBackground#C030D86b
editor.selectionHighlightBorder#90A9F0f0
editorBracketMatch.background#000030
editorBracketMatch.border#C000607f
editorCursor.foreground#C00060
editorError.foreground#D81878
editorGroup.border#00003030
editorGroupHeader.tabsBackground#000030
editorGutter.addedBackground#D8187860
editorGutter.deletedBackground#3048C060
editorGutter.modifiedBackground#90A9F060
editorHoverWidget.background#000030
editorHoverWidget.border#F0E8EF10
editorIndentGuide.activeBackground#181860
editorIndentGuide.background#18186070
editorInfo.foreground#90A9F070
editorLineNumber.activeForeground#90A9F0
editorLineNumber.foreground#C030D8c0
editorLink.activeForeground#F0D2E9
editorMarkerNavigation.background#F0D2E905
editorOverviewRuler.border#000030
editorOverviewRuler.errorForeground#3048C040
editorOverviewRuler.findMatchForeground#C030D8
editorOverviewRuler.infoForeground#90A9F040
editorOverviewRuler.warningForeground#C0006070
editorRuler.foreground#181860
editorSuggestWidget.background#000030
editorSuggestWidget.border#F0E8EF10
editorSuggestWidget.foreground#F0D2E9
editorSuggestWidget.highlightForeground#C00060
editorSuggestWidget.selectedBackground#C030D820
editorWarning.foreground#D81878
editorWhitespace.foreground#F0D2E940
editorWidget.background#000030
editorWidget.border#C00060
editorWidget.resizeBorder#C030D8
extensionButton.prominentBackground#D8187890
extensionButton.prominentHoverBackground#3048C0
focusBorder#F0E8EF00
gitDecoration.conflictingResourceForeground#C00060
gitDecoration.deletedResourceForeground#3048C0
gitDecoration.ignoredResourceForeground#C030D8
gitDecoration.modifiedResourceForeground#D848D0
gitDecoration.untrackedResourceForeground#90A9F0
input.background#180048
input.border#F0E8EF10
input.foreground#F0D2E9
input.placeholderForeground#F0D2E960
inputOption.activeBackground#F0D2E930
inputOption.activeBorder#F0D2E930
inputValidation.errorBorder#3048C050
inputValidation.infoBorder#90A9F050
inputValidation.warningBorder#C0006050
list.activeSelectionBackground#000030
list.activeSelectionForeground#C030D8
list.focusBackground#180048
list.focusForeground#90A9F0
list.highlightForeground#C030D8
list.hoverBackground#181860
list.hoverForeground#F0E8EF
list.inactiveSelectionBackground#00003030
list.inactiveSelectionForeground#C030D8
list.warningForeground#C00060
listFilterWidget.background#00003030
listFilterWidget.noMatchesOutline#00003030
listFilterWidget.outline#00003030
menu.background#000030f8
menu.border#C030D850
menu.foreground#F0D2E9
menu.selectionBackground#180048
menu.selectionBorder#00003030
menu.selectionForeground#F0D2E9
menu.separatorBackground#F0D2E9
menubar.selectionBackground#180048
menubar.selectionBorder#C030D850
menubar.selectionForeground#F0D2E9
minimap.background#000030
minimapGutter.addedBackground#3048C0
minimapGutter.deletedBackground#C00060
minimapGutter.modifiedBackground#D81878
minimapSlider.activeBackground#D81878b0
minimapSlider.background#D8187880
minimapSlider.hoverBackground#D81878a0
notificationLink.foreground#C030D8
notifications.background#000030
notifications.foreground#F0D2E9
panel.background#000030
panel.border#c00060
panelTitle.activeBorder#C030D8
panelTitle.activeForeground#F0E8EF
panelTitle.inactiveForeground#F0D2E9
peekView.border#00003030
peekViewEditor.background#F0D2E905
peekViewEditor.matchHighlightBackground#C030D850
peekViewEditorGutter.background#F0D2E905
peekViewResult.background#F0D2E905
peekViewResult.matchHighlightBackground#C030D850
peekViewResult.selectionBackground#C030D870
peekViewTitle.background#F0D2E905
peekViewTitleDescription.foreground#F0D2E960
pickerGroup.foreground#C030D8
progressBar.background#C030D8
scrollbar.shadow#00003000
scrollbarSlider.activeBackground#C030D8cc
scrollbarSlider.background#C030D8bb
scrollbarSlider.hoverBackground#C030D8ee
selection.background#C030D8
settings.checkboxBackground#000030
settings.checkboxForeground#F0D2E9
settings.dropdownBackground#000030
settings.dropdownForeground#F0D2E9
settings.headerForeground#C030D8
settings.modifiedItemIndicator#C030D8
settings.numberInputBackground#000030
settings.numberInputForeground#F0D2E9
settings.textInputBackground#000030
settings.textInputForeground#F0D2E9
sideBar.background#000030
sideBar.border#C030D850
sideBar.foreground#90A9F0
sideBarSectionHeader.background#000030
sideBarSectionHeader.border#00003060
sideBarSectionHeader.foreground#90A9F0
sideBarTitle.foreground#F0D2E9
statusBar.background#C00060
statusBar.border#00003060
statusBar.debuggingBackground#C00060
statusBar.debuggingForeground#F0E8EF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#000030
statusBarItem.hoverBackground#C030D820
statusBarItem.remoteBackground#C030D8
statusBarItem.remoteForeground#000030
tab.activeBackground#C030D850
tab.activeBorder#C030D8
tab.activeForeground#F0E8EF
tab.activeModifiedBorder#C030D8
tab.border#000030
tab.inactiveBackground#C030D820
tab.inactiveForeground#F0D2E9af
tab.unfocusedActiveBackground#C030D840
tab.unfocusedActiveBorder#C030D8
tab.unfocusedActiveForeground#F0D2E9
tab.unfocusedInactiveBackground#C030D810
tab.unfocusedInactiveForeground#F0D2E97f
terminal.ansiBlack#000030
terminal.ansiBlue#90A9F0
terminal.ansiBrightBlack#C030D8
terminal.ansiBrightBlue#90A9F0
terminal.ansiBrightCyan#A8D8F0
terminal.ansiBrightGreen#D81878
terminal.ansiBrightMagenta#C00060
terminal.ansiBrightRed#3048C0
terminal.ansiBrightWhite#F0E8EF
terminal.ansiBrightYellow#C00060
terminal.ansiCyan#A8D8F0
terminal.ansiGreen#D81878
terminal.ansiMagenta#C00060
terminal.ansiRed#3048C0
terminal.ansiWhite#F0E8EF
terminal.ansiYellow#C00060
terminalCursor.background#000030
terminalCursor.foreground#C00060
textLink.activeForeground#F0D2E9
textLink.foreground#C030D8
titleBar.activeBackground#000030
titleBar.activeForeground#F0D2E9
titleBar.border#00003060
titleBar.inactiveBackground#000030
titleBar.inactiveForeground#C030D8
tree.indentGuidesStroke#181860
widget.shadow#00003030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier	#C00060	—
source.python, variable.other.readwrite.js, meta.definition.variable.js, meta.var-single-variable.expr.js, meta.var.expr.js, meta.block.js, meta.method.declaration.js, meta.class.js	#90a9f0	bold
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	—	bold
punctuation.definition.directive.cpp	#90a9f0	—
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	#D81878	—
constant.other.php	#90a9f0	—
constant.other.color	#F0E8EF	—
invalid, invalid.illegal	#3048C0	—
Keyword, Storage	—	italic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss	#A7A8AF	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.type.module.js	#D848D0	—
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js	#D848D0	—
punctuation.definition, string.quoted.single.scss	#A7A8AF	—
keyword.control	#c0006a	—
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html, comment	#6D6F7C	underline
text.html.derivative	#A7A8AF	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#F0D2E9	—
entity.name.tag.html	—	bold
variable.parameter.js, variable.parameter.keyframe-list.css	#C00060	—
storage.type.js, string.other.link.title.markdown, variable.other.property.js	#D848D0
variable.other	#90a9f0	—
storage.type.class.js, storage.type	#90a9f0	bold
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control, constant.numeric.dec.python	#90A9F0	—
entity.name.function, meta.function-call	#D848D0	—
keyword.import	#90a9f0	bold
punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#A8D8F0	—
meta.item-access.arguments.python	#a8d8f0	—
support.other.variable, string.other.link, markup.table	#F0D2E9	—
punctuation.separator.list.comma.css, punctuation.separator.element.python, meta.selector.css, source.css	#D81878	—
entity.other.attribute-name.class.css	#90A9F0	italic
variable.argument.css, punctuation.definition.keyword.css, keyword.control.at-rule.media.css, meta.at-rule.media.header.css	#90a9f0	italic
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html	#90A9F0	—
variable.parameter.function.language.special, variable.parameter	#3048C0	—
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly, constant.other.object.key.js, string.unquoted.label.js	#D81878
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.other.attribute-name.html	#90a9f0	—
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	#D848D0	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#3048C0	—
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#90A9F0	italic
entity.other.attribute-name, support.function	#C00060	—
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key	#d81878	—
source.scss keyword.control	#C00060	—
markup.inserted	#D81878	—
markup.deleted	#3048C0	—
markup.changed	#C00060	—
string.regexp	#A8D8F0	—
constant.character.escape	#A8D8F0	—
url, link, uri	—	underline
source.js constant.other.object.key.js string.unquoted.label.js	#F0D2E9	bold
support.type.property-name.json	#F0D2E9	—
support.type.object.module.js	#c00060	—
text.html.markdown, punctuation.definition.list_item.markdown	#F0D2E9	—
text.html.markdown markup.inline.raw.markdown	#C00060	—
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown	#C030D850	—
text.html.markdown meta.dummy.line-break	—	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown	#D848D0	bold
markup.underline	#90A9F0	underline
markup.strike	—
markup.quote punctuation.definition.blockquote.markdown	#C030D850	—
markup.quote	—	italic
string.other.link.description.title.markdown	#C00060	—
constant.other.reference.link.markdown	#C00060	—
markup.raw.block	#C00060	—
punctuation.definition.raw.markdown, punctuation.definition.markdown	#A8D8F0	—
variable.language.fenced.markdown	#C030D8	—
meta.separator	#A7A8AF	bold
token.info-token	#C030D8	—
token.warn-token	#C00060	—
token.error-token	#C00060	—
token.debug-token	#A8D8F0	—

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