Correia Dark

Name: Correia Dark
Author: Correia Dark

Publisher: Correia DarkThemes in package: 9

Dark theme

GitHub

Color themes

VS Code preview

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

Correia Dark — Correia Dark 2

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.activeBackground#343d46
activityBar.activeBorder#5fb3b3
activityBar.background#1b2b34
activityBar.border#1b2b34
activityBar.foreground#d8dee9
activityBar.inactiveForeground#65737e
activityBarBadge.background#fac863
activityBarBadge.foreground#1b2b34
badge.background#343d46
badge.foreground#d8dee9
breadcrumb.background#0f1c23
button.background#5fb3b3
button.hoverBackground#4e9b9b
debugExceptionWidget.background#1b2b34
debugExceptionWidget.border#d8dee9
debugToolBar.background#1b2b34
descriptionForeground#d8dee9
diffEditor.insertedTextBackground#99c79422
diffEditor.insertedTextBorder#99c79422
diffEditor.removedTextBackground#ed6f7d22
diffEditor.removedTextBorder#ed6f7d22
dropdown.background#0b151b
dropdown.border#5fb3b3
dropdown.foreground#ffffff
editor.background#1b2b34
editor.findMatchBackground#343d46
editor.findMatchBorder#5fb3b3ee
editor.findMatchHighlightBackground#5fb3b370
editor.findRangeHighlightBackground#5fb3b370
editor.foreground#ffffff
editor.hoverHighlightBackground#343d46
editor.inactiveSelectionBackground#1b2b34
editor.lineHighlightBackground#343d46
editor.lineHighlightBorder#343d46
editor.rangeHighlightBackground#343d46
editor.selectionBackground#4f5b66
editor.selectionForeground#ffffff
editor.selectionHighlightBackground#343d46
editor.selectionHighlightBorder#5fb3b3
editor.wordHighlightBackground#4f5b66
editor.wordHighlightStrongBackground#65737e
editorBracketHighlight.foreground1#5fb3b3
editorBracketHighlight.foreground2#c5a5c5
editorBracketHighlight.foreground3#5a9bcf
editorBracketHighlight.foreground4#fac863
editorBracketMatch.background#343d46
editorBracketMatch.border#fac863
editorCodeLens.foreground#d8dee9
editorCursor.foreground#fac863
editorError.border#343d46
editorError.foreground#ed6f7d
editorGroup.border#343d46
editorGroup.dropBackground#343d46
editorGroup.emptyBackground#22363f
editorGroup.focusedEmptyBorder#5fb3b3
editorGroupHeader.noTabsBackground#1b2b34
editorGroupHeader.tabsBackground#1b2b34
editorGroupHeader.tabsBorder#343d46
editorGutter.addedBackground#99c794
editorGutter.background#1b2b34
editorGutter.deletedBackground#ed6f7d
editorGutter.modifiedBackground#fac863aa
editorHoverWidget.background#0b151b
editorHoverWidget.border#5fb3b3
editorIndentGuide.activeBackground#65737e
editorIndentGuide.background#343d46
editorLineNumber.foreground#4f5b66
editorLink.activeForeground#65737e
editorMarkerNavigation.background#343d46
editorMarkerNavigationError.background#ed6f7d
editorMarkerNavigationWarning.background#99c794
editorOverviewRuler.addedForeground#99c794aa
editorOverviewRuler.border#343d46
editorOverviewRuler.commonContentForeground#c5a5c5aa
editorOverviewRuler.currentContentForeground#5fb3b3aa
editorOverviewRuler.deletedForeground#ed6f7daa
editorOverviewRuler.errorForeground#ed6f7d
editorOverviewRuler.incomingContentForeground#5a9bcfbb
editorOverviewRuler.infoForeground#c5a5c5aa
editorOverviewRuler.modifiedForeground#fac863aa
editorPane.background#1b2b34
editorRuler.foreground#4f5b66
editorSuggestWidget.background#0b151b
editorSuggestWidget.border#5fb3b3
editorSuggestWidget.foreground#d8dee9
editorSuggestWidget.highlightForeground#fac863
editorSuggestWidget.selectedBackground#343d46
editorWarning.border#343d46
editorWarning.foreground#fac863
editorWhitespace.foreground#4f5b66
editorWidget.background#0f1c23
editorWidget.border#343d46
errorForeground#ed6f7d
extensionButton.prominentBackground#5fb3b3
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#4e9b9b
focusBorder#343d46
foreground#d8dee9
gitDecoration.conflictingResourceForeground#c5a5c5
gitDecoration.deletedResourceForeground#ed6f7d
gitDecoration.ignoredResourceForeground#4f5b66
gitDecoration.modifiedResourceForeground#fac863
gitDecoration.untrackedResourceForeground#5fb3b3
input.background#1b2b34
input.border#343d46
input.foreground#fac863
input.placeholderForeground#d8dee9
inputOption.activeBorder#343d46
inputValidation.errorBackground#ed6f7dbb
inputValidation.errorBorder#ed6f7d
inputValidation.errorForeground#ffffff
inputValidation.infoBackground#5fb3b3bb
inputValidation.infoBorder#5fb3b3
inputValidation.infoForeground#ffffff
inputValidation.warningBackground#fac863bb
inputValidation.warningBorder#fac863
inputValidation.warningForeground#ffffff
list.activeSelectionBackground#343d46
list.activeSelectionForeground#d8dee9
list.dropBackground#343d46
list.focusBackground#343d46
list.focusForeground#d8dee9
list.highlightForeground#fac863
list.hoverBackground#1b2b34
list.hoverForeground#d8dee9
list.inactiveSelectionBackground#343d46
list.inactiveSelectionForeground#d8dee9
merge.border#5fb3b3
merge.commonContentBackground#ffffff00
merge.commonHeaderBackground#ffffff00
merge.currentContentBackground#5fb3b370
merge.currentHeaderBackground#5fb3b3bb
merge.incomingContentBackground#5a9bcf70
merge.incomingHeaderBackground#5a9bcfbb
notificationCenter.border#5fb3b3
notificationCenterHeader.background#1b2b34
notificationCenterHeader.foreground#d8dee9
notificationLink.foreground#fac863
notifications.border#5fb3b3
notificationToast.border#5fb3b3
panel.background#1b2b34
panel.border#5fb3b3
panelTitle.activeBorder#fac863
panelTitle.activeForeground#5fb3b3
panelTitle.inactiveForeground#d8dee9
peekView.border#343d46
peekViewEditor.background#1b2b34
peekViewEditor.matchHighlightBackground#343d46
peekViewEditorGutter.background#1b2b34
peekViewResult.background#1b2b34
peekViewResult.fileForeground#d8dee9
peekViewResult.lineForeground#ffffff
peekViewResult.matchHighlightBackground#343d46
peekViewResult.selectionBackground#343d46
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#1b2b34
peekViewTitleDescription.foreground#d8dee9
peekViewTitleLabel.foreground#fac863
pickerGroup.border#0f1c23
pickerGroup.foreground#d8dee9
progressBar.background#5fb3b3
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#343d46aa
scrollbarSlider.background#4f5b66aa
scrollbarSlider.hoverBackground#343d46aa
selection.background#0d3a58
settings.dropdownListBorder#5fb3b3
settings.modifiedItemIndicator#5fb3b3
sideBar.background#0f1c23
sideBar.border#1b2b34
sideBar.foreground#65737e
sideBarSectionHeader.background#1b2b34
sideBarSectionHeader.foreground#d8dee9
sideBarTitle.foreground#d8dee9
statusBar.background#1b2b34
statusBar.border#343d46
statusBar.debuggingBackground#1b2b34
statusBar.debuggingForeground#4f5b66
statusBar.foreground#d8dee9
statusBar.noFolderBackground#1b2b34
statusBar.noFolderBorder#343d46
statusBar.noFolderForeground#d8dee9
statusBarItem.activeBackground#0f1c23
statusBarItem.hoverBackground#343d46
statusBarItem.prominentBackground#1b2b34
statusBarItem.prominentHoverBackground#343d46
tab.activeBackground#343d46
tab.activeBorder#5fb3b3
tab.activeForeground#ffffff
tab.activeModifiedBorder#5fb3b3
tab.border#0b151b
tab.inactiveBackground#1b2b34
tab.inactiveForeground#65737e
tab.inactiveModifiedBorder#5fb3b377
tab.unfocusedActiveForeground#d8dee9
tab.unfocusedActiveModifiedBorder#5fb3b3bb
tab.unfocusedInactiveForeground#d8dee9
tab.unfocusedInactiveModifiedBorder#5fb3b377
terminal.ansiBlack#000000
terminal.ansiBlue#5a9bcf
terminal.ansiBrightBlack#65737e
terminal.ansiBrightBlue#8abee7
terminal.ansiBrightCyan#9be2e2
terminal.ansiBrightGreen#c1dcbe
terminal.ansiBrightMagenta#edcded
terminal.ansiBrightRed#d6838c
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffde9b
terminal.ansiCyan#5fb3b3
terminal.ansiGreen#99c794
terminal.ansiMagenta#c5a5c5
terminal.ansiRed#ed6f7d
terminal.ansiWhite#d8dee9
terminal.ansiYellow#fac863
terminal.background#1b2b34
terminal.foreground#d8dee9
terminalCursor.background#1b2b34
terminalCursor.foreground#fac863
textBlockQuote.background#343d46
textBlockQuote.border#5fb3b3
textCodeBlock.background#343d46
textLink.activeForeground#5a9bcf
textLink.foreground#5a9bcf
textPreformat.foreground#fac863
textSeparator.foreground#1b2b34
titleBar.activeBackground#1b2b34
titleBar.activeForeground#d8dee9
titleBar.border#1b2b34
titleBar.inactiveBackground#1b2b34
titleBar.inactiveForeground#65737e
walkThrough.embeddedEditorBackground#1b2b34
widget.shadow#0f1c23

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#65737E	italic
variable	#CDD3DE	—
keyword, storage.type, storage.modifier, storage.type.class.js	#C5A5C5	—
keyword.operator, constant.other.color, punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#5FB3B3	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#ED6F7D	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level	#5A9BCF	—
support.other.variable, string.other.link	#ED6F7D	—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit	#EB9A6D	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#99C794	—
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#FAC863	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#ED6F7D	—
variable.language	#C5A5C5	italic
entity.name.method.js	#D8DEE9	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#D8DEE9	—
entity.other.attribute-name	#BB80B3	italic
markup.inserted	#99C794	—
markup.deleted	#ED6F7D	—
markup.changed	#BB80B3	—
string.regexp	#5FB3B3	—
constant.character.escape	#5FB3B3	—
url, link, uri	#5FB3B3	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#5A9BCF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#ED6F7D	italic
source.css entity, source.scss entity	#C5A5C5	—
entity.name.tag, source.css entity.name, source.css entity.name.tag, source.scss entity.name.tag, source.css entity.name.tag entity.name.tag, source.scss entity.name.tag entity.name.tag	#ED6F7D	—
source.css support	#FAC863	—
source.css constant, source.css support.constant	#EB9A6D	—
source.css string, source.css punctuation.definition.string, source.scss string, source.scss punctuation.definition.string	#99C794	—
source.css variable	#D8DEE9	—
text.html.basic entity.name	#ED6F7D	—
meta.tag.metadata.script.html entity.name.tag.html	#ED6F7D	—
text.html.basic entity.name.tag	#ED6F7D	—
source.js keyword	#5FB3B3	—
source.js entity, source.js entity.name.tag	#ED6F7D	—
source.js punctuation	#5FB3B3	—
source.js meta.block	#D8DEE9	—
source.js storage.type.function	#C5A5C5	—
variable.language, entity.name.type.class.js	#ED6F7D	—
support.class.component.html	#ED6F7D	—
markup.changed	#C5A5C5	—
punctuation.definition.heading.markdown	#D8DEE9	—
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown	#C5A5C5	bold
meta.paragraph.markdown	#D8DEE9	—
beginning.punctuation.definition.quote.markdown	#5FB3B3	—
markup.quote.markdown meta.paragraph.markdown	#5A9BCF	italic
meta.separator.markdown	#5FB3B3	—
markup.bold.markdown	#5FB3B3	bold
markup.italic.markdown	#5A9BCF	italic
beginning.punctuation.definition.list.markdown	#5FB3B3	—
string.other.link.title.markdown	#99C794	—
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown	#99C794	—
markup.underline.link.markdown, markup.underline.link.image.markdown	#5A9BCF	—
fenced_code.block.language, markup.inline.raw.markdown	#EB9A6D	—
fenced_code.block.language, markup.inline.raw.markdown	#5A9BCF	—
source.ts entity.name.type	#FAC863	—
source.ts keyword	#C5A5C5	—
source.ts punctuation.definition.parameters	#5FB3B3	—
meta.arrow.ts punctuation.definition.parameters	#5FB3B3	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#FAC863	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#C5A5C5	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#D8DEE9	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#5A9BCF	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#AB7967	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#ED6F7D	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#EB9A6D	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#FAC863	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#C5A5C5	—
modifier, this, comment, storage.modifier.js, entity.other.attribute-name.js	—	italic
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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