Nani Color

Name: Nani Color
Author: Roghib

Publisher: RoghibThemes in package: 1

Dark themes that are styled by the standard themes

Open in VS Code GitHub

VS Code preview

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

Nani Color — Nani Color

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#007733
activityBar.activeBorder#ffffff
activityBar.activeFocusBorder#ffffff
activityBar.background#110044
activityBar.border#ffffff55
activityBar.dropBorder#ffffff
activityBar.foreground#ffffff
activityBar.inactiveForeground#ffffff
activityBarBadge.background#bb0077
activityBarBadge.foreground#ffffff
badge.background#007733
badge.foreground#ffffff
banner.background#000999
banner.foreground#ffffff
breadcrumb.background#110044
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#dddddd
button.background#4400dd
button.border#ffffff
button.foreground#ffffff
button.hoverBackground#220099
button.secondaryBackground#4400dd
button.secondaryForeground#ffffff
button.secondaryHoverBackground#220099
checkbox.background#007733
checkbox.border#ffffff
checkbox.foreground#ffffff
descriptionForeground#ffffff
disabledForeground#333333
dropdown.background#111111
dropdown.border#ffffff
dropdown.foreground#ffffff
dropdown.listBackground#111111
editor.background#000019
editor.findMatchBackground#555599
editor.findMatchHighlightBackground#007755
editor.foreground#ffffff
editor.inactiveSelectionBackground#9900ff44
editor.lineHighlightBorder#80808020
editor.selectionBackground#0099ff44
editor.selectionForeground#000000
editor.selectionHighlightBackground#555599
editorCursor.foreground#00ff99
editorError.foreground#ff0022
editorGroup.border#ffffff55
editorGroup.dropBackground#0000ff22
editorGroup.emptyBackground#001122
editorGroup.focusedEmptyBorder#ffffff55
editorGroupHeader.border#ffffff55
editorGroupHeader.noTabsBackground#111111
editorGroupHeader.tabsBackground#111111
editorGroupHeader.tabsBorder#ffffff55
editorHoverWidget.background#111111
editorHoverWidget.border#ffffff55
editorHoverWidget.foreground#ffffff
editorLineNumber.activeForeground#ffffff
editorLineNumber.foreground#777777
editorOverviewRuler.border#777777
editorSuggestWidget.background#111111
editorSuggestWidget.border#ffffff
editorSuggestWidget.foreground#ffffff
editorSuggestWidget.highlightForeground#ffbb00
editorSuggestWidget.selectedBackground#550099
editorWidget.background#111111
editorWidget.border#ffffff55
editorWidget.foreground#ffffff
editorWidget.resizeBorder#ffffff
errorForeground#dd0000
focusBorder#777777
foreground#ffffff
icon.foreground#00dd00
input.background#000000
input.border#ffffff55
input.foreground#ffffff
input.placeholderForeground#999999
inputOption.activeBackground#007733
inputOption.activeForeground#ffffff
inputValidation.errorForeground#ff0022
inputValidation.warningForeground#ff9900
keybindingLabel.background#007755
keybindingLabel.bottomBorder#ffffff
keybindingLabel.foreground#ffffff
list.activeSelectionBackground#007733
list.activeSelectionForeground#ffffff
list.dropBackground#995500
list.errorForeground#ff0055
list.filterMatchBackground#007755
list.focusBackground#550099
list.focusForeground#ffffff
list.hoverBackground#330077
list.hoverForeground#ffffff
list.inactiveFocusBackground#330077
list.inactiveFocusOutline#ffffff
list.inactiveSelectionBackground#005533
list.inactiveSelectionForeground#ffffff
list.invalidItemForeground#ff0055
list.warningForeground#ff5500
listFilterWidget.background#007755
menu.background#ffffff
menu.border#000000
menu.foreground#000000
menu.selectionBackground#bbbbdd
menu.selectionBorder#777777
menu.selectionForeground#000000
menu.separatorBackground#555555
menubar.selectionBackground#bbbbdd
menubar.selectionBorder#333333
menubar.selectionForeground#000000
notificationCenter.border#ffffff
notificationCenterHeader.background#000000
notificationCenterHeader.foreground#ffffff
notifications.background#ffffff
notifications.border#ffffff
notifications.foreground#000000
notificationsErrorIcon.foreground#ff0055
notificationToast.border#ffffff
panel.background#000000
panel.border#ffffff33
panelInput.border#ffffff
panelSection.border#ffffff
panelSectionHeader.background#000000
panelSectionHeader.border#ffffff
panelSectionHeader.foreground#ffffff
panelTitle.activeBorder#00dd33
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#777777
sash.hoverBorder#555555
selection.background#007733
sideBar.background#000015
sideBar.border#ffffff55
sideBar.dropBackground#007733
sideBar.foreground#ffffff
sideBarSectionHeader.background#111133
sideBarSectionHeader.border#ffffff55
sideBarSectionHeader.foreground#ffffff
sideBarTitle.foreground#00dd00
statusBar.background#110044
statusBar.debuggingBackground#002222
statusBar.debuggingForeground#ffffff
statusBar.foreground#ffffff
statusBar.noFolderBackground#000000
statusBar.noFolderForeground#cccccc
statusBarItem.errorBackground#ff0099
statusBarItem.hoverBackground#007733
symbolIcon.arrayForeground#00dd00
symbolIcon.booleanForeground#00dd00
symbolIcon.classForeground#00dd00
symbolIcon.colorForeground#00dd00
symbolIcon.constantForeground#00dd00
symbolIcon.constructorForeground#00dd00
symbolIcon.enumeratorForeground#00dd00
symbolIcon.enumeratorMemberForeground#00dd00
symbolIcon.eventForeground#00dd00
symbolIcon.fieldForeground#00dd00
symbolIcon.fileForeground#00dd00
symbolIcon.folderForeground#00dd00
symbolIcon.functionForeground#00dd00
symbolIcon.interfaceForeground#00dd00
symbolIcon.keyForeground#00dd00
symbolIcon.keywordForeground#00dd00
symbolIcon.methodForeground#00dd00
symbolIcon.moduleForeground#00dd00
symbolIcon.namespaceForeground#00dd00
symbolIcon.nullForeground#00dd00
symbolIcon.numberForeground#00dd00
symbolIcon.objectForeground#00dd00
symbolIcon.operatorForeground#00dd00
symbolIcon.packageForeground#00dd00
symbolIcon.propertyForeground#00dd00
symbolIcon.referenceForeground#00dd00
symbolIcon.snippetForeground#00dd00
symbolIcon.stringForeground#00dd00
symbolIcon.structForeground#00dd00
symbolIcon.textForeground#00dd00
symbolIcon.typeParameterForeground#00dd00
symbolIcon.unitForeground#00dd00
symbolIcon.variableForeground#00dd00
tab.activeBackground#990066
tab.activeForeground#ffffff
tab.border#ffffff55
tab.hoverBackground#ffffff
tab.hoverForeground#000000
tab.inactiveBackground#000033
tab.inactiveForeground#ffffff
tab.unfocusedActiveBackground#005533
tab.unfocusedActiveForeground#ffffff
tab.unfocusedHoverBackground#ffffff
tab.unfocusedHoverForeground#000000
tab.unfocusedInactiveBackground#000033
tab.unfocusedInactiveForeground#888888
terminal.background#000011
terminal.border#ffffff55
terminal.foreground#ffffff
terminal.selectionBackground#007733
terminalCursor.background#00000000
terminalCursor.foreground#007700
textLink.activeForeground#00ff00
textLink.foreground#00bb00
titleBar.activeBackground#ffffff
titleBar.activeForeground#000000
titleBar.inactiveBackground#dddddd
titleBar.inactiveForeground#555555
toolbar.activeBackground#00000033
toolbar.hoverBackground#00000033
toolbar.hoverOutline#ffffff55
tree.indentGuidesStroke#007733
welcomePage.background#000011
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#667788	—
constant, entity.name.tag, variable.language	#ff2299	—
constant.character.escape, constant.language, constant.other.color.rgb-value.hex.css, keyword.operator, constant.numeric.css, markup.underline.link.markdown, constant.numeric.hexadecimal	#00ffbb	—
entity, punctuation.definition.heading.markdown	#00dd00	—
invalid	#ff1030	—
keyword, punctuation.definition.string.end.json, punctuation.definition.markdown, punctuation.definition.list.begin.markdown	#ffff00	—
entity.other.attribute-name.id.css, variable.other.object, variable.other.property, keyword.control.go, punctuation.definition.variable.perl, punctuation.definition.variable.php, punctuation.definition.string.begin.json, punctuation.definition.string.end.java	#ff9900	—
entity.other, markup.heading.markdown, meta.function-call.python, punctuation.definition.constant.css, punctuation.definition.string.begin.java, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js	#ffcc33	—
storage, support.constant.font-name.css, support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css, string.quoted.double.html, string.quoted.single.html, markup.bold.markdown, markup.italic.markdown, markup.inline.raw.string.markdown	#00bbff	—
variable, punctuation, support.type.property-name.css, meta.paragraph.markdown, keyword.other.unit.hexadecimal, entity.name.variable	#ffffff	—
support	#bb99ff	—
support.type.property-name.json, meta.embedded.block.html, string.quoted.double.perl	#228b22	—

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