Skip to main content
The Coder City Theme | Coding Theme
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 #2c2772 activityBar.activeBorder #dddfe9 activityBar.background #0e0d1a activityBar.border #5966cc50 activityBar.foreground #dddfe9 activityBar.inactiveForeground #dddfe971 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #D5CED9 — comment, markup.quote.markdown, meta.diff, meta.diff.header #5f6167 — entity.other.attribute-name.html, entity.name.tag.html, entity.other.attribute-name.class.css, punctuation.definition.entity.css #dddfe9 — text.html.derivative #a7a8af — variable, support.variable
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
The Coder City Theme — The Coder City Dark
activityBarBadge.background
#8c97ea
activityBarBadge.foreground #0e0d1a
badge.background #8c97ea
badge.foreground #0e0d1a
breadcrumb.activeSelectionForeground #5966cc
breadcrumb.background #0e0d1a
breadcrumb.focusForeground #dddfe9
breadcrumb.foreground #6a77d8
breadcrumbPicker.background #0e0d1a
button.background #2c2772
button.foreground #dddfe9
button.hoverBackground #5966cc
button.secondaryBackground #2c2772
button.secondaryForeground #dddfe9
button.secondaryHoverBackground #5966cc
checkbox.background #2c2772
checkbox.border #5966cc
checkbox.foreground #dddfe9
contrastBorder #5966cc50
debugToolBar.background #0e0d1a
diffEditor.insertedTextBackground #00c82b15
diffEditor.removedTextBackground #01d64820
dropdown.background #0e0d1a
dropdown.border #ffffff10
editor.background #0e0d1a
editor.findMatchBackground #5966cc93
editor.findMatchBorder #5966cc
editor.findMatchHighlightBackground #6775e06b
editor.findMatchHighlightBorder #ffffff30
editor.foreground #dddfe9
editor.hoverHighlightBackground #6775e06b
editor.lineHighlightBackground #0e0d1a50
editor.selectionBackground #8c97ea30
editor.selectionHighlightBackground #6775e06b
editor.selectionHighlightBorder #8c97eaf0
editorBracketMatch.background #0e0d1a
editorCursor.foreground #8c97ea
editorError.foreground #ffe553
editorGroup.border #5966cc50
editorGroupHeader.tabsBackground #0e0d1a
editorGutter.addedBackground #c800be60
editorGutter.deletedBackground #01d64860
editorGutter.modifiedBackground #8c97ea60
editorHoverWidget.background #0e0d1a
editorHoverWidget.border #ffffff10
editorIndentGuide.activeBackground #383b3d
editorIndentGuide.background #383b3d70
editorInfo.foreground #8c97ea70
editorLineNumber.activeForeground #8c97ea
editorLineNumber.foreground #5966ccc0
editorLink.activeForeground #dddfe9
editorMarkerNavigation.background #dddfe905
editorOverviewRuler.border #0e0d1a
editorOverviewRuler.errorForeground #ff000070
editorOverviewRuler.findMatchForeground #5966cc
editorOverviewRuler.infoForeground #8c97ea40
editorOverviewRuler.warningForeground #d6af0140
editorRuler.foreground #383b3d
editorSuggestWidget.background #0e0d1a
editorSuggestWidget.border #ffffff10
editorSuggestWidget.foreground #dddfe9
editorSuggestWidget.selectedBackground #5966cc20
editorWhitespace.foreground #dddfe940
editorWidget.background #0e0d1a
editorWidget.resizeBorder #5966cc
focusBorder #ffffff00
gitDecoration.deletedResourceForeground #01d648
gitDecoration.ignoredResourceForeground #5966cc
gitDecoration.modifiedResourceForeground #6a77d8
gitDecoration.untrackedResourceForeground #8c97ea
input.background #1d1e38
input.border #ffffff10
input.foreground #dddfe9
input.placeholderForeground #dddfe960
inputOption.activeBackground #dddfe930
inputOption.activeBorder #dddfe930
inputValidation.errorBorder #d6010150
inputValidation.infoBorder #8c97ea50
inputValidation.warningBorder #ffd00050
list.activeSelectionBackground #0e0d1a
list.activeSelectionForeground #5966cc
list.focusBackground #1d1e38
list.focusForeground #8c97ea
list.highlightForeground #5966cc
list.hoverBackground #383b3d
list.hoverForeground #ffffff
list.inactiveSelectionBackground #0e0d1a30
list.inactiveSelectionForeground #5966cc
listFilterWidget.background #0e0d1a30
listFilterWidget.noMatchesOutline #0e0d1a30
listFilterWidget.outline #0e0d1a30
menu.background #0e0d1af8
menu.border #5966cc50
menu.foreground #dddfe9
menu.selectionBackground #1b184b
menu.selectionBorder #0e0d1a30
menu.selectionForeground #dddfe9
menu.separatorBackground #dddfe9
menubar.selectionBackground #1b184b
menubar.selectionBorder #5966cc50
menubar.selectionForeground #dddfe9
minimap.background #141325
minimapSlider.activeBackground #5966ccb0
minimapSlider.background #5966cc80
minimapSlider.hoverBackground #5966cca0
notificationCenterHeader.background #2c2772
notificationCenterHeader.foreground #dddfe9
notificationLink.foreground #5966cc
notifications.background #0e0d1a
notifications.foreground #dddfe9
panel.background #0e0d1a
panel.border #5966cc50
panelTitle.activeBorder #5966cc
panelTitle.activeForeground #ffffff
panelTitle.inactiveForeground #dddfe9
peekView.border #0e0d1a30
peekViewEditor.background #dddfe905
peekViewEditor.matchHighlightBackground #5966cc50
peekViewEditorGutter.background #dddfe905
peekViewResult.background #dddfe905
peekViewResult.matchHighlightBackground #5966cc50
peekViewResult.selectionBackground #5966cc70
peekViewTitle.background #dddfe905
peekViewTitleDescription.foreground #dddfe960
pickerGroup.foreground #2c2772
progressBar.background #2c2772
scrollbar.shadow #0e0d1a00
scrollbarSlider.activeBackground #2c2772
scrollbarSlider.background #2c2772
scrollbarSlider.hoverBackground #2c2772
selection.background #5966cc
settings.checkboxBackground #0e0d1a
settings.checkboxForeground #dddfe9
settings.dropdownBackground #0e0d1a
settings.dropdownForeground #dddfe9
settings.headerForeground #2c2772
settings.modifiedItemIndicator #2c2772
settings.numberInputBackground #0e0d1a
settings.numberInputForeground #dddfe9
settings.textInputBackground #0e0d1a
settings.textInputForeground #dddfe9
sideBar.background #0e0d1a
sideBar.border #5966cc50
sideBar.foreground #dddfe9
sideBarSectionHeader.background #2c2772
sideBarSectionHeader.border #0e0d1a60
sideBarSectionHeader.foreground #dddfe9
sideBarTitle.foreground #dddfe9
statusBar.background #2c2772
statusBar.border #0e0d1a60
statusBar.debuggingForeground #ffffff
statusBar.foreground #c4cbff
statusBar.noFolderBackground #0e0d1a
statusBarItem.hoverBackground #5966cc20
statusBarItem.remoteBackground #5966cc
statusBarItem.remoteForeground #0e0d1a
tab.activeBackground #2c2772
tab.activeBorder #5966cc
tab.activeForeground #ffffff
tab.activeModifiedBorder #5966cc
tab.border #5966cc50
tab.inactiveBackground #0e0d1a
tab.inactiveForeground #5966cc
tab.unfocusedActiveBorder #5966cc
tab.unfocusedActiveForeground #dddfe9
tab.unfocusedHoverBackground #2c2772
tab.unfocusedHoverForeground #ffffff
terminal.ansiBlack #0e0d1a
terminal.ansiBlue #8c97ea
terminal.ansiBrightBlack #5966cc
terminal.ansiBrightBlue #8c97ea
terminal.ansiBrightCyan #23deff
terminal.ansiBrightGreen #17f648
terminal.ansiBrightRed #fa1313
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #ffffff
terminal.ansiCyan #8c97ea
terminal.ansiGreen #00c82b
terminal.ansiRed #fa1313
terminal.ansiWhite #ffffff
terminal.ansiYellow #ffe553
terminalCursor.background #0e0d1a
textLink.activeForeground #dddfe9
textLink.foreground #5966cc
titleBar.activeBackground #0e0d1a
titleBar.activeForeground #dddfe9
titleBar.border #5966cc50
titleBar.inactiveBackground #0e0d1a
titleBar.inactiveForeground #5966cc
tree.indentGuidesStroke #383b3d
widget.shadow #0e0d1a30
window.activeBorder #0e0d1a support.constant, support.constant.property-value.css, entity.name.function.scss, constant.other.color.rgb-value.hex.css, entity.name.tag.css, keyword.other.important.css, keyword.other.important.scss, punctuation.separator.key-value.html #F69A2B —
support.function, constant.numeric #FFE66D —
keyword.control.at-rule, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css #f92672 —
string.quoted.double.html, support.type.property-name.css, support.type.property-name, support.type.vendored.property-name.css, string.quoted.double.css, string.quoted.single.scss #8c97ea —
entity.other.inherited-class — underline
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 }!` ;
}