Skip to main content
Home Theme VS Code Agathist Themes A collection of VSCode themes based on Agathist's brand colors
VS Code preview Full workbench mockup using this variant's colors and tokenColors.
colors Workbench UI color keys from the theme JSON colors map.
activityBar.activeBackground #2D354633 activityBar.activeBorder #C4CAD4 activityBar.activeFocusBorder #EC4899 activityBar.background #1e293b activityBar.border #0F172A activityBar.dropBorder #FDA4AF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #C4CAD4 — comment #69717F — constant #FB923C — entity #f472b6 — entity.name.tag
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Agathist Themes — Agathist Dark
activityBar.foreground
#A6ACB7
activityBar.inactiveForeground #888E9B
activityBarBadge.background #EC4899
activityBarBadge.foreground #0F172A
badge.background #EC4899
badge.foreground #0F172A
breadcrumb.activeSelectionForeground #E2E8F0
breadcrumb.background #0f172a
breadcrumb.focusForeground #C4CAD4
breadcrumb.foreground #A6ACB7
breadcrumbPicker.background #0f172a
button.background #FDA4AF
button.foreground #0F172A
button.hoverBackground #fb7185
button.secondaryBackground #C4CAD4
button.secondaryForeground #0F172A
button.secondaryHoverBackground #A6ACB7
charts.blue #FDA4AF
charts.foreground #C4CAD4
charts.green #34D399
charts.lines #69717F
charts.orange #CBD5E1
charts.purple #EC4899
charts.red #F43F5E
charts.yellow #FB923C
checkbox.background #FDA4AF
checkbox.border #2D3546
checkbox.foreground #0F172A
debugConsole.errorForeground #F43F5E
debugConsole.infoForeground #FDA4AF
debugConsole.sourceForeground #EC4899
debugConsole.warningForeground #CBD5E1
debugConsoleInputIcon.foreground #888E9B
debugExceptionWidget.background #2D3546
debugExceptionWidget.border #2D3546
debugIcon.breakpointCurrentStackframeForeground #34D399
debugIcon.breakpointDisabledForeground #888E9B
debugIcon.breakpointForeground #F43F5E
debugIcon.breakpointStackframeForeground #FB923C
debugIcon.breakpointUnverifiedForeground #A6ACB7
debugIcon.continueForeground #34D399
debugIcon.disconnectForeground #CBD5E1
debugIcon.pauseForeground #FDA4AF
debugIcon.restartForeground #FB7185
debugIcon.startForeground #34D399
debugIcon.stepBackForeground #E2E8F0
debugIcon.stepIntoForeground #E2E8F0
debugIcon.stepOutForeground #E2E8F0
debugIcon.stepOverForeground #E2E8F0
debugIcon.stopForeground #F43F5E
debugTokenExpression.boolean #EC4899
debugTokenExpression.error #F43F5E
debugTokenExpression.name #FDA4AF
debugTokenExpression.number #FB7185
debugTokenExpression.string #34D399
debugTokenExpression.value #E2E8F0
debugToolBar.background #2D3546
debugToolBar.border #4B5363
debugView.exceptionLabelBackground #2D3546
debugView.exceptionLabelForeground #FB923C
debugView.stateLabelBackground #2D3546
debugView.stateLabelForeground #FDA4AF
debugView.valueChangedHighlight #FB923C33
descriptionForeground #C4CAD4
diffEditor.border #2D3546
diffEditor.diagonalFill #2D35467f
diffEditor.insertedTextBackground #34D39920
diffEditor.removedTextBackground #F43F5E20
dropdown.background #2D3546
dropdown.border #2D3546
dropdown.foreground #C4CAD4
dropdown.listBackground #2D3546
editor.background #0F172A
editor.findMatchBackground #FB923C3f
editor.findMatchHighlightBackground #FB923C33
editor.findRangeHighlightBackground #2D354633
editor.focusedStackFrameHighlightBackground #34D3993f
editor.foldBackground #2D354666
editor.foreground #E2E8F0
editor.hoverHighlightBackground #4B53637f
editor.inactiveSelectionBackground #FDA4AF33
editor.lineHighlightBackground #0F172A
editor.lineHighlightBorder #2D3546
editor.rangeHighlightBackground #FB923C33
editor.selectionBackground #cbd5e122
editor.selectionForeground #E2E8F0
editor.selectionHighlightBackground #2D354633
editor.snippetFinalTabstopHighlightBackground #4B53637f
editor.snippetTabstopHighlightBackground #2D35467f
editor.stackFrameHighlightBackground #22D3EE3f
editor.symbolHighlightBackground #EC489933
editor.wordHighlightBackground #EC489933
editor.wordHighlightStrongBackground #FB718533
editorBracketHighlight.foreground1 #E2E8F0
editorBracketHighlight.foreground2 #FB923C
editorBracketHighlight.foreground3 #22D3EE
editorBracketHighlight.foreground4 #EC4899
editorBracketHighlight.foreground5 #34D399
editorBracketHighlight.foreground6 #FDA4AF
editorBracketHighlight.unexpectedBracket.foreground #F43F5E
editorBracketMatch.background #2D3546
editorBracketMatch.border #4B5363
editorCodeLens.foreground #A6ACB7
editorCursor.background #0F172A
editorCursor.foreground #EC4899
editorError.border #0F172A
editorError.foreground #F43F5E
editorGroup.border #2D3546
editorGroup.dropBackground #4B53637f
editorGroup.emptyBackground #0F172A
editorGroup.focusedEmptyBorder #2D3546
editorGroupHeader.border #0F172A
editorGroupHeader.noTabsBackground #0F172A
editorGroupHeader.tabsBackground #1e293b
editorGroupHeader.tabsBorder #0F172A
editorGutter.addedBackground #34D399
editorGutter.background #0F172A
editorGutter.commentRangeForeground #69717F
editorGutter.deletedBackground #F43F5E
editorGutter.foldingControlForeground #A6ACB7
editorGutter.modifiedBackground #fb923c
editorHint.border #0F172A
editorHint.foreground #fb7185
editorHoverWidget.background #2D3546
editorHoverWidget.border #2D3546
editorHoverWidget.foreground #C4CAD4
editorHoverWidget.statusBarBackground #FDA4AF33
editorIndentGuide.activeBackground1 #4B5363
editorIndentGuide.background1 #2D3546
editorInfo.border #0F172A
editorInfo.foreground #FDA4AF
editorLightBulb.foreground #FB923C
editorLightBulbAutoFix.foreground #FDA4AF
editorLineNumber.activeForeground #888E9B
editorLineNumber.foreground #4B5363
editorLink.activeForeground #22D3EE
editorMarkerNavigation.background #2D3546
editorMarkerNavigationError.background #F43F5E
editorMarkerNavigationInfo.background #FDA4AF
editorMarkerNavigationWarning.background #CBD5E1
editorOverviewRuler.addedForeground #34D3997f
editorOverviewRuler.border #2D3546
editorOverviewRuler.bracketMatchForeground #69717F
editorOverviewRuler.commonContentForeground #EC4899
editorOverviewRuler.currentContentForeground #22D3EE
editorOverviewRuler.deletedForeground #F43F5E7f
editorOverviewRuler.errorForeground #F43F5E7f
editorOverviewRuler.findMatchForeground #FDA4AFbf
editorOverviewRuler.incomingContentForeground #FDA4AF
editorOverviewRuler.infoForeground #FDA4AF7f
editorOverviewRuler.modifiedForeground #fb923c7f
editorOverviewRuler.rangeHighlightForeground #4B5363bf
editorOverviewRuler.selectionHighlightForeground #2D3546bf
editorOverviewRuler.warningForeground #CBD5E17f
editorOverviewRuler.wordHighlightForeground #4B5363bf
editorOverviewRuler.wordHighlightStrongForeground #69717Fbf
editorPane.background #0F172A
editorRuler.foreground #2D3546
editorSuggestWidget.background #2D3546
editorSuggestWidget.border #2D3546
editorSuggestWidget.foreground #C4CAD4
editorSuggestWidget.highlightForeground #FB7185
editorSuggestWidget.selectedBackground #4B5363
editorUnnecessaryCode.opacity #0000007f
editorWarning.border #0F172A
editorWarning.foreground #FB7185
editorWhitespace.foreground #2D3546
editorWidget.background #2D3546
editorWidget.border #2D3546
editorWidget.foreground #C4CAD4
editorWidget.resizeBorder #FDA4AF
errorForeground #F43F5E
extensionBadge.remoteBackground #FB7185
extensionBadge.remoteForeground #0F172A
extensionButton.prominentBackground #FDA4AF
extensionButton.prominentForeground #0F172A
extensionButton.prominentHoverBackground #22D3EE
focusBorder #EC4899
foreground #E2E8F0
gitDecoration.addedResourceForeground #34D399
gitDecoration.conflictingResourceForeground #facc15
gitDecoration.deletedResourceForeground #F43F5E
gitDecoration.ignoredResourceForeground #69717F
gitDecoration.modifiedResourceForeground #fb923c
gitDecoration.stageDeletedResourceForeground #F43F5E
gitDecoration.stageModifiedResourceForeground #22d3ee
gitDecoration.submoduleResourceForeground #FB7185
gitDecoration.untrackedResourceForeground #FDA4AF
icon.foreground #C4CAD4
input.background #2D3546
input.border #2D3546
input.foreground #C4CAD4
input.placeholderForeground #4B5363
inputOption.activeBackground #4B5363
inputOption.activeBorder #22D3EE
inputOption.activeForeground #E2E8F0
inputValidation.errorBackground #2D3546
inputValidation.errorBorder #F43F5E
inputValidation.errorForeground #F43F5E
inputValidation.infoBackground #2D3546
inputValidation.infoBorder #FDA4AF
inputValidation.infoForeground #FDA4AF
inputValidation.warningBackground #2D3546
inputValidation.warningBorder #CBD5E1
inputValidation.warningForeground #CBD5E1
list.activeSelectionBackground #EC489933
list.activeSelectionForeground #E2E8F0
list.deemphasizedForeground #888E9B
list.dropBackground #2D3546
list.errorForeground #F43F5E
list.filterMatchBackground #FB923C33
list.filterMatchBorder #FB923C33
list.focusBackground #69717F3f
list.focusForeground #E2E8F0
list.highlightForeground #FB7185
list.hoverBackground #2D354633
list.hoverForeground #E2E8F0
list.inactiveFocusBackground #2D35463f
list.inactiveSelectionBackground #4B53633f
list.inactiveSelectionForeground #C4CAD4
list.invalidItemForeground #F43F5E
list.warningForeground #fb923c
listFilterWidget.background #2D3546
listFilterWidget.noMatchesOutline #F43F5E
listFilterWidget.outline #FDA4AF
menu.background #0F172A
menu.foreground #C4CAD4
menu.selectionBackground #2D3546
menu.selectionForeground #E2E8F0
menu.separatorBackground #4B5363
menubar.selectionBackground #2D3546
menubar.selectionForeground #E2E8F0
merge.border #888E9B
merge.commonContentBackground #EC48994c
merge.commonHeaderBackground #EC48994c
merge.currentContentBackground #22D3EE4c
merge.currentHeaderBackground #22D3EE4c
merge.incomingContentBackground #FDA4AF4c
merge.incomingHeaderBackground #FDA4AF4c
minimap.background #0F172A
minimap.errorHighlight #F43F5E80
minimap.findMatchHighlight #FB718580
minimap.selectionHighlight #FDA4AF80
minimap.warningHighlight #CBD5E180
minimapGutter.addedBackground #34D39980
minimapGutter.deletedBackground #F43F5E80
minimapGutter.modifiedBackground #fb923c80
minimapSlider.activeBackground #69717F33
minimapSlider.background #2D354633
minimapSlider.hoverBackground #4B536333
notebook.cellBorderColor #2D35463f
notebook.cellHoverBackground #2D35463f
notebook.cellInsertionIndicator #34D399
notebook.cellStatusBarItemHoverBackground #2D35463f
notebook.cellToolbarSeparator #2D35463f
notebook.focusedCellBackground #2D35467f
notebook.focusedCellBorder #EC4899
notebook.focusedEditorBorder #2D3546
notebook.inactiveFocusedCellBorder #A6ACB7
notebook.outputContainerBackgroundColor #0F172A
notebook.selectedCellBorder #888E9B
notebook.symbolHighlightBackground #EC48993f
notebookScrollbarSlider.activeBackground #A6ACB77f
notebookScrollbarSlider.background #69717F7f
notebookScrollbarSlider.hoverBackground #888E9B7f
notebookStatusErrorIcon.foreground #F43F5E
notebookStatusRunningIcon.foreground #FDA4AF
notebookStatusSuccessIcon.foreground #34D399
notificationCenterHeader.background #4B5363
notificationCenterHeader.foreground #C4CAD4
notificationLink.foreground #FDA4AF
notifications.background #2D3546
notifications.border #69717F
notifications.foreground #E2E8F0
notificationsErrorIcon.foreground #F43F5E
notificationsInfoIcon.foreground #FDA4AF
notificationsWarningIcon.foreground #CBD5E1
notificationToast.border #69717F
panel.background #0F172A
panel.border #2D3546
panel.dropBorder #FDA4AF
panelSection.border #2D3546
panelSection.dropBackground #2D35463f
panelSectionHeader.background #4B5363
panelSectionHeader.border #0F172A
panelSectionHeader.foreground #C4CAD4
panelTitle.activeBorder #69717F
panelTitle.activeForeground #C4CAD4
panelTitle.inactiveForeground #888E9B
peekView.border #FB7185
peekViewEditor.background #2D35467f
peekViewEditor.matchHighlightBackground #FDA4AFbf
peekViewEditorGutter.background #2D35467f
peekViewResult.background #2D3546
peekViewResult.fileForeground #C4CAD4
peekViewResult.lineForeground #4B5363
peekViewResult.matchHighlightBackground #FDA4AF
peekViewResult.selectionBackground #69717F
peekViewResult.selectionForeground #E2E8F0
peekViewTitle.background #2D3546
peekViewTitleDescription.foreground #A6ACB7
peekViewTitleLabel.foreground #E2E8F0
pickerGroup.border #4B5363
pickerGroup.foreground #888E9B
problemsErrorIcon.foreground #F43F5E
problemsInfoIcon.foreground #FDA4AF
problemsWarningIcon.foreground #CBD5E1
progressBar.background #34D399
quickInput.background #2D3546
quickInput.foreground #E2E8F0
quickInputTitle.background #4B5363
sash.hoverBorder #FDA4AF
scrollbar.shadow #0F172A
scrollbarSlider.activeBackground #A6ACB77f
scrollbarSlider.background #69717F7f
scrollbarSlider.hoverBackground #888E9B7f
selection.background #4B5363
settings.checkboxBackground #FDA4AF
settings.checkboxBorder #FDA4AF
settings.checkboxForeground #0F172A
settings.dropdownBackground #2D3546
settings.dropdownForeground #C4CAD4
settings.dropdownListBorder #4B5363
settings.focusedRowBackground #0F172A
settings.headerForeground #E2E8F0
settings.modifiedItemIndicator #fb923c
settings.numberInputBackground #2D3546
settings.numberInputForeground #C4CAD4
settings.textInputBackground #2D3546
settings.textInputForeground #C4CAD4
sideBar.background #0F172A
sideBar.border #2D3546
sideBar.dropBackground #2D35463f
sideBar.foreground #C4CAD4
sideBarSectionHeader.background #4B5363
sideBarSectionHeader.border #0F172A
sideBarSectionHeader.foreground #C4CAD4
sideBarTitle.foreground #A6ACB7
statusBar.background #FDA4AF
statusBar.border #0F172A
statusBar.debuggingBackground #CBD5E1
statusBar.debuggingBorder #0F172A
statusBar.debuggingForeground #0F172A
statusBar.foreground #0F172A
statusBar.noFolderBackground #EC4899
statusBar.noFolderBorder #0F172A
statusBar.noFolderForeground #0F172A
statusBarItem.activeBackground #EC4899
statusBarItem.errorBackground #F43F5E
statusBarItem.errorForeground #0F172A
statusBarItem.hoverBackground #fb7185
statusBarItem.prominentBackground #fb7185
statusBarItem.prominentHoverBackground #EC4899
statusBarItem.remoteBackground #EC4899
statusBarItem.remoteForeground #0F172A
symbolIcon.arrayForeground #FB7185
symbolIcon.booleanForeground #EC4899
symbolIcon.classForeground #FDA4AF
symbolIcon.colorForeground #22D3EE
symbolIcon.constantForeground #34D399
symbolIcon.constructorForeground #EC4899
symbolIcon.enumeratorForeground #22D3EE
symbolIcon.enumeratorMemberForeground #FDA4AF
symbolIcon.eventForeground #CBD5E1
symbolIcon.fieldForeground #F43F5E
symbolIcon.fileForeground #C4CAD4
symbolIcon.folderForeground #A6ACB7
symbolIcon.functionForeground #EC4899
symbolIcon.interfaceForeground #F43F5E
symbolIcon.keyForeground #FB923C
symbolIcon.keywordForeground #FDA4AF
symbolIcon.methodForeground #22D3EE
symbolIcon.moduleForeground #22D3EE
symbolIcon.namespaceForeground #FDA4AF
symbolIcon.nullForeground #F43F5E
symbolIcon.numberForeground #CBD5E1
symbolIcon.objectForeground #E2E8F0
symbolIcon.operatorForeground #F43F5E
symbolIcon.packageForeground #CBD5E1
symbolIcon.propertyForeground #22D3EE
symbolIcon.referenceForeground #CBD5E1
symbolIcon.snippetForeground #A6ACB7
symbolIcon.stringForeground #34D399
symbolIcon.structForeground #FDA4AF
symbolIcon.textForeground #E2E8F0
symbolIcon.typeParameterForeground #FDA4AF
symbolIcon.unitForeground #FB923C
symbolIcon.variableForeground #CBD5E1
tab.activeBackground #0f172a
tab.activeBorder #FDA4AF
tab.activeForeground #C4CAD4
tab.activeModifiedBorder #fb923c
tab.border #0F172A
tab.hoverBackground #2D354680
tab.hoverForeground #A6ACB7
tab.inactiveBackground #1e293b
tab.inactiveForeground #69717F
tab.inactiveModifiedBorder #fb7185
tab.lastPinnedBorder #FB7185
tab.unfocusedActiveBackground #0F172A
tab.unfocusedActiveForeground #69717F
tab.unfocusedActiveModifiedBorder #fb923c
tab.unfocusedHoverBackground #2D354680
tab.unfocusedHoverForeground #888E9B
tab.unfocusedInactiveBackground #2D3546
tab.unfocusedInactiveForeground #4B5363
tab.unfocusedInactiveModifiedBorder #fb923c
terminal.ansiBlack #0F172A
terminal.ansiBlue #FDA4AF
terminal.ansiBrightBlack #2D3546
terminal.ansiBrightBlue #FDA4AF
terminal.ansiBrightCyan #22D3EE
terminal.ansiBrightGreen #22D3EE
terminal.ansiBrightMagenta #FB7185
terminal.ansiBrightRed #CBD5E1
terminal.ansiBrightWhite #E2E8F0
terminal.ansiBrightYellow #FB923C
terminal.ansiCyan #22D3EE
terminal.ansiGreen #34D399
terminal.ansiMagenta #FB7185
terminal.ansiRed #F43F5E
terminal.ansiWhite #C4CAD4
terminal.ansiYellow #FB923C
terminal.background #0F172A
terminal.foreground #C4CAD4
terminal.selectionBackground #FDA4AF7f
terminalCursor.background #2D3546
terminalCursor.foreground #A6ACB7
testing.iconErrored #F43F5E
testing.iconFailed #CBD5E1
testing.iconPassed #34D399
testing.iconQueued #22D3EE
testing.iconSkipped #888E9B
testing.iconUnset #A6ACB7
testing.message.error.decorationForeground #F43F5E
testing.message.error.lineBackground #F43F5E3f
testing.message.info.decorationForeground #FDA4AF
testing.message.info.lineBackground #FDA4AF3f
testing.peekBorder #69717F
testing.runAction #FDA4AF
textBlockQuote.background #2D3546
textBlockQuote.border #2D3546
textCodeBlock.background #0F172A
textLink.activeForeground #22D3EE
textLink.foreground #FDA4AF
textPreformat.foreground #CBD5E1
textSeparator.foreground #888E9B
titleBar.activeBackground #1e293b
titleBar.activeForeground #A6ACB7
titleBar.inactiveBackground #1e293b
titleBar.inactiveForeground #69717F
tree.indentGuidesStroke #2D3546
walkThrough.embeddedEditorBackground #0F172A
welcomePage.background #0F172A
welcomePage.progress.background #FDA4AF
welcomePage.progress.foreground #0F172A
widget.shadow #0F172A
#FB7185
markup.underline — underline
markup.underline.link #FDA4AF —
markup.raw, markup.inline.raw #FB7185 —
markup.italic #f472b6 italic
markup.quote #FDA4AF italic
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 }!` ;
}
fetchUser.ts
index.ts
README.md
src
components
fetchUser.ts
src
components
fetchUser.ts
fetchUser 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
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*
Button.tsx
31
$
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 }!` ;
}
Agathist Themes | Coding Theme