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

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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