iris

Name: iris
Author: hoisel

Publisher: hoiselThemes in package: 1

The Iris theme for VS Code

Open in VS Code GitHub

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

iris — Iris

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#00213a
activityBar.foreground#42C7F3
activityBarBadge.background#ffc600
activityBarBadge.foreground#000
badge.background#ffc600
badge.foreground#000
button.background#eb2a5d
button.foreground#fff
button.hoverBackground#d82253
dropdown.background#193549
dropdown.border#15232d
dropdown.foreground#fff
editor.background#011524
editor.hoverHighlightBackground#ffc60033
editor.lineHighlightBackground#42D8F30E
editorGroupHeader.noTabsBackground#193549
editorGroupHeader.tabsBackground#122838
editorGroupHeader.tabsBorder#ffc8002f
editorLineNumber.foreground#42CDF327
gitDecoration.conflictingResourceForeground#e41708
gitDecoration.deletedResourceForeground#f53535
gitDecoration.ignoredResourceForeground#d8d7d775
gitDecoration.modifiedResourceForeground#e4ba21
gitDecoration.untrackedResourceForeground#4ca72a
input.background#193549
input.border#0d3a58
input.foreground#b1dff5
input.placeholderForeground#fff
inputOption.activeBorder#3bbaf5
inputValidation.errorBackground#6e2727
inputValidation.errorBorder#8b0606
inputValidation.infoBackground#193549
inputValidation.infoBorder#0D3A58
inputValidation.warningBackground#193549
inputValidation.warningBorder#00e1ff
list.activeSelectionBackground#193549
list.activeSelectionForeground#aaa
list.dropBackground#0d3a58
list.focusBackground#0d3a58
list.focusForeground#fff
list.highlightForeground#ffc600
list.hoverBackground#193549
list.hoverForeground#fff
list.inactiveSelectionBackground#0d3a58
list.inactiveSelectionForeground#fff
panel.background#011524
panel.border#ffc800cc
panelTitle.activeBorder#ffc600
panelTitle.activeForeground#ffc600
panelTitle.inactiveForeground#aaa
peekView.border#ffc600
peekViewEditor.background#092030
peekViewEditor.matchHighlightBackground#19354900
peekViewEditorGutter.background#122738
peekViewResult.background#15232d
peekViewResult.fileForeground#aaa
peekViewResult.lineForeground#fff
peekViewResult.matchHighlightBackground#0d3a58
peekViewResult.selectionBackground#0d3a58
peekViewResult.selectionForeground#fff
peekViewTitle.background#15232d
peekViewTitleDescription.foreground#aaa
peekViewTitleLabel.foreground#ffc600
progressBar.background#ffc600
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#355166cc
scrollbarSlider.background#1F466280
scrollbarSlider.hoverBackground#406179cc
sideBar.background#011524
sideBar.border#0d3a58
sideBarSectionHeader.background#011f36
sideBarSectionHeader.foreground#FFF
sideBarTitle.foreground#FFF
statusBar.background#01111b
statusBar.border#01111b
statusBar.debuggingBackground#ffc600
statusBar.debuggingForeground#15232d
statusBar.foreground#fff
statusBar.noFolderBackground#0d3457
statusBar.noFolderForeground#fff
statusBarItem.activeBackground#0d3457
statusBarItem.hoverBackground#052847
statusBarItem.prominentBackground#15232d
statusBarItem.prominentHoverBackground#0d3a58
tab.activeBorder#ffc800cc
tab.activeForeground#fff
tab.border#15232D
tab.inactiveBackground#00202b
terminal.ansiBlack#000000
terminal.ansiBlue#0088ff
terminal.ansiBrightBlack#0050A4
terminal.ansiBrightBlue#0088ff
terminal.ansiBrightCyan#80fcff
terminal.ansiBrightGreen#3ad900
terminal.ansiBrightMagenta#f8c6fa
terminal.ansiBrightRed#ff628c
terminal.ansiBrightWhite#193549
terminal.ansiBrightYellow#ffc600
terminal.ansiCyan#80fcff
terminal.ansiGreen#3ad900
terminal.ansiMagenta#fb94ff
terminal.ansiRed#ff628c
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffc600
terminal.background#011524
terminal.foreground#ffffff
terminalCursor.background#ffc600
terminalCursor.foreground#ffc600
welcomePage.buttonBackground#193549
welcomePage.buttonHoverBackground#0d3a58
widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant	#E67A9E	—
string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, meta.group.regexp, constant.other.character-class.regexp, punctuation.definition.group.regexp, keyword.operator.quantifier.regexp, constant.character.escape.backslash.regexp	#F5B00E	—
entity.name.type	#FA4383	—
storage.modifier, keyword	#8CD9FD	—
support.type.primitive	#CFFC8A	italic
storage, keyword.control.export, variable.language.this	#8CD9FD	italic
punctuation.decorator, meta.decorator, meta.method.declaration, entity.name.function	#FFD2A7	—
punctuation.decorator	#E6A46A	—
meta, variable.other.object, variable.other.property, variable.other.readwrite, variable.parameter, meta.object-literal.key, variable.other.readwrite.alias, punctuation.definition	#FFF	—
comment, punctuation.definition.comment, punctuation.definition.block.tag.jsdoc, punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, entity.name.type.instance.jsdoc, storage.type.class.jsdoc	#455a5e	italic
entity.other.inherited-class	#A6E22ED6	italic
entity.name.tag.html, entity.name.tag.other.html, entity.name.tag.block.any.html, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.scope.between-tag-pair.html, entity.name.tag.inline.any.html	#FA4383	—
meta.tag.inline.any.html, meta.tag.block.any.html	#8CD9FD	—
entity.other.attribute-name.id.html, meta.toc-list.id.html, punctuation.separator.key-value.html, meta.attribute-with-value.id.html	#2FCF3A	—
text.html.basic	#FFF	—
entity.other.attribute-name.html	#8CD9FD	italic
entity.other.attribute-name.class.css	#CFFC8A	—
entity.name.tag.css	#FA4383	—
support.type.property-name.css, support.type.vendored.property-name	#67C6F5	—
constant	#E67A9E	—
string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, meta.group.regexp, constant.other.character-class.regexp, punctuation.definition.group.regexp, keyword.operator.quantifier.regexp, constant.character.escape.backslash.regexp	#F5B00E	—
entity.name.type	#FA4383	—
storage.modifier, keyword	#8CD9FD	—
support.type.primitive	#CFFC8A	italic
storage, keyword.control.export, variable.language.this	#8CD9FD	italic
punctuation.decorator, meta.decorator, meta.method.declaration, entity.name.function	#FFD2A7	—
punctuation.decorator	#E6A46A	—
meta, variable.other.object, variable.other.property, variable.other.readwrite, variable.parameter, meta.object-literal.key, variable.other.readwrite.alias, punctuation.definition	#FFF	—
comment, punctuation.definition.comment, punctuation.definition.block.tag.jsdoc, punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, entity.name.type.instance.jsdoc, storage.type.class.jsdoc	#455a5e	italic
entity.other.inherited-class	#A6E22ED6	italic
entity.name.tag.html, entity.name.tag.other.html, entity.name.tag.block.any.html, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.scope.between-tag-pair.html, entity.name.tag.inline.any.html	#FA4383	—
meta.tag.inline.any.html, meta.tag.block.any.html	#8CD9FD	—
entity.other.attribute-name.id.html, meta.toc-list.id.html, punctuation.separator.key-value.html, meta.attribute-with-value.id.html	#2FCF3A	—
text.html.basic	#FFF	—
entity.other.attribute-name.html	#8CD9FD	italic
entity.other.attribute-name.class.css	#CFFC8A	—
entity.name.tag.css	#FA4383	—
support.type.property-name.css, support.type.vendored.property-name	#67C6F5	—

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