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: Upside Down

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
emphasis	—	italic
strong	—	bold
header	#61AFEF	—
meta.diff, meta.diff.header	#5C6370	—
markup.inserted	#98C379	—
markup.deleted	#E06C75	—
markup.changed	#D19A66	—
invalid	#E06C75	underline italic
invalid.deprecated	#F8F8F2	underline italic
entity.name.filename	#E5C07B	—
markup.error	#E06C75	—
markup.underline	—	underline
markup.bold	#D19A66	bold
markup.heading	#61AFEF	bold
markup.italic	#E5C07B	italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext	#56B6C2	—
markup.inline.raw, markup.raw.restructuredtext	#98C379	—
markup.underline.link, markup.underline.link.image	#56B6C2	—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#C678DD	—
entity.name.directive.restructuredtext, markup.quote	#E5C07B	italic
meta.separator.markdown	#5C6370	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#98C379	—
punctuation.definition.constant.restructuredtext	#61AFEF	—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end	#61AFEF	—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end	#F8F8F2	—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end	#E5C07B	—
entity.name.type.class, entity.name.class	#56B6C2	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	#61AFEF	italic
entity.other.inherited-class	#56B6C2	italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#5C6370	—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class	#C678DD	—
comment.block.documentation entity.name.type	#56B6C2	italic
comment.block.documentation entity.name.type punctuation.definition.bracket	#56B6C2	—
comment.block.documentation variable	#D19A66	italic
constant, variable.other.constant	#61AFEF	—
constant.character.escape, constant.character.string.escape, constant.regexp	#C678DD	—
entity.name.tag	#C678DD	—
entity.other.attribute-name.parent-selector	#C678DD	—
entity.other.attribute-name	#98C379	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	#98C379	—
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	#D19A66	italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property	#98C379	italic
meta.decorator variable.other.object	#98C379	—
keyword, punctuation.definition.keyword	#C678DD	—
keyword.control.new, keyword.operator.new	—	bold
meta.selector	#C678DD	—
support	#56B6C2	italic
support.function.magic, support.variable, variable.other.predefined	#61AFEF	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	#C678DD	—
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	#F8F8F2	—
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	#C678DD	—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml	#56B6C2	—
constant.other.date, constant.other.timestamp	#D19A66	—
variable.other.alias.yaml	#98C379	italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def	#C678DD	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	#56B6C2	italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type	#D19A66	—
storage.modifier	#C678DD	—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp	#E5C07B	—
punctuation.definition.group.capture.regexp	#C678DD	—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end	#E06C75	—
punctuation.definition.character-class.regexp	#56B6C2	—
punctuation.definition.group.regexp	#D19A66	—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp	#E06C75	—
meta.assertion.look-ahead.regexp	#98C379	—
string	#E5C07B	—
punctuation.definition.string.begin, punctuation.definition.string.end	#DBB671	—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end	#60C0CC	—
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	#5C6370	—
variable, constant.other.key.perl	#F8F8F2	—
variable.other.property, support.variable.property, variable.other.object.property	#F8F8F2	—
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx	#61AFEF	—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable	#D19A66	italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable	#F8F8F2	normal
meta.selectionset.graphql variable	#E5C07B	—
meta.selectionset.graphql meta.arguments variable	#F8F8F2	—
entity.name.fragment.graphql, variable.fragment.graphql	#56B6C2	—
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	#F8F8F2	—
source.shell variable.other	#61AFEF	—
support.constant	#61AFEF	normal
meta.scope.prerequisites.makefile	#E5C07B	—
meta.attribute-selector.scss	#E5C07B	—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss	#F8F8F2	—
meta.preprocessor.haskell	#5C6370	—
log.error	#E06C75	bold
log.warning	#E5C07B	bold
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary	#61AFEF	—
keyword.operator	#C678DD	—
keyword.operator.arithmetic	#C678DD	—
keyword.operator.assignment	#C678DD	—
keyword.operator.comparison, keyword.operator.relational	#C678DD	—
keyword.operator.logical	#C678DD	—
support.type.property-name.json	#56B6C2	—
string.quoted.double.json	#E5C07B	—
support.type.property-name.css, support.type.vendored.property-name.css	#56B6C2	—
support.constant.property-value.css	#D19A66	—
keyword.other.unit.css	#61AFEF	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#98C379	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css	#98C379	italic
variable.scss, variable.sass	#D19A66	—
entity.name.type.interface.ts, entity.name.type.interface.tsx	#56B6C2	—
entity.name.type.alias.ts, entity.name.type.alias.tsx	#56B6C2	—
entity.name.type.enum.ts, entity.name.type.enum.tsx	#56B6C2	—
support.class.component.js, support.class.component.jsx, support.class.component.ts, support.class.component.tsx, entity.name.tag.js, entity.name.tag.tsx	#56B6C2	—
entity.name.tag.html.js, entity.name.tag.html.jsx, entity.name.tag.html.ts, entity.name.tag.html.tsx	#C678DD	—
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	#98C379	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	#E5C07B	—
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	#C678DD	—
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	#F8F8F2	—
meta.jsx.children, meta.jsx.children.tsx	#F8F8F2	—
string.template, string.template.js, string.template.ts, string.template.tsx	#E5C07B	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#C678DD	—
variable.parameter.function.language.special.self.python	#61AFEF	italic
variable.parameter.function.language.special.cls.python	#61AFEF	italic
support.function.magic.python	#98C379	—
entity.name.function.decorator.python	#98C379	italic
meta.tag.metadata.doctype.html, meta.tag.sgml.doctype, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml.doctype string	#5C6370	—
meta.tag string.quoted, string.quoted.double.html, string.quoted.single.html	#E5C07B	—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.other.unrecognized.html.derivative punctuation.definition.tag	#F8F8F2	—

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