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 Julia Classic

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#272822
activityBar.foreground#f8f8f2
badge.background#75715E
badge.foreground#f8f8f2
button.background#75715E
debugToolBar.background#1e1f1c
diffEditor.insertedTextBackground#4b661680
diffEditor.removedTextBackground#90274A70
dropdown.background#414339
dropdown.listBackground#1e1f1c
editor.background#272822
editor.foreground#f8f8f2
editor.lineHighlightBackground#3e3d32
editor.selectionBackground#878b9180
editor.selectionHighlightBackground#575b6180
editor.wordHighlightBackground#4a4a7680
editor.wordHighlightStrongBackground#6a6a9680
editorCursor.foreground#f8f8f0
editorGroup.border#34352f
editorGroup.dropBackground#41433980
editorGroupHeader.tabsBackground#1e1f1c
editorHoverWidget.background#414339
editorHoverWidget.border#75715E
editorIndentGuide.activeBackground1#767771
editorIndentGuide.background1#464741
editorLineNumber.activeForeground#c2c2bf
editorLineNumber.foreground#90908a
editorSuggestWidget.background#272822
editorSuggestWidget.border#75715E
editorWhitespace.foreground#464741
editorWidget.background#1e1f1c
focusBorder#75715E
input.background#414339
inputOption.activeBorder#75715E
inputValidation.errorBackground#90274A
inputValidation.errorBorder#f92672
inputValidation.infoBackground#546190
inputValidation.infoBorder#819aff
inputValidation.warningBackground#848528
inputValidation.warningBorder#e2e22e
list.activeSelectionBackground#75715E
list.dropBackground#414339
list.focusBackground#414339
list.highlightForeground#f8f8f2
list.hoverBackground#3e3d32
list.inactiveSelectionBackground#414339
menu.background#1e1f1c
menu.foreground#cccccc
minimap.selectionHighlight#878b9180
panel.border#414339
panelTitle.activeBorder#75715E
panelTitle.activeForeground#f8f8f2
panelTitle.inactiveForeground#75715E
peekView.border#75715E
peekViewEditor.background#272822
peekViewEditor.matchHighlightBackground#75715E
peekViewResult.background#1e1f1c
peekViewResult.matchHighlightBackground#75715E
peekViewResult.selectionBackground#414339
peekViewTitle.background#1e1f1c
pickerGroup.foreground#75715E
progressBar.background#75715E
selection.background#ccccc7
settings.numberInputBackground#32342d
settings.textInputBackground#32342d
sideBar.background#1e1f1c
sideBarSectionHeader.background#272822
statusBar.background#414339
statusBar.debuggingBackground#75715E
statusBar.noFolderBackground#414339
statusBarItem.remoteBackground#AC6218
tab.border#1e1f1c
tab.inactiveBackground#34352f
tab.inactiveForeground#ccccc7
terminal.ansiBlack#333333
terminal.ansiBlue#6A7EC8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#819aff
terminal.ansiBrightCyan#66D9EF
terminal.ansiBrightGreen#A6E22E
terminal.ansiBrightMagenta#AE81FF
terminal.ansiBrightRed#f92672
terminal.ansiBrightWhite#f8f8f2
terminal.ansiBrightYellow#e2e22e
terminal.ansiCyan#56ADBC
terminal.ansiGreen#86B42B
terminal.ansiMagenta#8C6BC8
terminal.ansiRed#C4265E
terminal.ansiWhite#e3e3dd
terminal.ansiYellow#B3B42B
titleBar.activeBackground#1e1f1c
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded	#F8F8F2	—
comment	#88846f	—
string	#E6DB74	—
punctuation.definition.template-expression, punctuation.section.embedded	#F92672	—
meta.template.expression	#F8F8F2	—
constant.numeric	#AE81FF	—
constant.language	#AE81FF	—
constant.character, constant.other	#AE81FF	—
variable	#F8F8F2
keyword	#F92672	—
storage	#F92672
storage.type	#66D9EF	italic
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution	#A6E22E	underline
entity.other.inherited-class	#A6E22E	italic underline
entity.name.function	#A6E22E
variable.parameter	#FD971F	italic
entity.name.tag	#F92672
entity.other.attribute-name	#A6E22E
support.function	#66D9EF
support.constant	#66D9EF
support.type, support.class	#66D9EF	italic
support.other.variable	—
invalid	#F8F8F0
invalid.deprecated	#F8F8F0	—
meta.structure.dictionary.json string.quoted.double.json	#CFCFC2	—
meta.diff, meta.diff.header	#75715E	—
markup.deleted	#F92672	—
markup.inserted	#A6E22E	—
markup.changed	#E6DB74	—
constant.numeric.line-number.find-in-files - match	#AE81FFA0	—
entity.name.filename.find-in-files	#E6DB74	—
markup.quote	#F92672	—
markup.list	#E6DB74	—
markup.bold, markup.italic	#66D9EF	—
markup.inline.raw	#FD971F
markup.heading	#A6E22E	—
markup.heading.setext	#A6E22E	bold
markup.heading.markdown	—	bold
markup.quote.markdown	#75715E	italic
markup.bold.markdown	—	bold
string.other.link.title.markdown,string.other.link.description.markdown	#AE81FF	—
markup.underline.link.markdown,markup.underline.link.image.markdown	#E6DB74	—
markup.italic.markdown	—	italic
markup.list.unnumbered.markdown, markup.list.numbered.markdown	#f8f8f2	—
punctuation.definition.list.begin.markdown	#A6E22E	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
variable.language	#FD971F	—
source.python meta.function-call.generic, source.python keyword.control.import	#66D9EF	—
source.python meta.function-call support.type	#66D9EF
source.python punctuation	#FD971F	—
source.python punctuation.separator.period, source.python punctuation.section, source.python punctuation.separator.colon, source.python punctuation.separator.dict, source.python punctuation.definition.decorator, source.python meta.function.decorator entity.name.function	#F92672	—
source.python meta.function.decorator support.type	#F92672
source.python punctuation.definition.comment, source.python punctuation.definition.string, source.python storage.type.string, source.python meta.fstring punctuation.definition.string string.interpolated string	#88846f	—
source.python keyword.operator.arithmetic, source.python support.type, source.python meta.function-call meta.function-call.arguments support.type	#A6E22E	—
source.python variable.parameter.function.language.special.self, source.python variable.language, source.python constant.other.caps	#FF00FF	—
source.python variable.parameter, source.python variable.parameter.function-call	#AA4926	—
source.julia punctuation.definition.string	#88846f	—
source.julia meta.bracket	#FD971F
source.julia keyword.control.end	#6b0329	—
source.julia keyword.operator.boolean	#A6E22E	—
source.julia constant.other.symbol	#A6E22E	—
source.julia support.type, source.julia support.class	#fd5ff0	italic
source.julia support.function.macro	#A6E22E	—
source.julia keyword.control.using, source.julia keyword.control.import	#66D9EF	—
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}!`;
}