Phocus Theme

Name: Phocus Theme
Author: Philipp Schaffrath

Publisher: Philipp SchaffrathThemes in package: 1

VSCode implementation of the phocus color scheme.

Open in VS Code GitHub

VS Code preview

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

Phocus Theme — phocus

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.activeBackground#1c1c1c
activityBar.activeBorder#00000000
activityBar.background#0a0a0a
activityBar.border#00000000
activityBar.dropBorder#7154f2
activityBar.foreground#ffffffde
activityBar.inactiveForeground#ffffff23
activityBarBadge.background#497ee9
activityBarBadge.foreground#ffffffde
badge.background#ffffff23
badge.foreground#ffffffde
banner.background#282828
banner.foreground#ffffffde
breadcrumb.activeSelectionForeground#ffffffde
breadcrumb.background#141414
breadcrumb.focusForeground#ffffffde
breadcrumb.foreground#ffffff57
button.background#7154f266
button.foreground#ffffffde
button.hoverBackground#7154f2b2
button.secondaryBackground#ffffff0f
button.secondaryForeground#ffffffde
button.secondaryHoverBackground#ffffff23
charts.blue#5d8dee
charts.foreground#ffffffde
charts.green#61d67e
charts.lines#ffffff57
charts.orange#fca660
charts.purple#8066f5
charts.red#e36d6d
charts.yellow#fadd75
checkbox.background#282828
checkbox.border#00000000
checkbox.foreground#ffffffde
commandCenter.activeBackground#ffffff23
commandCenter.background#ffffff0f
commandCenter.border#00000000
debugExceptionWidget.background#282828
debugExceptionWidget.border#282828
debugIcon.breakpointCurrentStackframeForeground#fadd75
debugIcon.breakpointDisabledForeground#ffffff23
debugIcon.breakpointForeground#da5858
debugIcon.breakpointStackframeForeground#61d67e
debugIcon.breakpointUnverifiedForeground#ffff00
debugIcon.continueForeground#61d67e
debugIcon.disconnectForeground#ff00ff
debugIcon.pauseForeground#da5858
debugIcon.restartForeground#fadd75
debugIcon.startForeground#61d67e
debugIcon.stepBackForeground#ffffff57
debugIcon.stepIntoForeground#ffffff57
debugIcon.stepOutForeground#ffffff57
debugIcon.stepOverForeground#ffffff57
debugIcon.stopForeground#e36d6d
debugToolBar.background#282828
debugToolBar.border#282828
diffEditor.border#ffffff0f
diffEditor.diagonalFill#1c1c1c
diffEditor.insertedLineBackground#3fc66120
diffEditor.insertedTextBackground#00000000
diffEditor.removedLineBackground#da585820
diffEditor.removedTextBackground#00000000
diffEditorGutter.insertedLineBackground#3fc66140
diffEditorGutter.removedLineBackground#da585840
dropdown.background#282828
dropdown.border#00000000
dropdown.foreground#ffffffde
editor.background#141414
editor.findMatchBackground#8066f599
editor.findMatchBorder#00000000
editor.findMatchHighlightBackground#8066f533
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#ffffff0f
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#497ee933
editor.foreground#d4d4d4
editor.hoverHighlightBackground#ffffff0f
editor.inactiveSelectionBackground#ffffff0f
editor.lineHighlightBackground#ffffff0f
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#ffffff0f
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#ffffff23
editor.selectionHighlightBackground#ffffff23
editor.selectionHighlightBorder#00000000
editor.wordHighlightBackground#ffffff0f
editor.wordHighlightStrongBackground#ffffff23
editorBracketHighlight.foreground1#e36d6dcc
editorBracketHighlight.foreground2#fadd75cc
editorBracketHighlight.foreground3#61d67ecc
editorBracketHighlight.foreground4#7eeaf6cc
editorBracketHighlight.foreground5#8066f5cc
editorBracketHighlight.foreground6#df81cfcc
editorBracketHighlight.unexpectedBracket.foreground#e36d6d
editorBracketMatch.background#ffffff0f
editorBracketMatch.border#00000000
editorBracketPairGuide.activeBackground1#e36d6d30
editorBracketPairGuide.activeBackground2#fadd7530
editorBracketPairGuide.activeBackground3#61d67e30
editorBracketPairGuide.activeBackground4#7eeaf630
editorBracketPairGuide.activeBackground5#8066f530
editorBracketPairGuide.activeBackground6#df81cf30
editorBracketPairGuide.background1#e36d6d20
editorBracketPairGuide.background2#fadd7520
editorBracketPairGuide.background3#61d67e20
editorBracketPairGuide.background4#7eeaf620
editorBracketPairGuide.background5#8066f520
editorBracketPairGuide.background6#df81cf20
editorCodeLens.foreground#ffffff23
editorCursor.background#000000
editorCursor.foreground#ffffff57
editorError.background#00000000
editorError.border#00000000
editorError.foreground#e36d6d
editorGroup.border#ffffff0f
editorGroup.dropBackground#7154f226
editorGroup.emptyBackground#141414
editorGroupHeader.tabsBackground#0a0a0a
editorGutter.addedBackground#3fc661
editorGutter.background#141414
editorGutter.commentRangeForeground#ffffff57
editorGutter.deletedBackground#da5858
editorGutter.foldingControlForeground#ffffff57
editorGutter.modifiedBackground#497ee9
editorHoverWidget.background#252526
editorHoverWidget.border#ffffff0f
editorHoverWidget.foreground#cccccc
editorIndentGuide.activeBackground1#e36d6d30
editorIndentGuide.activeBackground2#fadd7530
editorIndentGuide.activeBackground3#61d67e30
editorIndentGuide.activeBackground4#7eeaf630
editorIndentGuide.activeBackground5#8066f530
editorIndentGuide.activeBackground6#df81cf30
editorIndentGuide.background1#e36d6d20
editorIndentGuide.background2#fadd7520
editorIndentGuide.background3#61d67e20
editorIndentGuide.background4#7eeaf620
editorIndentGuide.background5#8066f520
editorIndentGuide.background6#df81cf20
editorInfo.background#00000000
editorInfo.border#00000000
editorInfo.foreground#5d8dee
editorLineNumber.activeForeground#ffffff57
editorLineNumber.foreground#ffffff23
editorLink.activeForeground#5d8dee
editorMarkerNavigation.background#282828
editorMarkerNavigationError.background#e36d6d
editorMarkerNavigationInfo.background#5d8dee
editorMarkerNavigationWarning.background#e8ca5e
editorOverviewRuler.background#141414
editorOverviewRuler.border#00000000
editorRuler.foreground#ffffff0f
editorSuggestWidget.background#252526
editorSuggestWidget.border#00000000
editorSuggestWidget.foreground#d4d4d4
editorSuggestWidget.highlightForeground#0097fb
editorSuggestWidget.selectedBackground#062f4a
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#fca669
editorWhitespace.foreground#ffffff23
editorWidget.background#1c1c1c
editorWidget.foreground#ffffffde
editorWidget.resizeBorder#ffffff23
focusBorder#00000000
foreground#ffffffde
gitDecoration.addedResourceForeground#61d67e
gitDecoration.conflictingResourceForeground#8066f5
gitDecoration.deletedResourceForeground#e36d6d
gitDecoration.ignoredResourceForeground#ffffff57
gitDecoration.modifiedResourceForeground#e8ca5e
gitDecoration.stageDeletedResourceForeground#e36d6d
gitDecoration.stageModifiedResourceForeground#e8ca5e
gitDecoration.submoduleResourceForeground#5d8dee
gitDecoration.untrackedResourceForeground#61d67e
icon.foreground#ffffffde
input.background#282828
input.border#00000000
input.foreground#ffffffde
input.placeholderForeground#ffffff23
inputOption.activeBackground#7154f2b2
inputOption.activeBorder#00000000
inputOption.activeForeground#ffffff
inputOption.hoverBackground#ffffff0f
keybindingLabel.background#00000026
keybindingLabel.border#0000006b
keybindingLabel.bottomBorder#0000006b
keybindingLabel.foreground#ffffff57
keybindingTable.headerBackground#00000026
list.activeSelectionBackground#7154f266
list.activeSelectionForeground#ffffff
list.dropBackground#7154f226
list.focusBackground#8066f533
list.focusForeground#ffffffde
list.highlightForeground#8066f5
list.hoverBackground#ffffff0f
list.hoverForeground#ffffffde
list.inactiveSelectionBackground#ffffff0f
list.inactiveSelectionForeground#ffffffde
list.warningForeground#e8ca5e
listFilterWidget.background#222222
listFilterWidget.noMatchesOutline#da5858
listFilterWidget.outline#282828
menu.background#282828
menu.border#282828
menu.foreground#ffffffde
menu.selectionBackground#ffffff0f
menu.selectionBorder#00000000
menu.selectionForeground#ffffff
menu.separatorBackground#ffffff23
menubar.selectionBackground#ffffff0f
menubar.selectionForeground#ffffffde
merge.commonContentBackground#ffffff23
merge.commonHeaderBackground#ffffff0f
merge.currentContentBackground#7154F226
merge.currentHeaderBackground#8066F533
merge.incomingContentBackground#3fc66126
merge.incomingHeaderBackground#61d67e33
minimap.background#1c1c1c
minimap.errorHighlight#e36d6d
minimap.findMatchHighlight#ffffff57
minimap.selectionHighlight#ffffff23
minimap.warningHighlight#fca669
minimapGutter.addedBackground#3fc661
minimapGutter.deletedBackground#da5858
minimapGutter.modifiedBackground#497ee9
notificationCenter.border#282828
notificationCenterHeader.background#222222
notificationCenterHeader.foreground#ffffff57
notifications.background#282828
notifications.border#303031
notifications.foreground#ffffffde
notificationsErrorIcon.foreground#e36d6d
notificationsInfoIcon.foreground#5d8dee
notificationsWarningIcon.foreground#e8ca5e
notificationToast.border#00000000
panel.background#0a0a0a
panel.border#00000000
panel.dropBorder#7154f2
panelSection.border#282828
panelTitle.activeBorder#7154F2cc
panelTitle.activeForeground#ffffffde
panelTitle.inactiveForeground#ffffff57
peekView.border#007acc
peekViewEditor.background#001f33
peekViewEditor.matchHighlightBackground#ff8f0099
peekViewEditor.matchHighlightBorder#ee931e
peekViewEditorGutter.background#001f33
peekViewResult.background#252526
peekViewResult.fileForeground#ffffff
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#1e1e1e
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#ffffff23
pickerGroup.foreground#ffffff57
progressBar.background#7154f299
scrollbar.shadow#0000006b
scrollbarSlider.activeBackground#ffffff23
scrollbarSlider.background#ffffff23
scrollbarSlider.hoverBackground#ffffff0f
selection.background#7154f266
settings.checkboxBackground#282828
settings.checkboxBorder#00000000
settings.focusedRowBackground#ffffff07
settings.headerForeground#ffffffde
sideBar.background#1c1c1c
sideBar.border#00000000
sideBar.dropBackground#7154f233
sideBar.foreground#ffffffde
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#ffffffde
sideBarTitle.foreground#ffffff57
statusBar.background#7154F266
statusBar.border#00000000
statusBar.debuggingBackground#da585833
statusBar.debuggingForeground#ffffffde
statusBar.focusBorder#00000000
statusBar.foreground#ffffffde
statusBar.noFolderBackground#497ee9cc
statusBar.noFolderForeground#ffffffde
statusBarItem.activeBackground#ffffff25
statusBarItem.compactHoverBackground#00000026
statusBarItem.errorBackground#873939
statusBarItem.focusBorder#00000000
statusBarItem.hoverBackground#0000006b
statusBarItem.remoteBackground#7154F2
statusBarItem.remoteForeground#ffffffde
tab.activeBackground#141414
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#ffffff
tab.border#00000000
tab.hoverBackground#141414
tab.hoverForeground#ffffffde
tab.inactiveBackground#0a0a0a
tab.inactiveForeground#ffffff57
terminal.ansiBlack#000000
terminal.ansiBlue#497ee9
terminal.ansiBrightBlack#ffffff57
terminal.ansiBrightBlue#5d8dee
terminal.ansiBrightCyan#7eeaf6
terminal.ansiBrightGreen#61d67e
terminal.ansiBrightMagenta#8066f5
terminal.ansiBrightRed#e36d6d
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e8ca5e
terminal.ansiCyan#5cd8e6
terminal.ansiGreen#3fc661
terminal.ansiMagenta#7154f2
terminal.ansiRed#da5858
terminal.ansiWhite#ffffffde
terminal.ansiYellow#e8ca5e
terminal.border#282828
terminal.foreground#cccccc
terminal.selectionBackground#ffffff23
terminalCursor.background#0A0A0A
terminalCursor.foreground#ffffffde
textLink.foreground#3fc661
titleBar.activeBackground#222222
titleBar.activeForeground#ffffffde
titleBar.border#00000000
titleBar.inactiveBackground#222222
titleBar.inactiveForeground#ffffff57
tree.indentGuidesStroke#ffffff23
walkThrough.embeddedEditorBackground#00000050
welcomePage.background#141414
welcomePage.progress.background#ffffff0f
welcomePage.progress.foreground#8066f5
welcomePage.tileBackground#1c1c1c
welcomePage.tileHoverBackground#222222
widget.shadow#0000006b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#ffffff57	italic
variable, string constant.other.placeholder	#ffffffde	—
source.css keyword.other	#fca660	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#e36d6d	—
keyword, storage.type, storage.modifier	#df81cf	—
keyword.control, constant.other.color, meta.tag, keyword.other.template, keyword.other.substitution	#7eeaf6	—
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded	#ffffffde	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#e36d6d	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#5d8dee	—
meta.block variable.other	#e36d6d	—
support.other.variable, string.other.link	#e36d6d	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape	#fca660	—
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	#61d67e	—
support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#ffffffde	—
entity.name	#ffffffde	—
entity.name.type	#fadd75	—
support.type	#7eeaf6	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#7eeaf6	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#e36d6d	—
variable.language	#e36d6d	italic
entity.name.method.js	#5d8dee	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#5d8dee	—
entity.other.attribute-name	#ffffffde	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#fadd75	italic
entity.other.attribute-name.class	#fadd75	—
source.sass keyword.control	#5d8dee	—
markup.inserted	#61d67e	—
markup.deleted	#e36d6d	—
markup.changed	#8066f5	—
string.regexp	#7eeaf6	—
constant.character.escape	#7eeaf6	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#5d8dee	italic
source.js constant.other.object.key.js string.unquoted.label.js	#e36d6d	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#8066f5	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#fadd75	—
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	#fca660	—
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	#e36d6d	—
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	#c17e70	—
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	#5d8dee	—
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	#e36d6d	—
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8066f5	—
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#61d67e	—
text.html.markdown, punctuation.definition.list_item.markdown	#ffffffde	—
text.html.markdown markup.inline.raw.markdown	#8066f5	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#ffffff57	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#61d67e	—
markup.italic	#e36d6d	italic
markup.bold, markup.bold string	#e36d6d	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	#e36d6d	bold
markup.underline	#fca660	underline
markup.quote punctuation.definition.blockquote.markdown	#ffffff57	—
markup.quote	—	italic
string.other.link.title.markdown	#5d8dee	—
string.other.link.description.title.markdown	#8066f5	—
constant.other.reference.link.markdown	#fadd75	—
markup.raw.block	#8066f5	—
markup.raw.block.fenced.markdown	#0000006b	—
punctuation.definition.fenced.markdown	#0000006b	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#ffffffde	—
variable.language.fenced.markdown	#ffffff57	—
meta.separator	#ffffff57	bold
markup.table	#ffffffde	—

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