Midnight Koi Theme

Name: Midnight Koi Theme
Author: soraplex

Publisher: soraplexThemes in package: 1

cozy dark mode theme made by @soraplex

Open in VS Code GitHub

VS Code preview

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

Midnight Koi Theme — midnight-koi

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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#131419
activityBar.border#363744
activityBar.foreground#7391C8
activityBarBadge.background#657C6A
activityBarBadge.foreground#ccd6f6
badge.background#a86464
badge.foreground#ccd6f6
breadcrumb.activeSelectionForeground#ccd6f6
breadcrumb.background#131419
breadcrumb.focusForeground#7391C8
breadcrumb.foreground#7391C8
breadcrumbPicker.background#131419
button.background#8C92AC
contrastBorder#363744
debugToolBar.background#5a6076
diffEditor.insertedTextBackground#7391C815
diffEditor.removedTextBackground#38337920
dropdown.background#131419
dropdown.border#8892b0
dropdown.foreground#7391C8
editor.background#131419
editor.findMatchBackground#00000050
editor.findMatchBorder#CCD6F630
editor.findMatchHighlightBackground#464a5e00
editor.findMatchHighlightBorder#CCD6F630
editor.foreground#BBBBBB
editor.lineHighlightBackground#7391C820
editor.placeholder.foreground#7391C860
editor.selectionBackground#576370c0
editor.selectionHighlightBackground#ccd6f650
editor.selectionHighlightBorder#6F8865
editorBracketMatch.background#131419
editorBracketMatch.border#7191fc
editorCursor.foreground#CCD6F6
editorError.foreground#ff0000
editorGroup.border#363744
editorGroupHeader.tabsBackground#131419
editorGutter.addedBackground#587dc060
editorGutter.deletedBackground#be4343
editorGutter.modifiedBackground#5fa0b4
editorHoverWidget.background#131419
editorHoverWidget.border#c0c4cf
editorIndentGuide.activeBackground1#a59cd8
editorIndentGuide.background1#363744
editorInfo.foreground#576490
editorLineNumber.activeForeground#cfa57a
editorLineNumber.foreground#8C92AC
editorLink.activeForeground#007ACC
editorMarkerNavigation.background#0e4ab905
editorOverviewRuler.border#131419
editorOverviewRuler.errorForeground#40706c
editorOverviewRuler.findMatchForeground#328b8d00
editorOverviewRuler.infoForeground#FF0000
editorOverviewRuler.warningForeground#FFA500
editorRuler.foreground#ca3030
editorSuggestWidget.background#1c1d24
editorSuggestWidget.border#CCD6F610
editorSuggestWidget.foreground#A6ACA6
editorSuggestWidget.highlightForeground#CCD6F6
editorSuggestWidget.selectedBackground#5a6076
editorWarning.foreground#7391C8
editorWhitespace.foreground#7391C840
editorWidget.background#131419
editorWidget.border#363744
editorWidget.resizeBorder#131419
extensionButton.prominentBackground#7391C890
extensionButton.prominentHoverBackground#8892B0
focusBorder#CCD6F600
gitDecoration.conflictingResourceForeground#ff6b6b
gitDecoration.deletedResourceForeground#c45c54
gitDecoration.ignoredResourceForeground#7a8b78
gitDecoration.modifiedResourceForeground#6aacc6
gitDecoration.untrackedResourceForeground#f8dc81
input.background#1C1D24
input.border#CCD6F610
input.foreground#CCD6F6
input.placeholderForeground#7391C860
inputOption.activeBackground#7391C830
inputOption.activeBorder#7391C830
inputValidation.errorBorder#ff9a9a
inputValidation.infoBorder#a0c4ff
inputValidation.warningBorder#ffcc7a
list.activeSelectionBackground#7391C830
list.activeSelectionForeground#bb906e
list.focusBackground#7391C830
list.focusForeground#8C92AC
list.highlightForeground#AFC7FF
list.hoverBackground#7391C830
list.hoverForeground#AFC7FF
list.inactiveSelectionBackground#131419
list.inactiveSelectionForeground#a5a9af
list.warningForeground#ff6b6b
listFilterWidget.background#13141930
listFilterWidget.noMatchesOutline#13141930
listFilterWidget.outline#13141930
menu.background#131419f8
menu.border#13141950
menu.foreground#CCD6F6
menu.selectionBackground#1C1D24
menu.selectionBorder#e4e6ee30
menu.selectionForeground#7391C8
menu.separatorBackground#8C92AC
menubar.selectionBackground#1C1D24
menubar.selectionBorder#13141950
menubar.selectionForeground#7391C8
minimap.background#131419
minimapGutter.addedBackground#8892B0
minimapGutter.deletedBackground#c45c54
minimapGutter.modifiedBackground#6aacc6
minimapSlider.activeBackground#7391C8b0
minimapSlider.background#7391C880
minimapSlider.hoverBackground#7391C8a0
notificationLink.foreground#CCD6F6
notifications.background#131419
notifications.foreground#7391C8
panel.background#131419
panel.border#363744
panelTitle.activeBorder#cbb89a
panelTitle.activeForeground#CCD6F6
panelTitle.inactiveForeground#6A86B8
peekView.border#1a32ac
peekViewEditor.background#7391C805
peekViewEditor.matchHighlightBackground#13141950
peekViewEditorGutter.background#7391C805
peekViewResult.background#7391C805
peekViewResult.matchHighlightBackground#13141950
peekViewResult.selectionBackground#13141970
peekViewTitle.background#7391C805
peekViewTitleDescription.foreground#7391C860
pickerGroup.foreground#131419
progressBar.background#131419
scrollbar.shadow#13141900
scrollbarSlider.activeBackground#7391C860
scrollbarSlider.background#7391C860
scrollbarSlider.hoverBackground#7391C830
selection.background#a2abda57
settings.checkboxBackground#131419
settings.checkboxForeground#7391C8
settings.dropdownBackground#131419
settings.dropdownForeground#7391C8
settings.headerForeground#92b1b1
settings.modifiedItemIndicator#131419
settings.numberInputBackground#131419
settings.numberInputForeground#7391C8
settings.textInputBackground#131419
settings.textInputForeground#7391C8
sideBar.background#131419
sideBar.border#363744
sideBar.foreground#A6ACA6
sideBarSectionHeader.background#131419
sideBarSectionHeader.border#363744
sideBarSectionHeader.foreground#9FAEC8
sideBarTitle.foreground#7391C8
statusBar.background#131419
statusBar.border#363744
statusBar.debuggingBackground#4A6F9A
statusBar.debuggingForeground#C9D1D9
statusBar.foreground#8C92AC
statusBar.noFolderBackground#131419
statusBarItem.hoverBackground#506181
statusBarItem.remoteBackground#131419
statusBarItem.remoteForeground#838FAB
tab.activeBackground#13141950
tab.activeBorder#8892b0
tab.activeForeground#CCD6F6
tab.activeModifiedBorder#131419
tab.border#363744
tab.inactiveBackground#13141920
tab.inactiveForeground#7391C8
tab.unfocusedActiveBackground#13141940
tab.unfocusedActiveBorder#131419
tab.unfocusedActiveForeground#7391C8
tab.unfocusedInactiveBackground#13141910
tab.unfocusedInactiveForeground#7391C87f
terminal.ansiBlack#363b54
terminal.ansiBlue#7aa2f7
terminal.ansiBrightBlack#363b54
terminal.ansiBrightBlue#7aa2f7
terminal.ansiBrightCyan#5BAF96
terminal.ansiBrightGreen#73daca
terminal.ansiBrightMagenta#bb9af7
terminal.ansiBrightRed#f7768e
terminal.ansiBrightWhite#acb0d0
terminal.ansiBrightYellow#e0af68
terminal.ansiCyan#5BAF96
terminal.ansiGreen#73daca
terminal.ansiMagenta#bb9af7
terminal.ansiRed#f7768e
terminal.ansiWhite#787c99
terminal.ansiYellow#e0af68
terminal.foreground#787c99
terminalCursor.background#131419
terminalCursor.foreground#CCD6F6
textLink.activeForeground#7dcfff
textLink.foreground#6183bb
titleBar.activeBackground#131419
titleBar.activeForeground#5F7FB0
titleBar.border#363744
titleBar.inactiveBackground#131419
titleBar.inactiveForeground#5183B6
tree.indentGuidesStroke#363744
widget.shadow#13141930

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded	#6195e3	—
entity.name.tag.jsx, entity.name.tag.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#7aa2f7	bold
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.html, entity.other.attribute-name	#DEB887	—
entity.name.tag, meta.tag.sgml, entity.other.attribute-name.html	#7391C8	—
entity.name.tag.other.html, entity.name.tag.block.any.html	#76baa8	—
text.html.derivative, punctuation.separator.key-value.html	#BBBBBB	—
support.function, storage.type.function.js, storage.type.function.python	#DEB887	—
entity.name.tag.html	—	bold
entity.name.function	#97c1cc	italic
entity.name	#7391C8	—
support.type, support.class, support.type.sys-types, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.property-name.json	#7391C8	—
support.variable.magic.python, support.function.magic.python, punctuation.definition.python	#7b93a5	—
storage.type.class, storage.type.function	#BBBBBB	—
storage.modifier	#6AACC6	—
entity.other.inherited-class	#A6ACA6
entity.name.module.js	#c0caf5	—
keyword.control.default.js.jsx	—	—
variable.other.object.js, variable.other.readwrite.js, variable.other.property.js	#5083a8
variable.other.object.property.js, variable.function, variable.function.constructor	#76baa8	—
variable.other.readwrite, variable.language.this	#6AACC6	italic
variable.parameter.js, variable.parameter.keyframe-list.css	#D6B89F	—
variable.parameter.function.language.special, variable.parameter	#8892B0	—
variable.import.parameter.js, variable.other.class.js	#c0caf5	—
meta.object-literal.key	#DEB887	—
support.other.variable	#86a0b8	—
source.js constant.other.object.key.js string.unquoted.label.js	#f77676	italic
constant.numeric, constant.language, constant.character, constant.escape	#bbbbbb	—
constant.other.symbol, constant.other.key, constant.other.object.key.js	#A6ACA6
variable.other.constant.js	#97c1cc	—
support.constant	#DEB887	—
constant.character.escape	#6C9FA8	—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, string, string.quoted.double.html, string.quoted.double.json	#76baa8	—
keyword.other.template, keyword.other.substitution, string.quoted.single.scss	#6195e3	—
url, link, uri	—	underline
string constant.other.placeholder	#BBBBBB	italic
	—	—
