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

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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