Architect Theme

Name: Architect Theme
Author: Nick Moore

Publisher: Nick MooreThemes in package: 2

A calm, typography-first light and dark color theme for long, focused coding sessions.

Open in VS Code GitHub

Color themes

VS Code preview

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

Architect Theme — Architect 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#FFFFFF0B
activityBar.activeBorder#88C0D0
activityBar.background#16191E
activityBar.border#2B313B
activityBar.foreground#D8DEE9
activityBar.inactiveForeground#8792A3
activityBarBadge.background#88C0D0
activityBarBadge.foreground#16191E
activityBarTop.foreground#D8DEE9
activityBarTop.inactiveForeground#8792A3
badge.background#344256
badge.foreground#D8DEE9
breadcrumb.activeSelectionForeground#D8DEE9
breadcrumb.background#171A1F
breadcrumb.focusForeground#D8DEE9
breadcrumb.foreground#8792A3
breadcrumbPicker.background#20252D
button.background#81A1C1
button.foreground#ECEFF4
button.hoverBackground#88C0D0
button.secondaryBackground#20252D
button.secondaryForeground#D8DEE9
button.secondaryHoverBackground#344256
checkbox.background#20252D
checkbox.border#2B313B
checkbox.foreground#88C0D0
commandCenter.activeBackground#344256
commandCenter.activeForeground#D8DEE9
commandCenter.background#20252D
commandCenter.border#2B313B
commandCenter.foreground#A7B0BF
commandCenter.inactiveForeground#8792A3
debugExceptionWidget.background#20252D
debugExceptionWidget.border#BF6B73
debugIcon.breakpointDisabledForeground#8792A3
debugIcon.breakpointForeground#BF6B73
debugIcon.continueForeground#A3BE8C
debugIcon.disconnectForeground#D08770
debugIcon.pauseForeground#81A1C1
debugIcon.restartForeground#7FB4A8
debugIcon.startForeground#A3BE8C
debugIcon.stepIntoForeground#88C0D0
debugIcon.stepOutForeground#B48EAD
debugIcon.stepOverForeground#81A1C1
debugIcon.stopForeground#BF6B73
debugToolBar.background#20252D
debugToolBar.border#2B313B
descriptionForeground#A7B0BF
diffEditor.diagonalFill#8792A326
diffEditor.insertedLineBackground#A3BE8C12
diffEditor.insertedTextBackground#A3BE8C24
diffEditor.removedLineBackground#BF6B7312
diffEditor.removedTextBackground#BF6B7324
diffEditorGutter.insertedLineBackground#A3BE8C28
diffEditorGutter.removedLineBackground#BF6B7328
diffEditorOverview.insertedForeground#A3BE8C
diffEditorOverview.removedForeground#BF6B73
disabledForeground#8792A399
dropdown.background#20252D
dropdown.border#2B313B
dropdown.foreground#D8DEE9
editor.background#171A1F
editor.findMatchBackground#D9B26F59
editor.findMatchBorder#D9B26FB3
editor.findMatchHighlightBackground#D9B26F2E
editor.findRangeHighlightBackground#81A1C118
editor.foreground#D8DEE9
editor.hoverHighlightBackground#81A1C120
editor.inactiveSelectionBackground#2A3545
editor.lineHighlightBackground#20252C
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#81A1C118
editor.selectionBackground#344256
editor.selectionForeground#D8DEE9
editor.selectionHighlightBackground#81A1C126
editor.symbolHighlightBackground#7FB4A822
editor.wordHighlightBackground#81A1C124
editor.wordHighlightStrongBackground#B48EAD28
editor.wordHighlightTextBackground#7FB4A820
editorBracketHighlight.foreground1#81A1C1
editorBracketHighlight.foreground2#B48EAD
editorBracketHighlight.foreground3#7FB4A8
editorBracketHighlight.foreground4#D9B26F
editorBracketHighlight.foreground5#A3BE8C
editorBracketHighlight.foreground6#A7B0BF
editorBracketHighlight.unexpectedBracket.foreground#BF6B73
editorBracketMatch.background#88C0D026
editorBracketMatch.border#88C0D099
editorBracketPairGuide.activeBackground1#81A1C1
editorBracketPairGuide.activeBackground2#B48EAD
editorBracketPairGuide.activeBackground3#7FB4A8
editorBracketPairGuide.activeBackground4#D9B26F
editorBracketPairGuide.activeBackground5#A3BE8C
editorBracketPairGuide.activeBackground6#A7B0BF
editorBracketPairGuide.background1#81A1C14D
editorBracketPairGuide.background2#B48EAD4D
editorBracketPairGuide.background3#7FB4A84D
editorBracketPairGuide.background4#D9B26F4D
editorBracketPairGuide.background5#A3BE8C4D
editorBracketPairGuide.background6#A7B0BF4D
editorCodeLens.foreground#8792A3
editorCursor.foreground#88C0D0
editorError.border#00000000
editorError.foreground#BF6B73
editorGhostText.foreground#8792A3
editorGroup.border#2B313B
editorGroup.dropBackground#81A1C122
editorGroupHeader.noTabsBackground#171A1F
editorGroupHeader.tabsBackground#191D23
editorGroupHeader.tabsBorder#2B313B
editorGutter.addedBackground#A3BE8C
editorGutter.background#171A1F
editorGutter.deletedBackground#BF6B73
editorGutter.foldingControlForeground#8792A3
editorGutter.modifiedBackground#81A1C1
editorHint.border#00000000
editorHint.foreground#7FB4A8
editorHoverWidget.background#20252D
editorHoverWidget.border#2B313B
editorHoverWidget.foreground#D8DEE9
editorHoverWidget.highlightForeground#88C0D0
editorHoverWidget.statusBarBackground#191D23
editorIndentGuide.activeBackground1#88C0D080
editorIndentGuide.background1#2B313B
editorInfo.border#00000000
editorInfo.foreground#81A1C1
editorInlayHint.background#81A1C118
editorInlayHint.foreground#8792A3
editorInlayHint.parameterBackground#D9B26F18
editorInlayHint.parameterForeground#E0C58F
editorInlayHint.typeBackground#7FB4A818
editorInlayHint.typeForeground#7FB4A8
editorLightBulb.foreground#D9B26F
editorLightBulbAutoFix.foreground#7FB4A8
editorLineNumber.activeForeground#D8DEE9
editorLineNumber.foreground#8792A3
editorLink.activeForeground#88C0D0
editorOverviewRuler.addedForeground#A3BE8CB3
editorOverviewRuler.border#00000000
editorOverviewRuler.deletedForeground#BF6B73B3
editorOverviewRuler.errorForeground#BF6B73CC
editorOverviewRuler.infoForeground#81A1C1CC
editorOverviewRuler.modifiedForeground#81A1C1B3
editorOverviewRuler.warningForeground#D9B26FCC
editorRuler.foreground#2B313B
editorStickyScroll.background#171A1F
editorStickyScroll.border#2B313B
editorStickyScrollHover.background#20252C
editorSuggestWidget.background#20252D
editorSuggestWidget.border#2B313B
editorSuggestWidget.foreground#D8DEE9
editorSuggestWidget.highlightForeground#88C0D0
editorSuggestWidget.selectedBackground#344256
editorSuggestWidget.selectedForeground#D8DEE9
editorUnnecessaryCode.border#00000000
editorUnnecessaryCode.opacity#00000088
editorWarning.border#00000000
editorWarning.foreground#D9B26F
editorWhitespace.foreground#8792A355
editorWidget.background#20252D
editorWidget.border#2B313B
editorWidget.foreground#D8DEE9
editorWidget.resizeBorder#88C0D0
errorForeground#BF6B73
focusBorder#88C0D080
foreground#D8DEE9
gitDecoration.addedResourceForeground#A3BE8C
gitDecoration.conflictingResourceForeground#D08770
gitDecoration.deletedResourceForeground#BF6B73
gitDecoration.ignoredResourceForeground#8792A3
gitDecoration.modifiedResourceForeground#81A1C1
gitDecoration.renamedResourceForeground#7FB4A8
gitDecoration.submoduleResourceForeground#B48EAD
gitDecoration.untrackedResourceForeground#A3BE8C
icon.foreground#A7B0BF
input.background#20252D
input.border#2B313B
input.foreground#D8DEE9
input.placeholderForeground#8792A3
inputOption.activeBackground#88C0D025
inputOption.activeBorder#88C0D080
inputValidation.errorBackground#BF6B731F
inputValidation.errorBorder#BF6B73
inputValidation.infoBackground#81A1C11F
inputValidation.infoBorder#81A1C1
inputValidation.warningBackground#D9B26F1F
inputValidation.warningBorder#D9B26F
list.activeSelectionBackground#344256
list.activeSelectionForeground#D8DEE9
list.errorForeground#BF6B73
list.focusBackground#2A3545
list.focusForeground#D8DEE9
list.highlightForeground#81A1C1
list.hoverBackground#FFFFFF0D
list.hoverForeground#D8DEE9
list.inactiveSelectionBackground#2A3545
list.inactiveSelectionForeground#D8DEE9
list.invalidItemForeground#BF6B73
list.warningForeground#D9B26F
listFilterWidget.background#20252D
listFilterWidget.noMatchesOutline#BF6B73
listFilterWidget.outline#2B313B
markdown.extension.editor.codeSpan.backgroundColor#20252D
markdown.extension.editor.codeSpan.borderColor#2B313B
markdown.extension.editor.formattingMark.foreground#8792A3
menu.background#20252D
menu.border#2B313B
menu.foreground#D8DEE9
menu.selectionBackground#344256
menu.selectionForeground#D8DEE9
menu.separatorBackground#2B313B
menubar.selectionBackground#FFFFFF0D
menubar.selectionBorder#00000000
menubar.selectionForeground#D8DEE9
merge.commonContentBackground#8792A315
merge.commonHeaderBackground#8792A32B
merge.currentContentBackground#81A1C117
merge.currentHeaderBackground#81A1C133
merge.incomingContentBackground#7FB4A817
merge.incomingHeaderBackground#7FB4A833
mergeEditor.change.background#D9B26F1F
mergeEditor.change.word.background#D9B26F3D
mergeEditor.conflict.handledFocused.border#7FB4A8
mergeEditor.conflict.handledUnfocused.border#2B313B
mergeEditor.conflict.unhandledFocused.border#D9B26F
mergeEditor.conflict.unhandledUnfocused.border#D08770
minimap.background#171A1F
minimap.errorHighlight#BF6B73
minimap.findMatchHighlight#D9B26F99
minimap.selectionHighlight#81A1C166
minimap.warningHighlight#D9B26F
minimapSlider.activeBackground#88C0D055
minimapSlider.background#8792A322
minimapSlider.hoverBackground#8792A33D
notificationCenter.border#2B313B
notificationCenterHeader.background#191D23
notificationCenterHeader.foreground#D8DEE9
notificationLink.foreground#88C0D0
notifications.background#20252D
notifications.border#2B313B
notifications.foreground#D8DEE9
notificationsErrorIcon.foreground#BF6B73
notificationsInfoIcon.foreground#81A1C1
notificationsWarningIcon.foreground#D9B26F
notificationToast.border#2B313B
panel.background#191D23
panel.border#2B313B
panelInput.border#2B313B
panelSection.border#2B313B
panelSectionHeader.background#20252D
panelSectionHeader.foreground#D8DEE9
panelTitle.activeBorder#88C0D0
panelTitle.activeForeground#D8DEE9
panelTitle.inactiveForeground#8792A3
peekView.border#88C0D0
peekViewEditor.background#191D23
peekViewEditor.matchHighlightBackground#D9B26F4D
peekViewResult.background#1B1F26
peekViewResult.fileForeground#D8DEE9
peekViewResult.lineForeground#A7B0BF
peekViewResult.matchHighlightBackground#D9B26F38
peekViewResult.selectionBackground#344256
peekViewResult.selectionForeground#D8DEE9
peekViewTitle.background#20252D
peekViewTitleDescription.foreground#8792A3
peekViewTitleLabel.foreground#D8DEE9
pickerGroup.border#2B313B
pickerGroup.foreground#88C0D0
progressBar.background#88C0D0
quickInput.background#20252D
quickInput.foreground#D8DEE9
quickInputList.focusBackground#344256
quickInputList.focusForeground#D8DEE9
quickInputList.focusIconForeground#88C0D0
sash.hoverBorder#88C0D099
scrollbar.shadow#0D0F1266
scrollbarSlider.activeBackground#88C0D066
scrollbarSlider.background#8792A333
scrollbarSlider.hoverBackground#8792A355
settings.dropdownBackground#20252D
settings.dropdownBorder#2B313B
settings.dropdownForeground#D8DEE9
settings.headerForeground#D8DEE9
settings.modifiedItemIndicator#88C0D0
settings.textInputBackground#20252D
settings.textInputBorder#2B313B
settings.textInputForeground#D8DEE9
sideBar.background#1B1F26
sideBar.border#2B313B
sideBar.foreground#A7B0BF
sideBarActivityBarTop.border#2B313B
sideBarSectionHeader.background#20252D
sideBarSectionHeader.border#2B313B
sideBarSectionHeader.foreground#D8DEE9
sideBarTitle.foreground#D8DEE9
statusBar.background#20252D
statusBar.border#2B313B
statusBar.debuggingBackground#D08770
statusBar.debuggingForeground#ECEFF4
statusBar.foreground#A7B0BF
statusBar.noFolderBackground#1B1F26
statusBar.noFolderForeground#A7B0BF
statusBarItem.activeBackground#88C0D024
statusBarItem.errorBackground#BF6B73
statusBarItem.errorForeground#ECEFF4
statusBarItem.hoverBackground#FFFFFF0D
statusBarItem.prominentBackground#344256
statusBarItem.prominentForeground#D8DEE9
statusBarItem.warningBackground#D9B26F
statusBarItem.warningForeground#16191E
tab.activeBackground#171A1F
tab.activeBorder#00000000
tab.activeBorderTop#88C0D0
tab.activeForeground#D8DEE9
tab.border#2B313B
tab.hoverBackground#20252D
tab.hoverForeground#D8DEE9
tab.inactiveBackground#191D23
tab.inactiveForeground#8792A3
tab.lastPinnedBorder#2B313B
tab.unfocusedActiveForeground#A7B0BF
tab.unfocusedInactiveForeground#8792A3
terminal.ansiBlack#3B4252
terminal.ansiBlue#7797B7
terminal.ansiBrightBlack#667080
terminal.ansiBrightBlue#8AAAC8
terminal.ansiBrightCyan#88C0D0
terminal.ansiBrightGreen#A3BE8C
terminal.ansiBrightMagenta#B994B1
terminal.ansiBrightRed#D27C83
terminal.ansiBrightWhite#ECEFF4
terminal.ansiBrightYellow#D9B26F
terminal.ansiCyan#72A79D
terminal.ansiGreen#91AD7D
terminal.ansiMagenta#A681A0
terminal.ansiRed#BF6B73
terminal.ansiWhite#C7CED9
terminal.ansiYellow#C9A55F
terminal.background#191D23
terminal.border#2B313B
terminal.dropBackground#81A1C122
terminal.foreground#D8DEE9
terminal.inactiveSelectionBackground#2A3545
terminal.selectionBackground#344256
terminalCommandDecoration.defaultBackground#8792A3
terminalCommandDecoration.errorBackground#BF6B73
terminalCommandDecoration.successBackground#A3BE8C
terminalCursor.background#191D23
terminalCursor.foreground#88C0D0
terminalOverviewRuler.cursorForeground#88C0D0
terminalOverviewRuler.findMatchForeground#D9B26F
testing.iconErrored#D08770
testing.iconFailed#BF6B73
testing.iconPassed#A3BE8C
testing.iconQueued#8792A3
testing.iconSkipped#E0C58F
testing.iconUnset#8792A3
testing.message.error.decorationForeground#BF6B73
testing.message.info.decorationForeground#81A1C1
testing.peekBorder#BF6B73
testing.runAction#7FB4A8
textBlockQuote.background#FFFFFF0B
textBlockQuote.border#7FB4A8
textCodeBlock.background#20252D
textLink.activeForeground#88C0D0
textLink.foreground#81A1C1
textPreformat.foreground#E0C58F
titleBar.activeBackground#16191E
titleBar.activeForeground#D8DEE9
titleBar.border#2B313B
titleBar.inactiveBackground#191D23
titleBar.inactiveForeground#8792A3
tree.inactiveIndentGuidesStroke#2B313B99
tree.indentGuidesStroke#2B313B
walkThrough.embeddedEditorBackground#191D23
welcomePage.background#171A1F
welcomePage.tileBackground#20252D
welcomePage.tileHoverBackground#344256
window.activeBorder#2B313B
window.inactiveBorder#2B313B99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#899696	italic
comment.block.documentation, string.quoted.docstring, comment.line.documentation	#899696	italic
keyword, storage.type, storage.modifier	#B48EAD	—
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop	#B48EAD	—
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical	#A7B0BF	—
punctuation, meta.brace, meta.delimiter, punctuation.separator, punctuation.terminator	#A7B0BF	—
variable, meta.definition.variable.name	#D8DEE9	—
variable.language, variable.language.this, variable.language.self	#B48EAD	—
variable.other.constant, constant.other, support.constant	#E0C58F	—
variable.parameter, meta.parameters variable	#D08770	—
variable.other.property, support.type.property-name, meta.object-literal.key	#81A1C1	—
entity.name.function, support.function, meta.function-call entity.name.function	#81A1C1	—
entity.name.function.member, meta.method-call entity.name.function, variable.function	#81A1C1	—
entity.name.function.constructor, support.class	#88C0D0	—
entity.name.type.class, entity.name.type.struct, support.class, support.type	#88C0D0	—
entity.name.type.interface, entity.name.type.trait	#7FB4A8	—
entity.name.type.enum	#88C0D0	—
variable.other.enummember, constant.other.enum	#E0C58F	—
entity.name.type, storage.type.numeric, storage.type.primitive	#88C0D0	—
entity.name.type.parameter, meta.type.parameters entity.name.type	#7FB4A8	—
entity.name.namespace, entity.name.type.module, support.module	#7FB4A8	—
string, punctuation.definition.string	#A3BE8C	—
punctuation.definition.template-expression, punctuation.section.embedded	#D9B26F	—
constant.character.escape, constant.character.format.placeholder	#D9B26F	—
constant.numeric	#D9B26F	—
constant.language.boolean	#E0C58F	—
constant.language.null, constant.language.nil, constant.language.undefined	#E0C58F	—
string.regexp, constant.regexp, keyword.control.anchor.regexp	#7FB4A8	—
entity.name.tag, punctuation.definition.tag	#D08770	—
entity.other.attribute-name, meta.attribute	#E0C58F	—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css	#D08770	—
support.type.property-name.css, meta.property-name.css	#81A1C1	—
support.constant.property-value.css, constant.numeric.css, keyword.other.unit	#D9B26F	—
support.type.property-name.json, string.json meta.structure.dictionary.value	#81A1C1	—
entity.name.tag.yaml, string.unquoted.plain.out.yaml	#81A1C1	—
support.function.builtin.shell, entity.name.function.shell, meta.function-call.shell	#81A1C1	—
variable.other.normal.shell, variable.other.positional.shell	#D08770	—
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown	#81A1C1	bold
markup.underline.link, string.other.link.title.markdown, meta.link.inline.markdown	#88C0D0	—
markup.inline.raw, markup.raw.inline	#7FB4A8	—
markup.fenced_code.block, markup.raw.block	#A3BE8C	—
markup.quote, punctuation.definition.quote.begin.markdown	#899696	italic
markup.bold	#D8DEE9	bold
markup.italic	#D8DEE9	italic
markup.inserted, meta.diff.header.to-file	#A3BE8C	—
markup.deleted, meta.diff.header.from-file	#BF6B73	—
markup.changed	#D9B26F	—
invalid, invalid.illegal	#BF6B73	underline
invalid.deprecated, entity.name.function.deprecated	#8792A3	strikethrough