Wildtype

Name: Wildtype
Author: wildtype

Publisher: wildtypeThemes in package: 1

Dark theme with calm, earthy colors contrasted with deep, dark blues.

Open in VS Code GitHub

VS Code preview

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

Wildtype — Wildtype

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.activeBackground#020a12
activityBar.activeBorder#baa122
activityBar.background#020a12
activityBar.foreground#cacaca
activityBar.inactiveForeground#cacaca95
activityBarBadge.background#020a12
badge.background#020a12
badge.foreground#aacbf1
breadcrumb.background#020a12
breadcrumb.foreground#cacaca
button.background#020a12
button.foreground#aacbf1
dropdown.background#020a12
dropdown.border#020a12
editor.background#020a12
editor.findMatchHighlightBackground#00126e
editor.foldBackground#002e7850
editor.foreground#aacbf1
editor.hoverHighlightBackground#020a12
editor.lineHighlightBackground#002e7850
editor.rangeHighlightBackground#020a12
editor.selectionBackground#00126e
editor.wordHighlightBackground#00178b
editorBracketMatch.border#020a12
editorCursor.foreground#cacaca
editorGroup.border#020a12
editorGroupHeader.tabsBackground#020a12
editorHoverWidget.background#020a12
editorHoverWidget.border#083058
editorHoverWidget.foreground#aacbf1
editorIndentGuide.background#020a12
editorLineNumber.activeForeground#cacaca
editorLineNumber.foreground#262d39
editorMarkerNavigationError.background#ff661a
editorMarkerNavigationWarning.background#020a12
editorPane.background#020a12
editorSuggestWidget.selectedBackground#00126e
editorUnnecessaryCode.opacity#000000c0
editorWidget.background#020a12
editorWidget.border#020a12
errorForeground#aacbf1
focusBorder#020a12
input.background#020a12
input.foreground#aacbf1
input.placeholderForeground#aacbf1
inputOption.activeBorder#baa122
inputValidation.errorBackground#020a12
inputValidation.errorBorder#020a12
inputValidation.infoBackground#020a12
inputValidation.infoBorder#020a12
inputValidation.warningBackground#020a12
inputValidation.warningBorder#020a12
list.activeSelectionBackground#2f78ee50
list.activeSelectionForeground#cacaca
list.dropBackground#020a12
list.focusBackground#002e7850
list.highlightForeground#cacaca
list.hoverBackground#002e7850
list.inactiveSelectionBackground#042343
list.inactiveSelectionForeground#cacaca
minimap.findMatchHighlight#aacbf1
minimap.selectionHighlight#cacaca
notificationCenterHeader.background#00126e
notificationCenterHeader.foreground#cacaca
notifications.background#020a12
notifications.foreground#aacbf1
panel.border#020a12
panelTitle.activeBorder#baa122
panelTitle.activeForeground#cacaca
peekView.border#020a12
peekViewEditor.background#020a12
peekViewEditor.matchHighlightBackground#020a12
peekViewEditorGutter.background#020a12
peekViewResult.background#020a12
peekViewTitle.background#020a12
pickerGroup.border#020a12
pickerGroup.foreground#020a12
progressBar.background#020a12
scrollbarSlider.activeBackground#00126e93
scrollbarSlider.background#07114350
scrollbarSlider.hoverBackground#00126e93
selection.background#083058
settings.checkboxBorder#020a12
settings.checkboxForeground#aacbf1
settings.dropdownForeground#aacbf1
settings.headerForeground#cacaca
settings.modifiedItemIndicator#baa122
settings.numberInputBackground#020a12
settings.textInputBackground#020a12
settings.textInputForeground#aacbf1
sideBar.background#020a12
sideBar.border#083058
sideBar.foreground#aacbf1
sideBarSectionHeader.background#020a12
sideBarSectionHeader.foreground#baa122
sideBarTitle.foreground#cacaca
statusBar.background#020a12
statusBar.foreground#cacaca
statusBar.noFolderBackground#020a12
statusBar.noFolderForeground#cacaca
tab.activeBackground#020a12
tab.activeBorder#baa122
tab.activeForeground#cacaca
tab.border#020a12
tab.inactiveBackground#020a12
tab.inactiveForeground#cacaca90
tab.unfocusedActiveBorder#baa122
tab.unfocusedActiveForeground#cacaca95
tab.unfocusedInactiveForeground#cacaca90
terminal.ansiBlack#519eeb
terminal.ansiBlue#268BD2
terminal.ansiBrightBlack#00126e
terminal.ansiBrightBlue#7dcbff
terminal.ansiBrightCyan#389c76
terminal.ansiBrightGreen#cacaca
terminal.ansiBrightMagenta#cfcf75
terminal.ansiBrightRed#ff5b1a
terminal.ansiBrightWhite#c4edc4
terminal.ansiBrightYellow#e1e2b3
terminal.ansiCyan#1b9891
terminal.ansiGreen#cfcf75
terminal.ansiMagenta#f06fa0
terminal.ansiRed#f87e4e
terminal.ansiWhite#aacbf1
terminal.ansiYellow#ffff99
terminal.foreground#aacbf1
terminal.selectionBackground#00126e
titleBar.activeBackground#020a12
tree.indentGuidesStroke#020a12
window.activeBorder#020a12

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, markup.quote.markdown	#667481	italic
variable.language, variable.language.this	#f87e4e	bold
markup.deleted, support.type.exception, token.error-token	#ff5b1a	—
entity.name.function, entity.name.tag, meta.function-call, entity.name.type, meta.embedded.block.html, variable.other.global, string.other.link.description.markdown, variable.other.property, keyword.other.unit, markup.list, string.other.link.title	#cacaca	—
storage.type, storage.type.class.jsdoc	#d0a97c	—
support	#389c76	—
meta.function.url, markup.underline.link, meta.link.reference, variable.parameter.url	#268BD2	—
constant.language, entity.name.section.markdown, storage.modifier	#cfcf75	—
constant.numeric, constant.character.numeric	#f06fa0	—
string.quoted, punctuation.definition.string, markup.fenced_code.block.markdown, string.interpolated, string.template, markup.inline.raw.string, constant.numeric.css, keyword.other.unit	#31ca71	—
constant.character.escape, constant.other.placeholder, constant.character.entity, keyword.operator.new, keyword.operator.ternary, keyword.operator.quantifier, keyword.operator.negation, keyword.operator.unpacking, keyword.operator.arithmetic, keyword.operator.increment, keyword.operator.decrement, keyword.operator.channel, keyword.operator.redirect, keyword.operator.expansion, keyword.operator.spread, keyword.operator.rest, keyword.operator.address, keyword.operator.ellipsis, punctuation.vararg-ellipses, meta.separator.markdown, markup.inserted.math.display.markdown	#afe26d	bold
keyword, storage.type, storage.type.function, entity.other, support.type.property-name, entity.name.tag.localname, entity.other.attribute-name.html, markup.raw.block.markdown	#D0A97C	—
punctuation, keyword.operator, meta.brace, meta.block, constant.character, markup.heading.setext, punctuation.definition.list, storage.type.function.arrow, constant.other.color	#f0af72	—
meta.embedded.block, meta.assertion, meta.group.assertion, meta.function-call.arguments, entity.other.attribute-name, string.unquoted.html, meta.object, constant.other, variable.other.constant, constant.other.character-class.regexp	#7dc0ff	—
variable.other, variable.other.property	#e1e2b3	—
variable.parameter, variable.language.arguments, storage.type.class, keyword.generator.asterisk, constant.other.character-class	#8fc062	bold
variable.language.arguments, variable.parameter	#8fc062	bold
keyword.operator.expression.in, keyword.operator.expression.of, meta.at-rule.font-face.css, punctuation.definition.keyword.css, keyword.control.at-rule.font-face.css, punctuation.definition.block.tag.jsdoc, markup.bold, entity.name.tag.wildcard.scss, punctuation.definition.entity.css	#be5f5c	bold
keyword.control.export, keyword.control.from, support.type.object.module	#b6e730	—
keyword.control.default, keyword.control.trycatch, keyword.control.switch, entity.other.attribute-name.pseudo-class.css	#c4c369	bold
variable.object.property, meta.definition.property	#72a6af	—
constant.language.infinity, constant.language.nan, keyword.control.loop.js	#659474	bold

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