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 #071016 activityBar.dropBackground #FF652F80 activityBarBadge.background #FF652F activityBarBadge.foreground #ffffff badge.background #FF652F badge.foreground #ffffff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle Global settings #FFFFFF — string #03FFB4 — entity.name.class.js #B387FA — string.unquoted.js, constant.other.object.key.js #ffdcb4 — constant.character.escape, text.html constant.character.entity.named, punctuation.definition.entity.html
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Sunset Theme-Custom — OwO Dark
button.background
#FF652F
button.foreground #ffffff
debugToolBar.background #0c1a25
dropdown.background #0e1e2b
editor.background #08131d
editor.foreground #FFFFFF
editor.lineHighlightBorder #FFFFFF1a
editor.rangeHighlightBackground #FFFFFF0d
editorCursor.foreground #dfb5a2
editorGroup.dropBackground #FF652F80
editorGroup.focusedEmptyBorder #FF652F
editorGroupHeader.tabsBackground #0a1620
editorHoverWidget.background #0a1620
editorLineNumber.activeForeground #FF652F
editorLineNumber.foreground #FFFFFF4d
editorMarkerNavigation.background #0a1620
editorWidget.background #0a1620
focusBorder #7e2200
foreground #FFFFFF
input.background #0e1e2b
inputOption.activeBorder #FF652F
list.activeSelectionBackground #FF652F80
list.activeSelectionForeground #FFFFFF
list.dropBackground #FF652F80
list.focusBackground #FF652F80
list.focusForeground #FFFFFF
list.highlightForeground #FF652F
list.hoverBackground #FFFFFF1a
list.inactiveSelectionBackground #FFFFFF33
panel.background #0a1620
panel.border #FFFFFF1a
panelTitle.activeBorder #FFFFFF80
panelTitle.inactiveForeground #FFFFFF80
peekView.border #FF652F
peekViewEditor.background #070f15
peekViewResult.background #0a1620
peekViewTitle.background #09131b
pickerGroup.border #FFFFFF1a
sash.hoverBorder #fb713f
selection.background #FF652F
sideBar.background #0a1620
sideBarSectionHeader.background #0c1a25
statusBar.background #070f15
statusBar.debuggingBackground #FF652F
statusBar.debuggingForeground #ffffff
statusBar.noFolderBackground #070f15
statusBarItem.activeBackground #FF652F80
statusBarItem.hoverBackground #FFFFFF1a
statusBarItem.remoteBackground #FF652F
statusBarItem.remoteForeground #ffffff
tab.activeBorder #FF652F
tab.activeModifiedBorder #FF652F
tab.border #00000033
tab.inactiveBackground #0c1a25
tab.inactiveModifiedBorder #993c1c
tab.lastPinnedBorder #ff652f
tab.unfocusedActiveModifiedBorder #cc5025
tab.unfocusedInactiveModifiedBorder #993c1c
terminalCursor.foreground #f39759
titleBar.activeBackground #05101a constant.language.boolean #FF652F —
variable.other.readwrite.js #36F9F6 —
variable.other.readwrite.js, entity.name.function, variable.function #36f9f6 —
variable.other.readwrite.js, meta.function.parameters.js, meta.function.arrow.js #FD709C italic
variable.other.constant.property.js, variable.other.property.js #FFDCB4 —
entity.name.tag.css, meta.selector.css #FD709C —
entity.other.attribute-name.class.css, meta.selector.css #FD709C —
entity.name.tag.css, meta.selector.css #FD709C —
entity.other.attribute-name.id.css, meta.selector.css #FD709C —
entity.name.tag.css, meta.selector.css #FD709C —
support.type.vendored.property-name.css, meta.property-name.css, meta.property-list.css #23ECDC —
meta.jsx.children.js, meta.tag.without-attributes.js, meta.block.js, meta.function.js, source.js #ffffff —
support.class.component.open.jsx, entity.name.tag.open.jsx, meta.tag.jsx, support.class.component.close.jsx, entity.name.tag.close.jsx, JSXAttrs, meta.tag.jsx #FFDCB4 —
variable, support.variable, support.constant, meta.definition.variable entity.name.function #B387FA —
support.type.object.module.js, support.type.object.module.js #f3f194 italic
keyword, modifier, variable.language.this, support.type.object, constant.language #f39f94 italic
keyword.control.flow.js #FFE400 —
entity.name.function, support.function #23ECDC —
storage.type, storage.modifier #ff865b —
support.module, support.node #ff9746 italic
entity.name.type, entity.other.inherited-class #B982F8 —
comment, comment.block.js #7fa6c7 italic
entity.name.type.class #ec87fa —
variable.object.property, meta.field.declaration entity.name.function #5eb7ee —
meta.definition.method entity.name.function #5eb7ee —
meta.function entity.name.function #36f9f6 —
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #FF652F —
meta.embedded, source.groovy.embedded, meta.template.expression #FFFFFF —
entity.name.tag.yaml #ff9746 —
support.type.property-name.css, meta.property-name.css, meta.property-list.css #FFDCB4 —
support.type.builtin.ts, meta.type.declaration.ts #FF652F italic
support.type.primitive.ts, meta.type.annotation.ts, meta.field.declaration.ts, meta.interface.ts #FFDCB4 —
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json #FFDCB4 —
constant.language.json #FF652F —
entity.other.attribute-name.class #FF652F —
entity.other.attribute-name.id #14A76C —
entity.name.tag.wildcard.css, meta.selector.css #FF652F —
source.css entity.name.tag #5eb7ee —
meta.tag, punctuation.definition.tag #FF652F —
entity.other.attribute-name #f7da03 —
text.html.markdown meta.link.inline, meta.link.reference #ff9746 —
text.html.markdown beginning.punctuation.definition.list #FF652F —
markup.italic #ff9746 italic
markup.bold markup.italic, markup.italic markup.bold #ff9746 italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown #14A76C —
markup.inline.raw.string.markdown #14A76C —
punctuation.definition.heading.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.quote.begin.markdown, punctuation.definition.list.begin.markdown, markup.fenced_code.block.markdown, meta.separator.markdown #356ea0 —
keyword.other.definition.ini #ff9746 —
entity.name.section.group-title.ini #FF652F —
source.cs meta.class.identifier storage.type #5eb7ee underline
source.cs meta.method.identifier entity.name.function #5eb7ee —
source.cs meta.method-call meta.method, source.cs entity.name.function #FFE400 —
source.cs storage.type #5eb7ee —
source.cs meta.method.return-type #5eb7ee —
source.cs meta.preprocessor #1b3951 —
source.cs entity.name.type.namespace #FFFFFF —
modifier, this, comment, storage.modifier.js, storage.modifier.ts, storage.modifier.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.html, keyword.control.flow.js — italic
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...
main*
Button.tsx
31
~/my-project
$
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 } !` ;
}
Sunset Theme-Custom | Coding Theme