Skip to main content
Home Theme VS Code Dark Grey Color Theme Dark, minimalistic VSCode theme with almost no colors other than a beautiful and calming grey.
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 #000000 activityBar.background #000000 activityBar.border #dcdcdc00 activityBar.foreground #808080 activityBar.inactiveForeground #343434 activityBarBadge.background #808080 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle constant.language.null.ts, constant.language.null.js, constant.language.undefined.ts, constant.language.undefined.js, constant.language.boolean.true.ts, constant.language.boolean.true.js, constant.language.boolean.false.ts, constant.language.boolean.false.js, constant.language.nan.ts, constant.language.nan.js, constant.language.infinity.ts, constant.language.infinity.js, constant.language.void.ts, constant.language.void.js #dcdcdc — source #808080 — support.type.property-name.css #808080 — entity.other.attribute-name.id.css, entity.name.tag.css, meta.property-value.css, support.constant.property-value.css, punctuation.definition.entity.css
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Dark Grey Color Theme — Dark Grey Theme
activityBarBadge.foreground
#dcdcdc
badge.background #808080
badge.foreground #dcdcdc
breadcrumb.activeSelectionForeground #dcdcdc
breadcrumb.background #000000
breadcrumb.focusForeground #dcdcdc
breadcrumb.foreground #343434
button.background #808080
button.foreground #dcdcdc
button.hoverBackground #808080a7
button.secondaryBackground #dcdcdc
button.secondaryForeground #000000
button.secondaryHoverBackground #dcdcdcd1
checkbox.background #000000
checkbox.border #343434
checkbox.foreground #dcdcdc
debugExceptionWidget.background #1d1d1d
debugExceptionWidget.border #dcdcdc00
debugToolBar.background #1d1d1d
debugToolBar.border #dcdcdc00
diffEditor.border #343434
diffEditor.insertedTextBackground #66b28b33
diffEditor.insertedTextBorder #dcdcdc00
diffEditor.removedTextBackground #ff6e6e33
dropdown.background #000000
dropdown.border #343434
dropdown.foreground #dcdcdc
editor.background #000000
editor.findMatchBackground #000000
editor.findMatchBorder #808080
editor.findMatchHighlightBackground #dcdcdc00
editor.findMatchHighlightBorder #dcdcdc
editor.findRangeHighlightBackground #5454544a
editor.findRangeHighlightBorder #dcdcdc00
editor.foldBackground #34343466
editor.foreground #808080
editor.hoverHighlightBackground #343434aa
editor.inactiveSelectionBackground #3434344a
editor.lineHighlightBackground #1d1d1d
editor.lineHighlightBorder #dcdcdc00
editor.rangeHighlightBackground #343434b1
editor.rangeHighlightBorder #dcdcdc00
editor.selectionBackground #3434347a
editor.selectionHighlightBackground #3434347a
editor.selectionHighlightBorder #dcdcdc00
editor.wordHighlightBackground #343434aa
editor.wordHighlightBorder #dcdcdc00
editor.wordHighlightStrongBackground #3434347a
editor.wordHighlightStrongBorder #dcdcdc00
editorBracketHighlight.foreground1 #1d1d1d
editorBracketHighlight.foreground2 #343434
editorBracketHighlight.foreground3 #1d1d1d
editorBracketHighlight.foreground4 #343434
editorBracketHighlight.foreground5 #1d1d1d
editorBracketHighlight.foreground6 #343434
editorBracketHighlight.unexpectedBracket.foreground #343434
editorBracketMatch.background #343434af
editorBracketMatch.border #dcdcdc00
editorBracketPairGuide.background1 #1d1d1d
editorBracketPairGuide.background2 #343434
editorBracketPairGuide.background3 #1d1d1d
editorBracketPairGuide.background4 #343434
editorBracketPairGuide.background5 #1d1d1d
editorBracketPairGuide.background6 #343434
editorCodeLens.foreground #343434
editorCursor.background #000000
editorCursor.foreground #dcdcdc
editorError.background #B73A3400
editorError.border #dcdcdc00
editorError.foreground #ff8080c5
editorGroup.border #dcdcdc00
editorGroup.emptyBackground #000000
editorGroupHeader.border #dcdcdc00
editorGroupHeader.tabsBackground #000000
editorGroupHeader.tabsBorder #dcdcdc00
editorGutter.addedBackground #37b05b
editorGutter.background #000000
editorGutter.commentRangeForeground #dcdcdc
editorGutter.deletedBackground #ff8080
editorGutter.foldingControlForeground #dcdcdc
editorGutter.modifiedBackground #7895c7
editorHoverWidget.background #000000
editorHoverWidget.border #343434
editorHoverWidget.foreground #808080
editorIndentGuide.activeBackground1 #808080
editorIndentGuide.background1 #343434aa
editorInfo.background #4490BF00
editorInfo.border #4490BF00
editorInfo.foreground #7895c7c5
editorLineNumber.activeForeground #dcdcdc
editorLineNumber.foreground #343434
editorLink.activeForeground #808080
editorMarkerNavigation.background #000000
editorMarkerNavigationError.background #ff8080
editorMarkerNavigationInfo.background #7895c7
editorMarkerNavigationWarning.background #eded88
editorOverviewRuler.background #dcdcdc00
editorOverviewRuler.border #dcdcdc00
editorRuler.foreground #343434
editorSuggestWidget.background #000000
editorSuggestWidget.border #343434
editorSuggestWidget.foreground #dcdcdc
editorSuggestWidget.highlightForeground #808080
editorSuggestWidget.selectedBackground #1d1d1d
editorWarning.background #A9904000
editorWarning.border #dcdcdc00
editorWarning.foreground #eded88c5
editorWhitespace.foreground #9f9f9f7c
editorWidget.background #000000
editorWidget.foreground #dcdcdc
editorWidget.resizeBorder #808080
focusBorder #808080
foreground #dcdcdc
gitDecoration.addedResourceForeground #81b88b
gitDecoration.conflictingResourceForeground #8282c4
gitDecoration.deletedResourceForeground #c06c5d
gitDecoration.ignoredResourceForeground #8c8c8c
gitDecoration.modifiedResourceForeground #e2c08d
gitDecoration.stageDeletedResourceForeground #9f4434
gitDecoration.stageModifiedResourceForeground #ab7f3d
gitDecoration.submoduleResourceForeground #4b7ead
gitDecoration.untrackedResourceForeground #4b8a61
icon.foreground #dcdcdc
input.background #000000
input.border #343434
input.foreground #dcdcdc
input.placeholderForeground #343434
inputOption.activeBackground #343434
inputOption.activeBorder #dcdcdc00
inputOption.activeForeground #dcdcdc
list.activeSelectionBackground #343434
list.activeSelectionForeground #dcdcdc
list.dropBackground #1d1d1d
list.focusBackground #1d1d1d
list.focusForeground #dcdcdc
list.highlightForeground #808080
list.hoverBackground #343434
list.hoverForeground #dcdcdc
list.inactiveSelectionBackground #1d1d1d
list.inactiveSelectionForeground #dcdcdc
listFilterWidget.background #343434
listFilterWidget.noMatchesOutline #dcdcdc00
listFilterWidget.outline #dcdcdc00
menu.background #000000
menu.border #343434
menu.foreground #dcdcdc
menu.selectionBackground #343434
menu.selectionBorder #dcdcdc00
menu.selectionForeground #dcdcdc
menu.separatorBackground #343434
menubar.selectionBackground #1d1d1d
menubar.selectionBorder #dcdcdc00
menubar.selectionForeground #dcdcdc
merge.commonContentBackground #282828aa
merge.commonHeaderBackground #383838aa
merge.currentContentBackground #27403Baa
merge.currentHeaderBackground #367366aa
merge.incomingContentBackground #28384Baa
merge.incomingHeaderBackground #395F8Faa
minimap.background #000000
minimap.errorHighlight #ff8080c5
minimap.findMatchHighlight #000000aa
minimap.selectionHighlight #3434347a
minimap.warningHighlight #eded88c5
minimapGutter.addedBackground #37b05b
minimapGutter.deletedBackground #ff8080
minimapGutter.modifiedBackground #7895c7
notificationCenter.border #343434
notificationCenterHeader.background #000000
notificationCenterHeader.foreground #808080
notifications.background #000000
notifications.border #343434
notifications.foreground #dcdcdc
notificationsErrorIcon.foreground #ff8080
notificationsInfoIcon.foreground #7895c7
notificationsWarningIcon.foreground #eded88
notificationToast.border #dcdcdc00
panel.background #000000
panel.border #343434
panelSection.border #343434
panelTitle.activeBorder #808080
panelTitle.activeForeground #808080
panelTitle.inactiveForeground #343434
peekView.border #808080
peekViewEditor.background #1d1d1d
peekViewEditor.matchHighlightBackground #8080803d
peekViewEditor.matchHighlightBorder #dcdcdc00
peekViewEditorGutter.background #1d1d1d
peekViewResult.background #000000
peekViewResult.fileForeground #dcdcdc
peekViewResult.lineForeground #949494
peekViewResult.matchHighlightBackground #8080803d
peekViewResult.selectionBackground #8080803d
peekViewResult.selectionForeground #dcdcdc
peekViewTitle.background #000000
peekViewTitleDescription.foreground #808080
peekViewTitleLabel.foreground #dcdcdc
pickerGroup.border #80808000
pickerGroup.foreground #808080
progressBar.background #808080
scrollbar.shadow #343434
scrollbarSlider.activeBackground #bfbfbf66
scrollbarSlider.background #343434
scrollbarSlider.hoverBackground #b6b6b6b3
selection.background #343434
settings.focusedRowBackground #ffffff07
settings.headerForeground #dcdcdc
sideBar.background #000000
sideBar.border #dcdcdc00
sideBar.dropBackground #1d1d1d
sideBar.foreground #dcdcdc
sideBarSectionHeader.background #dcdcdc00
sideBarSectionHeader.border #dcdcdc00
sideBarSectionHeader.foreground #dcdcdc
sideBarTitle.foreground #808080
statusBar.background #808080
statusBar.border #dcdcdc00
statusBar.debuggingBackground #343434
statusBar.debuggingBorder #dcdcdc00
statusBar.debuggingForeground #dcdcdc
statusBar.foreground #dcdcdc
statusBar.noFolderBackground #dcdcdc
statusBar.noFolderBorder #dcdcdc00
statusBar.noFolderForeground #000000
statusBarItem.activeBackground #FFFFFF25
statusBarItem.hoverBackground #343434
statusBarItem.remoteBackground #000000
statusBarItem.remoteForeground #dcdcdc
tab.activeBackground #000000
tab.activeBorder #808080
tab.activeBorderTop #000000
tab.activeForeground #dcdcdc
tab.border #80808000
tab.hoverBackground #1d1d1d
tab.hoverBorder #dcdcdc00
tab.hoverForeground #dcdcdc
tab.inactiveBackground #000000
tab.inactiveForeground #343434
terminal.ansiBlack #343434
terminal.ansiBlue #7895c7
terminal.ansiBrightBlack #808080
terminal.ansiBrightBlue #74BCFF
terminal.ansiBrightCyan #00ffff
terminal.ansiBrightGreen #67FF8A
terminal.ansiBrightMagenta #EC84FF
terminal.ansiBrightRed #e64444
terminal.ansiBrightWhite #ffffff
terminal.ansiBrightYellow #d9ce9b
terminal.ansiCyan #50d2f7
terminal.ansiGreen #33D057
terminal.ansiMagenta #E557F9
terminal.ansiRed #ff8080
terminal.ansiWhite #dddddd
terminal.ansiYellow #eded88
terminal.border #343434
terminal.foreground #dcdcdc
terminal.selectionBackground #1d1d1d
terminalCursor.background #1d1d1d
terminalCursor.foreground #dcdcdc
textLink.activeForeground #808080a7
textLink.foreground #808080
titleBar.activeBackground #000000
titleBar.activeForeground #dcdcdc
titleBar.border #dcdcdc00
titleBar.inactiveBackground #1d1d1d
titleBar.inactiveForeground #cccccc
tree.indentGuidesStroke #343434
walkThrough.embeddedEditorBackground #00000050
widget.shadow #343434 #dcdcdc
text.html.derivative, entity.name.tag.html #dcdcdc —
entity.name.type.class #dcdcdc —
entity.name.type.interface, entity.name.type #dcdcdc —
entity.name.type.struct #dcdcdc —
entity.name.type.enum #dcdcdc —
meta.object-literal.key #808080 —
entity.name.function.method, meta.function.method #808080 —
entity.name.function, support.function, meta.function-call.generic #dcdcdc —
variable, meta.variable, variable.other.object.property, variable.other.readwrite.alias #dcdcdc —
variable.other.object #dcdcdc —
variable.other.global, variable.language.this #808080 —
variable.other.local #dcdcdc —
variable.parameter, meta.parameter #dcdcdc —
variable.other.property, meta.property #808080 —
string, string.other.link, markup.inline.raw.string.markdown #dcdcdc —
constant.character.escape, constant.other.placeholder #808080 —
keyword.control.import, keyword.control.from, keyword.import #808080 —
storage.modifier, keyword.modifier, storage.type #808080 —
comment, punctuation.definition.comment #403c36 —
comment.documentation, comment.line.documentation #403c36 —
constant.language.boolean, constant.language.json #dcdcdc —
entity.name.function.preprocessor, meta.preprocessor #dcdcdc —
meta.preprocessor #dcdcdc —
markup.underline.link #808080 —
support.class.component #dcdcdc —
entity.other.attribute-name, meta.attribute #808080 —
variable.other.constant, variable.readonly #dcdcdc —
entity.name.label, punctuation.definition.label #dcdcdc —
entity.name.namespace, storage.modifier.namespace, markup.bold.markdown #dcdcdc —
entity.name.module, storage.modifier.module #808080 —
variable.type.parameter, variable.parameter.type #808080 —
keyword.control.exception, keyword.control.trycatch #808080 —
meta.decorator, punctuation.decorator, entity.name.function.decorator #dcdcdc —
variable.function #808080 —
punctuation, punctuation.terminator, punctuation.definition.tag, punctuation.separator, punctuation.definition.string, punctuation.section.block #808080 —
punctuation.definition.string #dcdcdc —
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 } !` ;
}
Dark Grey Color Theme | Coding Theme