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 #f5f7f8 activityBar.activeFocusBorder #00b2f6 activityBar.background #00234260 activityBar.dropBorder #fcd214 activityBar.foreground #f5f7f8 activityBar.inactiveForeground #69757a tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #8e999e italic variable, string constant.other.placeholder #f58331 — invalid, invalid.illegal #ff0000 — keyword, storage.type, storage.modifier — — keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Kraken Theme — Kraken Theme
activityBarBadge.background #e66f20
activityBarBadge.foreground #f5f7f8
breadcrumb.activeSelectionForeground #f5f7f8
breadcrumb.background #001e38
breadcrumb.focusForeground #00b2f6
breadcrumb.foreground #8e999e
breadcrumbPicker.background #001e38
diffEditor.insertedTextBackground #106621
diffEditor.removedTextBackground #821d1a
editor.background #001e38
editor.findMatchBackground #e66f2080
editor.findMatchHighlightBackground #e66f2050
editor.foldBackground #00356150
editor.foreground #16a597
editor.hoverHighlightBackground #f863b770
editor.inactiveSelectionBackground #61d5ff20
editor.lineHighlightBackground #00356160
editor.lineHighlightBorder #00447740
editor.rangeHighlightBackground #00356160
editor.selectionBackground #61d5ff40
editor.selectionHighlightBackground #61d5ff30
editor.wordHighlightBackground #f863b760
editor.wordHighlightStrongBackground #f863b770
editorBracketMatch.background #003561
editorBracketMatch.border #005b98
editorCodeLens.foreground #8e999e
editorCursor.foreground #f5f7f8
editorError.foreground #ff0000
editorGroup.border #0073b9
editorGroup.dropBackground #003561
editorGroup.emptyBackground #001e38
editorGroupHeader.border #001e38
editorGroupHeader.noTabsBackground #00356199
editorGroupHeader.tabsBackground #001e38
editorGroupHeader.tabsBorder #001e38
editorGutter.addedBackground #588f1a
editorGutter.background #00224050
editorGutter.deletedBackground #e64b40
editorGutter.foldingControlForeground #f5f7f8
editorGutter.modifiedBackground #0091d9
editorHoverWidget.background #002342
editorHoverWidget.border #0073b9
editorHoverWidget.foreground #f5f7f8
editorIndentGuide.activeBackground #005b98f1
editorIndentGuide.background #00437790
editorInfo.foreground #fcd214
editorLightBulb.foreground #fcd214
editorLineNumber.activeForeground #69757a
editorLineNumber.foreground #69757a
editorOverviewRuler.border #004477
editorOverviewRuler.currentContentForeground #67f5e2
editorOverviewRuler.incomingContentForeground #f863b7
editorRuler.foreground #005b98f1
editorSuggestWidget.background #002342
editorSuggestWidget.border #0073b9
editorSuggestWidget.foreground #f5f7f8
editorSuggestWidget.highlightForeground #e66f20
editorSuggestWidget.selectedBackground #004477
editorWarning.foreground #e66f20
editorWhitespace.foreground #00437790
editorWidget.background #002342
editorWidget.border #0073b9
editorWidget.foreground #f5f7f8
editorWidget.resizeBorder #0073b9
input.background #002342
input.border #0073b9
input.foreground #f5f7f8
input.placeholderForeground #8e999e
inputOption.activeBackground #003561
inputOption.activeBorder #8e999e50
inputOption.activeForeground #8e999e
inputValidation.errorBackground #821d1a
inputValidation.errorBorder #e64b40
inputValidation.errorForeground #f5f7f8
inputValidation.warningBackground #805203
inputValidation.warningBorder #fcd214
inputValidation.warningForeground #f5f7f8
list.activeSelectionBackground #003561
list.activeSelectionForeground #ade9ff
list.dropBackground #003561
list.errorForeground #fa7c69
list.filterMatchBackground #0073b9
list.filterMatchBorder #f5f7f8
list.focusBackground #003561
list.focusForeground #f5f7f8
list.highlightForeground #00b2f6
list.hoverBackground #002342
list.hoverForeground #f5f7f8
list.inactiveFocusBackground #003561
list.inactiveSelectionBackground #002342
list.inactiveSelectionForeground #00b2f6
listFilterWidget.background #0073b9
listFilterWidget.noMatchesOutline #f5f7f8
minimap.background #002342
minimap.errorHighlight #ff0000
minimap.findMatchHighlight #2de0c860
minimap.selectionHighlight #67f5e2
minimap.warningHighlight #fcd214
minimapSlider.activeBackground #0073b960
minimapSlider.background #0073b920
minimapSlider.hoverBackground #0073b940
panel.background #001e38
panel.border #005b98
panel.dropBorder #0073b9
panelInput.border #8e999e
panelSection.border #0073b9
panelSection.dropBackground #61d5ff40
panelSectionHeader.background #112e47
panelSectionHeader.border #0073b9
panelSectionHeader.foreground #f5f7f8
panelTitle.activeBorder #f5f7f8
panelTitle.activeForeground #f5f7f8
panelTitle.inactiveForeground #8e999e
sideBar.background #0b1e2e
sideBar.border #112e47
sideBar.dropBackground #005b9850
sideBar.foreground #8e999e
sideBarSectionHeader.background #0b1e2e
sideBarSectionHeader.border #112e47
sideBarSectionHeader.foreground #b6bec2
sideBarTitle.foreground #fcd214
statusBar.background #e66f20
statusBar.foreground #f5f7f8
statusBar.noFolderBackground #e66f20
statusBar.noFolderForeground #f5f7f8
statusBarItem.activeBackground #c95a14
statusBarItem.hoverBackground #f58331
statusBarItem.prominentBackground #e66f20
statusBarItem.prominentForeground #f5f7f8
statusBarItem.prominentHoverBackground #f58331
tab.activeBackground #003561
tab.activeBorder #004477
tab.activeBorderTop #004477
tab.activeForeground #f5f7f8
tab.border #004477
tab.hoverBackground #003561
tab.hoverBorder #00b2f6
tab.hoverForeground #f5f7f8
tab.inactiveBackground #002342
tab.inactiveForeground #8e999e
tab.lastPinnedBorder #fcd214
tab.unfocusedActiveBackground #002342
tab.unfocusedActiveForeground #d5d9db
tab.unfocusedActiveModifiedBorder #00b2f6
tab.unfocusedHoverBackground #003561
tab.unfocusedHoverBorder #00b2f6
tab.unfocusedHoverForeground #f5f7f8
tab.unfocusedInactiveBackground #002342
tab.unfocusedInactiveForeground #8e999e entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #5ae072 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #61d5ff —
meta.block variable.other #faab19 —
support.other.variable, string.other.link #61d5ff —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #5ae072 —
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js #16a597 —
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types #fcd214 —
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 — —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #ff0000 —
variable.language #fcd214 italic
entity.name.method.js #ff0000 italic
meta.class-method.js entity.name.function.js, variable.function.constructor #ff0000 —
entity.other.attribute-name #fcd214 —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name — italic
entity.other.attribute-name.class #00d6e6 —
source.sass keyword.control #ff0000 —
constant.character.escape #ff93cf —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #ff0000 italic
source.js constant.other.object.key.js string.unquoted.label.js #ff0000 italic
source.json meta.structure.dictionary.json support.type.property-name.json #0091d9 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #00d6e6 —
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 #00b2f6 —
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 #3bebf5 —
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 #61d5ff —
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 #75f8fc —
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 #ade9ff —
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 #adffff —
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 #adfff4 —
text.html.markdown, punctuation.definition.list_item.markdown #d5d9db —
text.html.markdown markup.inline.raw.markdown #d5d9db —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #ff0000 —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #fcd214 —
markup.italic #ff0000 italic
markup.bold, markup.bold string #e66f20 bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string #ff0000 bold
markup.underline #61d5ff underline
markup.quote punctuation.definition.blockquote.markdown #ff0000 —
string.other.link.title.markdown #1cc8b4 —
string.other.link.description.title.markdown #ff0000 —
constant.other.reference.link.markdown #ff0000 —
markup.raw.block.fenced.markdown #00000050 —
punctuation.definition.fenced.markdown #00000050 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #EEFFFF —
variable.language.fenced.markdown #65737E —
meta.separator #65737E 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 } ! ` ;
}
Kraken Theme | Coding Theme