Never be lost (night and day theme)

Name: Never be lost (night and day theme)
Author: Fred Vatin

Publisher: Fred VatinThemes in package: 2

Never be lost in the interface of VS Code. Always know where is the focus and distinguish each element thanks to elegants themes.

GitHub

Color themes

VS Code preview

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

Never be lost (night and day theme) — Never be lost (Night)

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#000
activityBar.activeBorder#9371ea
activityBar.activeFocusBorder#ff66eb
activityBar.background#000
activityBar.border#000
activityBar.dropBorder#ff66eb
activityBar.foreground#9371ea
activityBar.inactiveForeground#ffffff7d
activityBarBadge.background#6240ba
activityBarBadge.foreground#fff
badge.background#6240ba
badge.foreground#fff
breadcrumb.activeSelectionForeground#ff66eb
breadcrumb.background#000
breadcrumb.focusForeground#e7e7e7
breadcrumb.foreground#ffffff7d
breadcrumbPicker.background#000
button.background#6240ba73
button.border#000
button.foreground#e7e7e7
button.hoverBackground#6240ba
button.separator#00000078
checkbox.background#3a3a40
checkbox.border#000
checkbox.foreground#e7e7e7
commandCenter.activeBackground#6240ba
commandCenter.activeForeground#e7e7e7
commandCenter.border#6240ba80
commandCenter.foreground#ffffff7d
debugExceptionWidget.background#000
debugExceptionWidget.border#cc6633
debugToolBar.background#1a161b
debugToolBar.border#cc6633
descriptionForeground#b399f5
dropdown.background#3a3a40
dropdown.border#000
dropdown.foreground#e7e7e7
dropdown.listBackground#1d2125
editor.background#131415
editor.findMatchBackground#ffffff00
editor.findMatchBorder#3ff90c
editor.findMatchHighlightBackground#3ff90c38
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#45709043
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#6240ba80
editor.foreground#e7e7e7
editor.hoverHighlightBackground#6240ba80
editor.inactiveSelectionBackground#ffffff38
editor.lineHighlightBackground#ffffff14
editor.lineHighlightBorder#ffffff14
editor.linkedEditingBackground#0078c871
editor.rangeHighlightBackground#3ff90c15
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#ff66eb66
editor.selectionForeground#e7e7e7
editor.selectionHighlightBackground#ffffff00
editor.selectionHighlightBorder#ff66eb
editor.snippetFinalTabstopHighlightBackground#000
editor.snippetFinalTabstopHighlightBorder#19bdf9
editor.snippetTabstopHighlightBackground#000
editor.snippetTabstopHighlightBorder#6240ba
editor.symbolHighlightBackground#ffffff00
editor.symbolHighlightBorder#3ff90c
editor.wordHighlightBackground#ffffff00
editor.wordHighlightBorder#6240ba80
editor.wordHighlightStrongBackground#ffffff00
editor.wordHighlightStrongBorder#ffffff00
editorBracketHighlight.foreground1#dbdb46
editorBracketHighlight.foreground2#c422ff
editorBracketHighlight.foreground3#ff9b49
editorBracketHighlight.foreground4#60b5ff
editorBracketHighlight.foreground5#7dce4a
editorBracketHighlight.foreground6#ce4a4a
editorBracketHighlight.unexpectedBracket.foreground#e7e7e7
editorBracketMatch.background#000
editorBracketMatch.border#e7e7e7
editorCodeLens.foreground#7b9cb9
editorCursor.background#000
editorCursor.foreground#ff66eb
editorError.background#ffffff00
editorError.border#ffffff00
editorError.foreground#ff3d61
editorGroup.border#ffffff38
editorGroup.dropBackground#6240ba3d
editorGroup.dropIntoPromptBackground#00000078
editorGroup.dropIntoPromptBorder#000
editorGroup.dropIntoPromptForeground#ffffff7d
editorGroup.emptyBackground#1d2125
editorGroup.focusedEmptyBorder#6240ba
editorGroupHeader.border#000
editorGroupHeader.noTabsBackground#1d2125
editorGroupHeader.tabsBackground#000
editorGroupHeader.tabsBorder#6240ba
editorGutter.addedBackground#587c0c
editorGutter.background#000
editorGutter.commentRangeForeground#eeaaff68
editorGutter.deletedBackground#94151b
editorGutter.foldingControlForeground#9371ea
editorGutter.modifiedBackground#0c7d9d
editorIndentGuide.activeBackground1#ffffff4d
editorIndentGuide.background1#ffffff38
editorInfo.background#ffffff00
editorInfo.border#ffffff00
editorInfo.foreground#5cb1fb
editorInlayHint.background#3a3a40
editorInlayHint.foreground#ffffff7d
editorInlayHint.parameterForeground#b4c17b
editorInlayHint.typeForeground#7b9cb9
editorLineNumber.activeForeground#b399f5
editorLineNumber.foreground#ffffff4d
editorLink.activeForeground#3caeff
editorMarkerNavigation.background#000
editorMarkerNavigationError.background#ff3953
editorMarkerNavigationInfo.background#5fb4ff
editorMarkerNavigationWarning.background#ffd000
editorOverviewRuler.background#000
editorOverviewRuler.border#000
editorOverviewRuler.findMatchForeground#3ff90c
editorOverviewRuler.wordHighlightForeground#3ff90c
editorRuler.foreground#ffffff14
editorUnicodeHighlight.background#ffffff00
editorUnicodeHighlight.border#ffae0055
editorUnnecessaryCode.opacity#00000078
editorWarning.background#ffffff00
editorWarning.border#ffffff00
editorWarning.foreground#e7da24
editorWhitespace.foreground#ffffff38
editorWidget.background#000
editorWidget.border#ffffff4d
editorWidget.foreground#ffffff7d
editorWidget.resizeBorder#6240ba
extensionButton.background#6240ba
extensionButton.foreground#e7e7e7
extensionButton.hoverBackground#6240ba80
extensionButton.prominentBackground#6240ba
extensionButton.prominentForeground#e7e7e7
extensionButton.prominentHoverBackground#6240ba80
extensionIcon.sponsorForeground#ff66eb
extensionIcon.starForeground#9371ea
extensionIcon.verifiedForeground#ff66eb
focusBorder#6240ba
foreground#e7e7e7
icon.foreground#9371ea
input.background#3a3a40
input.border#1d2125
input.foreground#e7e7e7
input.placeholderForeground#8a80a3
inputOption.activeBackground#6240ba
inputOption.activeBorder#000
inputOption.activeForeground#fff
inputOption.hoverBackground#6240ba73
keybindingLabel.background#6240ba80
keybindingLabel.border#6240ba
keybindingLabel.bottomBorder#6240ba
keybindingLabel.foreground#e7e7e7
keybindingTable.headerBackground#000
keybindingTable.rowsBackground#000
list.activeSelectionBackground#6240ba73
list.activeSelectionForeground#fff
list.activeSelectionIconForeground#b399f5
list.dropBackground#ffffff38
list.filterMatchBackground#6240ba
list.focusAndSelectionOutline#6240ba
list.focusBackground#ffffff00
list.focusForeground#fff
list.focusOutline#6240ba
list.highlightForeground#ff66eb
list.hoverBackground#99a3d126
list.hoverForeground#fff
list.inactiveFocusBackground#ffffff00
list.inactiveFocusOutline#99a3d126
list.inactiveSelectionBackground#99a3d126
list.inactiveSelectionForeground#e7e7e7
listFilterWidget.background#1d2125
listFilterWidget.noMatchesOutline#fb1100
listFilterWidget.outline#0ee607
menu.background#1d2125
menu.border#6240ba73
menu.foreground#e7e7e7
menu.selectionBackground#6240ba73
menu.selectionBorder#3a3a40
menu.selectionForeground#fff
menu.separatorBackground#ffffff14
menubar.selectionBackground#6240ba
menubar.selectionBorder#ffffff00
menubar.selectionForeground#e7e7e7
merge.commonContentBackground#282828
merge.commonHeaderBackground#383838
merge.currentContentBackground#27403B
merge.currentHeaderBackground#367366
merge.incomingContentBackground#28384B
merge.incomingHeaderBackground#395F8F
minimap.background#000
minimap.errorHighlight#ff3953
minimap.findMatchHighlight#3ff90c
minimap.foregroundOpacity#000
minimap.selectionHighlight#ff66eb66
minimap.selectionOccurrenceHighlight#3ff90c
minimap.warningHighlight#ffd000
minimapGutter.addedBackground#729f12
minimapGutter.deletedBackground#ae1b22
minimapGutter.modifiedBackground#0c7d9d
minimapSlider.activeBackground#6240ba73
minimapSlider.background#ffffff26
minimapSlider.hoverBackground#ffffff38
notificationCenter.border#474747
notificationCenterHeader.background#303031
notificationCenterHeader.foreground#e7e7e7
notificationLink.foreground#b399f5
notifications.background#16181b
notifications.border#303031
notifications.foreground#e7e7e7
notificationsErrorIcon.foreground#f48771
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#cca700
notificationToast.border#ffffff22
panel.background#000
panel.border#ffffff38
panel.dropBorder#ff66eb
panelTitle.activeBorder#9371ea
panelTitle.activeForeground#9371ea
panelTitle.inactiveForeground#e7e7e7
peekView.border#6240ba
peekViewEditor.background#000
peekViewEditor.matchHighlightBackground#ffffff00
peekViewEditor.matchHighlightBorder#3ff90c
peekViewEditorGutter.background#1d2125
peekViewResult.background#1d2125
peekViewResult.fileForeground#e7e7e7
peekViewResult.matchHighlightBackground#3ff90c2e
peekViewResult.selectionBackground#6240ba73
peekViewTitle.background#1d2125
peekViewTitleLabel.foreground#b399f5
pickerGroup.border#ffffff38
pickerGroup.foreground#9371ea
progressBar.background#6240ba
quickInput.background#000
quickInput.foreground#ffffff7d
quickInputList.focusBackground#6240ba80
quickInputList.focusForeground#e7e7e7
quickInputList.focusIconForeground#9371ea
sash.hoverBorder#8a80a3
scrollbar.shadow#000
scrollbarSlider.activeBackground#6240ba73
scrollbarSlider.background#ffffff26
scrollbarSlider.hoverBackground#ffffff38
searchEditor.findMatchBackground#ff0051
searchEditor.findMatchBorder#3ff90c
selection.background#6240ba
settings.checkboxBackground#3a3a40
settings.checkboxBorder#1d2125
settings.checkboxForeground#e7e7e7
settings.dropdownBackground#3a3a40
settings.dropdownBorder#1d2125
settings.dropdownForeground#e7e7e7
settings.focusedRowBackground#000
settings.headerBorder#ff000000
settings.headerForeground#e7e7e7
settings.modifiedItemIndicator#6240ba73
settings.numberInputBackground#3a3a40
settings.numberInputBorder#1d2125
settings.numberInputForeground#e7e7e7
settings.rowHoverBackground#882dd715
settings.sashBorder#3a3a40
sideBar.background#131415
sideBar.border#000
sideBar.dropBackground#6240ba3d
sideBar.foreground#e7e7e7
sideBarSectionHeader.background#000
sideBarSectionHeader.border#000
sideBarSectionHeader.foreground#9371ea
sideBarTitle.foreground#fff
sideBySideEditor.horizontalBorder#ffffff38
sideBySideEditor.verticalBorder#ffffff38
statusBar.background#000
statusBar.border#ffffff38
statusBar.debuggingBackground#cc6633
statusBar.debuggingBorder#000
statusBar.debuggingForeground#fff
statusBar.foreground#e7e7e7
statusBar.noFolderBackground#6240ba3d
statusBar.noFolderBorder#ffffff38
statusBar.noFolderForeground#e7e7e7
statusBarItem.hoverBackground#6240ba
statusBarItem.prominentBackground#6240ba80
statusBarItem.remoteBackground#6240ba
statusBarItem.remoteForeground#fff
symbolIcon.snippetForeground#ff66eb
tab.activeBackground#6240ba80
tab.activeBorder#ffffff00
tab.activeBorderTop#ffffff00
tab.activeForeground#e7e7e7
tab.border#000
tab.hoverBackground#6240ba73
tab.hoverBorder#b399f5
tab.hoverForeground#e7e7e7
tab.inactiveBackground#131415
tab.inactiveForeground#e7e7e7
tab.lastPinnedBorder#6240ba
tab.unfocusedActiveBackground#1d2125
tab.unfocusedActiveBorder#b399f5
tab.unfocusedActiveBorderTop#b399f5
tab.unfocusedActiveForeground#e7e7e7
tab.unfocusedHoverBackground#6240ba73
tab.unfocusedHoverBorder#b399f5
tab.unfocusedHoverForeground#e7e7e7
tab.unfocusedInactiveBackground#000
tab.unfocusedInactiveForeground#ffffff7d
terminal.ansiBlack#0C0C0C
terminal.ansiBlue#2854d7
terminal.ansiBrightBlack#767676
terminal.ansiBrightBlue#4c97ff
terminal.ansiBrightCyan#42ffff
terminal.ansiBrightGreen#44b13e
terminal.ansiBrightMagenta#e157d1
terminal.ansiBrightRed#ff001e
terminal.ansiBrightWhite#e8e8e8
terminal.ansiBrightYellow#cbce36
terminal.ansiCyan#519baa
terminal.ansiGreen#438341
terminal.ansiMagenta#7f3e3e
terminal.ansiRed#8ca421
terminal.ansiWhite#CCCCCC
terminal.ansiYellow#ae9019
terminal.background#000
terminal.dropBackground#ffffff38
terminal.findMatchBackground#4ec92c
terminal.findMatchBorder#000
terminal.findMatchHighlightBackground#3ff90c49
terminal.findMatchHighlightBorder#000
terminal.foreground#e7e7e7
terminal.selectionBackground#6240ba80
terminal.tab.activeBorder#ff66eb
terminalCommandDecoration.defaultBackground#ff66eb
terminalCommandDecoration.successBackground#44b13e
terminalCursor.background#e7e7e7
terminalCursor.foreground#ff66eb
terminalOverviewRuler.cursorForeground#fff
terminalOverviewRuler.findMatchForeground#44b13e
textLink.activeForeground#b399f5
textLink.foreground#9371ea
titleBar.activeBackground#000
titleBar.activeForeground#e7e7e7
titleBar.border#000
titleBar.inactiveBackground#1d2125
titleBar.inactiveForeground#cccccc99
toolbar.activeBackground#6240ba
toolbar.hoverBackground#6240ba73
tree.indentGuidesStroke#6240ba
widget.shadow#c543e500
window.activeBorder#6240ba
window.inactiveBorder#b399f5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#ffffff	—
comment, punctuation.definition.comment, string.quoted.docstring	#767371DF	italic
variable, string constant.other.placeholder	#EEFFFF	—
constant.other.php	#FFCB6B	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#FF5370	—
invalid.deprecated	#C792EA	—
keyword, storage.type, storage.modifier	#C792EA	bold
Keyword, Storage	—	italic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#ff62c8	—
keyword.control	—	bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#f07178	—
entity.name.function, variable.function, support.function, keyword.other.special-method	#82AAFF	—
source.cpp meta.block variable.other	#f07178	—
variable.other.constant	#f07178	—
support.other.variable, string.other.link	#f07178	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#F78C6C	—
variable.parameter.function.language.special, variable.parameter	#FF5370	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#C3E88D	—
string.template.js	#7cce50	italic
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FFCB6B	—
support.type, type.keyword.pine	#8facda	italic bold
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#7db9d1	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
variable.language	#FF5370	italic
entity.name.method.js	#82AAFF	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#82AAFF	—
entity.other.attribute-name	#C792EA	italic
entity.other.attribute-name.class	#FFCB6B	—
entity.other.attribute-name.pseudo-class	#ff3fc6	italic bold
source.sass keyword.control	#82AAFF	—
keyword.other.unit	#5FC272	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta.structure.dictionary.json support.type.property-name.json, source.js meta.objectliteral.js meta.object.member.js meta.object-literal.key.js	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.js meta.objectliteral.js meta.object.member.js meta.objectliteral.js meta.object.member.js meta.object-literal.key.js	#FFCB6B	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.js meta.objectliteral.js meta.object.member.js meta.objectliteral.js meta.object.member.js meta.objectliteral.js meta.object.member.js meta.object-literal.key.js	#F78C6C	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FF5370	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C17E70	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#82AAFF	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f07178	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C3E88D	—
text.html.markdown, punctuation.definition.list_item.markdown	#EEFFFF	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
text.html.markdown meta.dummy.line-break	#e7e7e7	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C3E88D	—
markup.italic	#f07178	italic
markup.bold, markup.bold string	#f07178	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#f07178	bold
markup.underline	#F78C6C	underline
markup.strike	—	strikethrough
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	italic
string.other.link.title.markdown	#82AAFF	—
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#C792EA	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#EEFFFF90	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#EEFFFF	—

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