Dark Future

Name: Dark Future
Author: Sasha Petrenko

Publisher: Sasha PetrenkoThemes in package: 11

A collection of dark VSCode themes inspired by the Dark Future of Cyberpunk fiction.

Open in VS Code GitHub

Color themes

VS Code preview

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

Dark Future — Dark Future Cyberpunk

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...

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#1B1C22
activityBar.border#27293260
activityBar.foreground#FDF500
activityBarBadge.background#2CF6B3
activityBarBadge.foreground#272932
badge.background#27293230
badge.foreground#37EBF3
breadcrumb.activeSelectionForeground#37EBF3
breadcrumb.background#272932
breadcrumb.focusForeground#FDF500
breadcrumb.foreground#37EBF350
breadcrumbPicker.background#272932
button.background#37EBF350
contrastBorder#272932
debugToolBar.background#272932
diffEditor.insertedTextBackground#9370DB15
diffEditor.removedTextBackground#D6224620
dropdown.background#272932
dropdown.border#37EBF310
editor.background#272932
editor.findMatchBackground#272932
editor.findMatchBorder#37EBF3
editor.findMatchHighlightBackground#37EBF393
editor.findMatchHighlightBorder#37EBF330
editor.foreground#FDF500
editor.lineHighlightBackground#27293250
editor.selectionBackground#37EBF330
editor.selectionHighlightBackground#37EBF36b
editor.selectionHighlightBorder#37EBF3f0
editorBracketMatch.background#272932
editorBracketMatch.border#CB1DCD7f
editorCursor.foreground#CB1DCD
editorError.foreground#D62246
editorGroup.border#2CF6B3
editorGroupHeader.tabsBackground#272932
editorGutter.addedBackground#9370DB60
editorGutter.deletedBackground#D6224660
editorGutter.modifiedBackground#37EBF360
editorHoverWidget.background#1B1C22
editorHoverWidget.border#37EBF310
editorIndentGuide.activeBackground1#9370DB
editorIndentGuide.background1#9370DB70
editorInfo.foreground#37EBF370
editorLineNumber.activeForeground#37EBF3
editorLineNumber.foreground#9370DB
editorLink.activeForeground#FDF500
editorMarkerNavigation.background#FDF50005
editorOverviewRuler.border#272932
editorOverviewRuler.errorForeground#D6224640
editorOverviewRuler.findMatchForeground#37EBF3
editorOverviewRuler.infoForeground#37EBF340
editorOverviewRuler.warningForeground#CB1DCD70
editorRuler.foreground#9370DB
editorSuggestWidget.background#272932
editorSuggestWidget.border#37EBF310
editorSuggestWidget.foreground#FDF500
editorSuggestWidget.highlightForeground#CB1DCD
editorSuggestWidget.selectedBackground#37EBF320
editorWarning.foreground#9370DB
editorWhitespace.foreground#FDF50040
editorWidget.background#272932
editorWidget.border#CB1DCD
editorWidget.resizeBorder#37EBF3
extensionButton.prominentBackground#9370DB90
extensionButton.prominentHoverBackground#D62246
focusBorder#37EBF300
gitDecoration.conflictingResourceForeground#CB1DCD
gitDecoration.deletedResourceForeground#D62246
gitDecoration.ignoredResourceForeground#37EBF3
gitDecoration.modifiedResourceForeground#2CF6B3
gitDecoration.untrackedResourceForeground#37EBF3
input.background#1B1C22
input.border#37EBF310
input.foreground#FDF500
input.placeholderForeground#FDF50060
inputOption.activeBackground#FDF50030
inputOption.activeBorder#FDF50030
inputValidation.errorBorder#D6224650
inputValidation.infoBorder#37EBF350
inputValidation.warningBorder#CB1DCD50
list.activeSelectionBackground#272932
list.activeSelectionForeground#37EBF3
list.errorForeground#D62246
list.focusBackground#1B1C22
list.focusForeground#37EBF3
list.highlightForeground#37EBF3
list.hoverBackground#9370DB
list.hoverForeground#37EBF3
list.inactiveSelectionBackground#27293230
list.inactiveSelectionForeground#37EBF3
list.warningForeground#CB1DCD
listFilterWidget.background#27293230
listFilterWidget.noMatchesOutline#27293230
listFilterWidget.outline#27293230
menu.background#272932f8
menu.border#37EBF350
menu.foreground#FDF500
menu.selectionBackground#1B1C22
menu.selectionBorder#27293230
menu.selectionForeground#FDF500
menu.separatorBackground#FDF500
menubar.selectionBackground#1B1C22
menubar.selectionBorder#37EBF350
menubar.selectionForeground#FDF500
minimap.background#272932
minimapGutter.addedBackground#D62246
minimapGutter.deletedBackground#CB1DCD
minimapGutter.modifiedBackground#9370DB
minimapSlider.activeBackground#9370DBb0
minimapSlider.background#9370DB80
minimapSlider.hoverBackground#9370DBa0
notificationLink.foreground#37EBF3
notifications.background#272932
notifications.foreground#FDF500
panel.background#1B1C22
panel.border#27293260
panelTitle.activeBorder#37EBF3
panelTitle.activeForeground#37EBF3
panelTitle.inactiveForeground#FDF500
peekView.border#27293230
peekViewEditor.background#FDF50005
peekViewEditor.matchHighlightBackground#37EBF350
peekViewEditorGutter.background#FDF50005
peekViewResult.background#FDF50005
peekViewResult.matchHighlightBackground#37EBF350
peekViewResult.selectionBackground#37EBF370
peekViewTitle.background#FDF50005
peekViewTitleDescription.foreground#FDF50060
pickerGroup.foreground#37EBF3
progressBar.background#37EBF3
scrollbar.shadow#27293200
scrollbarSlider.activeBackground#37EBF3cc
scrollbarSlider.background#37EBF3bb
scrollbarSlider.hoverBackground#37EBF3ee
selection.background#37EBF3
settings.checkboxBackground#272932
settings.checkboxForeground#FDF500
settings.dropdownBackground#272932
settings.dropdownForeground#FDF500
settings.headerForeground#37EBF3
settings.modifiedItemIndicator#37EBF3
settings.numberInputBackground#272932
settings.numberInputForeground#FDF500
settings.textInputBackground#272932
settings.textInputForeground#FDF500
sideBar.background#1B1C22
sideBar.border#272932
sideBar.foreground#37EBF3
sideBarSectionHeader.background#272932
sideBarSectionHeader.border#27293260
sideBarSectionHeader.foreground#37EBF3
sideBarTitle.foreground#FDF500
statusBar.background#FDF500
statusBar.border#27293260
statusBar.debuggingBackground#CB1DCD
statusBar.debuggingForeground#37EBF3
statusBar.foreground#272932
statusBar.noFolderBackground#272932
statusBarItem.hoverBackground#37EBF320
statusBarItem.remoteBackground#37EBF3
statusBarItem.remoteForeground#272932
tab.activeBackground#37EBF350
tab.activeBorder#2CF6B3
tab.activeForeground#FDF500
tab.activeModifiedBorder#37EBF3
tab.border#272932
tab.inactiveBackground#37EBF320
tab.inactiveForeground#FDF500af
tab.unfocusedActiveBackground#37EBF340
tab.unfocusedActiveBorder#37EBF3
tab.unfocusedActiveForeground#37EBF3
tab.unfocusedInactiveBackground#37EBF310
tab.unfocusedInactiveForeground#FDF5007f
terminal.ansiBlack#272932
terminal.ansiBlue#37EBF3
terminal.ansiBrightBlack#37EBF3
terminal.ansiBrightBlue#37EBF3
terminal.ansiBrightCyan#E455AE
terminal.ansiBrightGreen#2CF6B3
terminal.ansiBrightMagenta#CB1DCD
terminal.ansiBrightRed#D62246
terminal.ansiBrightWhite#37EBF3
terminal.ansiBrightYellow#CB1DCD
terminal.ansiCyan#E455AE
terminal.ansiGreen#9370DB
terminal.ansiMagenta#CB1DCD
terminal.ansiRed#D62246
terminal.ansiWhite#37EBF3
terminal.ansiYellow#CB1DCD
terminalCursor.background#272932
terminalCursor.foreground#CB1DCD
textLink.activeForeground#FDF500
textLink.foreground#37EBF3
titleBar.activeBackground#1B1C22
titleBar.activeForeground#FDF500
titleBar.border#27293260
titleBar.inactiveBackground#272932
titleBar.inactiveForeground#37EBF3
tree.indentGuidesStroke#9370DB
widget.shadow#27293230

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#37EBF3	—
meta.diff, meta.diff.header	#6272A4	—
markup.inserted	#2CF6B3	—
markup.deleted	#FF5555	—
markup.changed	#9370DB	—
invalid	#FF5555	underline italic
invalid.deprecated	#37EBF3	underline italic
entity.name.filename	#FDF500	—
markup.error	#FF5555	—
markup.underline	—	underline
markup.bold	#9370DB	bold
markup.heading	#37EBF3	bold
markup.italic	#FDF500	italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext	#E455AE	—
markup.inline.raw, markup.raw.restructuredtext	#2CF6B3	—
markup.underline.link, markup.underline.link.image	#E455AE	—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#0E79B2	—
entity.name.directive.restructuredtext, markup.quote	#FDF500	italic
meta.separator.markdown	#6272A4	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#2CF6B3	—
punctuation.definition.constant.restructuredtext	#37EBF3	—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end	#37EBF3	—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end	#37EBF3	—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end	#FDF500	—
entity.name.type.class, entity.name.class	#E455AE	—
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special	#37EBF3	italic
entity.other.inherited-class	#E455AE	italic
support.class.component	#2CF6B3	italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#6272A4	—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class	#0E79B2	—
comment.block.documentation entity.name.type	#E455AE	italic
comment.block.documentation entity.name.type punctuation.definition.bracket	#E455AE	—
comment.block.documentation variable	#9370DB	italic
constant, variable.other.constant	#37EBF3	—
constant.numeric.decimal	#E55934	—
constant.language.boolean	#E55934	—
constant.character.escape, constant.character.string.escape, constant.regexp	#0E79B2	—
entity.name.tag	#0E79B2	—
entity.other.attribute-name.parent-selector	#0E79B2	—
entity.other.attribute-name	#37EBF3	italic
entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix	#2CF6B3	—
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter	#9370DB	italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property	#2CF6B3	italic
meta.decorator variable.other.object	#2CF6B3	—
keyword, punctuation.definition.keyword	#0E79B2	—
keyword.control.flow., keyword.control.export, keyword.control.default	#CB1DCD	bold
keyword.control.new, keyword.operator.new	—	bold
keyword.operator.assignment, keyword.operator.logical, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.increment, keyword.operator.relational	#CB1DCD	—
meta.selector	#0E79B2	—
support	#E455AE	italic
support.function.magic, support.variable, variable.other.predefined	#37EBF3	—
support.function, support.type.property-name	—	—
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.constant, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.dictionary.pair.json, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, punctuation.separator.method, punctuation.separator.object, punctuation.separator.variable, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation	#0E79B2	—
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.statement, punctuation.separator.parameter, punctuation.separator.comma, punctuation.accessor, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor	#0E79B2	—
storage.type.function.arrow	#CB1DCD	—
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile	#37EBF3	—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml	#E455AE	—
constant.other.date, constant.other.timestamp	#FFB86C	—
variable.other.alias.yaml	#2CF6B3	italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def	#0E79B2	—
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml	#E455AE	italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	#FFB86C	—
storage.modifier	#0E79B2	—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#FDF500	—
punctuation.definition.group.capture.regexp	#0E79B2	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#FF5555	—
punctuation.definition.character-class.regexp	#E455AE	—
punctuation.definition.group.regexp	#FFB86C	—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp	#FF5555	—
meta.assertion.look-ahead.regexp	#2CF6B3	—
string	#FDF500	—
punctuation.definition.string.begin, punctuation.definition.string.end	#FDF500	—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end	#E455AE	—
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape	#6272A4	—
variable, constant.other.key.perl, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx	#37EBF3	—
support.variable.property, variable.other.property	#37EBF390	—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable	#FFB86C	italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable	#37EBF3	—
meta.selectionset.graphql variable	#FDF500	—
meta.selectionset.graphql meta.arguments variable	#37EBF3	—
entity.name.fragment.graphql, variable.fragment.graphql	#E455AE	—
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, punctuation.separator.array.json.comments, punctuation.separator.array, constant.language.empty-list.haskell	#0E79B2	—
source.shell variable.other	#37EBF3	—
support.constant	#37EBF3	—
meta.scope.prerequisites.makefile	#FDF500	—
meta.attribute-selector.scss	#FDF500	—
support.constant.property-value.css, constant.numeric.css, support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-extended-color-name.css, constant.other.color.rgb-value.hex.css, support.constant.font-name.css, keyword.other.unit.rem.css, keyword.other.unit.percentage.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.vh.css, keyword.other.unit.s.css, keyword.operator.gradient.css, support.constant.property-value.misc.css, support.function.misc.css	#2CF6B3	—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss	#37EBF3	—
meta.preprocessor.haskell	#6272A4	—
log.error	#FF5555	bold
log.warning	#FDF500	bold
source.julia meta.array.julia	#25E1ED	—

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