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 Marathon

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.background#0B1018
activityBar.border#D7FF3F22
activityBar.foreground#DFF5FF
activityBarBadge.background#FF6F3C
activityBarBadge.foreground#091019
badge.background#12202D
badge.foreground#D7FF3F
breadcrumb.activeSelectionForeground#D7FF3F
breadcrumb.background#0B1018
breadcrumb.focusForeground#35E0FF
breadcrumb.foreground#8CA0B8
breadcrumbPicker.background#101925
button.background#D7FF3F
button.foreground#091019
button.hoverBackground#E6FF72
contrastBorder#D7FF3F44
debugIcon.breakpointForeground#FF5D7A
debugIcon.continueForeground#00C7A3
debugIcon.pauseForeground#35E0FF
debugToolBar.background#101925
diffEditor.insertedTextBackground#00C7A320
diffEditor.removedTextBackground#FF5D7A20
dropdown.background#101925
dropdown.border#253446
editor.background#0B1018
editor.findMatchBackground#FF6F3C44
editor.findMatchBorder#FF6F3C
editor.findMatchHighlightBackground#D7FF3F24
editor.findMatchHighlightBorder#D7FF3F55
editor.foreground#DFF5FF
editor.lineHighlightBackground#131D2A
editor.lineHighlightBorder#00000000
editor.selectionBackground#1C3144
editor.selectionHighlightBackground#D7FF3F1F
editor.selectionHighlightBorder#D7FF3F3F
editor.wordHighlightBackground#35E0FF18
editor.wordHighlightBorder#35E0FF3A
editor.wordHighlightStrongBackground#FF5DB118
editor.wordHighlightStrongBorder#FF5DB13A
editorBracketHighlight.foreground1#D7FF3F
editorBracketHighlight.foreground2#35E0FF
editorBracketHighlight.foreground3#FF6F3C
editorBracketHighlight.foreground4#FF5DB1
editorBracketMatch.background#131D2A
editorBracketMatch.border#35E0FF66
editorCursor.foreground#D7FF3F
editorError.foreground#FF5D7A
editorGroup.border#1A2635
editorGroupHeader.tabsBackground#0E151F
editorGutter.addedBackground#00C7A3
editorGutter.deletedBackground#FF5D7A
editorGutter.modifiedBackground#35E0FF
editorHoverWidget.background#101925
editorHoverWidget.border#253446
editorIndentGuide.activeBackground1#35516A
editorIndentGuide.background1#233547
editorInfo.foreground#35E0FF
editorLineNumber.activeForeground#D7FF3F
editorLineNumber.foreground#61758C
editorLink.activeForeground#35E0FF
editorMarkerNavigation.background#101925
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#FF5D7A88
editorOverviewRuler.findMatchForeground#FF6F3C
editorOverviewRuler.infoForeground#35E0FF88
editorOverviewRuler.warningForeground#D7FF3F88
editorRuler.foreground#213242
editorSuggestWidget.background#101925
editorSuggestWidget.border#253446
editorSuggestWidget.foreground#DFF5FF
editorSuggestWidget.highlightForeground#D7FF3F
editorSuggestWidget.selectedBackground#1A2735
editorWarning.foreground#D7FF3F
editorWhitespace.foreground#3B4B5E
editorWidget.background#101925
editorWidget.border#35E0FF44
editorWidget.resizeBorder#FF6F3C
extensionButton.prominentBackground#00C7A3
extensionButton.prominentForeground#091019
extensionButton.prominentHoverBackground#2BD9B8
focusBorder#35E0FF66
foreground#DFF5FF
gitDecoration.addedResourceForeground#00C7A3
gitDecoration.conflictingResourceForeground#FF6F3C
gitDecoration.deletedResourceForeground#FF5D7A
gitDecoration.ignoredResourceForeground#61758C
gitDecoration.modifiedResourceForeground#35E0FF
gitDecoration.untrackedResourceForeground#D7FF3F
input.background#121D29
input.border#253446
input.foreground#DFF5FF
input.placeholderForeground#708399
inputOption.activeBackground#D7FF3F1A
inputOption.activeBorder#D7FF3F66
inputValidation.errorBorder#FF5D7A88
inputValidation.infoBorder#35E0FF88
inputValidation.warningBorder#D7FF3F88
list.activeSelectionBackground#182433
list.activeSelectionForeground#DFF5FF
list.focusBackground#182433
list.focusForeground#DFF5FF
list.highlightForeground#D7FF3F
list.hoverBackground#131D2A
list.hoverForeground#DFF5FF
list.inactiveSelectionBackground#131D2A
list.inactiveSelectionForeground#B7CBDD
list.warningForeground#FF6F3C
listFilterWidget.background#101925
listFilterWidget.noMatchesOutline#FF5D7A66
listFilterWidget.outline#35E0FF44
menu.background#101925
menu.border#253446
menu.foreground#DFF5FF
menu.selectionBackground#182433
menu.selectionBorder#00000000
menu.selectionForeground#DFF5FF
menu.separatorBackground#223344
menubar.selectionBackground#182433
menubar.selectionBorder#35E0FF22
menubar.selectionForeground#DFF5FF
minimap.background#0B1018
minimapGutter.addedBackground#00C7A3
minimapGutter.deletedBackground#FF5D7A
minimapGutter.modifiedBackground#35E0FF
minimapSlider.activeBackground#D7FF3F55
minimapSlider.background#8CA0B844
minimapSlider.hoverBackground#D7FF3F77
notificationLink.foreground#35E0FF
notifications.background#101925
notifications.foreground#DFF5FF
panel.background#0E151F
panel.border#1A2635
panelTitle.activeBorder#FF6F3C
panelTitle.activeForeground#DFF5FF
panelTitle.inactiveForeground#8CA0B8
peekView.border#35E0FF44
peekViewEditor.background#0E151F
peekViewEditor.matchHighlightBackground#D7FF3F22
peekViewEditorGutter.background#0E151F
peekViewResult.background#101925
peekViewResult.matchHighlightBackground#FF6F3C22
peekViewResult.selectionBackground#182433
peekViewTitle.background#131D2A
peekViewTitleDescription.foreground#8CA0B8
pickerGroup.foreground#D7FF3F
progressBar.background#FF6F3C
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#D7FF3F66
scrollbarSlider.background#8CA0B855
scrollbarSlider.hoverBackground#D7FF3F88
selection.background#22384C
settings.checkboxBackground#101925
settings.checkboxForeground#DFF5FF
settings.dropdownBackground#101925
settings.dropdownForeground#DFF5FF
settings.headerForeground#D7FF3F
settings.modifiedItemIndicator#FF6F3C
settings.numberInputBackground#101925
settings.numberInputForeground#DFF5FF
settings.textInputBackground#101925
settings.textInputForeground#DFF5FF
sideBar.background#0E151F
sideBar.border#1A2635
sideBar.foreground#C9DCEC
sideBarSectionHeader.background#101925
sideBarSectionHeader.border#1A2635
sideBarSectionHeader.foreground#DFF5FF
sideBarTitle.foreground#D7FF3F
statusBar.background#101925
statusBar.border#1A2635
statusBar.debuggingBackground#FF6F3C
statusBar.debuggingForeground#091019
statusBar.foreground#DFF5FF
statusBar.noFolderBackground#0B1018
statusBarItem.hoverBackground#182433
statusBarItem.remoteBackground#D7FF3F
statusBarItem.remoteForeground#091019
tab.activeBackground#131D2A
tab.activeBorder#FF6F3C
tab.activeForeground#DFF5FF
tab.activeModifiedBorder#D7FF3F
tab.border#1A2635
tab.inactiveBackground#0E151F
tab.inactiveForeground#8294A8
tab.unfocusedActiveBackground#131D2A
tab.unfocusedActiveBorder#253446
tab.unfocusedActiveForeground#C9DCEC
tab.unfocusedInactiveBackground#0E151F
tab.unfocusedInactiveForeground#708399
terminal.ansiBlack#0B1018
terminal.ansiBlue#35E0FF
terminal.ansiBrightBlack#61758C
terminal.ansiBrightBlue#7DEBFF
terminal.ansiBrightCyan#8DEBFF
terminal.ansiBrightGreen#2BD9B8
terminal.ansiBrightMagenta#FF84C8
terminal.ansiBrightRed#FF7E92
terminal.ansiBrightWhite#F2FBFF
terminal.ansiBrightYellow#E6FF72
terminal.ansiCyan#00C7A3
terminal.ansiGreen#00C7A3
terminal.ansiMagenta#FF5DB1
terminal.ansiRed#FF5D7A
terminal.ansiWhite#DFF5FF
terminal.ansiYellow#D7FF3F
terminal.background#0B1018
terminal.foreground#DFF5FF
terminalCursor.background#0B1018
terminalCursor.foreground#D7FF3F
textLink.activeForeground#8DEBFF
textLink.foreground#35E0FF
titleBar.activeBackground#0B1018
titleBar.activeForeground#DFF5FF
titleBar.border#1A2635
titleBar.inactiveBackground#0B1018
titleBar.inactiveForeground#8294A8
tree.indentGuidesStroke#213242
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5E6D81	italic
keyword, storage, storage.modifier, storage.type	#D7FF3F	—
keyword.operator, keyword.control.import, keyword.control.from, keyword.control.as	#FF6F3C	—
variable.language, support.variable.magic, support.variable, variable.parameter.function.language.special	#35E0FF	—
variable.parameter, meta.parameter, meta.function.parameters variable	#FF9A6A	—
variable, meta.definition.variable, meta.definition.variable.name	#DFF5FF	—
entity.name.function, support.function, meta.function-call, variable.function	#FF5DB1	—
entity.name.method, meta.method-call, support.function.method	#FF74BE	—
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, support.class, support.type	#35E0FF	—
entity.name.namespace, entity.name.module, support.namespace	#95A6FF	—
constant, constant.language, constant.character.escape, constant.numeric, constant.character	#35E0FF	—
string, meta.embedded.assembly string	#FFB38E	—
string.regexp, constant.other.symbol, constant.other.reference.link	#95A6FF	—
constant.other.color, entity.other.attribute-name, meta.object-literal.key, support.type.property-name, variable.other.property	#00C7A3	—
meta.decorator, entity.name.function.decorator, punctuation.definition.decorator, storage.type.annotation, meta.annotation	#FF6F3C	—
punctuation, meta.brace, meta.delimiter	#7F91A7	—
invalid, invalid.illegal	#091019	—
markup.heading, entity.name.section	#D7FF3F	bold
markup.bold	#DFF5FF	bold
markup.italic, markup.quote	#95A6FF	italic
markup.inline.raw, markup.raw.block, fenced_code.block	#00C7A3	—
markup.list, punctuation.definition.list.begin.markdown	#FF6F3C	—
markup.link, string.other.link.title, string.other.link.description	#35E0FF	underline
source.python keyword, source.python storage.type	#D7FF3F	—
source.python support.type.exception, source.python support.class, source.python entity.name.type.class	#35E0FF	—
source.python entity.name.function, source.python meta.function-call.generic, source.python support.function.builtin	#FF5DB1	—
source.python variable.parameter, source.python variable.parameter.function-call	#FF9A6A	—
source.python variable.language.special.self, source.python variable.language.special.cls, source.python constant.other.caps	#35E0FF	—
source.python meta.function.decorator, source.python punctuation.definition.decorator	#FF6F3C	—
source.python string, source.python punctuation.definition.string	#FFB38E	—
source.python constant.numeric, source.python constant.language	#35E0FF	—
source.julia keyword, source.julia storage.type, source.julia keyword.control	#D7FF3F	—
source.julia entity.name.function, source.julia support.function, source.julia meta.function-call	#FF5DB1	—
source.julia entity.name.type, source.julia support.type, source.julia support.class	#35E0FF	—
source.julia variable.parameter, source.julia meta.parameters variable	#FF9A6A	—
source.julia meta.macro, source.julia entity.name.function.macro, source.julia punctuation.definition.macro	#FF6F3C	—
source.julia constant.numeric, source.julia constant.language, source.julia constant.character	#35E0FF	—
source.julia string	#FFB38E	—

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