Skip to main content
Home Theme VS Code Black-Yellow Theme A fork of the Sunset Theme - Colorful theme with dark background and yellow accents
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 #0c090d activityBar.foreground #fcfcf2 activityBarBadge.background #ffbd14 activityBarBadge.foreground #262327 button.background #ffbd14 button.foreground #0c090d tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #d4d4d4ff — strong — bold header #000080 — comment #627027 — constant.language, constant.character, constant.other
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Black-Yellow Theme — Black-Yellow Theme
button.hoverBackground
#ffcc23
contrastBorder #262327a0
dropdown.background #262327
editor.background #0c090d
editor.foreground #d4d4d4
editor.lineHighlightBackground #262327
editor.lineHighlightBorder #262327
editor.selectionBackground #ffbd1460
editor.selectionHighlightBackground #ffbd1430
editorCursor.foreground #ffbd14
editorGroup.emptyBackground #0c090d
editorGroupHeader.tabsBackground #0c090d
editorGutter.addedBackground #52914a
editorGutter.deletedBackground #f84343
editorGutter.modifiedBackground #16769c
editorHoverWidget.background #262327
editorHoverWidget.border #262327a0
editorIndentGuide.background #262327
editorLink.activeForeground #ffbd14
editorOverviewRuler.border #26232700
editorSuggestWidget.background #0c090d
editorSuggestWidget.border #262327a0
editorSuggestWidget.focusHighlightForeground #ffbd14
editorSuggestWidget.selectedBackground #262327
editorSuggestWidget.selectedForeground #ffbd14
editorSuggestWidget.selectedIconForeground #9cdcfe
extensionButton.prominentBackground #ffbd14
extensionButton.prominentForeground #0c090d
extensionButton.prominentHoverBackground #ffcc23
focusBorder #26232700
foreground #fcfcf2
input.background #262327
inputOption.activeBorder #ffbd14
inputValidation.errorBackground #e02d2d
inputValidation.errorBorder #e02d2d
inputValidation.infoBackground #00638a
inputValidation.warningBackground #ff8928
list.activeSelectionBackground #ffbd14
list.activeSelectionForeground #0c090d
list.dropBackground #383b3d
list.focusBackground #262327
list.focusForeground #ffbd14
list.focusHighlightForeground #0c090d
list.highlightForeground #ffbd14
list.hoverBackground #262327
list.inactiveSelectionBackground #ffbd1430
list.inactiveSelectionForeground #fcfcf2
notification.background #0c090d
notification.buttonBackground #ffbd14
notification.buttonForeground #0c090d
notification.errorBackground #d10000
notification.foreground #fcfcf2
notification.infoBackground #00638a
notification.warningBackground #ff8928
notificationCenterHeader.background #1e1e1e
notificationLink.foreground #ffbd14
notifications.background #0c090d
notificationsErrorIcon.foreground #e02d2d
panelTitle.activeBorder #ffbd14
peekView.border #70d349a0
peekViewEditor.background #0c090d
peekViewEditor.matchHighlightBackground #ffbd1420
peekViewResult.background #0c090d
peekViewResult.matchHighlightBackground #ffbd1420
peekViewResult.selectionBackground #262327
peekViewTitle.background #262327
peekViewTitleDescription.foreground #fcfcf2
peekViewTitleLabel.foreground #fcfcf2
pickerGroup.foreground #ffbd14
progressBar.background #ffbd14
quickInput.background #0c090d
scrollbar.shadow #262327a0
scrollbarSlider.activeBackground #ffbd14
scrollbarSlider.hoverBackground #ffbd14
selection.background #ffbd1460
sideBar.background #0c090d
sideBarSectionHeader.background #262327
statusBar.background #0c090d
statusBar.debuggingBackground #ffbd14
statusBar.debuggingForeground #0c090d
statusBar.noFolderBackground #0c090d
statusBarItem.activeBackground #ffbd14
statusBarItem.hoverBackground #ffbc14
tab.activeBackground #0c090d
tab.activeBorder #ffbd14
tab.inactiveBackground #0c090d
terminal.tab.activeBorder #ffbd14
textLink.activeForeground #9cdcfe
textLink.foreground #9cdcfe
titleBar.activeBackground #0c090d #eac66c
entity.name.tag.css #d7ba7d —
entity.other.attribute-name #9cdcfe —
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss #d7ba7d —
markup.underline — underline
markup.heading #9bb46e bold
beginning.punctuation.definition.quote.markdown #608b4e —
beginning.punctuation.definition.list.markdown #6796e6 —
markup.inline.raw #BF9277 —
punctuation.definition.tag #808080 —
meta.preprocessor #eac66c —
meta.preprocessor.string #BF9277 —
meta.preprocessor.numeric #b5cea8 —
meta.structure.dictionary.key.python #9cdcfe —
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js #eac66c —
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, keyword.other.class.cs #9cdcfe —
keyword.operator.sigil.rust, keyword.operator.address.go, keyword.operator.misc.rust #9CDCFE —
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, support.function.builtin.go, support.function.core.rust #eac66c —
keyword.other.unit #b5cea8 —
punctuation.section.embedded.begin.metatag.php, punctuation.section.embedded.end.metatag.php, punctuation.separator.pointer-access.c #eac66c —
punctuation.separator.namespace.access.cpp, variable.parameter #FA9F50 —
storage.type.function.js, storage.type.function.python, keyword.function.go, keyword.control.def.ruby #9CDCFE —
support.function.git-rebase #9cdcfe —
constant.sha.git-rebase #b5cea8 —
storage.modifier.import.java, storage.modifier.package.java #d4d4d4 —
variable.language, variable.parameter.function.language.special.self.python, keyword.other.this.cs #9CDCFE —
entity.name.function, entity.name.type.type-parameter.cs, support.function, support.constant.handlebars, meta.function-call.generic.python #ABD166 —
meta.return-type, support.class, support.type, entity.name.class, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, keyword.operator.type.annotation.ts, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy #9CDCFE —
entity.other.inherited-class #ffbd14 —
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json #9bb46e —
variable, meta.definition.variable.name, support.variable #D6D6D6 —
meta.object-literal.key, meta.object-literal.key entity.name.function #9CDCFE —
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color #BF9277 —
token.error-token #f44747 —
token.debug-token #b267e6 —
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 } !` ;
}
Black-Yellow Theme | Coding Theme