Acme Theme for VS Code

Name: Acme Theme for VS Code
Author: brendes

Publisher: brendesThemes in package: 2

Theme inspired by the Acme editor from Plan 9

GitHub

Color themes

VS Code preview

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

Acme Theme for VS Code — Acme

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#000000
activityBar.background#eaffff
activityBar.border#00000058
activityBar.foreground#000000
activityBar.inactiveForeground#00000040
activityBarBadge.background#8888cc
activityBarBadge.foreground#ffffff
activityBarTop.activeBackground#9eeeee
activityBarTop.activeBorder#9eeeee
activityBarTop.background#eaffff
activityBarTop.foreground#000000
activityBarTop.inactiveForeground#00000040
badge.background#8888cc
badge.foreground#ffffff
breadcrumb.background#eaffff
breadcrumb.focusForeground#000000
breadcrumb.foreground#000000
breadcrumbPicker.background#ffffff
button.background#8888ccd8
button.border#000000
button.foreground#ffffff
button.hoverBackground#8888cc
button.secondaryBackground#00000000
button.secondaryForeground#000000
button.secondaryHoverBackground#00000010
checkbox.border#00000058
commandCenter.activeBackground#9eeeee
commandCenter.activeBorder#00000058
commandCenter.background#eaffff
commandCenter.border#eaffff
debugToolBar.background#ffffff
descriptionForeground#000000
disabledForeground#00000078
dropdown.border#00000058
editor.background#ffffea
editor.findMatchBackground#bbbbffaa
editor.findMatchHighlightBackground#eeee9eee
editor.foldBackground#ffffea
editor.foreground#000000
editor.hoverHighlightBackground#bbbbffaa
editor.lineHighlightBorder#eeeed9
editor.placeholder.foreground#00000078
editor.rangeHighlightBackground#f2f2dd
editor.selectionBackground#eeee9eee
editor.selectionHighlightBackground#eeeed9
editor.wordHighlightBackground#eeeed9
editor.wordHighlightStrongBackground#eeeed9
editor.wordHighlightTextBackground#eeeed9
editorBracketMatch.background#f2f2dd
editorCodeLens.foreground#00000040
editorCursor.foreground#000000
editorGhostText.foreground#00000040
editorGroup.border#00000058
editorGroup.emptyBackground#ffffff
editorGroupHeader.border#00000058
editorGroupHeader.noTabsBackground#eaffff
editorGroupHeader.tabsBackground#eaffff
editorGroupHeader.tabsBorder#00000058
editorGutter.addedBackground#558855
editorGutter.addedSecondaryBackground#00000040
editorGutter.deletedBackground#bb5d5d
editorGutter.deletedSecondaryBackground#00000040
editorGutter.modifiedBackground#4670bb
editorGutter.modifiedSecondaryBackground#00000040
editorHoverWidget.background#ffffff
editorHoverWidget.border#000000cc
editorHoverWidget.statusBarBackground#ffffff
editorIndentGuide.activeBackground1#00000040
editorIndentGuide.background1#eeeed9
editorInfo.foreground#00000040
editorInlayHint.background#ffffea
editorInlayHint.foreground#00000040
editorLightBulbAutoFix.foreground#8888cc
editorLineNumber.activeForeground#000000
editorLineNumber.foreground#00000040
editorLink.activeForeground#4670bb
editorStickyScrollHover.background#00000010
editorSuggestWidget.background#eaffea
editorSuggestWidget.border#558855
editorSuggestWidget.focusHighlightForeground#ffffff
editorSuggestWidget.foreground#000000
editorSuggestWidget.highlightForeground#000000
editorSuggestWidget.selectedBackground#558855
editorSuggestWidget.selectedForeground#ffffff
editorSuggestWidget.selectedIconForeground#ffffff
editorWidget.background#eaffff
editorWidget.border#00000058
editorWidget.foreground#000000
errorForeground#bb5d5d
focusBorder#00000040
foreground#000000
gitDecoration.addedResourceForeground#000000
gitDecoration.conflictingResourceForeground#bb5d5d
gitDecoration.deletedResourceForeground#000000
gitDecoration.ignoredResourceForeground#00000078
gitDecoration.modifiedResourceForeground#000000
gitDecoration.renamedResourceForeground#000000
gitDecoration.stageDeletedResourceForeground#000000
gitDecoration.stageModifiedResourceForeground#000000
gitDecoration.submoduleResourceForeground#000000
gitDecoration.untrackedResourceForeground#000000
gitlens.trailingLineForegroundColor#00000040
icon.foreground#000000
inlineChat.background#ffffff
inlineChat.border#000000cc
inlineChatInput.focusBorder#000000cc
input.background#ffffff
input.border#00000058
input.foreground#000000
input.placeholderForeground#00000078
keybindingLabel.background#ffffff
keybindingLabel.border#00000058
keybindingLabel.bottomBorder#00000058
keybindingLabel.foreground#000000
list.activeSelectionBackground#00000010
list.activeSelectionForeground#000000
list.activeSelectionIconForeground#000000
list.errorForeground#bb5d5d
list.highlightForeground#000000
list.hoverBackground#00000010
list.inactiveFocusOutline#00000058
list.inactiveSelectionBackground#00000000
list.warningForeground#99884c
notebook.cellBorderColor#00000020
notebook.focusedCellBorder#00000020
notebook.outputContainerBorderColor#00000020
notificationCenter.border#00000058
notificationCenterHeader.background#ffffff
notificationCenterHeader.foreground#000000
notificationLink.foreground#4670bb
notifications.background#ffffff
notifications.border#00000058
notifications.foreground#000000
notificationsInfoIcon.foreground#000000
notificationToast.border#000000cc
panel.background#eaffff
panel.border#00000058
panelInput.border#00000058
panelSection.border#00000058
panelSectionHeader.background#eaffff
panelSectionHeader.border#00000058
panelTitle.activeBorder#000000
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#00000078
peekView.border#000000cc
peekViewEditor.background#ffffea
peekViewEditor.matchHighlightBackground#eeee9eee
peekViewResult.background#ffffea
peekViewResult.matchHighlightBackground#eeee9eee
peekViewTitle.background#eaffff
progressBar.background#8888cc
quickInputList.focusBackground#9eeeee
quickInputList.focusForeground#000000
sash.hoverBorder#8888cc
scmGraph.foreground1#8888cc
scmGraph.foreground2#8888cc
scmGraph.foreground3#8888cc
scmGraph.foreground4#8888cc
scmGraph.foreground5#8888cc
scmGraph.historyItemHoverDefaultLabelBackground#8888cc
scmGraph.historyItemHoverDefaultLabelForeground#ffffff
scmGraph.historyItemHoverLabelForeground#ffffff
scmGraph.historyItemRefColor#8888cc
scmGraph.historyItemRemoteRefColor#bb5d5d
scrollbarSlider.activeBackground#00000040
scrollbarSlider.background#00000040
scrollbarSlider.hoverBackground#00000040
selection.background#00000010
settings.checkboxBorder#00000058
settings.dropdownBorder#00000058
settings.headerForeground#000000
settings.modifiedItemIndicator#8888cc
settings.textInputBackground#ffffff
sideBar.background#ffffea
sideBar.border#00000058
sideBar.foreground#000000
sideBarSectionHeader.background#eaffff
sideBarSectionHeader.border#00000058
sideBarTitle.background#eaffff
sideBarTitle.border#00000058
statusBar.background#eaffff
statusBar.border#00000058
statusBar.debuggingBackground#bb5d5d
statusBar.debuggingForeground#ffffff
statusBar.foreground#000000
statusBar.noFolderBackground#ffffff
statusBar.noFolderForeground#000000
statusBarItem.compactHoverBackground#9eeeee
statusBarItem.hoverBackground#9eeeee
statusBarItem.prominentHoverBackground#9eeeee
statusBarItem.prominentHoverForeground#000000
statusBarItem.remoteBackground#eaffff
statusBarItem.remoteForeground#000000
statusBarItem.remoteHoverBackground#9eeeee
symbolIcon.arrayForeground#000000
symbolIcon.booleanForeground#000000
symbolIcon.classForeground#000000
symbolIcon.colorForeground#000000
symbolIcon.constantForeground#000000
symbolIcon.constructorForeground#000000
symbolIcon.enumeratorForeground#000000
symbolIcon.enumeratorMemberForeground#000000
symbolIcon.eventForeground#000000
symbolIcon.fieldForeground#000000
symbolIcon.fileForeground#000000
symbolIcon.folderForeground#000000
symbolIcon.functionForeground#000000
symbolIcon.interfaceForeground#000000
symbolIcon.keyForeground#000000
symbolIcon.keywordForeground#000000
symbolIcon.methodForeground#000000
symbolIcon.moduleForeground#000000
symbolIcon.namespaceForeground#000000
symbolIcon.nullForeground#000000
symbolIcon.numberForeground#000000
symbolIcon.objectForeground#000000
symbolIcon.operatorForeground#000000
symbolIcon.packageForeground#000000
symbolIcon.propertyForeground#000000
symbolIcon.referenceForeground#000000
symbolIcon.snippetForeground#000000
symbolIcon.stringForeground#000000
symbolIcon.structForeground#000000
symbolIcon.textForeground#000000
symbolIcon.typeParameterForeground#000000
symbolIcon.unitForeground#000000
symbolIcon.variableForeground#000000
tab.activeBackground#eaffff
tab.activeBorder#eaffff
tab.activeBorderTop#00000000
tab.activeForeground#000000
tab.border#00000058
tab.hoverBackground#eaffff
tab.hoverForeground#000000
tab.inactiveBackground#eaffff
tab.inactiveForeground#00000078
tab.inactiveModifiedBorder#eaffff
tab.lastPinnedBorder#00000058
tab.unfocusedActiveBackground#eaffff
tab.unfocusedActiveBorder#eaffff
tab.unfocusedActiveBorderTop#eaffff
tab.unfocusedInactiveBackground#eaffff
terminal.ansiBlack#000000
terminal.ansiBlue#4670bb
terminal.ansiBrightBlack#777770
terminal.ansiBrightBlue#afdbff
terminal.ansiBrightCyan#8ccccc
terminal.ansiBrightGreen#a8cca8
terminal.ansiBrightMagenta#d08eaa
terminal.ansiBrightRed#dd8888
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#eeee9e
terminal.ansiCyan#5aaaaa
terminal.ansiGreen#558855
terminal.ansiMagenta#aa6688
terminal.ansiRed#bb5d5d
terminal.ansiWhite#eeeed9
terminal.ansiYellow#99884c
terminal.background#ffffea
terminal.foreground#000000
terminal.selectionBackground#eeee9eee
terminal.tab.activeBorder#000000
terminalCommandDecoration.successBackground#8888cc
terminalStickyScrollHover.background#00000010
textBlockQuote.background#f2f2dd
textLink.activeForeground#000000
textLink.foreground#4670bb
textPreformat.foreground#00000078
titleBar.activeBackground#eaffff
titleBar.activeForeground#000000
titleBar.border#00000058
titleBar.inactiveBackground#eaffff
titleBar.inactiveForeground#00000078
toolbar.hoverBackground#00000010
tree.inactiveIndentGuidesStroke#00000020
tree.indentGuidesStroke#00000020
widget.border#00000058
widget.shadow#00000000
window.activeBorder#eaffff
window.inactiveBorder#ffffea

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring	#00000078	—
constant, constant.character.escape, entity.other.attribute-name.id, support.constant, string	#000000	—
entity.name.exception, invalid.illegal	#bb5d5d	—
entity.name.section.markdown	#000000	bold

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