Chrome Console Dark

Name: Chrome Console Dark
Author: Sujan Shrestha

Publisher: Sujan ShresthaThemes in package: 6

Brings Google Chrome's developer console color scheme to VS Code

Open in VS Code GitHub

Color themes

VS Code preview

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

Chrome Console Dark — Chrome Console High Contrast (Modern)

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

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#ffffff
activityBar.background#000000
activityBar.foreground#ffffff
activityBarBadge.background#8bb4f7
activityBarBadge.foreground#000
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#6e7276
breadcrumbPicker.background#000000
button.background#8bb4f7
button.foreground#000000
button.hoverBackground#7ba1df
dropdown.background#000000
dropdown.listBackground#000000
editor.background#000000
editor.foreground#ffffff
editor.lineHighlightBorder#00000000
editorGroupHeader.border#ffffff
editorGroupHeader.tabsBackground#000000
editorIndentGuide.activeBackground#ffffff
editorIndentGuide.background#ffffff
editorLineNumber.activeForeground#8bb4f7
editorLineNumber.foreground#ffffff
editorWidget.background#000000
editorWidget.border#393a3d
editorWidget.foreground#ffffff
gitDecoration.ignoredResourceForeground#6e7276
input.background#000000
input.border#ffffff
input.foreground#ffffff
input.placeholderForeground#9DA3A9
keybindingLabel.background#000000
keybindingLabel.foreground#ffffff
list.activeSelectionBackground#111111
list.hoverBackground#111111
list.hoverForeground#ffffff
list.inactiveFocusBackground#111111
list.inactiveSelectionBackground#111111
minimapSlider.activeBackground#989ea422
minimapSlider.background#989ea411
minimapSlider.hoverBackground#989ea422
notificationCenter.border#ffffff
notificationCenterHeader.background#000000
notificationCenterHeader.foreground#ffffff
notifications.background#000000
notifications.foreground#ffffff
panelTitle.activeBorder#ffffff
panelTitle.activeForeground#ffffff
pickerGroup.border#6e7276
pickerGroup.foreground#dadbdd
quickInput.background#000000
quickInput.foreground#ffffff
scrollbarSlider.activeBackground#494a4d
scrollbarSlider.background#393a3d
scrollbarSlider.hoverBackground#494a4d
sideBar.background#000000
sideBar.foreground#ffffff
sideBarSectionHeader.background#000000
sideBarTitle.foreground#ffffff
statusBar.background#445e88
statusBar.foreground#ffffffcc
tab.activeBorderTop#ffffff
tab.activeForeground#ffffff
tab.inactiveBackground#000000
tab.inactiveForeground#6e7276
terminal.foreground#ffffff
titleBar.activeBackground#000000
titleBar.activeForeground#ffffff
titleBar.inactiveBackground#000000
welcomePage.progress.background#ffffff77
welcomePage.progress.foreground#ffffff
welcomePage.tileBackground#000000
welcomePage.tileHoverBackground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation, keyword, keyword.operator.assignment, keyword.operator.class.php, keyword.operator.spread.js, keyword.operator.rest.js, keyword.control.anchor.regexp, meta.brace, meta.tag.xml, meta.property-list, meta.paragraph.markdown, constant.character.format.placeholder.other.python, storage.type.function.arrow, support.function.url.css, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, meta.class.body	#e3e3e3	—
meta.jsx.children, text.html.derivative, text.xml, meta.property-value	#dadada	—
comment, punctuation.definition.comment	#8d8d8e	italic
variable.function, variable.other.object, variable.other.readwrite, variable.language.wildcard, string constant.other.placeholder, punctuation.definition.variable, keyword.other.special-method, meta.object-literal.key, meta.body.class, meta.parens.block, meta.method.body, meta.function-call, meta.object.member, entity.name.scope-resolution, entity.other.inherited-class, support.function, support.variable.property, support.type.object.module, support.type.python, support.class.dart, support.constant, support.function.construct.output.php, storage.modifier.import, storage.modifier.package, source.python, source.dart, source.cs, new.expr, constant.other	#c7c7c7	—
variable.object.property, variable.other.property, meta.object-literal.key, meta.definition.method, meta.function, meta.parameter.object-binding-pattern, support.class, support.function, meta.var.expr, entity.name.type.ts, entity.name.type.tsx, entity.name.type.module.tsx, support.function.misc.css, support.function.misc.scss	#facc14	—
meta.var-single-variable.expr, variable.other.readwrite.alias, meta.parameter, meta.import, meta.arrow, entity.name.type, meta.definition.function	#79a8f1	—
invalid, invalid.illegal	#FA4E4E	underline
variable.language, storage.type.function, storage.type.class, storage.modifier, storage.type, constant.other.color, punctuation.definition.directive, keyword.operator.new, keyword.control, keyword.other.template, keyword.other.substitution, keyword.other.using, keyword.other.namespace, keyword.other.class, keyword.other.var, keyword.other.new, keyword.other.import, keyword.other.package, keyword.operator.expression, keyword.type, support.type.primitive.ts, support.type.primitive.tsx, keyword.other.use, keyword.other.type, keyword.operator.logical.php, entity.name.section.markdown	#bf67ff	—
meta.tag.sgml, markup.deleted.git_gutter, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#f19767	—
entity.name.tag, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.separator.key-value.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.xml, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml, meta.tag.preprocessor.xml, keyword.other.doctype.xml, support.class.component.js, support.class.component.tsx	#79a8f1	—
entity.other.attribute-name, variable.language.documentroot.xml	#aec6f6	—
support.other.variable, string.other.link, string.other.link.title	#69b6e5	—
constant.numeric, constant.language, constant.character, constant.escape, entity.other.keyframe-offset	#c4eed0	—
string, string.regexp, punctuation.definition.string, punctuation.support.type.property-name, punctuation.definition.annotation, storage.type.annotation, constant.other.symbol, constant.other.key, constant.character.escape, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.attribute-selector, keyword.other.sql, keyword.other.DML.sql	#fe8d59	—
support.type	#B2CCD6	—
variable.scss	#8bb4f7	—
entity.name.tag.css, entity.name.function.scss, entity.other.keyframe-offset.css, entity.name.tag.wildcard, constant.numeric.css, constant.other.color.rgb-value.hex.css, keyword.control.at-rule.media, keyword.control.at-rule.keyframes, keyword.control.at-rule.import, keyword.control.at-rule.include, keyword.control.at-rule.mixin.scss, keyword.control.operator.css.scss, support.constant.property-value.css, support.constant.font-name.css, support.constant.color.w3c-standard-color-name.css, support.constant.vendored.property-value.css, support.constant.media, source.css keyword.other.unit, meta.property-value.css	#dadada	—
variable.css, support.type.property-name, support.type.vendored.property-name, keyword.control.content.scss	#5cd5fb	—
variable.argument.css, meta.at-rule.media.header	#8bb4f7	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FF5370	—
entity.other.attribute-name.class, entity.name.tag.reference.scss	#d6d6d6	—
source.sass keyword.control	#73a3e9	—
entity.name.method.js	#73a3e9	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#73a3e9	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#73a3e9	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#f19767	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f19767	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f19767	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f19767	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f19767	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f19767	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f19767	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f19767	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f19767	—
text.html.markdown, punctuation.definition.list_item.markdown	#EEFFFF	—
text.html.markdown markup.inline.raw.markdown	#C792EA	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#9a7fd4	—
markup.italic	#c2c9d1	italic
markup.bold, markup.bold string	#c2c9d1	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#c2c9d1	bold
markup.underline	#f19767	underline
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	italic
string.other.link.title.markdown	#69b6e5	—
markup.fenced_code.block.markdown	#989ea4	italic
string.other.link.description.title.markdown	#C792EA	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#C792EA	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#c2c9d1	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#EEFFFF	—

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