Twilight Pro

Name: Twilight Pro
Author: _ipal

Publisher: _ipalThemes in package: 1

Extended Twilight theme.

Open in VS Code GitHub

VS Code preview

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

Twilight Pro — Twilight Pro

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.activeBorder#756956
activityBar.background#222222
activityBar.dropBackground#555144
activityBar.foreground#bbbbbb
activityBar.inactiveForeground#bbbbbb80
activityBarBadge.background#756956
activityBarBadge.foreground#f8f8f8e0
badge.background#756956
badge.foreground#f8f8f8e0
breadcrumb.activeSelectionForeground#f8f8f8e0
breadcrumb.background#141414
breadcrumb.focusForeground#f8f8f8e0
breadcrumb.foreground#f8f8f8e0
breadcrumbPicker.background#141414
button.background#756956
button.foreground#f8f8f8e0
button.hoverBackground#807461cc
checkbox.background#302c27
checkbox.border#3c3c3c
checkbox.foreground#f8f8f8e0
diffEditor.insertedTextBackground#bfc47524
diffEditor.removedTextBackground#b3391b24
dropdown.background#202020
dropdown.border#202020
dropdown.foreground#f8f8f8e0
editor.background#141414
editor.findMatchBackground#94875e40
editor.findMatchHighlightBackground#5f573caa
editor.findRangeHighlightBackground#5f573caa
editor.focusedStackFrameHighlightBackground#7abd7a4d
editor.foldBackground#948f850f
editor.foreground#f8f8f8e0
editor.hoverHighlightBackground#a59d8560
editor.inactiveSelectionBackground#83817e30
editor.lineHighlightBackground#ffffff0e
editor.lineHighlightBorder#202020
editor.selectionBackground#83817e2a
editor.selectionHighlightBackground#83817e1a
editor.snippetFinalTabstopHighlightBorder#d1a25baa
editor.snippetTabstopHighlightBackground#83817eaa
editorBracketMatch.background#91877835
editorBracketMatch.border#91877840
editorCursor.foreground#f8f8f8e0
editorGroup.border#202020
editorGroup.dropBackground#83817e1a
editorGroupHeader.noTabsBackground#141414
editorGroupHeader.tabsBackground#101010
editorGroupHeader.tabsBorder#101010
editorGutter.addedBackground#b9d651c0
editorGutter.background#111111
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#b6411e
editorGutter.modifiedBackground#e4b979a0
editorLineNumber.activeForeground#ffffffda
editorLineNumber.foreground#ffffff42
editorLink.activeForeground#e9a042
editorOverviewRuler.addedForeground#b9d651c0
editorOverviewRuler.border#141414
editorOverviewRuler.bracketMatchForeground#91877835
editorOverviewRuler.deletedForeground#b6411e
editorOverviewRuler.findMatchForeground#d6b752fa
editorOverviewRuler.modifiedForeground#e4b979
editorOverviewRuler.selectionHighlightForeground#83817e2a
editorSuggestWidget.background#141414
editorSuggestWidget.border#36342f
editorSuggestWidget.foreground#f8f8f8e0
editorSuggestWidget.highlightForeground#af8d59
editorSuggestWidget.selectedBackground#83817e2a
editorWhitespace.foreground#4b4a49
editorWidget.background#141414
editorWidget.border#36342f
editorWidget.foreground#f8f8f8e0
extensionBadge.remoteBackground#756956
extensionBadge.remoteForeground#f8f8f8e0
extensionButton.prominentBackground#327e36
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#28632b
focusBorder#e4b979
foreground#f8f8f8e0
gitDecoration.addedResourceForeground#b9d651c0
gitDecoration.conflictingResourceForeground#6c6cc4
gitDecoration.deletedResourceForeground#b6411e
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#e4b979
gitDecoration.submoduleResourceForeground#8db9e2
gitDecoration.untrackedResourceForeground#73c991
icon.foreground#c5c5c5
imagePreview.border#80808059
input.background#1f1f1f
input.border#1f1f1f
input.foreground#f8f8f8e0
input.placeholderForeground#cccccc80
inputOption.activeBackground#695d4e66
inputOption.activeBorder#695d4e5b
inputValidation.errorBackground#2c1313
inputValidation.errorBorder#b6411e
inputValidation.infoBackground#815a2e
inputValidation.infoBorder#e4b979
list.activeSelectionBackground#36322c
list.activeSelectionForeground#f8f8f8f0
list.dropBackground#36322c
list.errorForeground#b6411e
list.filterMatchBackground#5f4a30
list.focusBackground#36322c
list.highlightForeground#e4b979
list.hoverBackground#36322c
list.inactiveSelectionBackground#36322ca0
list.invalidItemForeground#b89500
list.warningForeground#cca700
listFilterWidget.background#493f30
listFilterWidget.noMatchesOutline#b6411e
listFilterWidget.outline#242424
minimap.errorHighlight#b6411e
minimap.findMatchHighlight#b69f56fa
minimap.selectionHighlight#83817e2a
minimap.warningHighlight#cca700
minimapGutter.addedBackground#b9d651c0
minimapGutter.deletedBackground#b6411e
minimapGutter.modifiedBackground#e4b979
notificationCenterHeader.background#303031
notificationLink.foreground#e9a042
notifications.background#36322c
notifications.border#202020
notifications.foreground#f8f8f8e0
notificationsErrorIcon.foreground#f48771
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#cca700
panel.background#141414
panel.border#202020
panel.dropBackground#ffffff1f
panelTitle.activeBorder#f8f8f8a0
panelTitle.activeForeground#f8f8f8e0
panelTitle.inactiveForeground#f8f8f899
peekView.border#b69f56fa
peekViewEditor.background#1d180f
peekViewEditor.matchHighlightBackground#ff8f0099
peekViewEditorGutter.background#130f09
peekViewResult.background#252526
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#1d180f
peekViewResult.selectionForeground#f8f8f8e0
peekViewTitle.background#141414
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#f8f8f8e0
pickerGroup.border#1d180f
pickerGroup.foreground#e9a042
progressBar.background#e9a042
quickInput.background#141414
scrollbar.shadow#141414
scrollbarSlider.activeBackground#83817e6a
scrollbarSlider.background#83817e2a
scrollbarSlider.hoverBackground#83817e4a
settings.checkboxBackground#141414
settings.checkboxBorder#141414
settings.checkboxForeground#f8f8f8e0
settings.dropdownBackground#202020
settings.dropdownBorder#202020
settings.dropdownForeground#f8f8f8e0
settings.dropdownListBorder#202020
settings.headerForeground#f8f8f8e0
settings.modifiedItemIndicator#e9a042
settings.numberInputBackground#202020
settings.numberInputForeground#f8f8f8e0
settings.textInputBackground#202020
settings.textInputForeground#f8f8f8e0
sideBar.background#141414
sideBar.border#202020
sideBar.dropBackground#ffffff1f
sideBar.foreground#f8f8f8e0
sideBarSectionHeader.background#202020
sideBarSectionHeader.border#141414
sideBarSectionHeader.foreground#f8f8f8e0
sideBarTitle.foreground#f8f8f8e0
statusBar.background#141414
statusBar.border#141414
statusBar.debuggingBackground#e9a042
statusBar.debuggingForeground#141414
statusBar.foreground#f8f8f8e0
statusBarItem.activeBackground#e9a042
statusBarItem.hoverBackground#424242
statusBarItem.remoteBackground#e9a042
statusBarItem.remoteForeground#141414
tab.activeBackground#202020
tab.activeForeground#f8f8f8e0
tab.activeModifiedBorder#e9a042
tab.border#141414
tab.inactiveBackground#141414
tab.inactiveForeground#ffffff80
tab.inactiveModifiedBorder#e9a04280
tab.unfocusedActiveBackground#141414
tab.unfocusedActiveForeground#f8f8f8e0
tab.unfocusedActiveModifiedBorder#e9a04280
tab.unfocusedInactiveForeground#f8f8f8e0
tab.unfocusedInactiveModifiedBorder#e9a04280
terminal.ansiBlack#000000
terminal.ansiBlue#0000AA
terminal.ansiBrightBlack#555555
terminal.ansiBrightBlue#5555FF
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#55FF55
terminal.ansiBrightMagenta#FF55FF
terminal.ansiBrightRed#FF5555
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFFF55
terminal.ansiCyan#00AAAA
terminal.ansiGreen#00AA00
terminal.ansiMagenta#AA00AA
terminal.ansiRed#AA0000
terminal.ansiWhite#AAAAAA
terminal.ansiYellow#AAAA00
terminal.background#141414
terminal.border#424242
terminal.foreground#f8f8f8e0
terminal.selectionBackground#83817e2a
textLink.activeForeground#eeae5b
textLink.foreground#e9a042
titleBar.activeBackground#202020
titleBar.activeForeground#f8f8f8e0
titleBar.inactiveBackground#141414
titleBar.inactiveForeground#f8f8f8e0
tree.indentGuidesStroke#816641
widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#5F5A60	italic
constant	#CF6A4C	—
entity	#9B703F
keyword	#CDA869
storage	#F9EE98
string	#8F9D6A
support	#9B859D
variable	#7587A6	—
invalid.deprecated	#D2A8A1	italic underline
invalid.illegal	#F8F8F8	—
text source	—	—
text.html.ruby source	—	—
entity.other.inherited-class	#9B5C2E	italic
string source	#DAEFA3
string constant	#DDF2A4	—
string.regexp	#E9C062
string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#CF7D34	—
string variable	#8A9A95	—
support.function	#DAD085
support.constant	#CF6A4C
meta.preprocessor.c	#8996A8	—
meta.preprocessor.c keyword	#AFC4DB	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype entity, meta.tag.sgml.doctype string, meta.tag.preprocessor.xml, meta.tag.preprocessor.xml entity, meta.tag.preprocessor.xml string	#494949	—
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity	#AC885B	—
declaration.tag.inline, declaration.tag.inline entity, source entity.name.tag, source entity.other.attribute-name, meta.tag.inline, meta.tag.inline entity	#E0C589	—
meta.selector.css entity.name.tag	#CDA869	—
entity.name.function, support.function.any-method	#AC885B	bold
meta.selector.css entity.other.attribute-name.tag.pseudo-class	#8F9D6A	—
meta.selector.css entity.other.attribute-name.id	#8B98AB	—
meta.selector.css entity.other.attribute-name.class	#9B703F	—
support.type.property-name.css	#C5AF75	—
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css	#F9EE98	—
meta.preprocessor.at-rule keyword.control.at-rule	#8693A5	—
meta.property-value support.constant.named-color.css, meta.property-value constant	#CA7840	—
meta.constructor.argument.css	#8F9D6A	—
meta.diff, meta.diff.header, meta.separator	#F8F8F8	italic
markup.deleted	#F8F8F8	—
markup.changed	#F8F8F8	—
markup.inserted	#F8F8F8	—
markup.list	#F9EE98	—
markup.heading	#CF6A4C	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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