Night Shift Theme

Name: Night Shift Theme
Author: jean_tinland

Publisher: jean_tinlandThemes in package: 1

A clean desaturated vscode dark theme.

Open in VS Code GitHub

VS Code preview

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

Night Shift Theme — Night Shift

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#ffd484
activityBar.activeFocusBorder#1b222d
activityBar.background#1b222d
activityBar.border#39465e
activityBar.foreground#ffd484
activityBar.inactiveForeground#d5d8dab3
activityBarBadge.background#ffd484
activityBarBadge.foreground#1b222d
badge.background#1e2737
badge.foreground#fff9ee
breadcrumbPicker.background#232530
button.background#ffd484
button.foreground#1e2737
button.hoverBackground#ffd484e0
contrastBorder#1e2737
debugToolBar.background#1b222d
diffEditor.insertedTextBackground#09f7a01a
diffEditor.removedTextBackground#e784821a
dropdown.background#1e2737
dropdown.border#1e2737
dropdown.foreground#fff9eede
dropdown.listBackground#1b222d
editor.background#1b222d
editor.findMatchBackground#6c6f9380
editor.findMatchHighlightBackground#6c6f934d
editor.findRangeHighlightBackground#6c6f931a
editor.hoverHighlightBackground#6c6f934d
editor.lineHighlightBackground#ffd48405
editor.lineHighlightBorder#ffd48405
editor.rangeHighlightBackground#1e273780
editor.selectionBackground#98a8c545
editor.selectionHighlightBackground#98a8c510
editor.selectionHighlightBorder#ffd48440
editor.wordHighlightBackground#ffd48410
editor.wordHighlightStrongBackground#ffd48420
editorBracketMatch.background#6c6f9320
editorBracketMatch.border#ffd48420
editorCodeLens.foreground#fff9eede
editorCursor.background#1b222d
editorCursor.foreground#ffd484
editorError.foreground#e78482
editorGroup.border#39465e
editorGroup.dropBackground#6c6f934d
editorGroupHeader.border#39465e
editorGroupHeader.tabsBackground#1b222d
editorGroupHeader.tabsBorder#39465e
editorGutter.addedBackground#09f7a0b3
editorGutter.deletedBackground#e78482b3
editorGutter.modifiedBackground#21bfc2b3
editorIndentGuide.activeBackground1#39465e
editorIndentGuide.background1#39465e80
editorLineNumber.activeForeground#ffd484
editorLineNumber.foreground#fff9ee77
editorOverviewRuler.addedForeground#09f7a080
editorOverviewRuler.border#1e2737b3
editorOverviewRuler.bracketMatchForeground#ffd484
editorOverviewRuler.deletedForeground#e78482
editorOverviewRuler.errorForeground#e78482
editorOverviewRuler.findMatchForeground#6c6f93ec
editorOverviewRuler.modifiedForeground#21bfc280
editorOverviewRuler.warningForeground#ffd484
editorRuler.foreground#39465e
editorSuggestWidget.background#1e2737
editorSuggestWidget.foreground#fff9ee
editorSuggestWidget.highlightForeground#ffd484
editorSuggestWidget.selectedBackground#39465e
editorWarning.foreground#ffd484
editorWidget.background#141b27
editorWidget.border#39465e
errorForeground#e78482
extensionButton.prominentBackground#e78482
extensionButton.prominentHoverBackground#e78482
focusBorder#ffd484
foreground#fff9eede
gitDecoration.addedResourceForeground#8fc8bb
gitDecoration.deletedResourceForeground#e78482
gitDecoration.ignoredResourceForeground#d5d8da5f
gitDecoration.modifiedResourceForeground#ffd484
gitDecoration.untrackedResourceForeground#ad82cb
input.background#1e2737
inputOption.activeBorder#ffd484
inputValidation.errorBackground#e78482
inputValidation.errorBorder#e7848200
list.activeSelectionBackground#39465e
list.activeSelectionForeground#fff9ee
list.activeSelectionIconForeground#fff9ee
list.deemphasizedForeground#fff9ee8e
list.dropBackground#6c6f9380
list.errorForeground#e78482
list.focusBackground#1e2737
list.focusForeground#fff9ee
list.focusHighlightForeground#fff9ee
list.highlightForeground#fff9ee
list.hoverBackground#1e2737
list.hoverForeground#fff9ee
list.inactiveFocusBackground#39465e
list.inactiveSelectionBackground#39465e
list.inactiveSelectionForeground#fff9ee
list.invalidItemForeground#fff9eede
list.warningForeground#fff9eede
minimap.background#1e2737a4
panel.border#39465e
panelTitle.activeBorder#ffd484
peekView.border#39465e
peekViewEditor.background#1e2737
peekViewEditor.matchHighlightBackground#6c6f9380
peekViewResult.background#1e2737
peekViewResult.matchHighlightBackground#6c6f9380
peekViewResult.selectionBackground#1e273780
peekViewTitle.background#1e2737
pickerGroup.foreground#e78482e6
progressBar.background#ffd484
scrollbar.shadow#16161c
scrollbarSlider.activeBackground#6c6f9360
scrollbarSlider.background#6c6f9330
scrollbarSlider.hoverBackground#6c6f9345
selection.background#ecdfdf65
sideBar.background#1b222d
sideBar.border#39465e
sideBar.dropBackground#6c6f934d
sideBar.foreground#fff9eec9
sideBarSectionHeader.background#1b222d
sideBarSectionHeader.border#39465e
sideBarSectionHeader.foreground#fff9eede
statusBar.background#1b222d
statusBar.border#39465e
statusBar.debuggingBackground#fab38e
statusBar.debuggingForeground#06060c
statusBar.foreground#fff9eede
statusBar.noFolderBackground#1b222d
statusBarItem.hoverBackground#1e2737
statusBarItem.prominentBackground#1e2737
statusBarItem.prominentHoverBackground#6c6f93
tab.activeBackground#1e2737
tab.activeBorder#39465e
tab.activeBorderTop#ffd484
tab.activeForeground#fff9ee
tab.activeModifiedBorder#ad82cbab
tab.border#39465e
tab.inactiveBackground#1b222d
tab.inactiveForeground#fff9ee
tab.inactiveModifiedBorder#ad82cb50
tab.unfocusedActiveForeground#fff9ee
terminal.ansiBlue#6db3ce
terminal.ansiBrightBlue#6db3ce
terminal.ansiBrightCyan#7eddde
terminal.ansiBrightGreen#8fc8bb
terminal.ansiBrightMagenta#ad82cb
terminal.ansiBrightRed#e78482
terminal.ansiBrightYellow#ffd484
terminal.ansiCyan#7eddde
terminal.ansiGreen#8fc8bb
terminal.ansiMagenta#ad82cb
terminal.ansiRed#e78482
terminal.ansiYellow#ffd484
terminal.border#39465e
terminal.foreground#fff9eede
terminal.selectionBackground#6c6f934d
terminalCursor.background#1b222d
terminalCursor.foreground#ffd484
textLink.activeForeground#ffd484
textLink.foreground#ffd484
titleBar.activeBackground#1b222d
titleBar.border#39465e
titleBar.inactiveBackground#1b222d
tree.indentGuidesStroke#39465e
walkThrough.embeddedEditorBackground#232530
widget.shadow#1b222d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, keyword.codetag.notation.python	#74829b	italic
constant, constant.numeric.bin.python, storage.type.number.python	#ad82cb	—
constant.character.escape, constant.language.python	#6db3ce	—
entity.name, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, meta.function-call.arguments.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python	#bbbbbb
entity.name.function, entity.name.type.class.python, meta.function-call.python, support.function.magic.python	#ffd484	bold
entity.name.tag	#7eddde	—
entity.name.type, storage.type.cs	#ffd484	—
entity.other.attribute-name, support.type.exception.python	#e78482	—
entity.other.attribute-name.class.css	#7eddde
support.type.property-name.css	#ffd484
entity.other.attribute-name.id	#ffd484
constant.other.color.rgb-value.hex.css	#ffd484	—
meta.at-rule.mixin, meta.at-rule.include	#ffd484	—
punctuation.definition.parameters.begin.bracket.round, punctuation.definition.parameters.end.bracket.round	#fff9ee
entity.other.inherited-class	#ffd484	—
constant.numeric.css	#8fc8bb	—
keyword.other.unit	#fff9ee
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#e78482	—
entity.name.variable, variable	#fff9ee	—
support.variable.magic.python	#bbbbbb	—
keyword, storage.type.function.python, storage.type.class.python	#ad82cb	—
keyword.operator	#6db3ce	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete	#6db3ce	—
markup.quote	#6db3ce	—
markup.heading, entity.name.section	#e78482	—
markup.bold	#ad82cb	bold
markup.italic	#7eddde	italic
markup.inline.raw, markup.fenced_code.block	#e78482	—
markup.underline.link	#ffd484	—
storage	#fff9ee	—
string.quoted, string.template, storage.type.string.python, string.regexp.quoted.single.python	#98a8c5	—
string.regexp	#fff9ee	—
string.other.link	#fff9ee	—
support	#6db3ce
support.function	#8fc8bb	—
support.variable	#8fc8bb	—
support.type.property-name, meta.object-literal.key	#ffd484	—
support.type.property-name.css	#fff9ee	—
variable.language	#ffd484	—
variable.parameter, support.type.python	#fff9ee	—
string.template meta.embedded	#fff9ee	—
punctuation.definition.tag	#98a8c5	—
punctuation.separator	#98a8c5	—
punctuation.definition.template-expression	#f5f5f5	—
punctuation.section.embedded	#ad82cb	—
punctuation.definition.list	#e78482	—

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