TypeDark

Name: TypeDark
Author: BonnyAD9

Publisher: BonnyAD9Themes in package: 4

Dark theme with useful semantic highlighting.

GitHub

Color themes

VS Code preview

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

TypeDark — TypeDark Cyan

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#181818
activityBar.border#555555
activityBar.foreground#11b394
activityBar.inactiveForeground#555555
activityBarBadge.background#11b394
activityBarBadge.foreground#101010
badge.background#181818
badge.foreground#555555
button.background#11b394
button.foreground#222222
button.hoverBackground#12cca9
checkbox.background#181818
checkbox.border#555555
checkbox.foreground#eeeeee
debugExceptionWidget.background#181818
debugExceptionWidget.border#555555
dropdown.background#181818
dropdown.border#555555
dropdown.foreground#eeeeee
editor.background#222222
editor.foreground#eeeeee
editor.hoverHighlightBackground#3acbaf30
editor.lineHighlightBackground#1c1c1c
editor.lineHighlightBorder#333333
editor.selectionBackground#3acbaf40
editor.selectionHighlightBackground#12cca910
editor.selectionHighlightBorder#11b394
editor.wordHighlightStrongBackground#12cca930
editorBracketHighlight.foreground1#cccc8e
editorBracketHighlight.foreground2#8ecccc
editorBracketHighlight.foreground3#cc8ecc
editorBracketPairGuide.activeBackground1#cccc8e
editorBracketPairGuide.activeBackground2#8ecccc
editorBracketPairGuide.activeBackground3#cc8ecc
editorGroup.border#555555
editorGroup.dropBackground#12cca910
editorGroupHeader.tabsBackground#181818
editorGroupHeader.tabsBorder#555555
editorIndentGuide.activeBackground1#11b394
editorLineNumber.activeForeground#3b9987
editorLineNumber.foreground#555555
editorSuggestWidget.background#181818
editorSuggestWidget.border#555555
editorSuggestWidget.focusHighlightForeground#11b394
editorSuggestWidget.foreground#eeeeee
editorSuggestWidget.highlightForeground#11b394dd
editorWhitespace.foreground#555555
focusBorder#11b394
foreground#eeeeee
input.background#181818
input.border#555555
input.foreground#eeeeee
input.placeholderForeground#555555
inputOption.activeBorder#11b394
keybindingLabel.background#181818
keybindingLabel.border#555555
keybindingLabel.bottomBorder#555555
keybindingLabel.foreground#eeeeee
list.activeSelectionBackground#12cca910
list.filterMatchBackground#12cca910
list.filterMatchBorder#11b394
list.highlightForeground#11b394
list.hoverBackground#12cca905
list.inactiveSelectionBackground#12cca920
listFilterWidget.background#12cca955
listFilterWidget.noMatchesOutline#dd7700
listFilterWidget.outline#11b394
menu.background#181818
menu.border#555555
menu.foreground#eeeeee
menu.separatorBackground#555555
menubar.selectionBackground#222222
menubar.selectionBorder#555555
minimap.background#181818
minimap.foregroundOpacity#000000FF
minimap.selectionHighlight#12cca9FE
minimapSlider.activeBackground#ffffff1a
minimapSlider.background#ffffff10
minimapSlider.hoverBackground#ffffff15
panel.background#181818
panel.border#555555
panel.dropBorder#11b394
panelTitle.activeBorder#11b394
panelTitle.activeForeground#eeeeee
panelTitle.inactiveForeground#555555
peekView.border#555555
peekViewEditor.background#181818
peekViewEditor.matchHighlightBackground#12cca910
peekViewEditor.matchHighlightBorder#11b39455
peekViewResult.background#181818
peekViewResult.matchHighlightBackground#12cca900
peekViewResult.selectionBackground#12cca910
peekViewTitle.background#222222
pickerGroup.border#555555
pickerGroup.foreground#eeeeee
progressBar.background#11b394
quickInput.background#222222
quickInput.foreground#eeeeee
scrollbar.shadow#000000
selection.background#12cca944
settings.modifiedItemIndicator#11b394
sideBar.background#181818
sideBar.border#555555
sideBar.foreground#eeeeee
sideBarSectionHeader.background#282828
sideBarSectionHeader.foreground#eeeeee
sideBarTitle.foreground#bbbbbb
statusBar.background#11b394
statusBar.foreground#101010
statusBar.noFolderBackground#883388
statusBar.noFolderForeground#eee
tab.activeBackground#222222
tab.activeBorder#222222
tab.border#555555
tab.hoverBorder#11b394
tab.inactiveBackground#1a1a1a
tab.inactiveForeground#555555
terminal.ansiBlack#000
terminal.ansiBlue#56e
terminal.ansiBrightBlack#777
terminal.ansiBrightBlue#308eea
terminal.ansiBrightCyan#6cc
terminal.ansiBrightGreen#23d16a
terminal.ansiBrightMagenta#f7f
terminal.ansiBrightRed#f55
terminal.ansiBrightWhite#fff
terminal.ansiBrightYellow#ff5
terminal.ansiCyan#388
terminal.ansiGreen#383
terminal.ansiMagenta#848
terminal.ansiRed#833
terminal.ansiWhite#ccc
terminal.ansiYellow#883
textLink.foreground#11b394
titleBar.activeBackground#181818
titleBar.activeForeground#eeeeee
titleBar.border#555555
titleBar.inactiveBackground#222222
titleBar.inactiveForeground#888888
toolbar.activeBackground#222222
toolbar.hoverBackground#444444
tree.indentGuidesStroke#12cca955

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.preprocessor string, entity.name.namespace, entity.name.section.vhdl, entity.name.type.namespace, support.other.namespace, entity.name.type.package	#19b6ff	—
entity.name.function, support.function, entity.name.label.cs	—	italic
variable.parameter, variable.other.makefile, meta.property-name.css, variable.other.positional, variable.other.metavariable.name, entity.name.function.io.brainfuck, constant.other.option.dash.shell, constant.other.option	#ffa632	italic
punctuation.definition.directive, copula	#7faeff	—
keyword.operator, storage.modifier.pointer.cpp, source.makefile punctuation, storage.type.function.arrow.js, punctuation.separator.key-value.html, punctuation.definition.variable.php, keyword.control.cshtml.transition, source.prolog keyword.control, storage.type.function.arrow.ts, punctuation.separator.statement.background.shell, punctuation.math.operator	#e5dba0	—
comment.block, punctuation.definition.comment, comment.ebnf	#7f7f7f	italic
comment.line, comment meta.paragraph, comment.source	#666666	italic
keyword.default, keyword.control.context, keyword.control.flow, keyword.control.conditional, keyword.control.exception, keyword.control.loop, keyword.control.directive, keyword.control.twig, keyword.control.awk, source.cpp keyword.control, source.cpp keyword.other, source.python keyword.control, source.java keyword.control, source.java keyword.other, source.c keyword.control, source.c keyword.other, source.shell keyword.control, source.php keyword.control, source.php keyword.other, source.oraclesql keyword.control, source.zig keyword.control, source.js keyword.control, source.ts keyword.control, source.cs storage.type, source.cs storage.modifier, source.cs keyword.other, source.go keyword, source.tsx keyword, source.haskell keyword, text.tex.latex keyword, source.makefile support.function, source.prolog keyword.other, source.rust keyword.control, source.rust keyword.other, source.sql keyword.other, keyword.operator.conjunction, support.type.property-name.table.toml, variable.language.this, variable.language.base, variable.language.java, variable.parameter.function.language.special.self, entity.name.tag, keyword.mnemonic, storage.modifier, storage.type.struct.cpp, storage.type, keyword.operator.quantifier.regexp, keyword.storage.zig, keyword.structure, keyword.cmake, keyword.type.go, keyword.language, source.rust variable.language, entity.name.function.macro.rules.rust, keyword.other.var.cs	#4c8dff	italic
string.quoted.double, string.template.js, string.quoted.single.js, meta.preprocessor.string.cs, source.toml string.quoted.single, string.template.ts, constant.string, string.source.cmake, string.quoted.multi, constant.character.set.regexp, string.regexp.quoted.single.python punctuation.definition.string.begin.python, string.regexp.quoted.single.python punctuation.definition.string.end.python, string.regexp, string.unquoted.heredoc, constant.character.math.tex	#e5a55b	—
constant.other.placeholder, punctuation.definition.interpolation, punctuation.definition.template-expression, punctuation.section.embedded.begin.php, string.quoted.double.html punctuation.section.tag.twig	#e0e55b	italic
invalid.illegal.placeholder, invalid.illegal.unknown-escape	#ff3232	bold italic
invalid.illegal	#ff3232	bold
string.quoted.double constant.character.escape	#ff8800	italic
string.quoted.single	#e5ce5b	—
constant.character.escape	#ffd400	italic
constant.numeric, constant.language, constant.other.color, entity.name.tag.backreference, keyword.constant	#d072e5	—
keyword.other.unit, constant.other.color punctuation.definition.constant.css, punctuation.parenthesis.begin.regexp, punctuation.parenthesis.end.regexp	#c32de5	—
variable.other.enummember, constant.enum, constant.other.class.php, invalid.illegal.exception.oraclesql, entity.source.cmake	#ccc88e	—
entity.name.type.class, support.class, support.class punctuation.definition.string, entity.name.type.vhdl, variable.other.metavariable.specifier, source.vhdl support.type, entity.name.type.type.vhdl, entity.name.command.shell, meta.class support.function.constructor, entity.other.inherited-class.php, text.aspnetcorerazor entity.name.type.cs	#28c3cc	—
entity.name.type.struct, keyword.operator.adverb, entity.name.type.rust, entity.name.type.architecture, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, entity.name.type.go	#28cc92	—
entity.name.type.enum, support.type.property-name.array	#71ce6d	—
entity.name.type.interface, text.tex.latex constant.other, entity.other.inherited-class.vhdl, source.vhdl entity.name.type.entity, support.class.mcfunction	#b0cc28	—
meta.interpolation, meta.template.expression.js, meta.template.expression.ts, variable.parameter.label.asm, support.class.math.block, entity.name.type.namespace punctuation.separator.inheritance, meta.use punctuation.separator.inheritance, text.aspnetcorerazor meta.expression	#eeeeee	—
entity.name.section	#b2e6ff	bold
punctuation.definition.heading	#19b6ff	—
markup.inline, markup.fenced_code.block	#e5a55b	—
fenced_code.block.language	#e0e55b	italic
punctuation.definition.list, punctuation.definition.bold, punctuation.definition.italic	#447fe5	—
markup.italic	—	italic
markup.bold markup.italic	—	bold italic
markup.bold	—	bold
meta.link.inline markup.underline.link, meta.link.reference.markdown constant.other.reference.link.markdown, markup.underline.link.markdown	#447fe5	—
punctuation.definition.link.title, meta.link.inline punctuation.definition.metadata, meta.link.reference.markdown punctuation.definition.constant.end.markdown, meta.link.reference.markdown punctuation.definition.constant.begin.markdown, meta.link.reference.def.markdown	#28c3cc	—
punctuation.definition.link.description, meta.image.inline punctuation.definition.metadata, meta.image.reference.markdown punctuation.definition.constant.markdown	#2ecc28	—
string.other.link.title, string.other.link.description, support.type.register	#e5ce5b	—
constant.other.reference.link.markdown, constant.other	—	bold
markup.underline.link.image, meta.image.reference.markdown constant.other.reference.link.markdown	#28cc92	—
support.type.property-name.json, entity.other.attribute-name, meta.object-literal.key.js string.quoted.double.js, support.type.property-name.toml	#28c3cc	italic
entity.name.function.macro.rust, variable.language.makefile, source.css support.constant, entity.name.variable.preprocessor.symbol.cs, source.shell variable.other, text.tex.latex support.function, entity.name.function.preprocessor, storage.source.cmake, support.variable.magic.python, support.function.magic.python, source.oraclesql support.function.builtin, support.function.builtin.zig, variable.source.cmake, variable.language.nawk, variable.language.awk, source.php support.function.construct	#e2ccff	—
variable.other.constant, source.css variable	—	bold
entity.name.type.numeric, entity.name.type.primitive.rust, storage.type.built-in, keyword.type, support.type.primitive, support.other.match.end.regexp, support.other.match.begin.regexp, storage.type.primitive, support.function.builtin.shell, keyword.other.type, support.type.oraclesql, storage.type.error.go, storage.type.numeric, storage.type.boolean, keyword.map.go, storage.type.haskell	#ed478f	—
meta.attribute.rust, meta.function.decorator, storage.type.annotation.java, punctuation.definition.annotation.java, support.other.attribute.cpp, meta.attribute.php, meta.tag.preprocessor.xml	#b4b4b4	bold
meta.preprocessor.macro	#ccc	—
source.css variable	#ccdeff	—
variable.other.property, variable.other.object.property	#e4ffe7	—
storage.type.class.doxygen, storage.type.class.jsdoc	#355a99	—
comment.block.documentation variable.parameter	#b9833c	—
comment markup.inline, punctuation.definition.string.heredoc.shell	#aa7f4f	—
comment punctuation.definition.heading	#297ba1	italic
entity.name.type.instance.jsdoc	#337b7f	bold
comment entity.name.section	#6c8c9b	bold italic
meta.method-call	#e4ffe7	—
meta.tag.template.value.twig, keyword.control.flow.mcfunction	#eee	—
keyword.control.at-rule	#4c8dff	—

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