Chrome DevTools Theme

Name: Chrome DevTools Theme
Author: nicmeriano

Publisher: nicmerianoThemes in package: 1

A VS Code theme inspired by the Chrome devtools

GitHub

VS Code preview

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

Chrome DevTools Theme — Chrome DevTools

fetchUser.ts

index.ts

README.md

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#292a2d
activityBar.border#494b4f
activityBar.foreground#e2e2e2
activityBar.inactiveForeground#92969b
activityBarBadge.background#606f80
activityBarBadge.foreground#ffffff
badge.background#66737f
badge.foreground#ffffff
breadcrumb.foreground#92969b
button.background#ffcc66aa
button.foreground#ffffff
button.hoverBackground#ffcc66bb
debugExceptionWidget.background#202124
debugExceptionWidget.border#494b4f
debugToolBar.background#202124
diffEditor.insertedLineBackground#73c9914a
diffEditor.insertedTextBackground#95e6cb44
diffEditor.removedTextBackground#f0717844
diffEditorGutter.insertedLineBackground#73c9912f
dropdown.background#202124
editor.background#202124
editor.findMatchBackground#ff4d8844
editor.findMatchHighlightBackground#ffcc6644
editor.findRangeHighlightBackground#ffcc6644
editor.foreground#bfc6ce
editor.lineHighlightBackground#35363a
editor.rangeHighlightBackground#293241
editor.selectionBackground#1a3c66
editor.selectionHighlightBackground#1a3c66
editor.wordHighlightBackground#ffcc6633
editor.wordHighlightStrongBackground#ffcc6633
editorBracketMatch.border#3d4752
editorCursor.foreground#ffcc66
editorError.foreground#fe272e
editorGroup.border#494b4f
editorGroupHeader.noTabsBackground#202124
editorGroupHeader.tabsBackground#292a2d
editorGroupHeader.tabsBorder#494b4f
editorGutter.addedBackground#73c991
editorGutter.deletedBackground#fe272e
editorGutter.modifiedBackground#e4905f
editorHoverWidget.background#202124
editorHoverWidget.border#494b4f
editorIndentGuide.background#3d4752
editorLineNumber.foreground#92969b51
editorLink.activeForeground#ffcc66
editorMarkerNavigation.background#202124
editorOverviewRuler.border#494b4f
editorRuler.foreground#494b4f
editorSuggestWidget.background#202124
editorSuggestWidget.border#494b4f
editorSuggestWidget.highlightForeground#ffcc66
editorSuggestWidget.selectedBackground#2d6198
editorWarning.foreground#ffcc66
editorWhitespace.foreground#3d4752
editorWidget.background#292a2d
editorWidget.foreground#92969b
extensionButton.prominentBackground#ffcc66aa
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#ffcc66bb
focusBorder#7386998a
foreground#738699
input.background#202124
input.border#7386994c
input.foreground#d9d7ce
input.placeholderForeground#7386998a
inputOption.activeBorder#7386998a
inputValidation.errorBackground#202124
inputValidation.errorBorder#fe272e
inputValidation.infoBackground#202124
inputValidation.infoBorder#72aed3
inputValidation.warningBackground#202124
inputValidation.warningBorder#ffd580
list.activeSelectionBackground#35363a
list.activeSelectionForeground#d9d7ce
list.errorForeground#ef8784
list.focusAndSelectionOutline#35363a
list.focusBackground#303540
list.focusForeground#d9d7ce
list.highlightForeground#ffcc66
list.hoverBackground#35363a
list.hoverForeground#d9d7ce
list.inactiveSelectionBackground#202124
list.inactiveSelectionForeground#d9d7ce
list.warningForeground#e59d37
menu.background#292a2d
panel.background#292a2d
panel.border#494b4f
panelTitle.activeBorder#999999
panelTitle.activeForeground#e2e2e2
panelTitle.inactiveForeground#92969b
peekView.border#494b4f
peekViewEditor.background#202124
peekViewEditor.matchHighlightBackground#ffcc6633
peekViewResult.background#202124
peekViewResult.fileForeground#738699
peekViewResult.matchHighlightBackground#ffcc6633
peekViewTitle.background#202124
peekViewTitleDescription.foreground#738699
peekViewTitleLabel.foreground#738699
pickerGroup.border#494b4f
pickerGroup.foreground#ffcc66
progressBar.background#ffcc66
scrollbar.shadow#11141a11
scrollbarSlider.activeBackground#ffffff22
scrollbarSlider.background#ffffff11
scrollbarSlider.hoverBackground#ffffff22
selection.background#343f4cfd
sideBar.background#202124
sideBar.border#494b4f
sideBar.foreground#92969b
sideBarSectionHeader.background#292a2d
sideBarSectionHeader.foreground#92969b
sideBarTitle.foreground#92969b
statusBar.background#292a2d
statusBar.border#494b4f
statusBar.debuggingBackground#202124
statusBar.debuggingForeground#738699
statusBar.foreground#92969b
statusBar.noFolderBackground#202124
statusBarItem.activeBackground#494b4f
statusBarItem.hoverBackground#303540
statusBarItem.prominentBackground#494b4f
statusBarItem.prominentHoverBackground#303540
tab.activeBackground#35363a
tab.activeForeground#e2e2e2
tab.border#494b4f
tab.hoverBackground#35363a
tab.hoverForeground#e2e2e2
tab.inactiveBackground#292a2d
tab.inactiveForeground#92969b
tab.unfocusedActiveForeground#e2e2e2
tab.unfocusedHoverBackground#35363a
tab.unfocusedHoverForeground#e2e2e2
tab.unfocusedInactiveForeground#738699
terminal.ansiBlack#494b4f
terminal.ansiBlue#36a3d9
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#6871ff
terminal.ansiBrightCyan#a6fde1
terminal.ansiBrightGreen#cbe645
terminal.ansiBrightMagenta#ff77ff
terminal.ansiBrightRed#f07178
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffdf80
terminal.ansiCyan#95e6cb
terminal.ansiGreen#bae67e
terminal.ansiMagenta#d4bfff
terminal.ansiRed#f07178
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#ffcc66
terminal.background#202124
terminal.foreground#d9d7ce
textBlockQuote.background#202124
textLink.activeForeground#ffcc66
textLink.foreground#ffcc66
textPreformat.foreground#d9d7ce
titleBar.activeBackground#292a2d
titleBar.activeForeground#92969b
titleBar.border#494b4f
titleBar.inactiveBackground#292a2d
titleBar.inactiveForeground#92969b
walkThrough.embeddedEditorBackground#202124
widget.shadow#11141ab3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#5C6773	—
variable, variable.other.object.js.jsx, support.variable.property.dom	#D4BFFF	—
variable.other.property.js.jsx, support.variable.property.dom.js.jsx	#95E6CB	—
keyword, storage.type, storage.modifier	#E4905F	—
constant.other.color, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, punctuation.definition.block.js, keyword.other.substitution,	#80D4FF	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#72AED3	—
meta.tag.jsx, meta.jsx.children.js.jsx	#D9D7CE	—
entity.name.function, keyword.other.special-method, meta.block-level, support.function.console.js, support.function.dom.js, support.function.js.jsx	#FFD580	—
support.other.variable, string.other.link, support.variable.dom	#F07178	—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit	#D4BFFF	—
string, keyword.other.template, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#BAE67E	normal
punctuation.definition.string	#CBE645	—
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter	#72AED3	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#72AED3	—
variable.language	#72AED3	italic
invalid	#FE272E	—
invalid.deprecated	#FFFFFF	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#72AED390	—
entity.other.attribute-name, meta.object-literal.key.js.jsx	#E4905F	italic
markup.inserted	#BAE67E	—
markup.deleted	#72AED3	—
markup.changed	#E4905F	—
string.regexp, constant.character.escape	#95E6CB	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#5C6773	—
entity.name.filename.find-in-files	#BAE67E	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#FFC44C	italic
source.js constant.other.object.key.js string.unquoted.label.js	#72AED3	italic
entity.name.method.js	#FFC44C	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#FFC44C	—
markup.italic	#F07178	italic
markup.bold	#F07178	bold
markup.underline	#D4BFFF	underline
markup.strike	#FFC44C	strike
markup.quote	#80D4FF	italic
markup.raw.block	#E4905F	—
markup.table	#72AED3	—
text.html.markdown, punctuation.definition.list_item.markdown	#D9D7CE	—
text.html.markdown markup.raw.inline	#72AED3	—
text.html.markdown meta.dummy.line-break	#5C6773	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#BAE67E	—
markup.quote, punctuation.definition.blockquote.markdown	#80D4FF	italic
string.other.link.title.markdown	#FFC44C	underline
markup.raw.block.fenced.markdown	#D9D7CE	—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown	#5C6773	—
variable.language.fenced.markdown	#5C6773
meta.separator	#5C6773	bold
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#72AED3	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#72AED3	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#72AED3	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#72AED3	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#72AED3	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#72AED3	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#72AED3	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#72AED3	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#72AED3	—
acejump.label.blue	#FFFFFF	—
acejump.label.green	#FFFFFF	—
acejump.label.orange	#FFFFFF	—
acejump.label.purple	#FFFFFF	—
sublimelinter.mark.warning	#72AED3	—
sublimelinter.gutter-mark	#FFFFFF	—
sublimelinter.mark.error	#FE272E	—
markup.ignored.git_gutter	#5C6773	—
markup.untracked.git_gutter	#5C6773	—
gutter_color	#FFFFFF	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—
markup.heading.markdown, markup.heading.markdown punctuation.definition.heading.markdown	#A1BAD9	bold
support.type, string.quoted.double.json.comments, punctuation.definition.string, string.quoted, string, meta.object.member string.quoted punctuation.definition.string, meta.tag.attributes punctuation.definition.string.template	#E4905F	—
constant.numeric, constant.language, string.unquoted.plain.out.yaml	#B5F5BB	—
entity.other.attribute-name, support.type.property-name.json	#A1BAD9
meta.tag meta.jsx.children, text.html.derivative, entity.name.tag.css	#E8EAED	—
keyword.operator.assignment, variable, entity.name.function, punctuation.separator.key-value, string.template meta.template.expression, meta.tag, variable.parameter, storage.type.function.arrow, keyword, entity.name.tag.yaml, meta.paragraph.markdown, meta.property-value.scss support.constant.property-value.css, meta.property-value.scss, support.constant.color, string.quoted.single.scss punctuation.definition.string, support.constant.property-value.css, support.type.object, source.js meta.var.expr.js meta.arrow.js meta.block.js meta.block.js meta.var.expr.js meta.objectliteral.js meta.object.member.js variable.other.readwrite.js, meta.objectliteral.js punctuation.definition.block.js, meta.block punctuation.definition.block.js, entity.name.type.alias	#BFC6CE	—
meta.tag.attributes keyword.operator.assignment, meta.tag.attributes punctuation.definition.string, meta.type.annotation entity.name.type, punctuation.section.embedded, meta.type.annotation support.type, meta.indexer.mappedtype.declaration support.type.primitive, entity.name.type, support.type	#72AED3	—
keyword.control, storage.type, storage.modifier.async	#9680CF	—
support.type.property-name.css, meta.property-list.scss meta.property-list.scss entity.name.tag.css	#6BD1C7	—
meta.function-call entity.name.function	#CFC167	—

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