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 #32302f activityBar.border #3c3836 activityBar.dropBackground #32302f activityBar.foreground #ebdbb2 activityBarBadge.background #458588 activityBarBadge.foreground #ebdbb2 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle emphasis — italic strong — bold header #458588 — comment, punctuation.definition.comment #928374 italic constant, support.constant, variable.arguments #d3869b
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.background
#458588
badge.foreground #ebdbb2
button.background #45858880
button.foreground #ebdbb2
button.hoverBackground #45858860
dart.closingLabels #689d6a
debugToolBar.background #32302f
diffEditor.insertedTextBackground #b8bb2630
diffEditor.removedTextBackground #fb493430
dropdown.background #32302f
dropdown.border #3c3836
dropdown.foreground #ebdbb2
editor.background #32302f
editor.findMatchBackground #83a59870
editor.findMatchHighlightBackground #fe801930
editor.findRangeHighlightBackground #83a59870
editor.focusedStackFrameHighlightBackground #b808
editor.foreground #ebdbb2
editor.hoverHighlightBackground #689d6a50
editor.lineHighlightBackground #3c383660
editor.lineHighlightBorder #3c383600
editor.selectionBackground #689d6a40
editor.selectionHighlightBackground #fabd2f40
editor.stackFrameHighlightBackground #a707
editorBracketMatch.background #92837480
editorBracketMatch.border #32302f00
editorCodeLens.foreground #a8998490
editorCursor.foreground #ebdbb2
editorError.foreground #cc241d
editorGroup.border #3c3836
editorGroup.dropBackground #3c383660
editorGroup.emptyBackground #3c3836
editorGroupHeader.noTabsBackground #3c3836
editorGroupHeader.tabsBackground #32302f
editorGroupHeader.tabsBorder #3c3836
editorGutter.addedBackground #b8bb26
editorGutter.background #32302f00
editorGutter.deletedBackground #fb4934
editorGutter.modifiedBackground #83a598
editorHoverWidget.background #32302f
editorHoverWidget.border #3c3836
editorIndentGuide.activeBackground #a8998450
editorIndentGuide.background #a8998420
editorInfo.foreground #458588
editorLineNumber.foreground #665c54
editorLink.activeForeground #ebdbb2
editorOverviewRuler.addedForeground #83a598
editorOverviewRuler.border #32302f00
editorOverviewRuler.commonContentForeground #928374
editorOverviewRuler.currentContentForeground #458588
editorOverviewRuler.deletedForeground #83a598
editorOverviewRuler.errorForeground #fb4934
editorOverviewRuler.findMatchForeground #bdae93
editorOverviewRuler.incomingContentForeground #689d6a
editorOverviewRuler.infoForeground #d3869b
editorOverviewRuler.modifiedForeground #83a598
editorOverviewRuler.rangeHighlightForeground #bdae93
editorOverviewRuler.selectionHighlightForeground #665c54
editorOverviewRuler.warningForeground #d79921
editorOverviewRuler.wordHighlightForeground #665c54
editorOverviewRuler.wordHighlightStrongForeground #665c54
editorRuler.foreground #a8998440
editorSuggestWidget.background #32302f
editorSuggestWidget.border #3c3836
editorSuggestWidget.foreground #ebdbb2
editorSuggestWidget.highlightForeground #689d6a
editorSuggestWidget.selectedBackground #3c383660
editorWarning.foreground #d79921
editorWhitespace.foreground #a8998420
editorWidget.background #32302f
editorWidget.border #3c3836
errorForeground #fb4934
extensionButton.prominentBackground #b8bb2680
extensionButton.prominentHoverBackground #b8bb2630
focusBorder #3c3836
foreground #ebdbb2
gitDecoration.conflictingResourceForeground #b16286
gitDecoration.deletedResourceForeground #cc241d
gitDecoration.ignoredResourceForeground #7c6f64
gitDecoration.modifiedResourceForeground #d79921
gitDecoration.untrackedResourceForeground #98971a
input.background #ebdbb205
input.border #3c3836
input.foreground #ebdbb2
input.placeholderForeground #ebdbb260
inputOption.activeBorder #ebdbb260
inputValidation.errorBackground #cc241d80
inputValidation.errorBorder #fb4934
inputValidation.infoBackground #45858880
inputValidation.infoBorder #83a598
inputValidation.warningBackground #d7992180
inputValidation.warningBorder #fabd2f
list.activeSelectionBackground #3c383680
list.activeSelectionForeground #8ec07c
list.dropBackground #3c3836
list.focusBackground #3c3836
list.focusForeground #ebdbb2
list.highlightForeground #689d6a
list.hoverBackground #3c383680
list.hoverForeground #d5c4a1
list.inactiveSelectionBackground #3c383680
list.inactiveSelectionForeground #689d6a
merge.border #32302f00
merge.currentContentBackground #45858820
merge.currentHeaderBackground #45858840
merge.incomingContentBackground #689d6a20
merge.incomingHeaderBackground #689d6a40
panel.border #3c3836
panelTitle.activeForeground #ebdbb2
peekView.border #ffd33d44
peekViewEditor.background #3c383650
peekViewEditor.matchHighlightBackground #ffd33d22
peekViewEditorGutter.background #3c383650
peekViewResult.background #3c383650
peekViewResult.fileForeground #ebdbb2
peekViewResult.matchHighlightBackground #ffd33d44
peekViewResult.selectionBackground #8ec07c30
peekViewResult.selectionForeground #ebdbb2
peekViewTitle.background #3c383650
peekViewTitleDescription.foreground #bdae93
peekViewTitleLabel.foreground #ebdbb2
progressBar.background #689d6a
scrollbar.shadow #32302f
scrollbarSlider.activeBackground #689d6a
scrollbarSlider.background #50494599
scrollbarSlider.hoverBackground #665c54
selection.background #689d6a80
sideBar.background #32302f
sideBar.border #3c3836
sideBar.foreground #d5c4a1
sideBarSectionHeader.background #32302f00
sideBarSectionHeader.foreground #ebdbb2
sideBarTitle.foreground #ebdbb2
statusBar.background #32302f
statusBar.border #3c3836
statusBar.debuggingBackground #458588
statusBar.debuggingBorder #32302f00
statusBar.debuggingForeground #ebdbb2
statusBar.foreground #ebdbb2
statusBar.noFolderBackground #32302f
statusBar.noFolderBorder #32302f00
tab.activeBackground #504945
tab.activeBorder #689d6a
tab.activeForeground #ebdbb2
tab.border #32302f00
tab.inactiveBackground #32302f
tab.inactiveForeground #a89984
tab.unfocusedActiveBorder #32302f00
tab.unfocusedActiveForeground #a89984
tab.unfocusedInactiveForeground #928374
terminal.ansiBlack #3c3836
terminal.ansiBlue #458588
terminal.ansiBrightBlack #928374
terminal.ansiBrightBlue #83a598
terminal.ansiBrightCyan #8ec07c
terminal.ansiBrightGreen #b8bb26
terminal.ansiBrightMagenta #d3869b
terminal.ansiBrightRed #fb4934
terminal.ansiBrightWhite #ebdbb2
terminal.ansiBrightYellow #fabd2f
terminal.ansiCyan #689d6a
terminal.ansiGreen #98971a
terminal.ansiMagenta #b16286
terminal.ansiRed #cc241d
terminal.ansiWhite #a89984
terminal.ansiYellow #d79921
terminal.background #32302f
terminal.foreground #ebdbb2
textLink.activeForeground #458588
textLink.foreground #83a598
titleBar.activeBackground #32302f
titleBar.activeForeground #ebdbb2
titleBar.inactiveBackground #32302f
widget.shadow #32302f30 constant.rgb-value #ebdbb2 —
entity.name.selector #8ec07c —
entity.other.attribute-name #fabd2f —
entity.name.tag, punctuation.tag #8ec07c —
invalid, invalid.illegal #cc241d —
invalid.deprecated #b16286 —
meta.preprocessor #fe8019 —
meta.preprocessor.string #b8bb26 —
meta.preprocessor.numeric #b8bb26 —
support.type.property-name #689d6a —
keyword.control.module #8ec07c —
keyword.control.less #d79921 —
keyword.operator.new #fe8019 —
keyword.other.unit #b8bb26 —
support.function.git-rebase #689d6a —
constant.sha.git-rebase #b8bb26 —
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class #fabd2f —
variable.this, support.variable #d3869b —
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type #fabd2f —
storage.type.function, entity.function, entity.name.function.static #8ec07c —
entity.name.function.function-call #8ec07c —
support.function.builtin #fe8019 —
entity.name.method, entity.name.method.function-call, entity.name.static.function-call #689d6a —
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder #83a598 —
storage.type.class #fb4934 —
punctuation.quoted #ebdbb2 —
punctuation.quasi #fb4934 —
*url*, *link*, *uri* — underline
meta.function.python, entity.name.function.python #8ec07c —
storage.type.function.python, storage.modifier.declaration, storage.type.class.python #fb4934 —
meta.function-call.generic #83a598 —
meta.function-call.arguments #d5c4a1 —
entity.name.function.decorator #fabd2f bold
keyword.operator.logical #fb4934 —
punctuation.definition.logical-expression #fe8019 —
string.inperpolated.dollar.shell #fe8019 —
string.interpolated.dollar.shell, string.interpolated.backtick.shell #8ec07c —
keyword.control.directive #8ec07c —
support.function.C99 #fabd2f —
meta.scope.prerequisites #fabd2f —
entity.name.function.target #b8bb26 bold
storage.modifier.import.java, storage.modifier.package.java #bdae93 —
keyword.other.import.java, keyword.other.package.java #8ec07c —
storage.type.java #fabd2f —
storage.type.annotation #83a598 bold
keyword.other.documentation.javadoc #8ec07c —
comment.block.javadoc variable.parameter.java #b8bb26 bold
source.java variable.other.object, source.java variable.other.definition.java #ebdbb2 —
meta.function-parameters.lisp #fabd2f —
markup.underline — underline
string.other.link.title.markdown #928374 underline
markup.underline.link #d3869b —
markup.heading #fe8019 bold
markup.punctuation.quote.beginning #98971a —
markup.punctuation.list.beginning #83a598 —
markup.inline.raw, markup.fenced_code.block #8ec07c —
string.quoted.double.json #83a598 —
source.json meta.structure.dictionary.json support.type.property-name.json #b8bb26 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #8ec07c —
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.json #d3869b —
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.json #b8bb26 —
entity.other.attribute-name.css #fe8019 —
source.css meta.selector #ebdbb2 —
support.type.property-name.css #fe8019 —
entity.other.attribute-name.class #b8bb26 —
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc #fb4934 —
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss #d65d0e —
punctuation.definition.tag #83a598 —
text.html entity.name.tag, text.html punctuation.tag #8ec07c bold
source.js variable.language #fe8019 —
source.ts variable.language #fe8019 —
source.rust support.function.core.rust, source.rust support.function.std.rust #d3869b —
source.go storage.type #FC6D —
source.go variable.other.assignment.go #b8bb26 —
source.go entity.name.import #b8bb26 —
source.go keyword.package, source.go keyword.import #8ec07c —
source.go keyword.interface, source.go keyword.struct #83a598 —
source.go entity.name.type #FC6D —
source.go entity.name.function #d3869b —
keyword.control.cucumber.table #83a598 —
source.reason string.double, source.reason string.regexp #b8bb26 —
source.reason keyword.control.less #8ec07c —
source.reason entity.name.function #83a598 —
source.reason support.property-value, source.reason entity.name.filename #fe8019 —
source.powershell variable.other.member.powershell #fe8019 —
source.powershell support.function.powershell #fabd2f —
source.powershell support.function.attribute.powershell #bdae93 —
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell #fe8019 —
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 } ! ` ;
}
Oxide | Coding Theme