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.activeBorder #f78166 activityBar.background #0d1117 activityBar.border #30363d activityBar.foreground #c9d1d9 activityBar.inactiveForeground #8b949e activityBarBadge.background #1f6feb tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, meta.var.expr storage.type, keyword.control.flow, keyword.control.return, meta.directive.vue punctuation.separator.key-value.html, meta.directive.vue entity.other.attribute-name.html, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.modifier — italic keyword.control.flow.block-scalar.literal — comment, comment.block.documentation, punctuation.definition.comment, comment.block.documentation punctuation #444B6A — comment.block.documentation variable, comment.block.documentation storage, comment.block.documentation keyword, comment.block.documentation support, comment.block.documentation markup, comment.block.documentation markup.inline.raw.string.markdown, meta.other.type.phpdoc.php keyword.other.type.php, meta.other.type.phpdoc.php support.other.namespace.php, meta.other.type.phpdoc.php punctuation.separator.inheritance.php, meta.other.type.phpdoc.php support.class, keyword.other.phpdoc.php, log.date
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
HK416 Theme — HK416 Theme
activityBarBadge.foreground
#f0f6fc
badge.background #1f6feb
badge.foreground #f0f6fc
breadcrumb.activeSelectionForeground #8b949e
breadcrumb.focusForeground #c9d1d9
breadcrumb.foreground #8b949e
breadcrumbPicker.background #161b22
button.background #238636
button.foreground #ffffff
button.hoverBackground #2ea043
button.secondaryBackground #282e33
button.secondaryForeground #c9d1d9
button.secondaryHoverBackground #30363d
checkbox.background #161b22
checkbox.border #30363d
debugToolBar.background #161b22
descriptionForeground #8b949e
diffEditor.insertedTextBackground #2ea04326
diffEditor.removedTextBackground #f8514926
dropdown.background #161b22
dropdown.border #30363d
dropdown.foreground #c9d1d9
dropdown.listBackground #161b22
editor.background #0d1117
editor.findMatchBackground #ffd33d44
editor.findMatchHighlightBackground #ffd33d22
editor.focusedStackFrameHighlightBackground #3fb95025
editor.foldBackground #6e76811a
editor.foreground #c9d1d9
editor.inactiveSelectionBackground #3392ff22
editor.lineHighlightBackground #6e76811a
editor.linkedEditingBackground #3392ff22
editor.selectionBackground #3392ff44
editor.selectionHighlightBackground #17e5e633
editor.selectionHighlightBorder #17e5e600
editor.stackFrameHighlightBackground #d2992225
editor.wordHighlightBackground #17e5e600
editor.wordHighlightBorder #17e5e699
editor.wordHighlightStrongBackground #17e5e600
editor.wordHighlightStrongBorder #17e5e666
editorBracketMatch.background #17e5e650
editorBracketMatch.border #17e5e600
editorCursor.foreground #58a6ff
editorGroup.border #30363d
editorGroupHeader.tabsBackground #010409
editorGroupHeader.tabsBorder #30363d
editorGutter.addedBackground #2ea04366
editorGutter.deletedBackground #f8514966
editorGutter.modifiedBackground #bb800966
editorIndentGuide.activeBackground #30363d
editorIndentGuide.background #21262d
editorLineNumber.activeForeground #c9d1d9
editorLineNumber.foreground #8b949e
editorOverviewRuler.border #010409
editorWhitespace.foreground #484f58
editorWidget.background #161b22
errorForeground #f85149
focusBorder #1f6feb
foreground #c9d1d9
gitDecoration.addedResourceForeground #3fb950
gitDecoration.conflictingResourceForeground #db6d28
gitDecoration.deletedResourceForeground #f85149
gitDecoration.ignoredResourceForeground #484f58
gitDecoration.modifiedResourceForeground #d29922
gitDecoration.submoduleResourceForeground #8b949e
gitDecoration.untrackedResourceForeground #3fb950
input.background #0d1117
input.border #30363d
input.foreground #c9d1d9
input.placeholderForeground #484f58
list.activeSelectionBackground #6e768166
list.activeSelectionForeground #c9d1d9
list.focusBackground #388bfd26
list.focusForeground #c9d1d9
list.highlightForeground #58a6ff
list.hoverBackground #6e76811a
list.hoverForeground #c9d1d9
list.inactiveFocusBackground #388bfd26
list.inactiveSelectionBackground #6e768166
list.inactiveSelectionForeground #c9d1d9
notificationCenterHeader.background #161b22
notificationCenterHeader.foreground #8b949e
notifications.background #161b22
notifications.border #30363d
notifications.foreground #c9d1d9
notificationsErrorIcon.foreground #f85149
notificationsInfoIcon.foreground #58a6ff
notificationsWarningIcon.foreground #d29922
panel.background #010409
panel.border #30363d
panelInput.border #30363d
panelTitle.activeBorder #f78166
panelTitle.activeForeground #c9d1d9
panelTitle.inactiveForeground #8b949e
peekViewEditor.background #0d111788
peekViewEditor.matchHighlightBackground #ffd33d33
peekViewResult.background #0d1117
peekViewResult.matchHighlightBackground #ffd33d33
pickerGroup.border #30363d
pickerGroup.foreground #8b949e
progressBar.background #1f6feb
quickInput.background #161b22
quickInput.foreground #c9d1d9
scrollbar.shadow #00000088
scrollbarSlider.activeBackground #484f5888
scrollbarSlider.background #484f5833
scrollbarSlider.hoverBackground #484f5844
settings.headerForeground #8b949e
settings.modifiedItemIndicator #bb800966
sideBar.background #010409
sideBar.border #30363d
sideBar.foreground #c9d1d9
sideBarSectionHeader.background #010409
sideBarSectionHeader.border #30363d
sideBarSectionHeader.foreground #c9d1d9
sideBarTitle.foreground #c9d1d9
statusBar.background #0d1117
statusBar.border #30363d
statusBar.debuggingBackground #da3633
statusBar.debuggingForeground #f0f6fc
statusBar.foreground #8b949e
statusBar.noFolderBackground #0d1117
statusBarItem.prominentBackground #161b22
tab.activeBackground #0d1117
tab.activeBorder #0d1117
tab.activeBorderTop #f78166
tab.activeForeground #c9d1d9
tab.border #30363d
tab.hoverBackground #0d1117
tab.inactiveBackground #010409
tab.inactiveForeground #8b949e
tab.unfocusedActiveBorder #0d1117
tab.unfocusedActiveBorderTop #30363d
tab.unfocusedHoverBackground #6e76811a
terminal.ansiBlack #484f58
terminal.ansiBlue #58a6ff
terminal.ansiBrightBlack #6e7681
terminal.ansiBrightBlue #79c0ff
terminal.ansiBrightCyan #56d4dd
terminal.ansiBrightGreen #56d364
terminal.ansiBrightMagenta #d2a8ff
terminal.ansiBrightRed #ffa198
terminal.ansiBrightWhite #f0f6fc
terminal.ansiBrightYellow #e3b341
terminal.ansiCyan #39c5cf
terminal.ansiGreen #3fb950
terminal.ansiMagenta #bc8cff
terminal.ansiRed #ff7b72
terminal.ansiWhite #b1bac4
terminal.ansiYellow #d29922
terminal.foreground #8b949e
textBlockQuote.background #010409
textBlockQuote.border #30363d
textCodeBlock.background #6e768166
textLink.activeForeground #58a6ff
textLink.foreground #58a6ff
textPreformat.foreground #8b949e
textSeparator.foreground #21262d
titleBar.activeBackground #0d1117
titleBar.activeForeground #8b949e
titleBar.border #30363d
titleBar.inactiveBackground #010409
titleBar.inactiveForeground #8b949e
tree.indentGuidesStroke #21262d meta.other.type.phpdoc.php support.class, comment.block.documentation storage.type, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation entity.name.type.instance #646E9C —
variable.other.constant, punctuation.definition.constant, constant.language, constant.numeric, support.constant #FF9E64 —
string, constant.other.symbol, constant.other.key, meta.attribute-selector #9ECE6A
constant.other.color, constant.other.color.rgb-value.hex punctuation.definition.constant #9AA5CE —
invalid, invalid.illegal #FF5370 —
invalid.deprecated #BB9AF7 —
meta.var.expr storage.type, storage.modifier #9D7CD8 —
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line.tag.smarty, support.constant.handlebars, punctuation.section.tag.twig #7DCFFF —
keyword.control.smarty, keyword.control.twig, support.constant.handlebars keyword.control, keyword.operator.comparison.twig, keyword.blade, entity.name.function.blade #0DB9D7 —
keyword.operator.spread, keyword.operator.rest #F7768E bold
keyword.operator, keyword.control.as, keyword.other, keyword.operator.bitwise.shift, punctuation, text.html.twig meta.tag.inline.any.html, meta.tag.template.value.twig meta.function.arguments.twig, meta.directive.vue punctuation.separator.key-value.html, punctuation.definition.constant.markdown, punctuation.definition.string, punctuation.support.type.property-name, text.html.vue-html meta.tag, punctuation.definition.keyword, punctuation.terminator.rule, punctuation.definition.entity, punctuation.separator.inheritance.php, keyword.other.template, keyword.other.substitution, entity.name.operator, meta.property-list punctuation.separator.key-value, meta.at-rule.mixin punctuation.separator.key-value, meta.at-rule.function variable.parameter.url #89DDFF —
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default, meta.import keyword.other #7DCFFF —
keyword, keyword.control, keyword.other.important #BB9AF7 —
keyword.other.DML #7DCFFF —
keyword.operator.logical, storage.type.function, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.relational, keyword.operator.or.regexp #BB9AF7 —
entity.name.tag support.class.component, meta.tag #DE5971 —
punctuation.definition.tag #BA3C97 —
constant.other.php, variable.other.global.safer, variable.other.global.safer punctuation.definition.variable, variable.other.global, variable.other.global punctuation.definition.variable, constant.other #E0AF68 —
variable, support.variable, string constant.other.placeholder, variable.parameter.handlebars #C0CAF5 —
variable.other.object #C0CAF5 —
meta.array.literal variable #7DCFFF —
meta.object-literal.key, string.alias.graphql, string.unquoted.graphql, string.unquoted.alias.graphql, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, meta.field.declaration.ts variable.object.property #73DACA —
variable.other.property, support.variable.property, support.variable.property.dom, meta.function-call variable.other.object.property #7DCFFF —
variable.other.object.property #C0CAF5 —
meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key #41A6B5 —
source.cpp meta.block variable.other #F7768E —
support.other.variable #F7768E —
meta.class-method.js entity.name.function.js, entity.name.method.js, variable.function.constructor, keyword.other.special-method, storage.type.cs #7AA2F7 —
entity.name.function, meta.function-call, meta.function-call entity.name.function, variable.function, meta.definition.method entity.name.function, meta.object-literal entity.name.function #7AA2F7 —
variable.parameter.function.language.special, variable.parameter, meta.function.parameters punctuation.definition.variable, meta.function.parameter variable #E0AF68 —
keyword.other.type.php, storage.type.php, constant.character, constant.escape, keyword.other.unit #BB9AF7 —
meta.definition.variable variable.other.constant, meta.definition.variable variable.other.readwrite, variable.other.declaration #BB9AF7 —
entity.other.inherited-class #BB9AF7
support.class, support.type, variable.other.readwrite.alias, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types, support.variable.dom, support.constant.math, support.type.object.module, support.constant.json, entity.name.namespace, meta.import.qualifier #0DB9D7 —
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, support.type.property-name.css, support.type.vendored.property-name, support.type.map.key #7AA2F7 —
support.constant.font-name, meta.definition.variable #9ECE6A —
entity.other.attribute-name.class, meta.at-rule.mixin.scss entity.name.function.scss #9ECE6A —
entity.other.attribute-name.id #FC7B7B —
entity.name.tag.css #0DB9D7 —
entity.other.attribute-name.pseudo-class punctuation.definition.entity, entity.other.attribute-name.pseudo-element punctuation.definition.entity, entity.other.attribute-name.class punctuation.definition.entity, entity.name.tag.reference #E0AF68 —
meta.property-list #9ABDF5 —
meta.property-list meta.at-rule.if, meta.at-rule.return variable.parameter.url, meta.property-list meta.at-rule.else #FF9E64 —
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity.css #73DACA —
meta.property-list meta.property-list #9ABDF5 —
meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.include entity.name.function.scss, meta.at-rule.include keyword.control.at-rule.include #BB9AF7 —
keyword.control.at-rule.include punctuation.definition.keyword, keyword.control.at-rule.mixin punctuation.definition.keyword, meta.at-rule.include keyword.control.at-rule.include, keyword.control.at-rule.extend punctuation.definition.keyword, meta.at-rule.extend keyword.control.at-rule.extend, entity.other.attribute-name.placeholder.css punctuation.definition.entity.css, meta.at-rule.media keyword.control.at-rule.media, meta.at-rule.mixin keyword.control.at-rule.mixin, meta.at-rule.function keyword.control.at-rule.function, keyword.control punctuation.definition.keyword #9D7CD8 —
meta.property-list meta.at-rule.include #C0CAF5 —
support.constant.property-value #FF9E64 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #C0CAF5 —
variable.language #F7768E —
variable.other punctuation.definition.variable #C0CAF5 —
source.js constant.other.object.key.js string.unquoted.label.js, variable.language.this punctuation.definition.variable, keyword.other.this #F7768E —
entity.other.attribute-name, text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #BB9AF7 —
text.html constant.character.entity #0DB9D7 —
entity.other.attribute-name.id.html, meta.directive.vue entity.other.attribute-name.html #BB9AF7 —
source.sass keyword.control #7AA2F7 —
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.placeholder, meta.property-list meta.property-value #BB9AF7 —
punctuation.definition.group #F7768E —
constant.other.character-class.regexp #BB9AF7 —
constant.other.character-class.set.regexp, punctuation.definition.character-class.regexp #E0AF68 —
keyword.operator.quantifier.regexp #89DDFF —
constant.character.escape.backslash #C0CAF5 —
constant.character.escape #89DDFF —
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #7AA2F7 —
keyword.other.unit #F7768E —
source.json meta.structure.dictionary.json support.type.property-name.json #7AA2F7 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #0DB9D7 —
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 #7DCFFF —
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 #BB9AF7 —
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.json #E0AF68 —
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.json #0DB9D7 —
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.json #73DACA —
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #F7768E —
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #9ECE6A —
punctuation.definition.list_item.markdown #9ABDF5 —
meta.block, meta.brace, punctuation.definition.block, punctuation.definition.use, punctuation.definition.class, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, punctuation.definition.switch-expression.begin.bracket, punctuation.definition.switch-expression.end.bracket, punctuation.definition.section.switch-block.begin.bracket, punctuation.definition.section.switch-block.end.bracket, punctuation.definition.group.shell, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.dictionary, punctuation.definition.array, punctuation.section #9ABDF5 —
meta.jsx.children, meta.embedded.block #C0CAF5 —
text.html, text.log #9AA5CE —
text.html.markdown markup.inline.raw.markdown #BB9AF7 —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #4E5579 —
heading.1.markdown entity.name, heading.1.markdown punctuation.definition.heading.markdown #89DDFF bold
heading.2.markdown entity.name, heading.2.markdown punctuation.definition.heading.markdown #61BDF2 bold
heading.3.markdown entity.name, heading.3.markdown punctuation.definition.heading.markdown #7AA2F7 bold
heading.4.markdown entity.name, heading.4.markdown punctuation.definition.heading.markdown #6D91DE bold
heading.5.markdown entity.name, heading.5.markdown punctuation.definition.heading.markdown #9AA5CE bold
heading.6.markdown entity.name, heading.6.markdown punctuation.definition.heading.markdown #747CA1 bold
markup.italic, markup.italic punctuation #C0CAF5 italic
markup.bold, markup.bold punctuation #C0CAF5 bold
markup.bold markup.italic, markup.bold markup.italic punctuation #C0CAF5 bold italic
markup.underline, markup.underline punctuation — underline
markup.quote punctuation.definition.blockquote.markdown #4E5579 —
string.other.link, markup.underline.link, constant.other.reference.link.markdown, string.other.link.description.title.markdown #73DACA —
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.language.fenced.markdown #89DDFF —
meta.separator #444B6A bold
token.error-token #DB4B4B —
token.debug-token #B267E6 —
entity.tag.apacheconf #F7768E —
meta.preprocessor #73DACA —
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*
HK416 Theme | Coding Theme 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 } ! ` ;
}