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: Dimension X

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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

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