Late Night

Name: Late Night
Author: Özgür Güneş

Publisher: Özgür GüneşThemes in package: 1

A dark theme for VS Code.

Open in VS Code GitHub

VS Code preview

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

Late Night — Late 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.background#333333
activityBar.dropBackground#ffffff1f
activityBar.foreground#ffffff
activityBar.inactiveForeground#ffffff99
activityBarBadge.background#F0B010
activityBarBadge.foreground#000000
badge.background#4d4d4d
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#e0e0e0
breadcrumb.background#1e1e1e
breadcrumb.focusForeground#e0e0e0
breadcrumb.foreground#cccccccc
breadcrumbPicker.background#252525
button.background#F0B01099
button.foreground#ffffff
button.hoverBackground#F0B010cc
checkbox.background#3c3c3c
checkbox.border#3c3c3c
checkbox.foreground#f0f0f0
debugExceptionWidget.background#6B171766
debugExceptionWidget.border#6B1717
debugToolBar.background#333333
descriptionForeground#ccccccb3
diffEditor.insertedTextBackground#30C03033
diffEditor.removedTextBackground#D8303033
dropdown.background#3c3c3c
dropdown.border#3c3c3c
dropdown.foreground#f0f0f0
editor.background#1e1e1e
editor.findMatchBackground#F0B01066
editor.findMatchHighlightBackground#434343
editor.findRangeHighlightBackground#3c3c3c66
editor.focusedStackFrameHighlightBackground#F5CB634d
editor.foreground#D5D5D5
editor.hoverHighlightBackground#F9E3AB33
editor.inactiveSelectionBackground#434343
editor.lineHighlightBackground#43434333
editor.lineHighlightBorder#ffffff00
editor.rangeHighlightBackground#ffffff0b
editor.selectionBackground#77570799
editor.selectionHighlightBackground#F9E3AB26
editor.snippetFinalTabstopHighlightBorder#525252
editor.snippetTabstopHighlightBackground#7c7c7c4d
editor.stackFrameHighlightBackground#F0B01033
editor.wordHighlightBackground#575757b8
editor.wordHighlightStrongBackground#775707b8
editorBracketMatch.background#775707
editorBracketMatch.border#f0b010
editorCodeLens.foreground#B1B1B1
editorCursor.foreground#aeaeae
editorError.foreground#E57878
editorGroup.border#444444
editorGroup.dropBackground#55555580
editorGroupHeader.noTabsBackground#1e1e1e
editorGroupHeader.tabsBackground#252525
editorGutter.addedBackground#175F17
editorGutter.background#1e1e1e
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#6B1717
editorGutter.modifiedBackground#775707
editorHint.foreground#eeeeeeb3
editorHoverWidget.background#252525
editorHoverWidget.border#454545
editorHoverWidget.statusBarBackground#2c2c2c
editorIndentGuide.activeBackground#434343
editorIndentGuide.background#43434366
editorInfo.foreground#F9E3AB
editorLineNumber.activeForeground#c6c6c6
editorLineNumber.foreground#858585
editorLink.activeForeground#F5CB63
editorMarkerNavigation.background#2d2d2d
editorMarkerNavigationError.background#E57878
editorMarkerNavigationInfo.background#5997E5
editorMarkerNavigationWarning.background#F5CB63
editorOverviewRuler.addedForeground#78D57899
editorOverviewRuler.border#7f7f7f4d
editorOverviewRuler.bracketMatchForeground#a0a0a0
editorOverviewRuler.commonContentForeground#60606066
editorOverviewRuler.currentContentForeground#78D5E599
editorOverviewRuler.deletedForeground#E5787899
editorOverviewRuler.errorForeground#E578D599
editorOverviewRuler.findMatchForeground#F0B01066
editorOverviewRuler.incomingContentForeground#78D578cc
editorOverviewRuler.infoForeground#5997E599
editorOverviewRuler.modifiedForeground#F5CB6399
editorOverviewRuler.rangeHighlightForeground#0060D899
editorOverviewRuler.selectionHighlightForeground#a0a0a0cc
editorOverviewRuler.warningForeground#F5CB63
editorOverviewRuler.wordHighlightForeground#a0a0a0cc
editorOverviewRuler.wordHighlightStrongForeground#F5CB63cc
editorPane.background#1e1e1e
editorRuler.foreground#5a5a5a
editorSuggestWidget.background#252525
editorSuggestWidget.border#454545
editorSuggestWidget.foreground#d4d4d4
editorSuggestWidget.highlightForeground#F0B010
editorSuggestWidget.selectedBackground#775707
editorUnnecessaryCode.opacity#000000aa
editorWarning.foreground#F5CB63
editorWhitespace.foreground#e3e3e329
editorWidget.background#252525
editorWidget.border#454545
editorWidget.foreground#cccccc
errorForeground#E57878
extensionBadge.remoteBackground#775707
extensionBadge.remoteForeground#ffffff
extensionButton.prominentBackground#175F17
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#30C030
focusBorder#775707cc
foreground#EDEDED
gitDecoration.addedResourceForeground#B6E9B6
gitDecoration.conflictingResourceForeground#E578D5
gitDecoration.deletedResourceForeground#F1B6B6
gitDecoration.ignoredResourceForeground#888888
gitDecoration.modifiedResourceForeground#F9E3AB
gitDecoration.submoduleResourceForeground#A6C7F1
gitDecoration.untrackedResourceForeground#F5CB63
imagePreview.border#80808059
input.background#3c3c3c
input.foreground#cccccc
input.placeholderForeground#a6a6a6
inputOption.activeBackground#5997E566
inputOption.activeBorder#0060D800
inputValidation.errorBackground#6B1717
inputValidation.errorBorder#E57878
inputValidation.infoBackground#002F6B
inputValidation.infoBorder#5997E5
inputValidation.warningBackground#775707
inputValidation.warningBorder#F5CB63
list.activeSelectionBackground#775707
list.activeSelectionForeground#ffffff
list.dropBackground#383b3d
list.errorForeground#E57878
list.focusBackground#775707
list.highlightForeground#F0B010
list.hoverBackground#2c2c2c
list.inactiveSelectionBackground#373737
list.invalidItemForeground#F5CB63
list.warningForeground#F9E3AB
listFilterWidget.background#6B1717
listFilterWidget.noMatchesOutline#D83030
listFilterWidget.outline#00000000
menu.background#252525
menu.foreground#cccccc
menu.selectionBackground#775707
menu.selectionForeground#ffffff
menu.separatorBackground#bbbbbb
menubar.selectionBackground#ffffff1a
menubar.selectionForeground#cccccc
merge.commonContentBackground#60606029
merge.commonHeaderBackground#60606066
merge.currentContentBackground#175F17
merge.currentHeaderBackground#78D57880
merge.incomingContentBackground#5997E533
merge.incomingHeaderBackground#5997E580
minimap.findMatchHighlight#F0B01099
notificationCenterHeader.background#303031
notificationLink.foreground#F0B010
notifications.background#252520
notifications.border#303030
notifications.foreground#cccccc
panel.background#1e1e1e
panel.border#80808059
panel.dropBackground#ffffff1f
panelTitle.activeBorder#775707
panelTitle.activeForeground#e7e7e7
panelTitle.inactiveForeground#e7e7e799
peekView.border#F5CB63
peekViewEditor.background#231A02
peekViewEditor.matchHighlightBackground#F0B010cc
peekViewEditorGutter.background#001f33
peekViewResult.background#252526
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#F0B01033
peekViewResult.selectionBackground#F5CB6333
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#1e1e1e
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#3f3f46
pickerGroup.foreground#F0B010cc
progressBar.background#F0B010cc
quickInput.background#252525
scrollbar.shadow#000000
scrollbarSlider.activeBackground#bfbfbf66
scrollbarSlider.background#79797966
scrollbarSlider.hoverBackground#646464b3
selection.background#F0B01066
settings.checkboxBackground#3c3c3c
settings.checkboxBorder#3c3c3c
settings.checkboxForeground#f0f0f0
settings.dropdownBackground#3c3c3c
settings.dropdownBorder#3c3c3c
settings.dropdownForeground#f0f0f0
settings.dropdownListBorder#454545
settings.headerForeground#e7e7e7
settings.modifiedItemIndicator#F0B01099
settings.numberInputBackground#292929
settings.numberInputForeground#cccccc
settings.textInputBackground#292929
settings.textInputForeground#cccccc
sideBar.background#252525
sideBar.dropBackground#ffffff1f
sideBarSectionHeader.background#80808033
sideBarTitle.foreground#bbbbbb
statusBar.background#141414
statusBar.debuggingBackground#775707
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#002F6B
statusBar.noFolderForeground#ffffff
statusBarItem.activeBackground#ffffff2e
statusBarItem.hoverBackground#ffffff1f
statusBarItem.prominentBackground#00000080
statusBarItem.prominentForeground#ffffff
statusBarItem.prominentHoverBackground#0000004d
statusBarItem.remoteBackground#175F17
statusBarItem.remoteForeground#ffffff
tab.activeBackground#1e1e1e
tab.activeForeground#ffffff
tab.activeModifiedBorder#F5CB63
tab.border#252526
tab.inactiveBackground#2d2d2d
tab.inactiveForeground#ffffff80
tab.inactiveModifiedBorder#F5CB6380
tab.unfocusedActiveBackground#1e1e1e
tab.unfocusedActiveForeground#ffffff80
tab.unfocusedActiveModifiedBorder#F5CB6380
tab.unfocusedInactiveForeground#ffffff40
tab.unfocusedInactiveModifiedBorder#F5CB6340
terminal.ansiBlack#141414
terminal.ansiBlue#5997E5
terminal.ansiBrightBlack#222222
terminal.ansiBrightBlue#A6C7F1
terminal.ansiBrightCyan#B6E9F1
terminal.ansiBrightGreen#B6E9B6
terminal.ansiBrightMagenta#F1B6E9
terminal.ansiBrightRed#F1B6B6
terminal.ansiBrightWhite#F8F8F8
terminal.ansiBrightYellow#F9E3AB
terminal.ansiCyan#78D5E5
terminal.ansiGreen#78D578
terminal.ansiMagenta#E578D5
terminal.ansiRed#E57878
terminal.ansiWhite#EDEDED
terminal.ansiYellow#F5CB63
terminal.background#1e1e1e
terminal.border#80808059
terminal.foreground#cccccc
terminal.selectionBackground#ffffff40
textBlockQuote.background#7f7f7f1a
textBlockQuote.border#007acc80
textCodeBlock.background#0a0a0a66
textLink.activeForeground#F0B010
textLink.foreground#F0B010cc
textPreformat.foreground#F9E3ABcc
textSeparator.foreground#ffffff2e
titleBar.activeBackground#3c3c3c
titleBar.activeForeground#cccccc
titleBar.inactiveBackground#3c3c3c99
titleBar.inactiveForeground#cccccc99
tree.indentGuidesStroke#585858
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant.language.import-export-all, keyword.operator.combinator.css, meta.brace, meta.definition.variable, meta.function-call.arguments, meta.function.parameters keyword.operator.unpacking, meta.object-literal.key, punctuation, source.css keyword.other.unit, variable	#EDEDED	—
	#D5D5D5	—
