Dark Ink Color Theme

Name: Dark Ink Color Theme
Author: DarkMannn

Publisher: DarkMannnThemes in package: 5

Dark, minimalistic VSCode theme with eye-soothing, gentle shades of ink.

GitHub

Color themes

VS Code preview

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

Dark Ink Color Theme — Dark Ink Lighter

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#fdfdfd
activityBar.background#fdfdfd
activityBar.border#00000000
activityBar.foreground#3f79cb
activityBar.inactiveForeground#adadad
activityBarBadge.background#3f79cb
activityBarBadge.foreground#fdfdfd
badge.background#3f79cb
badge.foreground#fdfdfd
breadcrumb.activeSelectionForeground#000000
breadcrumb.background#fdfdfd
breadcrumb.focusForeground#000000
breadcrumb.foreground#9d9d9d
button.background#3d5981
button.foreground#fdfdfd
button.hoverBackground#3d5981a7
button.secondaryBackground#000000
button.secondaryForeground#fdfdfd
button.secondaryHoverBackground#00000083
checkbox.background#fdfdfd
checkbox.border#3d5981
checkbox.foreground#000000
debugExceptionWidget.background#3d5981
debugExceptionWidget.border#00000000
debugToolBar.background#bdbdbd
debugToolBar.border#00000000
diffEditor.border#9d9d9d
diffEditor.insertedTextBackground#66b28b33
diffEditor.insertedTextBorder#00000000
diffEditor.removedTextBackground#ff6e6e33
dropdown.background#fdfdfd
dropdown.border#3d5981
dropdown.foreground#000000
editor.background#fdfdfd
editor.findMatchBackground#fdfdfd
editor.findMatchBorder#3d5981
editor.findMatchHighlightBackground#00000000
editor.findMatchHighlightBorder#000000
editor.findRangeHighlightBackground#7d7d7d4a
editor.findRangeHighlightBorder#00000000
editor.foldBackground#9d9d9d66
editor.foreground#3d5981
editor.hoverHighlightBackground#9d9d9daa
editor.inactiveSelectionBackground#9d9d9d4a
editor.lineHighlightBackground#dfe7f9
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#9d9d9db1
editor.rangeHighlightBorder#00000000
editor.selectionBackground#7d7d7d5a
editor.selectionHighlightBackground#9d9d9d7a
editor.selectionHighlightBorder#00000000
editor.wordHighlightBackground#9d9d9daa
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#9d9d9d7a
editor.wordHighlightStrongBorder#00000000
editorBracketHighlight.foreground1#bdbdbd
editorBracketHighlight.foreground2#9d9d9d
editorBracketHighlight.foreground3#bdbdbd
editorBracketHighlight.foreground4#9d9d9d
editorBracketHighlight.foreground5#bdbdbd
editorBracketHighlight.foreground6#9d9d9d
editorBracketHighlight.unexpectedBracket.foreground#9d9d9d
editorBracketMatch.background#9d9d9daf
editorBracketMatch.border#00000000
editorBracketPairGuide.background1#bdbdbd
editorBracketPairGuide.background2#9d9d9d
editorBracketPairGuide.background3#bdbdbd
editorBracketPairGuide.background4#9d9d9d
editorBracketPairGuide.background5#bdbdbd
editorBracketPairGuide.background6#9d9d9d
editorCodeLens.foreground#9d9d9d
editorCursor.background#fdfdfd
editorCursor.foreground#000000
editorError.background#B73A3400
editorError.border#00000000
editorError.foreground#ff8080c5
editorGroup.border#00000000
editorGroup.emptyBackground#fdfdfd
editorGroupHeader.border#00000000
editorGroupHeader.tabsBackground#fdfdfd
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#37b05b
editorGutter.background#fdfdfd
editorGutter.commentRangeForeground#000000
editorGutter.deletedBackground#ff8080
editorGutter.foldingControlForeground#000000
editorGutter.modifiedBackground#7895c7
editorHoverWidget.background#dfe7f9
editorHoverWidget.border#dfe7f900
editorHoverWidget.foreground#4d5b72
editorIndentGuide.activeBackground1#3d5981
editorIndentGuide.background1#9d9d9daa
editorInfo.background#4490BF00
editorInfo.border#4490BF00
editorInfo.foreground#7895c7c5
editorLineNumber.activeForeground#000000
editorLineNumber.foreground#9d9d9d
editorLink.activeForeground#3d5981
editorMarkerNavigation.background#fdfdfd
editorMarkerNavigationError.background#ff8080
editorMarkerNavigationInfo.background#7895c7
editorMarkerNavigationWarning.background#cdcd74
editorOverviewRuler.background#00000000
editorOverviewRuler.border#00000000
editorRuler.foreground#9d9d9d
editorSuggestWidget.background#dfe7f9
editorSuggestWidget.border#dfe7f900
editorSuggestWidget.foreground#4d5b72
editorSuggestWidget.highlightForeground#3f79cb
editorSuggestWidget.selectedBackground#3d598150
editorWarning.background#A9904000
editorWarning.border#00000000
editorWarning.foreground#cdcd74c5
editorWhitespace.foreground#9d9d9d7c
editorWidget.background#dfe7f9
editorWidget.foreground#4d5b72
editorWidget.resizeBorder#3f79cb
focusBorder#3f79cb00
foreground#000000
gitDecoration.addedResourceForeground#81b88b
gitDecoration.conflictingResourceForeground#8282c4
gitDecoration.deletedResourceForeground#c06c5d
gitDecoration.ignoredResourceForeground#8c8c8c
gitDecoration.modifiedResourceForeground#e2c08d
gitDecoration.stageDeletedResourceForeground#9f4434
gitDecoration.stageModifiedResourceForeground#ab7f3d
gitDecoration.submoduleResourceForeground#4b7ead
gitDecoration.untrackedResourceForeground#4b8a61
icon.foreground#3f79cb
input.background#fdfdfd
input.border#3d5981
input.foreground#000000
input.placeholderForeground#9d9d9d
inputOption.activeBackground#9d9d9d
inputOption.activeBorder#00000000
inputOption.activeForeground#000000
list.activeSelectionBackground#3d598150
list.activeSelectionForeground#000000
list.dropBackground#dfe7f9
list.focusBackground#3d598150
list.focusForeground#000000
list.highlightForeground#3f79cb
list.hoverBackground#3d598180
list.hoverForeground#000000
list.inactiveSelectionBackground#dfe7f9
list.inactiveSelectionForeground#000000
listFilterWidget.background#9d9d9d
listFilterWidget.noMatchesOutline#00000000
listFilterWidget.outline#00000000
menu.background#dfe7f9
menu.border#9d9d9d
menu.foreground#4d5b72
menu.selectionBackground#3d598150
menu.selectionBorder#00000000
menu.selectionForeground#000000
menu.separatorBackground#9d9d9d
menubar.selectionBackground#dfe7f9
menubar.selectionBorder#4d5b7200
menubar.selectionForeground#4d5b72
merge.commonContentBackground#282828aa
merge.commonHeaderBackground#383838aa
merge.currentContentBackground#27403Baa
merge.currentHeaderBackground#367366aa
merge.incomingContentBackground#28384Baa
merge.incomingHeaderBackground#395F8Faa
minimap.background#fdfdfd
minimap.errorHighlight#ff8080c5
minimap.findMatchHighlight#fdfdfdaa
minimap.selectionHighlight#9d9d9d7a
minimap.warningHighlight#cdcd74c5
minimapGutter.addedBackground#37b05b
minimapGutter.deletedBackground#ff8080
minimapGutter.modifiedBackground#7895c7
notificationCenter.border#9d9d9d
notificationCenterHeader.background#fdfdfd
notificationCenterHeader.foreground#3d5981
notifications.background#fdfdfd
notifications.border#9d9d9d
notifications.foreground#000000
notificationsErrorIcon.foreground#ff8080
notificationsInfoIcon.foreground#7895c7
notificationsWarningIcon.foreground#cdcd74
notificationToast.border#00000000
panel.background#fdfdfd
panel.border#9d9d9d
panelSection.border#3d5981
panelTitle.activeBorder#3f79cb
panelTitle.activeForeground#3f79cb
panelTitle.inactiveForeground#adadad
peekView.border#3d5981
peekViewEditor.background#dfe7f9
peekViewEditor.matchHighlightBackground#3d59813d
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#dfe7f9
peekViewResult.background#fdfdfd
peekViewResult.fileForeground#000000
peekViewResult.lineForeground#9d9d9d
peekViewResult.matchHighlightBackground#3d59813d
peekViewResult.selectionBackground#3d59813d
peekViewResult.selectionForeground#000000
peekViewTitle.background#fdfdfd
peekViewTitleDescription.foreground#3d5981
peekViewTitleLabel.foreground#000000
pickerGroup.border#3d598100
pickerGroup.foreground#3d5981
progressBar.background#3f79cb
scrollbar.shadow#9d9d9d
scrollbarSlider.activeBackground#55555566
scrollbarSlider.background#9d9d9d
scrollbarSlider.hoverBackground#666666b3
selection.background#3d598150
settings.focusedRowBackground#00000014
settings.headerForeground#000000
sideBar.background#fdfdfd
sideBar.border#00000000
sideBar.dropBackground#bdbdbd70
sideBar.foreground#000000
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#000000
sideBarTitle.foreground#3d5981
statusBar.background#dfe7f9
statusBar.border#00000000
statusBar.debuggingBackground#9d9d9d
statusBar.debuggingBorder#00000000
statusBar.debuggingForeground#000000
statusBar.foreground#4d5b72
statusBar.noFolderBackground#000000
statusBar.noFolderBorder#00000000
statusBar.noFolderForeground#fdfdfd
statusBarItem.activeBackground#3d598180
statusBarItem.hoverBackground#3d598150
statusBarItem.remoteBackground#fdfdfd
statusBarItem.remoteForeground#000000
tab.activeBackground#fdfdfd
tab.activeBorder#3f79cb
tab.activeBorderTop#fdfdfd
tab.activeForeground#3f79cb
tab.border#3d598100
tab.hoverBackground#dfe7f9
tab.hoverBorder#00000000
tab.hoverForeground#4d5b72
tab.inactiveBackground#fdfdfd
tab.inactiveForeground#9d9d9d
terminal.ansiBlack#000000
terminal.ansiBlue#3d5981
terminal.ansiBrightBlack#7d7d7d
terminal.ansiBrightBlue#3f79cb
terminal.ansiBrightCyan#00ffff
terminal.ansiBrightGreen#67FF8A
terminal.ansiBrightMagenta#EC84FF
terminal.ansiBrightRed#e64444
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#d9ce9b
terminal.ansiCyan#50d2f7
terminal.ansiGreen#33D057
terminal.ansiMagenta#E557F9
terminal.ansiRed#ff8080
terminal.ansiWhite#fdfdfd
terminal.ansiYellow#cdcd74
terminal.border#3d5981
terminal.foreground#000000
terminal.selectionBackground#bdbdbd
terminalCursor.background#bdbdbd
terminalCursor.foreground#000000
textLink.activeForeground#3d5981a7
textLink.foreground#3d5981
titleBar.activeBackground#dfe7f9
titleBar.activeForeground#4d5b72
titleBar.border#00000000
titleBar.inactiveBackground#fdfdfd
titleBar.inactiveForeground#adadad
tree.indentGuidesStroke#9d9d9d
walkThrough.embeddedEditorBackground#fdfdfd50
widget.shadow#9d9d9d00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
constant.language.null.ts, constant.language.null.js, constant.language.undefined.ts, constant.language.undefined.js, constant.language.boolean.true.ts, constant.language.boolean.true.js, constant.language.boolean.false.ts, constant.language.boolean.false.js, constant.language.nan.ts, constant.language.nan.js, constant.language.infinity.ts, constant.language.infinity.js, constant.language.void.ts, constant.language.void.js	#3f79cb	—
source	#3d5981	—
support.type.property-name.css	#3d5981	—
entity.other.attribute-name.id.css, entity.name.tag.css, meta.property-value.css, support.constant.property-value.css, punctuation.definition.entity.css	#3f79cb	—
text.html.derivative, entity.name.tag.html	#3f79cb	—
entity.name.type.class	#3f79cb	—
entity.name.type.interface, entity.name.type	#000000	—
entity.name.type.struct	#000000	—
entity.name.type.enum	#000000	—
meta.object-literal.key	#3d5981	—
entity.name.function.method, meta.function.method	#3f79cb	—
entity.name.function, support.function, meta.function-call.generic	#3f79cb	—
variable, meta.variable, variable.other.object.property, variable.other.readwrite.alias	#000000	—
variable.other.object	#000000	—
variable.other.global, variable.language.this	#3d5981	—
variable.other.local	#000000	—
variable.parameter, meta.parameter	#000000	—
variable.other.property, meta.property	#3d5981	—
string, string.other.link, markup.inline.raw.string.markdown	#9d9d9d	—
constant.character.escape, constant.other.placeholder	#3f79cb	—
keyword	#3d5981	—
keyword.control.import, keyword.control.from, keyword.import	#3d5981	—
storage.modifier, keyword.modifier, storage.type	#3d5981	—
comment, punctuation.definition.comment	#dbd4c6	—
comment.documentation, comment.line.documentation	#dbd4c6	—
constant.numeric	#9d9d9d	—
constant.language.boolean, constant.language.json	#9d9d9d	—
keyword.operator	#3f79cb	—
entity.name.function.preprocessor, meta.preprocessor	#000000	—
meta.preprocessor	#000000	—
markup.underline.link	#3f79cb	—
entity.name.tag	#3d5981	—
support.class.component	#3f79cb	—
entity.other.attribute-name, meta.attribute	#3d5981	—
support.type	#3d5981	—
variable.other.constant, variable.readonly	#000000	—
entity.name.label, punctuation.definition.label	#000000	—
entity.name.namespace, storage.modifier.namespace, markup.bold.markdown	#000000	—
entity.name.module, storage.modifier.module	#3d5981	—
variable.type.parameter, variable.parameter.type	#3f79cb	—
keyword.control.exception, keyword.control.trycatch	#3d5981	—
meta.decorator, punctuation.decorator, entity.name.function.decorator	#000000	—
variable.function	#3f79cb	—
punctuation, punctuation.terminator, punctuation.definition.tag, punctuation.separator, punctuation.definition.string, punctuation.section.block	#3d5981	—
punctuation.definition.string	#9d9d9d	—

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