Skip to main content
Home Theme VS Code Regard A high contrast theme focused on code comprehension and minimizing eyes tiredness.
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 #303336 activityBar.activeBorder #4E945F activityBar.background #1D1F20 activityBar.foreground #F4ECF0 activityBarBadge.background #6690B3 activityBarBadge.foreground #222426 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle emphasis — italic strong — bold comment, punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment #5E5743 — constant.character, constant.character.escape, constant.character.entity #9989A3 — constant.language
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.background #6690B3
badge.foreground #222426
button.background #4E945Fee
button.foreground #222426
button.hoverBackground #4E945F
button.secondaryBackground #3C4044
button.secondaryForeground #F4ECF0
button.secondaryHoverBackground #43474C
charts.blue #6690B3
charts.foreground #F4ECF0
charts.green #4E945F
charts.lines #4E945F
charts.orange #DB784D
charts.purple #9989A3
charts.red #C9303E
charts.yellow #FFBF6E
debugConsole.errorForeground #C9303E
debugConsole.infoForeground #4E945F
debugConsole.sourceForeground #787F87
debugConsole.warningForeground #FFBF6E
debugConsoleInputIcon.foreground #6690B3
debugExceptionWidget.background #43474C
debugExceptionWidget.border #222426
debugToolBar.background #303336
descriptionForeground #F4ECF0e6
diffEditor.insertedTextBackground #6690B333
diffEditor.removedTextBackground #C9303E4d
dropdown.background #303336
dropdown.border #303336
dropdown.foreground #F4ECF0
editor.background #1D1F20
editor.findMatchBackground #4E945F66
editor.findMatchHighlightBackground #4E945F33
editor.findRangeHighlightBackground #4E945F33
editor.focusedStackFrameHighlightBackground #6690B3
editor.foreground #F4ECF0
editor.hoverHighlightBackground #303336
editor.inactiveSelectionBackground #3C4044cc
editor.inlineValuesBackground #43474C
editor.inlineValuesForeground #F4ECF0
editor.lineHighlightBackground #303336
editor.lineHighlightBorder #303336
editor.rangeHighlightBackground #3C404452
editor.selectionBackground #3C4044cc
editor.selectionHighlightBackground #3C4044cc
editor.stackFrameHighlightBackground #6690B3
editor.wordHighlightBackground #6690B366
editor.wordHighlightStrongBackground #6690B399
editorBracketHighlight.foreground1 #9989A3
editorBracketHighlight.foreground2 #4E945F
editorBracketHighlight.foreground3 #6690B3
editorBracketHighlight.foreground4 #6690B3
editorBracketHighlight.foreground5 #9989A3
editorBracketHighlight.foreground6 #4E945F
editorBracketHighlight.unexpectedBracket.foreground #C9303E
editorBracketMatch.background #22242600
editorBracketMatch.border #4E945F
editorCodeLens.foreground #43474C
editorCursor.foreground #F4ECF0
editorError.border #C9303E00
editorError.foreground #C9303E
editorGroup.border #30333601
editorGroup.dropBackground #30333699
editorGroupHeader.border #30333600
editorGroupHeader.noTabsBackground #222426
editorGroupHeader.tabsBackground #222426
editorGroupHeader.tabsBorder #30333600
editorGutter.addedBackground #4E945F
editorGutter.background #181919
editorGutter.deletedBackground #C9303E
editorGutter.modifiedBackground #FFBF6E
editorHint.border #FFBF6E00
editorHint.foreground #FFBF6E
editorHoverWidget.background #303336
editorHoverWidget.border #303336
editorIndentGuide.activeBackground #43474C
editorIndentGuide.background #3C4044b3
editorInlayHint.background #3C4044
editorInlayHint.foreground #F4ECF0
editorLineNumber.activeForeground #4E945F
editorLineNumber.foreground #787F87
editorLink.activeForeground #6690B3
editorMarkerNavigation.background #6690B3c0
editorMarkerNavigationError.background #C9303Ec0
editorMarkerNavigationWarning.background #FFBF6Ec0
editorOverviewRuler.addedForeground #4E945F
editorOverviewRuler.border #303336
editorOverviewRuler.currentContentForeground #303336
editorOverviewRuler.deletedForeground #C9303E
editorOverviewRuler.errorForeground #C9303E
editorOverviewRuler.findMatchForeground #4E945F66
editorOverviewRuler.incomingContentForeground #303336
editorOverviewRuler.infoForeground #6690B3
editorOverviewRuler.modifiedForeground #FFBF6E
editorOverviewRuler.rangeHighlightForeground #4E945F66
editorOverviewRuler.selectionHighlightForeground #4E945F66
editorOverviewRuler.warningForeground #FFBF6E
editorOverviewRuler.wordHighlightForeground #4E945F66
editorOverviewRuler.wordHighlightStrongForeground #4E945F66
editorRuler.foreground #3C4044
editorSuggestWidget.background #222426
editorSuggestWidget.border #303336
editorSuggestWidget.focusHighlightForeground #4E945F
editorSuggestWidget.foreground #F4ECF0
editorSuggestWidget.highlightForeground #4E945F
editorSuggestWidget.selectedBackground #3C4044
editorSuggestWidget.selectedForeground #F4ECF0
editorWarning.border #FFBF6E00
editorWarning.foreground #FFBF6E
editorWhitespace.foreground #43474Cb3
editorWidget.background #222426
editorWidget.border #303336
errorForeground #C9303E
extensionButton.prominentBackground #3C4044
extensionButton.prominentForeground #F4ECF0
extensionButton.prominentHoverBackground #43474C
focusBorder #303336
foreground #F4ECF0
gitDecoration.conflictingResourceForeground #6690B3
gitDecoration.deletedResourceForeground #C9303E
gitDecoration.ignoredResourceForeground #F4ECF066
gitDecoration.modifiedResourceForeground #FFBF6E
gitDecoration.stageDeletedResourceForeground #C9303E
gitDecoration.stageModifiedResourceForeground #FFBF6E
gitDecoration.submoduleResourceForeground #9989A3
gitDecoration.untrackedResourceForeground #4E945F
input.background #303336
input.border #303336
input.foreground #F4ECF0
input.placeholderForeground #F4ECF099
inputOption.activeBackground #6690B3
inputOption.activeBorder #6690B3
inputOption.activeForeground #F4ECF0
inputValidation.errorBackground #C9303E
inputValidation.errorBorder #C9303E
inputValidation.infoBackground #6690B3
inputValidation.infoBorder #6690B3
inputValidation.warningBackground #DB784D
inputValidation.warningBorder #DB784D
keybindingLabel.background #43474C
keybindingLabel.border #43474C
keybindingLabel.bottomBorder #43474C
keybindingLabel.foreground #F4ECF0
list.activeSelectionBackground #4E945F
list.activeSelectionForeground #181919
list.dropBackground #4E945F99
list.errorForeground #C9303E
list.focusBackground #4E945F99
list.focusForeground #F4ECF0
list.focusHighlightForeground #F4ECF0
list.highlightForeground #4E945F
list.hoverBackground #303336
list.hoverForeground #6690B3
list.inactiveFocusBackground #3C4044cc
list.inactiveSelectionBackground #303336
list.inactiveSelectionForeground #4E945F
list.warningForeground #FFBF6E
merge.border #30333600
merge.currentContentBackground #6690B34d
merge.currentHeaderBackground #6690B366
merge.incomingContentBackground #9989A34d
merge.incomingHeaderBackground #9989A366
minimap.background #1D1F20
minimap.errorHighlight #C9303Ecc
minimap.findMatchHighlight #4E945F
minimap.selectionHighlight #4E945Fcc
minimap.warningHighlight #FFBF6Ecc
minimapGutter.addedBackground #4E945F
minimapGutter.deletedBackground #C9303E
minimapGutter.modifiedBackground #FFBF6E
minimapSlider.activeBackground #3C4044aa
minimapSlider.background #3C404499
minimapSlider.hoverBackground #3C4044aa
notificationCenter.border #30333600
notificationCenterHeader.background #222426
notificationCenterHeader.foreground #6690B3
notificationLink.foreground #6690B3
notifications.background #303336
notifications.border #222426
notifications.foreground #F4ECF0
notificationToast.border #30333600
panel.background #222426
panel.border #303336
panelTitle.activeBorder #4E945F00
panelTitle.activeForeground #4E945F
panelTitle.inactiveForeground #F4ECF0
peekView.border #43474C
peekViewEditor.background #222426
peekViewEditor.matchHighlightBackground #4E945F4d
peekViewEditorGutter.background #222426
peekViewResult.background #222426
peekViewResult.fileForeground #4E945F
peekViewResult.lineForeground #F4ECF066
peekViewResult.matchHighlightBackground #4E945Fcc
peekViewResult.selectionBackground #3C4044
peekViewResult.selectionForeground #F4ECF0
peekViewTitle.background #303336
peekViewTitleDescription.foreground #F4ECF0
peekViewTitleLabel.foreground #4E945F
pickerGroup.border #303336
pickerGroup.foreground #4E945F
progressBar.background #4E945F
quickInputList.focusBackground #4E945F
quickInputList.focusForeground #222426
sash.hoverBorder #4E945F
scrollbar.shadow #0f0f0f
scrollbarSlider.activeBackground #3C4044aa
scrollbarSlider.background #3C404499
scrollbarSlider.hoverBackground #3C4044aa
selection.background #4E945F99
sideBar.background #222426
sideBar.border #303336
sideBar.foreground #F4ECF0
sideBarSectionHeader.background #303336
sideBarSectionHeader.foreground #F4ECF0
sideBarTitle.foreground #F4ECF0
statusBar.background #4E945F
statusBar.border #30333600
statusBar.debuggingBackground #6690B3
statusBar.debuggingForeground #1D1F20
statusBar.foreground #181919
statusBar.noFolderBackground #303336
statusBar.noFolderForeground #F4ECF0
statusBarItem.activeBackground #0006
statusBarItem.errorBackground #303336
statusBarItem.errorForeground #C9303E
statusBarItem.hoverBackground #0004
statusBarItem.prominentBackground #8ACB55
statusBarItem.prominentForeground #1D1F20
statusBarItem.warningBackground #FFBF6E
statusBarItem.warningForeground #222426
tab.activeBackground #303336
tab.activeBorder #4E945F00
tab.activeBorderTop #4E945F00
tab.activeForeground #F4ECF0
tab.border #30333600
tab.hoverBackground #303336cc
tab.hoverBorder #4E945F00
tab.inactiveBackground #222426
tab.inactiveForeground #F4ECF066
tab.lastPinnedBorder #43474C
tab.unfocusedActiveBorder #4E945F00
tab.unfocusedActiveBorderTop #4E945F00
tab.unfocusedActiveForeground #F4ECF099
tab.unfocusedHoverBackground #303336b3
tab.unfocusedHoverBorder #4E945F00
tab.unfocusedInactiveForeground #F4ECF066
terminal.ansiBlack #303336
terminal.ansiBlue #6690B3
terminal.ansiBrightBlack #43474C
terminal.ansiBrightBlue #6690B3
terminal.ansiBrightCyan #9989A3
terminal.ansiBrightGreen #4E945F
terminal.ansiBrightMagenta #9989A3
terminal.ansiBrightRed #C9303E
terminal.ansiBrightWhite #F4ECF0
terminal.ansiBrightYellow #FFBF6E
terminal.ansiCyan #4E945F
terminal.ansiGreen #4E945F
terminal.ansiMagenta #9989A3
terminal.ansiRed #C9303E
terminal.ansiWhite #F4ECF0
terminal.ansiYellow #FFBF6E
terminal.background #222426
terminal.foreground #F4ECF0
terminal.tab.activeBorder #4E945F
textBlockQuote.background #303336
textBlockQuote.border #6690B3
textCodeBlock.background #43474C
textLink.activeForeground #6690B3
textLink.foreground #6690B3
textPreformat.foreground #9989A3
textSeparator.foreground #F4ECF0
titleBar.activeBackground #222426
titleBar.activeForeground #F4ECF0
titleBar.border #22242600
titleBar.inactiveBackground #222426
titleBar.inactiveForeground #F4ECF066
tree.indentGuidesStroke #787F87
walkThrough.embeddedEditorBackground #222426
widget.shadow #1D1F2066 #9989A3
entity.name.class, entity.name.type #6690B3 —
entity.name.function #4E945F —
entity.other.attribute-name #6690B3 —
entity.other.inherited-class #6690B3 bold
invalid.deprecated #F4ECF0 —
keyword.operator, keyword.control.ternary #8ACB55 —
keyword.other.typedef #6690B3 —
keyword.other.class #DB784D —
keyword.control.new, keyword.other.new #9989A3 —
punctuation.definition.directive, meta.preprocessor #C9303E —
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters #F4ECF0 —
punctuation.definition.tag #8ACB55 —
punctuation.section #F4ECF0 —
punctuation.section.embedded.begin, punctuation.section.embedded.end #F4ECF0 —
punctuation.terminator #F4ECF0 —
punctuation.definition.variable #F4ECF0 —
storage.type.struct #DB784D —
storage.type.class #DB784D —
storage.type.function #DB784D —
string, punctuation.definition.string, punctuation.definition.char #FFBF6E —
string.regexp, keyword.control.anchor.regexp, keyword.other.js #FFBF6E —
support.function.construct #4E945F —
support.type.exception #6690B3 —
token.debug-token #9989A3 —
token.error-token #C9303E —
variable.language #F4ECF0 —
variable.parameter #F4ECF0 —
source.go entity.name.type #F4ECF0 —
entity.name.type.alias, entity.name.type.struct #F4ECF0 —
storage.modifier.pointer, storage.modifier.reference #8ACB55 —
storage.type.modifier.access.control #DB744D —
storage.modifier.import #F4ECF0 italic
entity.name.type.namespace #F4ECF0 italic
source.css meta.property-name, source.css support.type.property-name #F4ECF0 —
source.json support.type.property-name, source.json punctuation.support.type.property-name #4E945F —
text.html.markdown punctuation #F4ECF0 —
punctuation.definition.bold, punctuation.definition.strikethrough, punctuation.definition.italic #C9303E —
heading, punctuation.definition.heading #DB744D bold
markup.underline.link #4E945F —
markup.italic #C9303E italic
markup.strikethrough #C9303E strikethrough
text.html.markdown string.other.link #8ACB55 italic
text.html.markdown constant.other.reference.link #9989A3 —
fenced_code.block.language, markup.fenced_code punctuation.definition.markdown #5E5743 —
meta.separator.markdown #5E5743 bold
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 } !` ;
}
Regard | Coding Theme