Noctua Theme

Name: Noctua Theme
Author: Firstbober

Publisher: FirstboberThemes in package: 4

Stay in light of the dark.

Open in VS Code

Color themes

VS Code preview

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

Noctua Theme — Noctua Black Rose

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

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#101010
activityBar.dropBackground#6c6f9366
activityBar.foreground#d5d8dacc
activityBarBadge.background#494949
activityBarBadge.foreground#d4d4d4
badge.background#3d3d3d
badge.foreground#c6c6c6
breadcrumbPicker.background#232530
button.background#202020
button.foreground#c6c6c6
debugToolBar.background#1c1e26
diffEditor.insertedTextBackground#09f7a01a
diffEditor.removedTextBackground#f43e5c1a
dropdown.background#111111
dropdown.border#111111
dropdown.foreground#c6c6c6
dropdown.listBackground#2e303e
editor.background#101010
editor.findMatchBackground#6c6f9399
editor.findMatchHighlightBackground#6c6f9333
editor.findRangeHighlightBackground#6c6f931a
editor.foreground#aaaaaa
editor.hoverHighlightBackground#6c6f934d
editor.lineHighlightBackground#2e303e33
editor.rangeHighlightBackground#2e303e99
editor.selectionBackground#2e303eb3
editor.selectionHighlightBackground#6c6f9359
editor.wordHighlightBackground#6c6f9373
editor.wordHighlightStrongBackground#6c6f9373
editorBracketMatch.background#6c6f9366
editorBracketMatch.border#6c6f9300
editorCodeLens.foreground#6c6f9399
editorCursor.background#1c1e26
editorCursor.foreground#e95378
editorError.foreground#f43e5c
editorGroup.border#202020
editorGroup.dropBackground#0d0d0d98
editorGroupHeader.noTabsBackground#121212
editorGroupHeader.tabsBackground#121212
editorGutter.addedBackground#09f7a0a6
editorGutter.background#101010
editorGutter.deletedBackground#f43e5cb3
editorGutter.modifiedBackground#21bfc2b3
editorIndentGuide.activeBackground#2e303e
editorIndentGuide.background#2e303e99
editorLineNumber.activeForeground#d5d8da73
editorLineNumber.foreground#d5d8da1f
editorOverviewRuler.addedForeground#09f7a099
editorOverviewRuler.border#2e303eb3
editorOverviewRuler.bracketMatchForeground#d5d8da66
editorOverviewRuler.deletedForeground#f43e5c99
editorOverviewRuler.errorForeground#f43e5ce6
editorOverviewRuler.findMatchForeground#6c6f93
editorOverviewRuler.modifiedForeground#21bfc299
editorOverviewRuler.warningForeground#27d79773
editorRuler.foreground#6c6f9333
editorSuggestWidget.highlightForeground#e95378
editorWarning.foreground#27d797cc
editorWidget.background#232530
editorWidget.border#232530
errorForeground#f43e5c
extensionButton.prominentBackground#e95378
extensionButton.prominentHoverBackground#e9436d
focusBorder#1a1c23
foreground#d5d8da
gitDecoration.addedResourceForeground#27d797cc
gitDecoration.deletedResourceForeground#f43e5c
gitDecoration.ignoredResourceForeground#d5d8da59
gitDecoration.modifiedResourceForeground#b9958c
gitDecoration.untrackedResourceForeground#619244
input.background#1f1f1f
input.border#1f1f1f
input.foreground#c6c6c6
input.placeholderForeground#7a7a7a
inputOption.activeBorder#474747
inputValidation.errorBackground#161616
inputValidation.errorBorder#292929
inputValidation.infoBackground#292929
inputValidation.infoBorder#292929
inputValidation.warningBackground#383838
inputValidation.warningBorder#292929
list.activeSelectionBackground#2e303e80
list.activeSelectionForeground#d5d8da
list.dropBackground#6c6f9366
list.errorForeground#f43e5ce6
list.focusBackground#2e303e99
list.focusForeground#d5d8da
list.highlightForeground#e95378
list.hoverBackground#2e303e99
list.hoverForeground#d5d8da
list.inactiveFocusBackground#2e303e99
list.inactiveSelectionBackground#2e303e33
list.inactiveSelectionForeground#d5d8da
list.warningForeground#27d797bf
menu.selectionForeground#9b9b9b
notificationCenter.border#161616
notificationCenterHeader.background#141414
notifications.background#181818
notifications.border#181818
panel.background#0d0d0d
panel.border#101010
panel.dropBackground#141414
panelTitle.activeBorder#286291
panelTitle.activeForeground#b4bac8
panelTitle.inactiveForeground#7a7a7a
peekView.border#1a1c23
peekViewEditor.background#232530
peekViewEditor.matchHighlightBackground#6c6f9399
peekViewResult.background#232530
peekViewResult.matchHighlightBackground#6c6f9399
peekViewResult.selectionBackground#2e303e80
peekViewTitle.background#232530
pickerGroup.foreground#e95378e6
progressBar.background#3d3d3d
scrollbar.shadow#16161c
scrollbarSlider.activeBackground#222222
scrollbarSlider.background#6c6f931a
scrollbarSlider.hoverBackground#3f3f3f95
selection.background#6c6f9380
sideBar.background#121212
sideBar.border#151515
sideBar.dropBackground#6c6f934d
sideBar.foreground#d5d8da99
sideBarSectionHeader.background#151515
sideBarSectionHeader.foreground#d5d8dacc
statusBar.background#101010
statusBar.debuggingBackground#fab38e
statusBar.debuggingForeground#06060c
statusBar.foreground#d5d8da80
statusBar.noFolderBackground#1c1e26
statusBarItem.hoverBackground#2e303e
statusBarItem.prominentBackground#2e303e
statusBarItem.prominentHoverBackground#6c6f93
tab.activeBackground#080808
tab.activeBorder#101010
tab.activeForeground#c6c6c6
tab.border#0d0d0d
tab.inactiveBackground#141414
tab.inactiveForeground#7a7a7a
tab.unfocusedActiveBorder#3a3a3a
tab.unfocusedActiveForeground#848484
tab.unfocusedInactiveForeground#4c4c4c
terminal.ansiBlack#191919
terminal.ansiBlue#357ab2
terminal.ansiBrightBlack#3a3a3a
terminal.ansiBrightBlue#62aae5
terminal.ansiBrightCyan#02ecf7
terminal.ansiBrightGreen#47ed68
terminal.ansiBrightMagenta#d653ef
terminal.ansiBrightRed#e82929
terminal.ansiBrightWhite#f2f2f2
terminal.ansiBrightYellow#ffd923
terminal.ansiCyan#00c6cf
terminal.ansiGreen#43b27c
terminal.ansiMagenta#9c38af
terminal.ansiRed#b23e3e
terminal.ansiWhite#e2e2e2
terminal.ansiYellow#ddd3a2
terminal.background#0d0d0d
terminal.border#161616
terminal.foreground#d5d8da
terminal.selectionBackground#6c6f934d
terminalCursor.background#d5d8da
terminalCursor.foreground#6c6f9399
textLink.activeForeground#e9436d
textLink.foreground#e95378
titleBar.activeBackground#0d0d0d
titleBar.inactiveBackground#121212
walkThrough.embeddedEditorBackground#232530
widget.shadow#16161c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#D5D8DA66	italic
string.quoted, string.template, punctuation.definition.string	#FAB795E6	—
string.template meta.embedded.line	#BBBBBBFF	—
variable, entity.name.variable	#E95678E6	—
variable.language	#FAC29AE6	italic
variable.parameter	—	italic
storage.type, storage.modifier	#B877DBE6	—
constant	#F09483E6	—
string.regexp	#F09483E6	—
constant.numeric	#F09483E6	—
constant.language	#F09483E6	—
constant.character.escape	#25B0BCE6	—
entity.name	#FAC29AE6	—
entity.name.tag	#E95678E6	—
punctuation.definition.tag	#E95678A6	—
entity.other.attribute-name	#F09483E6	—
entity.name.type	#FAC29AE6	—
entity.other.inherited-class	#FAB795E6	—
entity.name.function, variable.function	#25B0BCE6	—
keyword	#B877DBE6	—
keyword.control	#B877DBE6	—
keyword.operator	#BBBBBB	—
keyword.operator.new, keyword.operator.expression, keyword.operator.logical	#B877DBE6	—
keyword.other.unit	#F09483E6	—
support	#FAC29AE6	—
support.function	#25B0BCE6	—
support.variable	#E95678E6	—
meta.object-literal.key, support.type.property-name	#E95678E6	—
punctuation.separator.key-value	#BBBBBB	—
punctuation.section.embedded	#B877DBE6	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end	#B877DBE6	—
support.type.property-name.css	#BBBBBB	—
constant.other.color	#F09483E6	—
support.constant.font-name	#F09483E6	—
entity.other.attribute-name.id	#25B0BCE6	—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class	#FAB795E6	—
support.function.misc.css	#FAC29AE6	—
markup.heading, entity.name.section	#E95678E6	—
markup.quote	#BBBBBBCC	italic
beginning.punctuation.definition.list	#E95678E6	—
markup.underline.link	#FAB795E6	—
string.other.link.description	#F09483E6	—
meta.function-call.generic.python	#25B0BCE6	—
source.cpp keyword.operator	#B877DBE6	—
token.info-token	#6796e6	—
token.warn-token	#cd9731	—
token.error-token	#f44747	—
token.debug-token	#b267e6	—
comment	#575757	—
string	#6bb72d	—
keyword - keyword.operator	#b73333	—
keyword.control	#b73333	—
storage	#b73333	—
storage.type	#b73333	—
constant.numeric	#b77a2f	—
entity.name.type	#b7922d	—
entity.name.class	#b7922d	—
support.type	#b7922d	—
support.class	#b7922d	—
entity.name.function	#2d9bb7	—
support.function	#2d9bb7	—
constant.language	#b73333	—
keyword.operator	#b73333	—
storage.type, storage.modifier	#b73333
variable.parameter, variable.other, variable.language, variable.name	#b6355c
support.constant	#9a4cbe	—
punctuation.separator.namespace.access.cpp	#8a8a8a	—

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