meta.tag.sgml.doctype, comment punctuation.definition, punctuation.definition.tag	#B1B1B1	—
comment, comment storage, comment variable, meta.tag.metadata.doctype, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string	#888888	—
keyword.key.toml, keyword.other.definition.ini, meta.parameter, meta.tag.attributes.js.jsx, punctuation.separator.key-value, source.css support.type.vendored, support.type.property-name.json, text.html entity.other.attribute-name, variable.parameter	#F9E3AB	—
keyword.control, keyword.operator, meta.class.inheritance, meta.directive entity.other.attribute-name, meta.image string, meta.link string, source.css punctuation.terminator, source.css support.type.property-name, constant.character.format.placeholder, support.other.match, text.html string.unquoted	#F5CB63	—
entity.name.function.decorator, entity.name.tag, markup.fenced_code.block, markup.inline.raw, markup.raw.block, markup punctuation, punctuation.definition.decorator, punctuation.separator.key-value.ini, source.css punctuation.definition.constant, storage, string.regexp, source.css constant.other, source.css meta.attribute-selector, source.css punctuation.definition.entity.css, source.css punctuation.definition.keyword, source.css punctuation.definition.variable, source.css variable	#F1B6B6	—
constant, markup.heading.setext, meta.class, meta.definition entity.name.function, meta.definition.method, meta.function, meta.object-literal.key entity.name.function, punctuation.definition.generic, text.html entity.tag.tagbraces, source.css entity.name.tag, source.css entity.other.attribute-name.class, source.css entity.other.attribute-name.pseudo-element, source.css keyword.other.important, source.css meta.selector, source.ini entity.name.section, source.toml entity.other.attribute-name.table	#E57878	—
punctuation.definition.string, meta.image markup, source.css variable.parameter	#B6E9B6	—
string.quoted.double, string.quoted.single	#78D578	—
meta.link	#A6C7F1	—
	#5997E5	—
keyword.control.default, source.css keyword.control.at-rule punctuation.definition.keyword, support.variable	#F1B6E9	—
source.css keyword.control, support.function	#E578D5	—
variable.language.special, variable.language.this	#B6E9F1	—
meta.function-call, source.css support.function, support.class	#78D5E5	—
invalid, markup.bold, source.css keyword.other.important	—	bold
comment, invalid, markup.italic, string.quoted.docstring	—	italic
invalid	—	underline

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