Dark-

Name: Dark-
Author: Néstor Sancho

Publisher: Néstor SanchoThemes in package: 5

Simplified versions of the default Dark (Visual Studio) theme, with less syntax highlight

Open in VS Code GitHub

Color themes

VS Code preview

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

Dark- — Dark- Modern (Flat UI)

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.

actionBar.toggledBackground#383a49
activityBar.activeBorder#0078D4
activityBar.background#181818
activityBar.foreground#D7D7D7
activityBar.inactiveForeground#868686
activityBarBadge.background#007ACC
activityBarBadge.foreground#FFFFFF
badge.background#616161
badge.foreground#F8F8F8
button.background#0078D4
button.foreground#FFFFFF
button.hoverBackground#026EC1
button.secondaryBackground#313131
button.secondaryForeground#CCCCCC
button.secondaryHoverBackground#3C3C3C
chat.slashCommandBackground#34414B
chat.slashCommandForeground#40A6FF
checkbox.background#313131
checkbox.border#6B6B6B
debugToolBar.background#181818
descriptionForeground#9D9D9D
dropdown.background#313131
dropdown.foreground#CCCCCC
dropdown.listBackground#1F1F1F
editor.background#1E1E1E
editor.findMatchBackground#9E6A03
editor.foreground#D4D4D4
editor.inactiveSelectionBackground#3A3D41
editor.selectionHighlightBackground#ADD6FF26
editorGroup.border#FFFFFF17
editorGroupHeader.tabsBackground#181818
editorGutter.addedBackground#2EA043
editorGutter.deletedBackground#F85149
editorGutter.modifiedBackground#0078D4
editorIndentGuide.activeBackground1#707070
editorIndentGuide.background1#404040
editorLineNumber.activeForeground#d4d4d460
editorLineNumber.foreground#d4d4d430
editorRuler.foreground#d4d4d430
editorWhitespace.foreground#d4d4d430
editorWidget.background#202020
errorForeground#F85149
foreground#CCCCCC
icon.foreground#CCCCCC
input.background#313131
input.foreground#CCCCCC
input.placeholderForeground#A6A6A6
inputOption.activeBackground#2489DB82
keybindingLabel.foreground#CCCCCC
list.activeSelectionIconForeground#FFF
list.dropBackground#383B3D
menu.background#252526
menu.border#454545
menu.foreground#CCCCCC
menu.selectionBackground#0078d4
menu.separatorBackground#454545
notificationCenterHeader.background#1F1F1F
notificationCenterHeader.foreground#CCCCCC
notifications.background#1F1F1F
notifications.foreground#CCCCCC
panel.background#181818
panel.border#2B2B2B
panelTitle.activeBorder#0078D4
panelTitle.activeForeground#CCCCCC
panelTitle.inactiveForeground#9D9D9D
peekViewEditor.background#1F1F1F
peekViewEditor.matchHighlightBackground#BB800966
peekViewResult.background#1F1F1F
peekViewResult.matchHighlightBackground#BB800966
ports.iconRunningProcessForeground#369432
progressBar.background#0078D4
quickInput.background#222222
quickInput.foreground#CCCCCC
settings.dropdownBackground#313131
settings.headerForeground#FFFFFF
settings.modifiedItemIndicator#BB800966
sideBar.background#181818
sideBar.foreground#CCCCCC
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#ccc3
sideBarSectionHeader.foreground#CCCCCC
sideBarTitle.foreground#BBBBBB
statusBar.background#181818
statusBar.debuggingBackground#0078D4
statusBar.debuggingForeground#FFFFFF
statusBar.foreground#CCCCCC
statusBar.noFolderBackground#1F1F1F
statusBarItem.prominentBackground#6E768166
statusBarItem.remoteBackground#16825D
statusBarItem.remoteForeground#FFF
tab.activeBackground#1F1F1F
tab.activeBorderTop#0078D4
tab.activeForeground#FFFFFF
tab.hoverBackground#1F1F1F
tab.inactiveBackground#181818
tab.inactiveForeground#9D9D9D
tab.lastPinnedBorder#ccc3
tab.selectedBackground#222222
tab.selectedForeground#ffffffa0
tab.unfocusedActiveBorderTop#2B2B2B
tab.unfocusedHoverBackground#1F1F1F
terminal.background#0f0f0f
terminal.foreground#CCCCCC
terminal.inactiveSelectionBackground#3A3D41
terminal.tab.activeBorder#0078D4
textBlockQuote.background#2B2B2B
textCodeBlock.background#2B2B2B
textLink.activeForeground#4daafc
textLink.foreground#4daafc
textPreformat.background#3C3C3C
textPreformat.foreground#D0D0D0
textSeparator.foreground#21262D
titleBar.activeBackground#181818
titleBar.activeForeground#CCCCCC
titleBar.inactiveBackground#1F1F1F
titleBar.inactiveForeground#9D9D9D
welcomePage.progress.foreground#0078D4
welcomePage.tileBackground#2B2B2B
widget.border#303031

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, keyword.command.rem.batchfile	#cccccc80	—
keyword.operator.at.batchfile, storage.type.annotation.java, punctuation.definition.annotation.java, punctuation.definition.annotation-arguments, storage.type.generic.java, punctuation.bracket.angle.java, keyword.other.documentation.javadoc.java, fenced_code.block.language	#ccccccc0	italic
keyword.operator, storage.type.function.arrow, storage.modifier.array.bracket, storage.modifier.import, storage.modifier.package, storage.type.java, storage.type.object.array.java, support.type.property-name, punctuation.support.type.property-name, string.other.link.description.markdown, string.other.link.title.markdown, entity.name.tag.yaml	#cccccc	—
comment, punctuation.definition.comment, keyword.command.rem.batchfile	#cccccc80	—
keyword.operator.at.batchfile, storage.type.annotation.java, punctuation.definition.annotation.java, punctuation.definition.annotation-arguments, storage.type.generic.java, punctuation.bracket.angle.java, keyword.other.documentation.javadoc.java, fenced_code.block.language	#ccccccc0	italic
keyword.operator, storage.type.function.arrow, storage.modifier.array.bracket, storage.modifier.import, storage.modifier.package, storage.type.java, storage.type.object.array.java, support.type.property-name, punctuation.support.type.property-name, string.other.link.description.markdown, string.other.link.title.markdown, entity.name.tag.yaml	#cccccc	—
keyword.control, keyword.operator.ternary, storage.type.class, storage.type.function, storage.type.interface	#569cd6	—
keyword.other.import.java, keyword.other.package.java, meta.method.body.java storage.modifier.java, keyword.control.import, keyword.control.type, keyword.control.from	#569cd6	—
keyword, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.wordlike, storage.modifier, keyword.operator.logical.python, support.function.aggregate.sql	#569cd6	—
storage.type, storage.type.built-in.primitive, storage.type.primitive, storage.type.struct, support.type.builtin, support.type.primitive	#569cd6	—
constant.language, variable.language	#569cd6	italic
keyword.operator, keyword.control.ternary, storage.type.function.arrow, storage.modifier.array.bracket, storage.modifier.import.java, storage.modifier.package.java, storage.type.java, storage.type.object.array.java, variable.language.wildcard.java	#d4d4d4	—
constant, support.type.register, variable.parameter.batchfile, variable.parameter.repeat.batchfile	#b5cea8	—
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent, keyword.other.unit	#b5cea8	—
string, punctuation.definition.string	#ce9178	—
keyword.other.documentation.javadoc.java, storage.type.class.jsdoc	#d4d4d4a0	italic
entity.name.tag, punctuation.definition.tag	#569cd6	—
entity.name.tag.yaml, support.type.property-name, punctuation.support.type.property-name	#d4d4d4	—
keyword.mnemonic.z80asm, keyword.control.z80asm, support.type.flag.z80asm	#569cd6	—
keyword.command.batchfile, keyword.control.statement.batchfile, keyword.operator.logical.batchfile, keyword.operator.pipe.batchfile, keyword.operator.redirection.batchfile	#569cd6	—
keyword.command.rem.batchfile, keyword.operator.at.batchfile	#d4d4d480	—
keyword.control.directive	#569cd6	—
entity.name.scope-resolution, support.other.attribute.cpp	#d4d4d4c0	italic
punctuation.separator.scope-resolution	#d4d4d4c0	—
variable.language.makefile	#569cd6	—
string.interpolated.makefile	#ce9178	—
punctuation.definition.heading, punctuation.definition.list.begin, punctuation.definition.link.description, punctuation.definition.link.title, punctuation.definition.metadata.markdown, punctuation.definition.quote	#569cd6	—
markup.inline.raw.string, meta.link.inline.markdown, meta.image.inline.markdown, punctuation.definition.markdown, punctuation.definition.raw.markdown	#ce9178	—
string.other.link.description.markdown, fenced_code.block.language	#d4d4d4c0	italic
string.other.link.title.markdown	#d4d4d4	—
storage.type.annotation.java, punctuation.definition.annotation.java, punctuation.definition.annotation-arguments, constant.other.key.java, storage.type.generic.java, storage.type.generic.wildcard.java, punctuation.bracket.angle.java	#d4d4d4c0	italic
meta.type.parameters.ts, meta.type.parameters.ts storage.modifier.ts	#d4d4d4c0	italic
comment, punctuation.definition.comment, keyword.command.rem.batchfile	#cccccc80	—
keyword.operator.at.batchfile, storage.type.annotation.java, punctuation.definition.annotation.java, punctuation.definition.annotation-arguments, storage.type.generic.java, punctuation.bracket.angle.java, keyword.other.documentation.javadoc.java, fenced_code.block.language	#ccccccc0	italic
keyword.operator, storage.type.function.arrow, storage.modifier.array.bracket, storage.modifier.import, storage.modifier.package, storage.type.java, storage.type.object.array.java, support.type.property-name, punctuation.support.type.property-name, string.other.link.description.markdown, string.other.link.title.markdown, entity.name.tag.yaml	#cccccc	—
keyword.control, keyword.operator.ternary, storage.type.class, storage.type.function, storage.type.interface	#569cd6	—
keyword.other.import.java, keyword.other.package.java, meta.method.body.java storage.modifier.java, keyword.control.import, keyword.control.type, keyword.control.from	#569cd6	—
keyword, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.wordlike, storage.modifier, keyword.operator.logical.python, support.function.aggregate.sql	#569cd6	—
storage.type, storage.type.built-in.primitive, storage.type.primitive, storage.type.struct, support.type.builtin, support.type.primitive	#569cd6	—
constant.language, variable.language	#569cd6	italic
keyword.operator, keyword.control.ternary, storage.type.function.arrow, storage.modifier.array.bracket, storage.modifier.import.java, storage.modifier.package.java, storage.type.java, storage.type.object.array.java, variable.language.wildcard.java	#d4d4d4	—
constant, support.type.register, variable.parameter.batchfile, variable.parameter.repeat.batchfile	#b5cea8	—
constant.numeric, keyword.operator.plus.exponent, keyword.operator.minus.exponent, keyword.other.unit	#b5cea8	—
string, punctuation.definition.string	#ce9178	—
keyword.other.documentation.javadoc.java, storage.type.class.jsdoc	#d4d4d4a0	italic
entity.name.tag, punctuation.definition.tag	#569cd6	—
entity.name.tag.yaml, support.type.property-name, punctuation.support.type.property-name	#d4d4d4	—
keyword.mnemonic.z80asm, keyword.control.z80asm, support.type.flag.z80asm	#569cd6	—
keyword.command.batchfile, keyword.control.statement.batchfile, keyword.operator.logical.batchfile, keyword.operator.pipe.batchfile, keyword.operator.redirection.batchfile	#569cd6	—
keyword.command.rem.batchfile, keyword.operator.at.batchfile	#d4d4d480	—
keyword.control.directive	#569cd6	—
entity.name.scope-resolution, support.other.attribute.cpp	#d4d4d4c0	italic
punctuation.separator.scope-resolution	#d4d4d4c0	—
variable.language.makefile	#569cd6	—
string.interpolated.makefile	#ce9178	—
punctuation.definition.heading, punctuation.definition.list.begin, punctuation.definition.link.description, punctuation.definition.link.title, punctuation.definition.metadata.markdown, punctuation.definition.quote	#569cd6	—
markup.inline.raw.string, meta.link.inline.markdown, meta.image.inline.markdown, punctuation.definition.markdown, punctuation.definition.raw.markdown	#ce9178	—
string.other.link.description.markdown, fenced_code.block.language	#d4d4d4c0	italic
string.other.link.title.markdown	#d4d4d4	—
storage.type.annotation.java, punctuation.definition.annotation.java, punctuation.definition.annotation-arguments, constant.other.key.java, storage.type.generic.java, storage.type.generic.wildcard.java, punctuation.bracket.angle.java	#d4d4d4c0	italic
meta.type.parameters.ts, meta.type.parameters.ts storage.modifier.ts	#d4d4d4c0	italic
emphasis, markup.italic	—	italic
strong, markup.bold, markup.bold string	—	bold
markup.italic markup.bold, markup.bold markup.italic, markup.italic markup.bold string, markup.bold markup.italic string	—	italic bold
markup.underline	—	underline
markup.italic markup.underline, markup.underline markup.italic	—	italic underline
markup.bold markup.underline, markup.underline markup.bold	—	bold underline
markup.italic markup.bold markup.underline, markup.italic markup.underline markup.bold, markup.bold markup.italic markup.underline, markup.underline markup.italic markup.bold, markup.bold markup.underline markup.italic, markup.underline markup.bold markup.italic	—	italic bold underline
markup.strikethrough	—	strikethrough
markup.italic markup.strikethrough, markup.strikethrough markup.italic	—	italic strikethrough
markup.bold markup.strikethrough, markup.strikethrough markup.bold	—	bold strikethrough
markup.italic markup.bold markup.strikethrough, markup.bold markup.italic markup.strikethrough, markup.italic markup.strikethrough markup.bold, markup.bold markup.strikethrough markup.italic, markup.strikethrough markup.italic markup.bold, markup.strikethrough markup.bold markup.italic	—	italic bold strikethrough
markup.underline markup.strikethrough, markup.strikethrough markup.underline	—	underline strikethrough
markup.italic markup.underline markup.strikethrough, markup.underline markup.italic markup.strikethrough, markup.italic markup.strikethrough markup.underline, markup.underline markup.strikethrough markup.italic, markup.strikethrough markup.italic markup.underline, markup.strikethrough markup.underline markup.italic	—	italic underline strikethrough
markup.bold markup.underline markup.strikethrough, markup.underline markup.bold markup.strikethrough, markup.bold markup.strikethrough markup.underline, markup.underline markup.strikethrough markup.bold, markup.strikethrough markup.bold markup.underline, markup.strikethrough markup.underline markup.bold	—	bold underline strikethrough
markup.italic markup.bold markup.underline markup.strikethrough, markup.italic markup.underline markup.bold markup.strikethrough, markup.bold markup.italic markup.underline markup.strikethrough, markup.underline markup.italic markup.bold markup.strikethrough, markup.bold markup.underline markup.italic markup.strikethrough, markup.underline markup.bold markup.italic markup.strikethrough, markup.italic markup.bold markup.strikethrough markup.underline, markup.italic markup.underline markup.strikethrough markup.bold, markup.bold markup.italic markup.strikethrough markup.underline, markup.underline markup.italic markup.strikethrough markup.bold, markup.bold markup.underline markup.strikethrough markup.italic, markup.underline markup.bold markup.strikethrough markup.italic, markup.italic markup.strikethrough markup.bold markup.underline, markup.italic markup.strikethrough markup.underline markup.bold, markup.bold markup.strikethrough markup.italic markup.underline, markup.underline markup.strikethrough markup.italic markup.bold, markup.bold markup.strikethrough markup.underline markup.italic, markup.underline markup.strikethrough markup.bold markup.italic, markup.strikethrough markup.italic markup.bold markup.underline, markup.strikethrough markup.italic markup.underline markup.bold, markup.strikethrough markup.bold markup.italic markup.underline, markup.strikethrough markup.underline markup.italic markup.bold, markup.strikethrough markup.bold markup.underline markup.italic, markup.strikethrough markup.underline markup.bold markup.italic	—	italic bold underline strikethrough
invalid	#f44747	—
comment, punctuation.definition.comment	#d4d4d480	italic

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