i3 Dark Theme

Name: i3 Dark Theme
Author: i3acksp4ce

Publisher: i3acksp4ceThemes in package: 100

The VSCode theme base on github dark workbench color with WCAG 2.0

Open in VS Code

Color themes

VS Code preview

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

i3 Dark Theme — i3 - Moonlight - Custom II

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.activeBorder#f78166
activityBar.background#18191b
activityBar.border#393b41
activityBar.foreground#f3f3f4
activityBar.inactiveForeground#7d8590
activityBarBadge.background#486bd5
activityBarBadge.foreground#ffffff
badge.background#486bd5
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#7d8590
breadcrumb.focusForeground#f3f3f4
breadcrumb.foreground#7d8590
breadcrumbPicker.background#1f2023
button.background#486bd5
button.foreground#ffffff
button.hoverBackground#6583dc
button.secondaryBackground#282e33
button.secondaryForeground#c9d1d9
button.secondaryHoverBackground#393b41
checkbox.background#1f2023
checkbox.border#393b41
debugConsole.errorForeground#ffa198
debugConsole.infoForeground#8b949e
debugConsole.sourceForeground#e3b341
debugConsole.warningForeground#d29922
debugConsoleInputIcon.foreground#bc8cff
debugIcon.breakpointForeground#f85149
debugTokenExpression.boolean#56d364
debugTokenExpression.error#ffa198
debugTokenExpression.name#79c0ff
debugTokenExpression.number#56d364
debugTokenExpression.string#a5d6ff
debugTokenExpression.value#a5d6ff
debugToolBar.background#1f2023
descriptionForeground#7d8590
diffEditor.insertedLineBackground#23863626
diffEditor.insertedTextBackground#3fb9504d
diffEditor.removedLineBackground#da363326
diffEditor.removedTextBackground#ff7b724d
dropdown.background#1f2023
dropdown.border#393b41
dropdown.foreground#f3f3f4
dropdown.listBackground#1f2023
editor.background#18191b
editor.findMatchBackground#9e6a03
editor.findMatchHighlightBackground#f2cc6080
editor.focusedStackFrameHighlightBackground#2ea04366
editor.foldBackground#6e76811a
editor.lineHighlightBackground#6e76811a
editor.linkedEditingBackground#2f81f712
editor.selectionHighlightBackground#3fb95040
editor.stackFrameHighlightBackground#bb800966
editor.wordHighlightBackground#6e768180
editor.wordHighlightBorder#6e768199
editor.wordHighlightStrongBackground#6e76814d
editor.wordHighlightStrongBorder#6e768199
editorBracketMatch.background#3fb95040
editorBracketMatch.border#3fb95099
editorCursor.foreground#2f81f7
editorGroup.border#393b41
editorGroupHeader.tabsBackground#111113
editorGroupHeader.tabsBorder#393b41
editorGutter.addedBackground#2ea04366
editorGutter.deletedBackground#f8514966
editorGutter.modifiedBackground#bb800966
editorIndentGuide.activeBackground#f3f3f43d
editorIndentGuide.background#f3f3f41f
editorInlayHint.background#8b949e33
editorInlayHint.foreground#7d8590
editorInlayHint.paramBackground#8b949e33
editorInlayHint.paramForeground#7d8590
editorInlayHint.typeBackground#8b949e33
editorInlayHint.typeForeground#7d8590
editorLineNumber.activeForeground#f3f3f4
editorLineNumber.foreground#6e7681
editorOverviewRuler.border#111113
editorWhitespace.foreground#484f58
editorWidget.background#1f2023
errorForeground#f85149
focusBorder#486bd5
foreground#f3f3f4
gitDecoration.addedResourceForeground#3fb950
gitDecoration.conflictingResourceForeground#db6d28
gitDecoration.deletedResourceForeground#f85149
gitDecoration.ignoredResourceForeground#6e7681
gitDecoration.modifiedResourceForeground#d29922
gitDecoration.submoduleResourceForeground#7d8590
gitDecoration.untrackedResourceForeground#3fb950
icon.foreground#7d8590
input.background#18191b
input.border#393b41
input.foreground#f3f3f4
input.placeholderForeground#6e7681
keybindingLabel.foreground#f3f3f4
list.activeSelectionBackground#6e768166
list.activeSelectionForeground#f3f3f4
list.focusBackground#388bfd26
list.focusForeground#f3f3f4
list.highlightForeground#2f81f7
list.hoverBackground#6e76811a
list.hoverForeground#f3f3f4
list.inactiveFocusBackground#388bfd26
list.inactiveSelectionBackground#6e768166
list.inactiveSelectionForeground#f3f3f4
minimapSlider.activeBackground#8b949e47
minimapSlider.background#8b949e33
minimapSlider.hoverBackground#8b949e3d
notificationCenterHeader.background#1f2023
notificationCenterHeader.foreground#7d8590
notifications.background#1f2023
notifications.border#393b41
notifications.foreground#f3f3f4
notificationsErrorIcon.foreground#f85149
notificationsInfoIcon.foreground#2f81f7
notificationsWarningIcon.foreground#d29922
panel.background#111113
panel.border#393b41
panelInput.border#393b41
panelTitle.activeBorder#f78166
panelTitle.activeForeground#f3f3f4
panelTitle.inactiveForeground#7d8590
peekViewEditor.background#6e76811a
peekViewEditor.matchHighlightBackground#bb800966
peekViewResult.background#18191b
peekViewResult.matchHighlightBackground#bb800966
pickerGroup.border#393b41
pickerGroup.foreground#7d8590
progressBar.background#486bd5
quickInput.background#1f2023
quickInput.foreground#f3f3f4
scrollbar.shadow#484f5833
scrollbarSlider.activeBackground#8b949e47
scrollbarSlider.background#8b949e33
scrollbarSlider.hoverBackground#8b949e3d
settings.headerForeground#f3f3f4
settings.modifiedItemIndicator#bb800966
sideBar.background#111113
sideBar.border#393b41
sideBar.foreground#f3f3f4
sideBarSectionHeader.background#111113
sideBarSectionHeader.border#393b41
sideBarSectionHeader.foreground#f3f3f4
sideBarTitle.foreground#f3f3f4
statusBar.background#18191b
statusBar.border#393b41
statusBar.debuggingBackground#da3633
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#486bd580
statusBar.foreground#7d8590
statusBar.noFolderBackground#18191b
statusBarItem.activeBackground#f3f3f41f
statusBarItem.focusBorder#486bd5
statusBarItem.hoverBackground#f3f3f414
statusBarItem.prominentBackground#6e768166
statusBarItem.remoteBackground#393b41
statusBarItem.remoteForeground#f3f3f4
symbolIcon.arrayForeground#f0883e
symbolIcon.booleanForeground#58a6ff
symbolIcon.classForeground#f0883e
symbolIcon.colorForeground#79c0ff
symbolIcon.constantForeground#aff5b4#7ee787#56d364#3fb950#2ea043#238636#196c2e#0f5323#033a16#04260f
symbolIcon.constructorForeground#d2a8ff
symbolIcon.enumeratorForeground#f0883e
symbolIcon.enumeratorMemberForeground#58a6ff
symbolIcon.eventForeground#6e7681
symbolIcon.fieldForeground#f0883e
symbolIcon.fileForeground#d29922
symbolIcon.folderForeground#d29922
symbolIcon.functionForeground#bc8cff
symbolIcon.interfaceForeground#f0883e
symbolIcon.keyForeground#58a6ff
symbolIcon.keywordForeground#ff7b72
symbolIcon.methodForeground#bc8cff
symbolIcon.moduleForeground#ff7b72
symbolIcon.namespaceForeground#ff7b72
symbolIcon.nullForeground#58a6ff
symbolIcon.numberForeground#3fb950
symbolIcon.objectForeground#f0883e
symbolIcon.operatorForeground#79c0ff
symbolIcon.packageForeground#f0883e
symbolIcon.propertyForeground#f0883e
symbolIcon.referenceForeground#58a6ff
symbolIcon.snippetForeground#58a6ff
symbolIcon.stringForeground#79c0ff
symbolIcon.structForeground#f0883e
symbolIcon.textForeground#79c0ff
symbolIcon.typeParameterForeground#79c0ff
symbolIcon.unitForeground#58a6ff
symbolIcon.variableForeground#f0883e
tab.activeBackground#18191b
tab.activeBorder#18191b
tab.activeBorderTop#f78166
tab.activeForeground#f3f3f4
tab.border#393b41
tab.hoverBackground#18191b
tab.inactiveBackground#111113
tab.inactiveForeground#7d8590
tab.unfocusedActiveBorder#18191b
tab.unfocusedActiveBorderTop#393b41
tab.unfocusedHoverBackground#6e76811a
terminal.ansiBlack#484f58
terminal.ansiBlue#58a6ff
terminal.ansiBrightBlack#6e7681
terminal.ansiBrightBlue#79c0ff
terminal.ansiBrightCyan#56d4dd
terminal.ansiBrightGreen#56d364
terminal.ansiBrightMagenta#d2a8ff
terminal.ansiBrightRed#ffa198
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e3b341
terminal.ansiCyan#39c5cf
terminal.ansiGreen#3fb950
terminal.ansiMagenta#bc8cff
terminal.ansiRed#ff7b72
terminal.ansiWhite#b1bac4
terminal.ansiYellow#d29922
terminal.foreground#f3f3f4
textBlockQuote.background#111113
textBlockQuote.border#393b41
textCodeBlock.background#6e768166
textLink.activeForeground#2f81f7
textLink.foreground#2f81f7
textPreformat.foreground#7d8590
textSeparator.foreground#21262d
titleBar.activeBackground#18191b
titleBar.activeForeground#7d8590
titleBar.border#393b41
titleBar.inactiveBackground#111113
titleBar.inactiveForeground#7d8590
tree.indentGuidesStroke#21262d
welcomePage.buttonBackground#21262d
welcomePage.buttonHoverBackground#393b41

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#d0dbff	—
comment, punctuation.definition.comment	#96a6f4	normal
variable, string constant.other.placeholder	#d0dbff	—
constant.other.php	#ffd375	—
constant.other.color	#d0dbff	—
text, meta.jsx.children	#d0dbff	—
invalid, invalid.illegal	#ff7289	—
invalid.deprecated	#bfa9ff	—
keyword, storage.type, storage.modifier	#bfa9ff	normal
keyword.control.flow	#78e5ff	normal
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, constant.other.color, punctuation, meta.tag, meta.block, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, keyword.other.template, keyword.other.substitution, keyword.operator, meta.brace, string.other.begin.code, string.other.end.code	#78e5ff	normal
punctuation.definition.template-expression	#ff757f	—
keyword.operator.logical, keyword.operator.comparison	#bfa9ff	—
keyword.operator.spread, keyword.operator.rest	#ff757f	bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#ff757f	—
entity.name.function, variable.function, keyword.other.special-method, meta.function-call.generic	#7abdff	—
support.function, meta.function-call entity.name.function	#7abdff	—
source.cpp meta.block variable.other	#ff757f	—
variable.other.object.property	#78e5ff	—
support.variable.property, variable.other.property	#afc0f8	—
meta.object-literal.key, entity.name.label.js, string.unquoted, meta.field.declaration.ts variable.object.property, variable.object.property	#c9f08f	—
support.variable.dom, support.constant.json, support.constant.math	#ffd375	—
support.variable.object.node, support.variable.object.process	#ffd375	—
support.other.variable, string.other.link	#ff757f	—
constant.language, support.constant, constant.escape, keyword.other.unit	#ffa6b9	—
constant.character	#ff757f	—
constant.numeric, constant.language.infinity, constant.language.nan	#ffa75d	—
constant.language.undefined, constant.language.null	#a4a8cc	—
variable.parameter.function.language.special, variable.parameter	#ffb1ff	—
string, 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	#7afdcd	normal
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, support.type.object.module	#ffd375	—
support.class.component	#ff92fe	—
support.type	#ffa75d	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#c9f08f	—
keyword.other.unit	#ffa6b9	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#ff7289	—
variable.language	#ff757f	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#7abdff	—
entity.other.attribute-name	#ffc074	normal
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#ffc074	normal
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype entity.other.attribute-name	#bfa9ff	normal
source.css	#78e5ff	—
entity.other.attribute-name.class	#ffd375	—
support.type.property-name.css, support.type.property-name	#7abdff	—
meta.property-name.css, meta.property-name.scss, meta.property-name.less, support.type.vendored.property-name	#afc0f8	—
support.constant.property-value.css, meta.property-value, support.constant.font-name.css, support.constant.vendored.property-value.css	#b0f0ef	—
variable.parameter.keyframe-list, meta.at-rule.keyframes entity.name.function	#ffb1ff	—
entity.other.keyframe-offset, meta.at-rule.keyframes entity.other.attribute-name	#c9f08f	—
meta.attribute-selector, markup.inline.raw.code	#7afdcd	—
source.sass keyword.control	#7abdff	—
keyword.other.unit	#ff7b7b	—
markup.inserted	#c9f08f	—
markup.deleted	#ff7289	—
markup.changed	#bfa9ff	—
string.regexp	#b0f0ef	—
constant.other.character-class.regexp	#c9f08f	—
constant.other.character-class.set.regexp	#ffd375	—
keyword.operator.quantifier.regexp	#ffb1ff	—
constant.character.escape	#78e5ff	—
url, link, uri	—	underline
meta.decorator.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#7abdff	normal
source.js constant.other.object.key.js string.unquoted.label.js	#ff757f	normal
source.json meta.structure.dictionary.json support.type.property-name.json	#7abdff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#c9f08f	—
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	#ffb1ff	—
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	#ffd375	—
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	#59caff	—
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	#ff757f	—
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	#ff757f	—
text.html.markdown, meta.embedded.block	#d0dbff	—
text.html.markdown markup.inline.raw.markdown	#bfa9ff	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#78e5ff	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#78e5ff	—
entity.name.section.markdown	#7abdff	—
markup.italic	#ff757f
markup.bold, markup.bold string	#ff757f	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	#ff757f	bold
markup.underline	#59caff	underline
markup.strike	—	strike
markup.quote punctuation.definition.blockquote.markdown	#afc0f8	—
markup.quote	—
string.other.link.title.markdown	#b0f0ef	—
constant.other.reference.link.markdown	#ffd375	—
markup.raw.block	#bfa9ff	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#78e5ff	—
variable.language.fenced.markdown	#afc0f8	—
meta.separator	#afc0f8	bold
markup.table	#bacafe	—

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