string.quoted.docstring.multi.python	#a0b3a2	—
string.other.link	#86a0b8	—
string.unquoted.label.js	#A6ACA6
string.quoted.single.js	#DEB887	—
string.regexp	#6C9FA8	—
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	#6eb1a0	—
keyword.control.at-rule, punctuation.terminator.rule.css, punctuation.definition.entity.css	#DCC39F	—
entity.other.attribute-name.pseudo-class, entity.name.tag.css	#DEB887	—
variable.css	#6AACC6	—
constant.other.color	#BBBBBB	—
entity.name.tag.reference.scss	#6195e3	—
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html, comment.line.number-sign.python, punctuation.definition.comment.python	#a89f9c	—
markup.bold.markdown, markup.italic.markdown, markup.underline, markup.strike, markup.raw.block, meta.dummy.line-break, meta.separator, punctuation.definition.bold.markdown	#aa9061	—
markup.heading, text.html.markdown, punctuation.definition.list_item.markdown, punctuation.definition.heading.markdown, punctuation.definition.link.markdown	#a6aca6	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown, entity.name.section.markdown, markup.inline.raw.string.markdown	#748a6c	—
variable.language.fenced.markdown, markup.raw.block, string.other.link.description.title.markdown	#6F8865	—
markup.fenced_code.block.markdown, markup.italic.markdown	#76baa8	—
text.html.markdown markup.inline.raw.markdown, punctuation.definition.raw.markdown	#9FA8DA	—
punctuation.definition.markdown	#a2cabd	—
markup.table	#86a0b8	—
text.html.markdown meta.dummy.line-break	#565f89	—
markup.quote punctuation.definition.blockquote.markdown	#4e5579	—
markup.quote	—	italic
constant.other.reference.link.markdown	#73daca	—
meta.separator	#A7A8AF	bold
markup.underline, markup.bold	#aa9061	—
markup.deleted.git_gutter	#ff6b6b	—
markup.inserted.git_gutter	#A6ACA6
markup.changed.git_gutter	#f8dc81	—
markup.inserted	#449dab	—
markup.deleted	#914c54	—
markup.changed	#6183bb	—
invalid.deprecated	#e88a8a	—
invalid, invalid.illegal	#ff6b6b	—
keyword.control.flow, keyword.control.loop, keyword.control.trycatch, keyword.control.async, keyword.operator.logical, keyword.operator.comparison, keyword.operator.ternary, keyword.operator.assignment.compound	—	—
keyword.operator.assignment, keyword.operator.new, keyword.operator.arithmetic, punctuation.separator, keyword.other.unit, keyword.other	#BBBBBB	—
punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js, keyword.operator.assignment.js	#DCC39F	—
keyword.other.special-method, meta.class-method.js entity.name.function.js, source.sass keyword.control	#76baa8	—
keyword.control.import, keyword.control.export	—	—
entity.name.type.module.js	#6195e3	—
storage.type.js	#5083a8
meta.group.braces.curly	#A6ACA6
keyword.control.conditional.js	#DEB887	—
source.scss keyword.control	#6F8865	—
storage.modifier.async.js	#6183bb	—
punctuation.definition	#a6aca6	—
token.info-token	#6aacc6	—
token.warn-token	#f8dc81	—
token.error-token	#ff6b6b	—
token.debug-token	#7a8b78	—