Skip to main content
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.background #182426 activityBar.border #213235 activityBar.dropBackground #213235 activityBar.foreground #fff activityBarBadge.background #efb38f activityBarBadge.foreground #182426 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #6272a4 string #efb38f — constant.numeric #efb38f — constant.language, variable.language #efb38f — constant.character, constant.other
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.background
#efb38f
badge.foreground #182426
button.background #099ab3
button.foreground #fff
button.hoverBackground #099ab380
contrastBorder #ffffff00
debugExceptionWidget.background #032e35
debugExceptionWidget.border #c0d4d8
debugToolBar.background #032e35
descriptionForeground #c0d4d8
diffEditor.insertedTextBackground #3ad90033
diffEditor.insertedTextBorder #3ad90055
diffEditor.removedTextBackground #ee3a4333
diffEditor.removedTextBorder #ee3a4355
dropdown.background #032e35
dropdown.border #182426
dropdown.foreground #fff
editor.background #032e35
editor.findMatchBackground #b4313166
editor.findMatchHighlightBackground #CAD40F66
editor.findRangeHighlightBackground #243E51
editor.foreground #fff
editor.hoverHighlightBackground #efb38f33
editor.inactiveSelectionBackground #003b8b
editor.lineHighlightBackground #1F466280
editor.lineHighlightBorder #234E6D
editor.rangeHighlightBackground #1F466280
editor.selectionBackground #0050A4
editor.selectionHighlightBackground #0050A480
editor.wordHighlightBackground #ffffff21
editor.wordHighlightStrongBackground #ffffff21
editorBracketMatch.background #213235
editorBracketMatch.border #efb38f80
editorCodeLens.foreground #c0d4d8
editorCursor.foreground #efb38f
editorError.border #213235
editorError.foreground #b43131
editorGroup.background #b43131
editorGroup.border #182426
editorGroup.dropBackground #18242699
editorGroupHeader.noTabsBackground #032e35
editorGroupHeader.tabsBackground #032e35
editorGroupHeader.tabsBorder #182426
editorGutter.addedBackground #2d7148
editorGutter.background #18242666
editorGutter.deletedBackground #b43131
editorGutter.modifiedBackground #26506D
editorHoverWidget.background #182426
editorHoverWidget.border #213235
editorIndentGuide.background #3B5364
editorLineNumber.foreground #c0d4d8
editorLink.activeForeground #c0d4d8
editorMarkerNavigation.background #3B536433
editorMarkerNavigationError.background #b43131
editorMarkerNavigationWarning.background #efb38f
editorOverviewRuler.border #213235
editorOverviewRuler.commonContentForeground #efb38f55
editorOverviewRuler.currentContentForeground #ee3a4355
editorOverviewRuler.incomingContentForeground #3ad90055
editorRuler.foreground #1F466280
editorSuggestWidget.background #182426
editorSuggestWidget.border #182426
editorSuggestWidget.foreground #c0d4d8
editorSuggestWidget.highlightForeground #efb38f
editorSuggestWidget.selectedBackground #032e35
editorWarning.border #ffffff00
editorWarning.foreground #efb38f
editorWhitespace.foreground #ffffff1a
editorWidget.background #182426
editorWidget.border #213235
errorForeground #b43131
extensionButton.prominentBackground #099ab3
extensionButton.prominentForeground #fff
extensionButton.prominentHoverBackground #099ab3
focusBorder #213235
foreground #c0d4d8
gitDecoration.conflictingResourceForeground #b43131
gitDecoration.deletedResourceForeground #ff628c
gitDecoration.ignoredResourceForeground #808080
gitDecoration.modifiedResourceForeground #efb38f
gitDecoration.untrackedResourceForeground #3ad900
input.background #032e35
input.border #213235
input.foreground #efb38f
input.placeholderForeground #c0d4d8
inputOption.activeBorder #8dffff
inputValidation.errorBackground #032e35
inputValidation.errorBorder #efb38f
inputValidation.infoBackground #032e35
inputValidation.infoBorder #213235
inputValidation.warningBackground #032e35
inputValidation.warningBorder #efb38f
list.activeSelectionBackground #032e35
list.activeSelectionForeground #c0d4d8
list.dropBackground #213235
list.focusBackground #213235
list.focusForeground #c0d4d8
list.highlightForeground #efb38f
list.hoverBackground #032e35
list.hoverForeground #c0d4d8
list.inactiveSelectionBackground #213235
list.inactiveSelectionForeground #c0d4d8
menu.background #182426
merge.border #ffffff00
merge.commonContentBackground #c97d0c
merge.commonHeaderBackground #c97d0c
merge.currentContentBackground #2F7366
merge.currentHeaderBackground #2F7366
merge.incomingContentBackground #185294
merge.incomingHeaderBackground #185294
notification.background #efb38f
notification.buttonBackground #099ab3
notification.buttonForeground #fff
notification.buttonHoverBackground #099ab3
notification.errorBackground #b43131
notification.errorForeground #fff
notification.foreground #182426
notification.infoBackground #099ab3
notification.infoForeground #fff
notification.warningBackground #099ab3
notification.warningForeground #182426
notificationCenter.border #efb38f
notificationCenterHeader.background #182426
notificationCenterHeader.foreground #c0d4d8
notificationLink.foreground #efb38f
notifications.background #182426
notifications.border #efb38f
notifications.foreground #c0d4d8
notificationToast.border #efb38f
panel.background #182426
panel.border #efb38f
panelTitle.activeBorder #efb38f
panelTitle.activeForeground #efb38f
panelTitle.inactiveForeground #c0d4d8
peekView.border #efb38f
peekViewEditor.background #032e35
peekViewEditor.matchHighlightBackground #032e3500
peekViewEditorGutter.background #182426
peekViewResult.background #182426
peekViewResult.fileForeground #c0d4d8
peekViewResult.lineForeground #fff
peekViewResult.matchHighlightBackground #213235
peekViewResult.selectionBackground #213235
peekViewResult.selectionForeground #fff
peekViewTitle.background #182426
peekViewTitleDescription.foreground #c0d4d8
peekViewTitleLabel.foreground #efb38f
pickerGroup.border #213235
pickerGroup.foreground #c0d4d8
progressBar.background #efb38f
scrollbar.shadow #00000000
scrollbarSlider.activeBackground #355166cc
scrollbarSlider.background #1F466280
scrollbarSlider.hoverBackground #406179cc
selection.background #027dff
sideBar.background #182426
sideBar.border #213235
sideBar.foreground #c0d4d8
sideBarSectionHeader.background #032e35
sideBarSectionHeader.foreground #aaaaaa
sideBarTitle.foreground #aaaaaa
statusBar.background #182426
statusBar.border #213235
statusBar.debuggingBackground #182426
statusBar.debuggingBorder #efb38f
statusBar.debuggingForeground #efb38f
statusBar.foreground #c0d4d8
statusBar.noFolderBackground #182426
statusBar.noFolderBorder #213235
statusBar.noFolderForeground #c0d4d8
statusBarItem.activeBackground #099ab3
statusBarItem.hoverBackground #213235
statusBarItem.prominentBackground #182426
statusBarItem.prominentHoverBackground #213235
tab.activeBackground #055361
tab.activeBorder #efb38f
tab.activeForeground #fff
tab.border #182426
tab.inactiveBackground #032e35
tab.inactiveForeground #c0d4d8
tab.unfocusedActiveForeground #c0d4d8
tab.unfocusedInactiveForeground #c0d4d8
terminal.ansiBlack #000000
terminal.ansiBlue #099ab3
terminal.ansiBrightBlack #0050A4
terminal.ansiBrightBlue #099ab3
terminal.ansiBrightCyan #80fcff
terminal.ansiBrightGreen #3ad900
terminal.ansiBrightMagenta #fb94ff
terminal.ansiBrightRed #ff628c
terminal.ansiBrightWhite #032e35
terminal.ansiBrightYellow #efb38f
terminal.ansiCyan #80fcff
terminal.ansiGreen #3ad900
terminal.ansiMagenta #fb94ff
terminal.ansiRed #ff628c
terminal.ansiWhite #ffffff
terminal.ansiYellow #efb38f
terminal.background #182426
terminal.foreground #ffffff
terminalCursor.background #efb38f
terminalCursor.foreground #efb38f
textBlockQuote.background #032e35
textBlockQuote.border #099ab3
textCodeBlock.background #032e35
textLink.activeForeground #099ab3
textLink.foreground #099ab3
textPreformat.foreground #efb38f
textSeparator.foreground #213235
titleBar.activeBackground #182426
titleBar.activeForeground #ffffff
titleBar.inactiveBackground #032e35
titleBar.inactiveForeground #ffffff33
walkThrough.embeddedEditorBackground #213235
welcomePage.buttonBackground #032e35
welcomePage.buttonHoverBackground #213235
widget.shadow #00000026 #efb38f
variable.other.readwrite.instance #ffb86c
string.template meta.template.expression #f8f8f2 —
punctuation.definition.template-expression #0AB3D1
constant.character.escaped, constant.character.escape, string source, string source.ruby #0AB3D1
punctuation.section.embedded #0AB3D1 —
storage.type #8be9fd italic
variable.parameter #ffb86c italic
entity.other.attribute-name #7fcc9e
support.type, support.class #8be9fd italic
invalid.deprecated #F8F8F0 —
meta.structure.dictionary.json string.quoted.double.json #CFCFC2 —
meta.diff, meta.diff.header #6272a4 —
constant.numeric.line-number.find-in-files - match #efb38f —
entity.name.filename #efb38f —
punctuation.definition.string.begin.json - meta.structure.dictionary.value.json, punctuation.definition.string.end.json - meta.structure.dictionary.value.json #EEEEEE
meta.structure.dictionary.json string.quoted.double.json #8be9fd —
meta.structure.dictionary.value.json string.quoted.double.json #fcf0e9 —
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 #7fcc9e —
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 #ffb86c —
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 #0AB3D1 —
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 #efb38f —
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 #7fcc9e —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name #ffb86c —
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 } !` ;
}
britecore | Coding Theme