Zed One Dark

Name: Zed One Dark
Author: NaroZeol

Publisher: NaroZeolThemes in package: 1

A community-maintained VS Code port of Zed's built-in One Dark theme, with matching file icons.

Open in VS Code GitHub

VS Code preview

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

Zed One Dark — Zed One Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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.activeBackground#454a56ff
activityBar.activeBorder#00000000
activityBar.background#2f343eff
activityBar.border#464b57ff
activityBar.foreground#dce0e5ff
activityBar.inactiveForeground#a9afbcff
activityBarBadge.background#74ade8ff
activityBarBadge.foreground#282c33ff
activityBarTop.activeBackground#454a56ff
activityBarTop.activeBorder#00000000
activityBarTop.background#2f343eff
activityBarTop.foreground#dce0e5ff
activityBarTop.inactiveForeground#a9afbcff
activityErrorBadge.background#d072771a
activityErrorBadge.foreground#d07277ff
activityWarningBadge.background#dec1841a
activityWarningBadge.foreground#dec184ff
agentFeedbackInputWidget.border#00000000
agentSessionReadIndicator.foreground#dce0e5ff
agentSessionSelectedBadge.border#464b57ff
agentSessionSelectedUnfocusedBadge.border#464b57ff
agentStatusIndicator.background#2f343eff
badge.background#2f343eff
badge.foreground#dce0e5ff
banner.background#2f343eff
banner.foreground#a9afbcff
banner.iconForeground#74ade8ff
breadcrumb.activeSelectionForeground#dce0e5ff
breadcrumb.background#282c33ff
breadcrumb.focusForeground#dce0e5ff
breadcrumb.foreground#a9afbcff
breadcrumbPicker.background#2f343eff
browser.border#464b57ff
button.background#454a56ff
button.border#464b57ff
button.hoverBackground#363c46ff
button.secondaryBackground#2e343eff
button.secondaryBorder#464b57ff
button.secondaryForeground#dce0e5ff
button.secondaryHoverBackground#363c46ff
button.separator#464b57ff
chart.axis#464b57ff
chart.guide#878a98ff
chart.line#d0d4da
charts.blue#61afefff
charts.foreground#acb2beff
charts.green#98c379ff
charts.lines#363c46ff
charts.orange#be5046ff
charts.purple#c678ddff
charts.red#e06c75ff
charts.yellow#e5c07bff
checkbox.background#00000000
checkbox.border#464b57ff
checkbox.disabled.background#00000000
checkbox.disabled.foreground#464b57ff
checkbox.foreground#acb2beff
checkbox.selectBackground#454a56ff
checkbox.selectBorder#464b57ff
commandCenter.activeBackground#2f343eff
commandCenter.activeBorder#464b57ff
commandCenter.activeForeground#dce0e5ff
commandCenter.background#2f343eff
commandCenter.border#464b57ff
commandCenter.foreground#acb2beff
commandCenter.inactiveBorder#464b57ff
commandCenter.inactiveForeground#acb2beff
contrastActiveBorder#00000000
contrastBorder#464b57ff
debugToolBar.background#2f343eff
debugToolBar.border#464b57ff
descriptionForeground#a9afbcff
diffEditor.border#00000000
diffEditor.insertedLineBackground#a1c1811a
diffEditor.removedLineBackground#d072771a
editor.background#282c33ff
editor.findMatchBackground#e8af7466
editor.findMatchHighlightBackground#74ade866
editor.findRangeHighlightBackground#6eb4bf3d
editor.foldBackground#00000000
editor.foreground#acb2beff
editor.lineHighlightBackground#2f343ebf
editor.lineHighlightBorder#00000000
editor.selectionBackground#74ade83d
editor.selectionForeground#acb2beff
editor.selectionHighlightBackground#555a6366
editor.selectionHighlightBorder#00000000
editor.wordHighlightBackground#74ade81a
editor.wordHighlightStrongBackground#555a6366
editorBracketHighlight.foreground1#b2b9c6ff
editorBracketHighlight.foreground2#b2b9c6ff
editorBracketHighlight.foreground3#b2b9c6ff
editorBracketHighlight.foreground4#b2b9c6ff
editorBracketHighlight.foreground5#b2b9c6ff
editorBracketHighlight.foreground6#b2b9c6ff
editorBracketMatch.background#74ade81a
editorBracketMatch.border#47679eff
editorCodeLens.foreground#a9afbcff
editorCursor.foreground#74ade8ff
editorError.border#4c2b2cff
editorError.foreground#d07277ff
editorGhostText.foreground#5a6a87ff
editorGroup.border#464b57ff
editorGroupHeader.noTabsBackground#2f343eff
editorGroupHeader.tabsBackground#2f343eff
editorGroupHeader.tabsBorder#464b57ff
editorGutter.addedBackground#27a657ff
editorGutter.background#282c33ff
editorGutter.deletedBackground#e06c76ff
editorGutter.modifiedBackground#d3b020ff
editorHint.border#293b5bff
editorHint.foreground#788ca6ff
editorIndentGuide.activeBackground1#c8ccd41a
editorIndentGuide.background1#c8ccd40d
editorInfo.border#293b5bff
editorInfo.foreground#74ade8ff
editorInlayHint.background#5a6f891a
editorInlayHint.foreground#788ca6ff
editorLineNumber.activeForeground#d0d4da
editorLineNumber.foreground#4e5a5f
editorLink.activeForeground#74ade8ff
editorOverviewRuler.errorForeground#d07277ff
editorOverviewRuler.findMatchForeground#74ade866
editorRuler.foreground#c8ccd40d
editorStickyScroll.border#464b57ff
editorStickyScroll.shadow#00000000
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#a9afbcff
editorWarning.border#5d4c2fff
editorWarning.foreground#dec184ff
editorWhitespace.foreground#4e5a5f
editorWidget.background#2f343eff
editorWidget.border#464b57ff
errorForeground#d07277ff
extensionButton.background#3b414dff
focusBorder#47679eff
foreground#acb2beff
gitDecoration.addedResourceForeground#a1c181ff
gitDecoration.conflictingResourceForeground#dec184ff
gitDecoration.deletedResourceForeground#d07277ff
gitDecoration.ignoredResourceForeground#878a98ff
gitDecoration.modifiedResourceForeground#dec184ff
gitDecoration.renamedResourceForeground#74ade8ff
gitDecoration.stageDeletedResourceForeground#d07277ff
gitDecoration.stageModifiedResourceForeground#dec184ff
gitDecoration.submoduleResourceForeground#788ca6ff
gitDecoration.untrackedResourceForeground#a1c181ff
icon.foreground#dce0e5ff
input.background#282c33ff
input.border#464b57ff
input.foreground#dce0e5ff
input.placeholderForeground#878a98ff
inputValidation.errorBackground#d072771a
inputValidation.errorBorder#4c2b2cff
inputValidation.warningBorder#5d4c2fff
list.activeSelectionBackground#454a56ff
list.activeSelectionForeground#dce0e5ff
list.filterMatchBackground#74ade866
list.filterMatchBorder#00000000
list.focusBackground#454a56ff
list.focusForeground#dce0e5ff
list.highlightForeground#74ade8ff
list.hoverBackground#363c46ff
list.inactiveSelectionBackground#454a56ff
list.inactiveSelectionForeground#dce0e5ff
menu.background#2f343eff
menu.border#464b57ff
menu.foreground#dce0e5ff
menu.selectionBackground#454a56ff
menu.selectionBorder#00000000
menu.selectionForeground#dce0e5ff
menu.separatorBackground#363c46ff
menubar.selectionBackground#363c46ff
menubar.selectionBorder#00000000
menubar.selectionForeground#dce0e5ff
notificationCenter.border#464b57ff
notificationCenterHeader.background#3b414dff
notificationCenterHeader.foreground#acb2beff
notifications.background#2f343eff
notifications.border#464b57ff
notifications.foreground#acb2beff
notificationsErrorIcon.foreground#d07277ff
notificationsInfoIcon.foreground#74ade8ff
notificationsWarningIcon.foreground#dec184ff
notificationToast.border#464b57ff
panel.background#2f343eff
panel.border#464b57ff
panelTitle.activeBorder#00000000
panelTitle.activeForeground#dce0e5ff
panelTitle.inactiveForeground#a9afbcff
peekView.border#464b57ff
peekViewEditor.background#2f343ebf
peekViewEditor.matchHighlightBackground#e8af7466
peekViewEditor.matchHighlightBorder#00000000
peekViewEditorGutter.background#2f343ebf
peekViewEditorStickyScroll.background#2f343ebf
peekViewEditorStickyScrollGutter.background#2f343ebf
peekViewResult.background#2f343eff
peekViewResult.fileForeground#dce0e5ff
peekViewResult.lineForeground#a9afbcff
peekViewResult.matchHighlightBackground#74ade866
peekViewResult.selectionBackground#454a56ff
peekViewResult.selectionForeground#dce0e5ff
peekViewTitle.background#2f343eff
peekViewTitleDescription.foreground#a9afbcff
peekViewTitleLabel.foreground#dce0e5ff
pickerGroup.foreground#dce0e5ff
quickInputList.focusBackground#454a56ff
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#363c46ff
scrollbarSlider.background#c8ccd44c
scrollbarSlider.hoverBackground#363c46ff
settings.dropdownBackground#282c33ff
settings.dropdownBorder#464b57ff
settings.dropdownForeground#acb2beff
settings.modifiedItemIndicator#dec184ff
sideBar.background#2f343eff
sideBar.border#464b57ff
sideBar.dropBackground#83899480
sideBar.foreground#dce0e5ff
sideBarActivityBarTop.border#464b57ff
sideBarSectionHeader.background#2f343eff
sideBarSectionHeader.border#464b57ff
sideBarSectionHeader.foreground#dce0e5ff
sideBarStickyScroll.border#464b57ff
sideBarStickyScroll.shadow#00000000
sideBarTitle.background#2f343eff
sideBarTitle.border#464b57ff
sideBarTitle.foreground#acb2beff
statusBar.background#3b414dff
statusBar.border#464b57ff
statusBar.debuggingBackground#be5046ff
statusBar.debuggingBorder#464b57ff
statusBar.debuggingForeground#dce0e5ff
statusBar.foreground#dce0e5ff
statusBar.noFolderBackground#3b414dff
statusBar.noFolderBorder#464b57ff
statusBar.noFolderForeground#acb2beff
statusBarItem.activeBackground#2f343eff
statusBarItem.hoverBackground#363c46ff
statusBarItem.hoverForeground#acb2beff
tab.activeBackground#282c33ff
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#dce0e5ff
tab.border#464b57ff
tab.hoverBackground#363c46ff
tab.inactiveBackground#2f343eff
tab.inactiveForeground#a9afbcff
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveForeground#acb2beff
tab.unfocusedHoverBorder#00000000
tab.unfocusedHoverForeground#acb2beff
tab.unfocusedInactiveForeground#acb2beff
terminal.ansiBlack#282c34ff
terminal.ansiBlue#61afefff
terminal.ansiBrightBlack#636d83ff
terminal.ansiBrightBlue#85C1FFff
terminal.ansiBrightCyan#6ED5DEff
terminal.ansiBrightGreen#AAD581ff
terminal.ansiBrightMagenta#D398EBff
terminal.ansiBrightRed#EA858Bff
terminal.ansiBrightWhite#fafafaff
terminal.ansiBrightYellow#FFD885ff
terminal.ansiCyan#56b6c2ff
terminal.ansiGreen#98c379ff
terminal.ansiMagenta#c678ddff
terminal.ansiRed#e06c75ff
terminal.ansiWhite#abb2bfff
terminal.ansiYellow#e5c07bff
terminal.background#282c34ff
terminal.border#464b57ff
terminal.foreground#abb2bfff
terminal.selectionBackground#74ade83d
terminal.tab.activeBorder#00000000
terminalCursor.background#282c34ff
terminalCursor.foreground#abb2bfff
terminalStickyScroll.border#464b57ff
textBlockQuote.background#8389941a
textBlockQuote.border#74ade8ff
textCodeBlock.background#5a6f891a
textLink.activeForeground#74ade8ff
textLink.foreground#74ade8ff
textPreformat.background#8389941a
textPreformat.border#464b57ff
textPreformat.foreground#dce0e5ff
textSeparator.foreground#dce0e5ff
titleBar.activeBackground#3b414dff
titleBar.activeForeground#dce0e5ff
titleBar.border#464b57ff
titleBar.inactiveBackground#2e343eff
titleBar.inactiveForeground#a9afbcff
toolbar.activeBackground#454a56ff
toolbar.hoverBackground#363c46ff
tree.inactiveIndentGuidesStroke#464b57ff
tree.indentGuidesStroke#464b57ff
tree.tableColumnsBorder#464b57ff
walkThrough.embeddedEditorBackground#282c33ff
walkthrough.stepTitle.foreground#acb2beff
welcomePage.background#282c33ff
welcomePage.progress.background#5a6a871a
welcomePage.progress.foreground#5a6a87ff
welcomePage.tileBackground#2f343eff
welcomePage.tileBorder#464b57ff
window.activeBorder#00000000
window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment punctuation.definition.comment, comment.line.rem.batchfile keyword.command.rem.batchfile, string.comment.buffered.block.pug	#5d636fff	—
comment.block.documentation, comment.line.documentation, comment.block.documentation punctuation.definition.comment	#878e98ff	—
keyword, storage.modifier, storage.type.function, storage.type.class, storage.type.interface, storage.type.struct, storage.type.enum, storage.type.namespace, storage.type.typedef, storage.type.js, storage.type.jsx, storage.type.ts, storage.type.tsx, storage.type.modifier, meta.function.powershell storage.type.powershell, meta.function.perl storage.type.sub.perl, meta.function.section.section.latex support.function.section.latex, meta.commit-command.git-rebase support.function.git-rebase, storage.type.structure.shaderlab, storage.type.declare.routine.perl, storage.type.asp, meta.preprocessor, entity.name.function.preprocessor, keyword.control.directive, keyword.other.directive	#b477cfff	—
keyword.operator, storage.type.function.arrow, storage.type.function.coffee	#6eb4bfff	—
punctuation	#acb2beff	—
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.array, punctuation.definition.dictionary, punctuation.definition.group, punctuation.definition.character-class, punctuation.definition.tag, punctuation.definition.typeparameters, punctuation.definition.entity.css, punctuation.definition.entity.scss, punctuation.section, punctuation.separator, punctuation.terminator, punctuation.accessor	#b2b9c6ff	—
punctuation.definition.template-expression, punctuation.definition.interpolation, punctuation.definition.decorator, punctuation.definition.variable.shell, punctuation.section.bracket.curly.variable.begin.shell, punctuation.section.bracket.curly.variable.end.shell, punctuation.definition.evaluation.backticks.shell	#b1574bff	—
string, string.quoted, string.template, string.interpolated, string.quoted.raw, entity.name.import.go, constant.other.rune.go, punctuation.definition.string, meta.key-assignment.bibtex	#a1c181ff	—
constant.character.escape, constant.character.entity, string.escape	#878e98ff	—
string.regexp, string.regex, string.regexp punctuation.definition.string, constant.other.character-class, constant.character.numeric.regexp, keyword.operator.quantifier.regexp, constant.other.placeholder, constant.other.symbol, constant.other.color.rgb-value.hex.css, constant.other.color.rgb-value.hex.scss, constant.other.color.rgb-value.less, constant.other.color.rgb-value.less punctuation.definition.constant.less, constant.other.color.rgb-value.css, constant.other.color.rgb-value.hex.css punctuation.definition.constant.css, string.other.link	#bf956aff	—
constant.numeric, constant.language.boolean, punctuation.separator.constant.numeric	#bf956aff	—
entity.name.constant, constant.language.null, constant.language.undefined, constant.language.iota, support.constant, entity.name.other.preprocessor.macro.predefined, constant.other, string.interpolated.makefile variable.other.makefile	#dfc184ff	—
entity.name.type, entity.name.class, entity.name.interface, entity.name.struct, entity.name.enum, entity.name.trait, entity.name.type.parameter, entity.other.inherited-class, support.type, support.class, keyword.type, keyword.other.type, storage.type.powershell, storage.type, storage.type.numeric, storage.type.string, storage.type.boolean, storage.type.primitive, entity.name.section.group-title.ini	#6eb4bfff	—
entity.name.function.constructor, entity.name.type.variant, variable.other.enummember, entity.name.variable.enum-member	#73ade9ff	—
entity.name.function, support.function, variable.function, meta.function-call entity.name.function, meta.function-call variable.function, meta.method-call entity.name.function, meta.method-call variable.function, meta.function-call.python, binding.fsharp variable.fsharp, meta.definition.global.clojure entity.global.clojure	#73ade9ff	—
variable, meta.function.inline.other.handlebars variable.parameter.handlebars	#acb2beff	—
variable.parameter, entity.name.variable.parameter, meta.function.parameters variable, meta.function.definition variable.parameter	#acb2beff	—
variable.other.property, variable.other.field, variable.object.property, variable.other.object.property, variable.other.constant.property, variable.other.constant.object.property, entity.name.variable.field, entity.name.variable.property, entity.name.variable.tuple-element, entity.other.attribute.lua, meta.attribute.python, support.variable.property, support.type.property-name, punctuation.support.type.property-name, keyword.other.definition.ini, entity.name.tag.yaml, entity.name.tag.yaml punctuation.definition.string, meta.object-literal.key, meta.object-binding-pattern-variable meta.definition.variable, string.json support.type.property-name.json, support.variable.declaration.shaderlab, support.function.key.bibtex	#d07277ff	—
entity.other.attribute-name, entity.name.function.decorator, meta.decorator entity.name.function, meta.attribute entity.name	#74ade8ff	—
entity.name.tag, meta.tag support.class.component	#74ade8ff	—
entity.name.namespace, entity.name.type.namespace, entity.name.type.package, variable.other.import.go, support.other.namespace, variable.other.namespace, entity.name.scope-resolution.cpp, entity.scope.name.objcpp	#dce0e5ff	—
entity.name.label, entity.name.section, variable.other.label.go, variable.other.label	#74ade8ff	—
variable.language, variable.other.this, variable.other.super, variable.other.object.self	#bf956aff	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss, entity.name.tag.css, entity.name.tag.scss	#dfc184ff	—
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-element.scss	#74ade8ff	—
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown, meta.function.section.section.latex entity.name.section.latex	#d07277ff	—
markup.bold	#bf956aff	bold
markup.italic	#74ade8ff	—
string.other.link.description, meta.link.inline.markdown string.other.link.title, meta.link.inline.markdown punctuation.definition.link.title	#73ade9ff	italic
markup.underline.link, markup.underline.link.image, meta.link.inline.markdown string.other.link, meta.link.inline.markdown punctuation.definition.metadata	#6eb4bfff	—
markup.inline.raw, markup.inline.raw.string.markdown, markup.raw.block.markdown, markup.fenced_code.block.markdown, markup.fenced_code, markup.raw	#a1c181ff	—
punctuation.definition.quote.begin.markdown, punctuation.definition.table.markdown, punctuation.separator.table.markdown	#d07277ff	—
punctuation.definition.list, markup.list punctuation.definition.list	#d07277ff	—
markup.inserted, meta.diff.header.to-file	#98c379ff	—
markup.deleted, meta.diff.header.from-file	#e06c75ff	—
invalid, invalid.illegal	#d07277ff	—