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: Tigers

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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