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 Sci-fi

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#08223a
activityBar.border#00abb160
activityBar.foreground#00abb1
activityBarBadge.background#96c7c0
activityBarBadge.foreground#08223a
badge.background#00abb130
badge.foreground#00abb1
breadcrumb.activeSelectionForeground#00abb1
breadcrumb.background#08223a
breadcrumb.focusForeground#00abb1
breadcrumb.foreground#00abb1
breadcrumbPicker.background#08223a
button.background#00abb150
contrastBorder#00abb140
debugToolBar.background#08223a
diffEditor.insertedTextBackground#82fc1e15
diffEditor.removedTextBackground#c0006020
dropdown.background#08223a
dropdown.border#F0E8EF10
editor.background#08223a
editor.findMatchBackground#08223a
editor.findMatchBorder#00abb1
editor.findMatchHighlightBackground#00abb193
editor.findMatchHighlightBorder#F0E8EF30
editor.foreground#00abb1
editor.lineHighlightBackground#00abb150
editor.selectionBackground#82fc1e30
editor.selectionHighlightBackground#00abb16b
editor.selectionHighlightBorder#82fc1ef0
editorBracketMatch.background#08223a
editorBracketMatch.border#96c7c07f
editorCursor.foreground#96c7c0
editorError.foreground#00abb1
editorGroup.border#00abb130
editorGroupHeader.tabsBackground#08223a
editorGutter.addedBackground#82fc1e60
editorGutter.deletedBackground#c0006060
editorGutter.modifiedBackground#82fc1e60
editorHoverWidget.background#08223a
editorHoverWidget.border#F0E8EF10
editorIndentGuide.activeBackground#37abaf
editorIndentGuide.background#37abaf70
editorInfo.foreground#82fc1e70
editorLineNumber.activeForeground#96c7c0
editorLineNumber.foreground#00abb1c0
editorLink.activeForeground#00abb1
editorMarkerNavigation.background#F0D2E905
editorOverviewRuler.border#08223a
editorOverviewRuler.errorForeground#c0006040
editorOverviewRuler.findMatchForeground#00abb1
editorOverviewRuler.infoForeground#82fc1e40
editorOverviewRuler.warningForeground#96c7c070
editorRuler.foreground#37abaf
editorSuggestWidget.background#08223a
editorSuggestWidget.border#F0E8EF10
editorSuggestWidget.foreground#00abb1
editorSuggestWidget.highlightForeground#96c7c0
editorSuggestWidget.selectedBackground#00abb120
editorWarning.foreground#00abb1
editorWhitespace.foreground#F0D2E940
editorWidget.background#08223a
editorWidget.border#96c7c0
editorWidget.resizeBorder#00abb1
extensionButton.prominentBackground#82fc1e90
extensionButton.prominentHoverBackground#c00060
focusBorder#F0E8EF00
gitDecoration.conflictingResourceForeground#96c7c0
gitDecoration.deletedResourceForeground#c00060
gitDecoration.ignoredResourceForeground#00abb1
gitDecoration.modifiedResourceForeground#00abb1
gitDecoration.untrackedResourceForeground#96c7c0
input.background#180048
input.border#F0E8EF10
input.foreground#00abb1
input.placeholderForeground#F0D2E960
inputOption.activeBackground#F0D2E930
inputOption.activeBorder#F0D2E930
inputValidation.errorBorder#c0006050
inputValidation.infoBorder#82fc1e50
inputValidation.warningBorder#96c7c050
list.activeSelectionBackground#08223a
list.activeSelectionForeground#00abb1
list.focusBackground#180048
list.focusForeground#96c7c0
list.highlightForeground#00abb1
list.hoverBackground#37abaf
list.hoverForeground#F0E8EF
list.inactiveSelectionBackground#00abb130
list.inactiveSelectionForeground#00abb1
list.warningForeground#96c7c0
listFilterWidget.background#00abb130
listFilterWidget.noMatchesOutline#00abb130
listFilterWidget.outline#00abb130
menu.background#00abb1f8
menu.border#00abb150
menu.foreground#00abb1
menu.selectionBackground#180048
menu.selectionBorder#00abb130
menu.selectionForeground#00abb1
menu.separatorBackground#00abb1
menubar.selectionBackground#180048
menubar.selectionBorder#00abb150
menubar.selectionForeground#00abb1
minimap.background#08223a
minimapGutter.addedBackground#c00060
minimapGutter.deletedBackground#96c7c0
minimapGutter.modifiedBackground#00abb1
minimapSlider.activeBackground#82fc1eb0
minimapSlider.background#82fc1e80
minimapSlider.hoverBackground#82fc1ea0
notificationLink.foreground#00abb1
notifications.background#08223a
notifications.foreground#00abb1
panel.background#08223a
panel.border#00abb160
panelTitle.activeBorder#00abb1
panelTitle.activeForeground#F0E8EF
panelTitle.inactiveForeground#00abb1
peekView.border#00abb130
peekViewEditor.background#F0D2E905
peekViewEditor.matchHighlightBackground#00abb150
peekViewEditorGutter.background#F0D2E905
peekViewResult.background#F0D2E905
peekViewResult.matchHighlightBackground#00abb150
peekViewResult.selectionBackground#00abb170
peekViewTitle.background#F0D2E905
peekViewTitleDescription.foreground#F0D2E960
pickerGroup.foreground#00abb1
progressBar.background#00abb1
scrollbar.shadow#00abb100
scrollbarSlider.activeBackground#00abb1cc
scrollbarSlider.background#00abb1bb
scrollbarSlider.hoverBackground#00abb1ee
selection.background#00abb1
settings.checkboxBackground#08223a
settings.checkboxForeground#00abb1
settings.dropdownBackground#08223a
settings.dropdownForeground#00abb1
settings.headerForeground#00abb1
settings.modifiedItemIndicator#00abb1
settings.numberInputBackground#08223a
settings.numberInputForeground#00abb1
settings.textInputBackground#08223a
settings.textInputForeground#00abb1
sideBar.background#08223a
sideBar.border#00abb150
sideBar.foreground#96c7c0
sideBarSectionHeader.background#08223a
sideBarSectionHeader.border#00abb160
sideBarSectionHeader.foreground#96c7c0
sideBarTitle.foreground#00abb1
statusBar.background#00abb1
statusBar.border#00abb160
statusBar.debuggingBackground#96c7c0
statusBar.debuggingForeground#F0E8EF
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#08223a
statusBarItem.hoverBackground#00abb120
statusBarItem.remoteBackground#00abb1
statusBarItem.remoteForeground#08223a
tab.activeBackground#00abb150
tab.activeBorder#00abb1
tab.activeForeground#F0E8EF
tab.activeModifiedBorder#00abb1
tab.border#08223a
tab.inactiveBackground#00abb120
tab.inactiveForeground#F0D2E9af
tab.unfocusedActiveBackground#00abb140
tab.unfocusedActiveBorder#00abb1
tab.unfocusedActiveForeground#00abb1
tab.unfocusedInactiveBackground#00abb110
tab.unfocusedInactiveForeground#F0D2E97f
terminal.ansiBlack#08223a
terminal.ansiBlue#96c7c0
terminal.ansiBrightBlack#00abb1
terminal.ansiBrightBlue#96c7c0
terminal.ansiBrightCyan#A8D8F0
terminal.ansiBrightGreen#00abb1
terminal.ansiBrightMagenta#96c7c0
terminal.ansiBrightRed#c00060
terminal.ansiBrightWhite#F0E8EF
terminal.ansiBrightYellow#96c7c0
terminal.ansiCyan#A8D8F0
terminal.ansiGreen#00abb1
terminal.ansiMagenta#96c7c0
terminal.ansiRed#c00060
terminal.ansiWhite#F0E8EF
terminal.ansiYellow#96c7c0
terminalCursor.background#08223a
terminalCursor.foreground#96c7c0
textLink.activeForeground#00abb1
textLink.foreground#00abb1
titleBar.activeBackground#08223a
titleBar.activeForeground#00abb1
titleBar.border#00abb160
titleBar.inactiveBackground#08223a
titleBar.inactiveForeground#00abb1
tree.indentGuidesStroke#37abaf
widget.shadow#00abb130

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier	#96c7c0	—
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	#82fc1e	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	#82fc1e	—
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	#00abb1	—
constant.other.php	#82fc1e	—
constant.other.color	#F0E8EF	—
invalid, invalid.illegal	#c00060	—
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	#00abb1	—
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	#00abb1	—
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	#2b9da1	underline
text.html.derivative	#A7A8AF	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#00abb1	—
entity.name.tag.html	—	bold
variable.parameter.js, variable.parameter.keyframe-list.css	#96c7c0	—
storage.type.js, string.other.link.title.markdown, variable.other.property.js	#00abb1
variable.other	#82fc1e	—
storage.type.class.js, storage.type	#82fc1e	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	#96c7c0	—
entity.name.function, meta.function-call	#00abb1	—
keyword.import	#82fc1e	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	#00abb1	—
punctuation.separator.list.comma.css, punctuation.separator.element.python, meta.selector.css, source.css	#00abb1	—
entity.other.attribute-name.class.css	#96c7c0	italic
variable.argument.css, punctuation.definition.keyword.css, keyword.control.at-rule.media.css, meta.at-rule.media.header.css	#82fc1e	italic
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html	#96c7c0	—
meta.attribute.python	#96c7c0	—
variable.parameter.function.language.special, variable.parameter	#c00060	—
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	#00abb1
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	#82fc1e	—
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	#00abb1	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#c00060	—
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#96c7c0	italic
entity.other.attribute-name, support.function	#96c7c0	—
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	#96c7c0	—
source.scss keyword.control	#96c7c0	—
markup.inserted	#00abb1	—
markup.deleted	#c00060	—
markup.changed	#96c7c0	—
string.regexp	#A8D8F0	—
constant.character.escape	#A8D8F0	—
url, link, uri	—	underline
source.js constant.other.object.key.js string.unquoted.label.js	#00abb1	bold
support.type.property-name.json	#00abb1	—
support.type.object.module.js	#96c7c0	—
text.html.markdown, punctuation.definition.list_item.markdown	#00abb1	—
text.html.markdown markup.inline.raw.markdown	#96c7c0	—
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown	#00abb150	—
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	#00abb1	bold
markup.underline	#96c7c0	underline
markup.strike	—
markup.quote punctuation.definition.blockquote.markdown	#00abb150	—
markup.quote	—	italic
string.other.link.description.title.markdown	#96c7c0	—
constant.other.reference.link.markdown	#96c7c0	—
markup.raw.block	#96c7c0	—
punctuation.definition.raw.markdown, punctuation.definition.markdown	#A8D8F0	—
variable.language.fenced.markdown	#00abb1	—
meta.separator	#A7A8AF	bold
token.info-token	#00abb1	—
token.warn-token	#96c7c0	—
token.error-token	#96c7c0	—
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}!`;
}