N-DarkTheme

Name: N-DarkTheme
Author: Akakø

Publisher: AkakøThemes in package: 1

N-Dark Theme is the perfect dark theme for you, it has everything you need to write better code. Dark blue background and

Open in VS Code GitHub

VS Code preview

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

N-DarkTheme — N-DarkTheme

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#0E0E16
activityBar.border#0E0E1660
activityBar.foreground#EEF0FF
activityBarBadge.background#D4AF00
activityBarBadge.foreground#0E0E16
badge.background#0E0E1630
badge.foreground#92A6FF
breadcrumb.activeSelectionForeground#7c94ff
breadcrumb.background#0E0E16
breadcrumb.focusForeground#a5b5fc
breadcrumb.foreground#92a6ff
breadcrumbPicker.background#0E0E16
button.background#92A6FF50
contrastBorder#92A6FF40
debugToolBar.background#1F1F2C
diffEditor.insertedTextBackground#17172215
diffEditor.removedTextBackground#D4AF0020
dropdown.background#0E0E16
dropdown.border#fff
editor.background#171722
editor.findMatchBackground#0E0E16
editor.findMatchBorder#92A6FF
editor.findMatchHighlightBackground#92A6FF93
editor.findMatchHighlightBorder#ffffff30
editor.foreground#EEF0FF
editor.lineHighlightBackground#1F1F2C50
editor.selectionBackground#1f1f2c
editor.selectionHighlightBackground#1F1F2C50
editor.selectionHighlightBorder#1f1f2c
editorBracketMatch.background#0E0E16
editorBracketMatch.border#92A6FF80
editorCursor.foreground#00E0C2
editorError.foreground#DF001E70
editorGroup.border#92A6FF30
editorGroupHeader.tabsBackground#0E0E16
editorGutter.addedBackground#17172260
editorGutter.deletedBackground#DF001E60
editorGutter.modifiedBackground#92A6FF60
editorHoverWidget.background#0E0E16
editorHoverWidget.border#ffffff10
editorIndentGuide.activeBackground#92A6FF70
editorIndentGuide.background#1F1F2C
editorInfo.foreground#92A6FF
editorLineNumber.activeForeground#D4AF00
editorLineNumber.foreground#92A6FFC0
editorLink.activeForeground#EEF0FF
editorMarkerNavigation.background#EEF0FF05
editorOverviewRuler.border#0E0E16
editorOverviewRuler.errorForeground#DF001E40
editorOverviewRuler.findMatchForeground#92A6FF
editorOverviewRuler.infoForeground#1F1F2C40
editorOverviewRuler.warningForeground#ff000070
editorRuler.foreground#92A6FF
editorSuggestWidget.background#0E0E16
editorSuggestWidget.border#ffffff10
editorSuggestWidget.foreground#EEF0FF
editorSuggestWidget.highlightForeground#92A6FF
editorSuggestWidget.selectedBackground#1F1F2C
editorWarning.foreground#D4AF00
editorWhitespace.foreground#EEF0FF40
editorWidget.background#0E0E16
editorWidget.border#92A6FF
editorWidget.resizeBorder#92A6FF
extensionButton.prominentBackground#D4AF00
extensionButton.prominentHoverBackground#D4AF00
focusBorder#00000000
gitDecoration.conflictingResourceForeground#92A6FF
gitDecoration.deletedResourceForeground#A51F31
gitDecoration.ignoredResourceForeground#92A6FF
gitDecoration.modifiedResourceForeground#62C370
gitDecoration.untrackedResourceForeground#D4AF00
input.background#1F1F2C
input.border#ffffff20
input.foreground#EEF0FF
input.placeholderForeground#EEF0FF60
inputOption.activeBackground#EEF0FF30
inputOption.activeBorder#ECEBFF30
inputValidation.errorBorder#DF001E50
inputValidation.infoBorder#17172250
inputValidation.warningBorder#92A6FF50
list.activeSelectionBackground#1F1F2C
list.activeSelectionForeground#92A6FF
list.focusBackground#1F1F2C
list.focusForeground#7BA9FF
list.highlightForeground#92A6FF
list.hoverBackground#1F1F2C
list.hoverForeground#7BA9FF
list.inactiveSelectionBackground#0E0E1630
list.inactiveSelectionForeground#92A6FF
list.warningForeground#cfa01d
listFilterWidget.background#0E0E1630
listFilterWidget.noMatchesOutline#0E0E1630
listFilterWidget.outline#0E0E1630
menu.background#0E0E16f8
menu.border#92A6FF50
menu.foreground#EEF0FF
menu.selectionBackground#0E0E1630
menu.selectionBorder#0E0E1630
menu.selectionForeground#EEF0FF
menu.separatorBackground#EEF0FF
menubar.selectionBackground#0E0E1630
menubar.selectionBorder#92A6FF50
menubar.selectionForeground#EEF0FF
minimap.background#0E0E1640
minimapGutter.addedBackground#92A6FF
minimapGutter.deletedBackground#92A6FF
minimapGutter.modifiedBackground#92A6FF
minimapSlider.activeBackground#92A6FFb0
minimapSlider.background#92A6FF80
minimapSlider.hoverBackground#92A6FFa0
notificationLink.foreground#92A6FF
notifications.background#0E0E16
notifications.foreground#EEF0FF
panel.background#0E0E16
panel.border#0E0E1660
panelTitle.activeBorder#92A6FF
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#EEF0FF
peekView.border#0E0E1630
peekViewEditor.background#EEF0FF05
peekViewEditor.matchHighlightBackground#92A6FF50
peekViewEditorGutter.background#EEF0FF05
peekViewResult.background#EEF0FF05
peekViewResult.matchHighlightBackground#92A6FF50
peekViewResult.selectionBackground#92A6FF70
peekViewTitle.background#EEF0FF05
peekViewTitleDescription.foreground#EEF0FF60
pickerGroup.foreground#92A6FF
progressBar.background#92A6FF
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#1F1F2C
scrollbarSlider.background#1F1F2C
scrollbarSlider.hoverBackground#1F1F2C
selection.background#92A6FF
settings.checkboxBackground#0E0E16
settings.checkboxForeground#EEF0FF
settings.dropdownBackground#0E0E16
settings.dropdownForeground#EEF0FF
settings.headerForeground#92A6FF
settings.modifiedItemIndicator#92A6FF
settings.numberInputBackground#0E0E16
settings.numberInputForeground#EEF0FF
settings.textInputBackground#0E0E16
settings.textInputForeground#EEF0FF
sideBar.background#171722
sideBar.border#7BA9FF50
sideBar.foreground#EEF0FF
sideBarSectionHeader.background#0E0E16
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#EEF0FF
sideBarTitle.foreground#ca9e25
statusBar.background#D4AF00
statusBar.border#00000000
statusBar.debuggingBackground#D4AF00
statusBar.debuggingForeground#000
statusBar.foreground#000
statusBar.noFolderBackground#D4AF00
statusBarItem.hoverBackground#92A6FF20
statusBarItem.remoteBackground#92A6FF
statusBarItem.remoteForeground#0E0E16
tab.activeBackground#171722
tab.activeBorder#92A6FF
tab.activeForeground#ffffff
tab.activeModifiedBorder#92A6FF
tab.border#0E0E16
tab.inactiveBackground#0E0E16
tab.inactiveForeground#92A6FF
tab.unfocusedActiveBorder#92A6FF
tab.unfocusedActiveForeground#EEF0FF
terminal.ansiBlack#000000
terminal.ansiBlue#212188
terminal.ansiBrightBlack#353535
terminal.ansiBrightBlue#3765fd
terminal.ansiBrightCyan#00ccff
terminal.ansiBrightGreen#1eff00
terminal.ansiBrightMagenta#e100ff
terminal.ansiBrightRed#DF001E
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fffb00
terminal.ansiCyan#00aeff
terminal.ansiGreen#46c079
terminal.ansiMagenta#e65be6
terminal.ansiRed#DF001E
terminal.ansiWhite#ffffff
terminal.ansiYellow#f1f88e
terminalCursor.background#0E0E16
terminalCursor.foreground#00E0C2
textLink.activeForeground#EEF0FF
textLink.foreground#92A6FF
titleBar.activeBackground#0E0E16
titleBar.activeForeground#EEF0FF
titleBar.border#0E0E1660
titleBar.inactiveBackground#0E0E16
titleBar.inactiveForeground#92A6FF
tree.indentGuidesStroke#383c3d
widget.shadow#0E0E1630

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html	#818181	italic
string, constant.other.symbol, constant.other.key, entity.other.inherited-class	#92A6FF	italic
punctuation.definition.string.begin.html, punctuation.definition.string.end.html	#92A6FF	italic
string constant.other.placeholder, keyword, invalid.deprecated	#fff	—
storage.type, storage.modifier	#D4AF00	—
variable	#fceb96	—
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	—	italic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss	#D4AF00	—
constant.other.php	#D4AF00	—
constant.other.color	#fff	—
invalid, invalid.illegal	#DF001E	—
Keyword, Storage	—	italic
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#7BA9FF	—
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.binding-pattern.object.js	#EEF0FF	—
keyword.control	#ffae00	italic
text.html.derivative	#EEF0FF	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#EEF0FF	—
entity.name.tag.html	#A5B8D8	bold
variable.parameter.js, variable.parameter.keyframe-list.css	#fceb96	—
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js, entity.name.type.module.js	#A5B8D8	—
variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control	#92A6FF	—
support.other.variable, string.other.link, markup.table	#EEF0FF	—
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html	#92A6FF	—
variable.parameter.function.language.special, variable.parameter	#fceb96	—
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#92A6FF
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, entity.other.attribute-name.html	#ffae00	italic
support.type	#B2CCD6	—
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	#fff	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#fceb96	—
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#171722	italic
entity.other.attribute-name, support.function	#92A6FF	—
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key	#A5B8D8	bold
source.scss keyword.control	#ff0000	—
markup.inserted	#D4AF00	—
markup.deleted	#df001e	—
markup.changed	#92A6FF	—
string.regexp	#c4f1ff	—
constant.character.escape	#c4f1ff	—
url, link, uri	—	underline
source.js constant.other.object.key.js string.unquoted.label.js	#EEF0FF	italic
support.type.property-name.json	#EEF0FF	—
text.html.markdown markup.inline.raw.markdown	#92A6FF	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#92A6FF50	—
text.html.markdown meta.dummy.line-break	—	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown	#A5B8D8	bold
markup.underline	#171722	underline
markup.strike	—
markup.quote punctuation.definition.blockquote.markdown	#92A6FF50	—
markup.quote	—	italic
string.other.link.description.title.markdown	#92A6FF	—
constant.other.reference.link.markdown	#92A6FF	—
markup.raw.block	#92A6FF	—
punctuation.definition.raw.markdown, punctuation.definition.markdown	#c4f1ff	—
variable.language.fenced.markdown	#92A6FF	—
meta.separator	#c4f1ff	bold
token.info-token	#92A6FF	—
token.warn-token	#92A6FF	—
token.error-token	#ff293b	—
token.debug-token	#c4f1ff	—

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