Stranger Theme for VS Code

Name: Stranger Theme for VS Code
Author: Stranger Theme

Publisher: Stranger ThemeThemes in package: 6

A collection of dark themes inspired by the famous Stranger Things series

GitHub

Color themes

VS Code preview

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

Stranger Theme for VS Code — Stranger Theme: The Lab

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.activeBorder#7FDBFF
activityBar.background#2E313A
activityBar.foreground#E0E5EC
activityBar.inactiveForeground#5D6D7E
activityBarBadge.background#7FDBFF
activityBarBadge.foreground#E0E5EC
badge.background#2A2D36
badge.foreground#E0E5EC
breadcrumb.activeSelectionForeground#E0E5EC
breadcrumb.background#1A1D26
breadcrumb.focusForeground#E0E5EC
breadcrumb.foreground#5D6D7E
breadcrumbPicker.background#060912
button.background#2A2D36
button.foreground#E0E5EC
button.hoverBackground#42454E
button.secondaryBackground#1A1D26
button.secondaryForeground#E0E5EC
button.secondaryHoverBackground#2E313A
debugToolBar.background#10131C
descriptionForeground#5D6D7E
diffEditor.insertedTextBackground#98C37920
diffEditor.removedTextBackground#E06C7550
dropdown.background#2E313A
dropdown.border#060912
dropdown.foreground#E0E5EC
editor.background#1A1D26
editor.findMatchBackground#FF851B
editor.findMatchHighlightBackground#42454E
editor.findRangeHighlightBackground#2E313A
editor.foldBackground#10131C
editor.foreground#E0E5EC
editor.hoverHighlightBackground#42454E
editor.lineHighlightBorder#2A2D36
editor.rangeHighlightBackground#2E313A
editor.selectionBackground#2A2D36
editor.selectionHighlightBackground#42454E
editor.snippetFinalTabstopHighlightBackground#1A1D26
editor.snippetFinalTabstopHighlightBorder#2ECC40
editor.snippetTabstopHighlightBackground#1A1D26
editor.snippetTabstopHighlightBorder#5D6D7E
editor.wordHighlightBackground#42454E
editor.wordHighlightStrongBackground#42454E
editorBracketHighlight.foreground1#E0E5EC
editorBracketHighlight.foreground2#7FDBFF
editorBracketHighlight.foreground3#39CCCC
editorBracketHighlight.foreground4#2ECC40
editorBracketHighlight.foreground5#B10DC9
editorBracketHighlight.foreground6#FF851B
editorBracketHighlight.unexpectedBracket.foreground#FF4136
editorCodeLens.foreground#5D6D7E
editorError.foreground#FF4136
editorGroup.border#B10DC9
editorGroup.dropBackground#42454E
editorGroupHeader.tabsBackground#060912
editorGutter.addedBackground#2ECC40
editorGutter.deletedBackground#FF4136
editorGutter.modifiedBackground#39CCCC
editorHoverWidget.background#1A1D26
editorHoverWidget.border#5D6D7E
editorIndentGuide.activeBackground#5D6D7E
editorIndentGuide.background#E0E5EC1A
editorLineNumber.activeForeground#E0E5EC
editorLineNumber.foreground#5D6D7E
editorLink.activeForeground#39CCCC
editorOverviewRuler.addedForeground#2ECC40
editorOverviewRuler.border#060912
editorOverviewRuler.currentContentForeground#2ECC40
editorOverviewRuler.deletedForeground#FF4136
editorOverviewRuler.errorForeground#FF4136
editorOverviewRuler.incomingContentForeground#B10DC9
editorOverviewRuler.infoForeground#39CCCC
editorOverviewRuler.modifiedForeground#39CCCC
editorOverviewRuler.selectionHighlightForeground#FF851B
editorOverviewRuler.warningForeground#FF851B
editorOverviewRuler.wordHighlightForeground#39CCCC
editorOverviewRuler.wordHighlightStrongForeground#2ECC40
editorRuler.foreground#E0E5EC1A
editorSuggestWidget.background#10131C
editorSuggestWidget.foreground#E0E5EC
editorSuggestWidget.selectedBackground#2A2D36
editorWarning.foreground#39CCCC
editorWhitespace.foreground#E0E5EC1A
editorWidget.background#10131C
errorForeground#FF4136
extensionButton.prominentBackground#98C37990
extensionButton.prominentForeground#E0E5EC
extensionButton.prominentHoverBackground#98C37960
focusBorder#5D6D7E
foreground#E0E5EC
gitDecoration.conflictingResourceForeground#FF851B
gitDecoration.deletedResourceForeground#FF4136
gitDecoration.ignoredResourceForeground#5D6D7E
gitDecoration.modifiedResourceForeground#39CCCC
gitDecoration.untrackedResourceForeground#2ECC40
input.background#1A1D26
input.border#060912
input.foreground#E0E5EC
input.placeholderForeground#5D6D7E
inputOption.activeBorder#B10DC9
inputValidation.errorBorder#FF4136
inputValidation.infoBorder#7FDBFF
inputValidation.warningBorder#FF851B
list.activeSelectionBackground#2A2D36
list.activeSelectionForeground#E0E5EC
list.dropBackground#2A2D36
list.errorForeground#FF4136
list.focusBackground#2E313A
list.highlightForeground#39CCCC
list.hoverBackground#2E313A
list.inactiveSelectionBackground#2E313A
list.warningForeground#FF851B
listFilterWidget.background#2E313A
listFilterWidget.noMatchesOutline#FF4136
listFilterWidget.outline#42454E
merge.currentHeaderBackground#98C37990
merge.incomingHeaderBackground#61AFEF90
panel.background#1A1D26
panel.border#B10DC9
panelTitle.activeBorder#7FDBFF
panelTitle.activeForeground#E0E5EC
panelTitle.inactiveForeground#5D6D7E
peekView.border#2A2D36
peekViewEditor.background#1A1D26
peekViewEditor.matchHighlightBackground#FFDC00
peekViewResult.background#10131C
peekViewResult.fileForeground#E0E5EC
peekViewResult.lineForeground#E0E5EC
peekViewResult.matchHighlightBackground#FFDC00
peekViewResult.selectionBackground#2A2D36
peekViewResult.selectionForeground#E0E5EC
peekViewTitle.background#060912
peekViewTitleDescription.foreground#5D6D7E
peekViewTitleLabel.foreground#E0E5EC
pickerGroup.border#B10DC9
pickerGroup.foreground#39CCCC
progressBar.background#7FDBFF
scrollbarSlider.activeBackground#B10DC9
scrollbarSlider.background#5D6D7E
scrollbarSlider.hoverBackground#B10DC9
selection.background#B10DC9
settings.checkboxBackground#10131C
settings.checkboxBorder#060912
settings.checkboxForeground#E0E5EC
settings.dropdownBackground#10131C
settings.dropdownBorder#060912
settings.dropdownForeground#E0E5EC
settings.headerForeground#E0E5EC
settings.modifiedItemIndicator#FF851B
settings.numberInputBackground#10131C
settings.numberInputBorder#060912
settings.numberInputForeground#E0E5EC
settings.textInputBackground#10131C
settings.textInputBorder#060912
settings.textInputForeground#E0E5EC
sideBar.background#10131C
sideBarSectionHeader.background#1A1D26
sideBarSectionHeader.border#060912
sideBarTitle.foreground#E0E5EC
statusBar.background#060912
statusBar.debuggingBackground#FF4136
statusBar.debuggingForeground#060912
statusBar.foreground#E0E5EC
statusBar.noFolderBackground#060912
statusBar.noFolderForeground#E0E5EC
statusBarItem.prominentBackground#FF4136
statusBarItem.prominentHoverBackground#FF851B
statusBarItem.remoteBackground#B10DC9
statusBarItem.remoteForeground#1A1D26
tab.activeBackground#1A1D26
tab.activeBorderTop#7FDBFF
tab.activeForeground#E0E5EC
tab.border#060912
tab.inactiveBackground#10131C
tab.inactiveForeground#5D6D7E
terminal.ansiBlack#1A1D26
terminal.ansiBlue#B10DC9
terminal.ansiBrightBlack#5D6D7E
terminal.ansiBrightBlue#B10DC9
terminal.ansiBrightCyan#39CCCC
terminal.ansiBrightGreen#2ECC40
terminal.ansiBrightMagenta#7FDBFF
terminal.ansiBrightRed#FF4136
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFDC00
terminal.ansiCyan#39CCCC
terminal.ansiGreen#2ECC40
terminal.ansiMagenta#7FDBFF
terminal.ansiRed#FF4136
terminal.ansiWhite#E0E5EC
terminal.ansiYellow#FFDC00
terminal.background#1A1D26
terminal.foreground#E0E5EC
titleBar.activeBackground#10131C
titleBar.activeForeground#E0E5EC
titleBar.inactiveBackground#060912
titleBar.inactiveForeground#5D6D7E
walkThrough.embeddedEditorBackground#10131C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#B10DC9	—
meta.diff, meta.diff.header	#5D6D7E	—
markup.inserted	#2ECC40	—
markup.deleted	#FF4136	—
markup.changed	#FF851B	—
invalid	#FF4136	underline italic
invalid.deprecated	#E0E5EC	underline italic
entity.name.filename	#FFDC00	—
markup.error	#FF4136	—
markup.underline	—	underline
markup.bold	#FF851B	bold
markup.heading	#B10DC9	bold
markup.italic	#FFDC00	italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext	#39CCCC	—
markup.inline.raw, markup.raw.restructuredtext	#2ECC40	—
markup.underline.link, markup.underline.link.image	#39CCCC	—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#7FDBFF	—
entity.name.directive.restructuredtext, markup.quote	#FFDC00	italic
meta.separator.markdown	#5D6D7E	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#2ECC40	—
punctuation.definition.constant.restructuredtext	#B10DC9	—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end	#B10DC9	—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end	#E0E5EC	—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end	#FFDC00	—
entity.name.type.class, entity.name.class	#39CCCC	normal
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	#B10DC9	italic
entity.other.inherited-class	#39CCCC	italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#5D6D7E	—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class	#7FDBFF	—
comment.block.documentation entity.name.type	#39CCCC	italic
comment.block.documentation entity.name.type punctuation.definition.bracket	#39CCCC	—
comment.block.documentation variable	#FF851B	italic
constant, variable.other.constant	#B10DC9	—
constant.character.escape, constant.character.string.escape, constant.regexp	#7FDBFF	—
entity.name.tag	#7FDBFF	—
entity.other.attribute-name.parent-selector	#7FDBFF	—
entity.other.attribute-name	#2ECC40	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	#2ECC40	—
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	#FF851B	italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property	#2ECC40	italic
meta.decorator variable.other.object	#2ECC40	—
keyword, punctuation.definition.keyword	#7FDBFF	—
keyword.control.new, keyword.operator.new	—	bold
meta.selector	#7FDBFF	—
support	#39CCCC	italic
support.function.magic, support.variable, variable.other.predefined	#B10DC9	regular
support.function, support.type.property-name	—	regular
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.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.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation	#7FDBFF	—
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.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor	#E0E5EC	—
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	#7FDBFF	—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml	#39CCCC	—
constant.other.date, constant.other.timestamp	#FF851B	—
variable.other.alias.yaml	#2ECC40	italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def	#7FDBFF	regular
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	#39CCCC	italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	#FF851B	—
storage.modifier	#7FDBFF	—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#FFDC00	—
punctuation.definition.group.capture.regexp	#7FDBFF	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#FF4136	—
punctuation.definition.character-class.regexp	#39CCCC	—
punctuation.definition.group.regexp	#FF851B	—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp	#FF4136	—
meta.assertion.look-ahead.regexp	#2ECC40	—
string	#FFDC00	—
punctuation.definition.string.begin, punctuation.definition.string.end	#F5D200	—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end	#43D6D6	—
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	#5D6D7E	—
variable, constant.other.key.perl	#E0E5EC	—
variable.other.property, support.variable.property, variable.other.object.property	#E0E5EC	—
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx	#B10DC9	—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable	#FF851B	italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable	#E0E5EC	normal
meta.selectionset.graphql variable	#FFDC00	—
meta.selectionset.graphql meta.arguments variable	#E0E5EC	—
entity.name.fragment.graphql, variable.fragment.graphql	#39CCCC	—
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.separator.list.comma.css, constant.language.empty-list.haskell	#E0E5EC	—
source.shell variable.other	#B10DC9	—
support.constant	#B10DC9	normal
meta.scope.prerequisites.makefile	#FFDC00	—
meta.attribute-selector.scss	#FFDC00	—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss	#E0E5EC	—
meta.preprocessor.haskell	#5D6D7E	—
log.error	#FF4136	bold
log.warning	#FFDC00	bold
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary	#B10DC9	—
keyword.operator	#7FDBFF	—
keyword.operator.arithmetic	#7FDBFF	—
keyword.operator.assignment	#7FDBFF	—
keyword.operator.comparison, keyword.operator.relational	#7FDBFF	—
keyword.operator.logical	#7FDBFF	—
support.type.property-name.json	#39CCCC	—
string.quoted.double.json	#FFDC00	—
support.type.property-name.css, support.type.vendored.property-name.css	#39CCCC	—
support.constant.property-value.css	#FF851B	—
keyword.other.unit.css	#B10DC9	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#2ECC40	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#2ECC40	italic
variable.scss, variable.sass	#FF851B	—
entity.name.type.interface.ts, entity.name.type.interface.tsx	#39CCCC	—
entity.name.type.alias.ts, entity.name.type.alias.tsx	#39CCCC	—
entity.name.type.enum.ts, entity.name.type.enum.tsx	#39CCCC	—
support.class.component.js, support.class.component.jsx, support.class.component.ts, support.class.component.tsx, entity.name.tag.js, entity.name.tag.tsx	#39CCCC	—
entity.name.tag.html.js, entity.name.tag.html.jsx, entity.name.tag.html.ts, entity.name.tag.html.tsx	#7FDBFF	—
entity.other.attribute-name.js, entity.other.attribute-name.jsx, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, meta.tag.attributes entity.other.attribute-name	#2ECC40	italic
string.quoted.double.js, string.quoted.single.js, string.quoted.double.jsx, string.quoted.single.jsx, string.quoted.double.ts, string.quoted.single.ts, string.quoted.double.tsx, string.quoted.single.tsx, meta.jsx.children string, meta.tag string.quoted	#FFDC00	—
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.ts, punctuation.section.embedded.end.ts, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx	#7FDBFF	—
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js, punctuation.definition.tag.begin.jsx, punctuation.definition.tag.end.jsx, punctuation.definition.tag.begin.ts, punctuation.definition.tag.end.ts, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx	#E0E5EC	—
meta.jsx.children, meta.jsx.children.tsx	#E0E5EC	—
string.template, string.template.js, string.template.ts, string.template.tsx	#FFDC00	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#7FDBFF	—
variable.parameter.function.language.special.self.python	#B10DC9	italic
variable.parameter.function.language.special.cls.python	#B10DC9	italic
support.function.magic.python	#2ECC40	—
entity.name.function.decorator.python	#2ECC40	italic
meta.tag.metadata.doctype.html, meta.tag.sgml.doctype, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml.doctype string	#5D6D7E	—
meta.tag string.quoted, string.quoted.double.html, string.quoted.single.html	#FFDC00	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.other.unrecognized.html.derivative punctuation.definition.tag	#E0E5EC	—

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