Skip to main content
Home Theme VS Code Hyper.is Theme color theme based on the standard Hyperterm colors
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 #000 activityBar.border #000 activityBar.foreground #fff activityBarBadge.background #C839C5 activityBarBadge.foreground #fff badge.background #000 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment #C7C7C7 italic variable, string constant.other.placeholder #fff — constant.other.color #fff — invalid, invalid.illegal #C51E14 — keyword, storage.type, storage.modifier
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Hyper.is Theme — Hyper.is Theme
badge.foreground
#686868
button.background #000
button.foreground #fff
button.hoverBackground #686868
debugExceptionWidget.background #000
debugExceptionWidget.border #686868
debugToolBar.background #000
descriptionForeground #fff
diffEditor.insertedTextBackground #1DC121
diffEditor.insertedTextBorder #1DC121
diffEditor.removedTextBackground #C51E14
diffEditor.removedTextBorder #C51E14
dropdown.background #000
dropdown.border #686868
dropdown.foreground #fff
editor.background #000
editor.findMatchBackground #C7C7C7
editor.findMatchHighlightBackground #686868
editor.findRangeHighlightBackground #686868
editor.foreground #fff
editor.hoverHighlightBackground #000
editor.inactiveSelectionBackground #686868
editor.lineHighlightBackground #000
editor.lineHighlightBorder #686868
editor.rangeHighlightBackground #000
editor.selectionBackground #C839C5
editor.wordHighlightBackground #686868
editor.wordHighlightStrongBackground #C839C5
editorBracketMatch.background #000
editorBracketMatch.border #686868
editorCodeLens.foreground #C7C7C7
editorCursor.foreground #C839C5
editorError.border #C51E14
editorError.foreground #C51E14
editorGroup.border #686868
editorGroup.dropBackground #000
editorGroup.emptyBackground #000
editorGroupHeader.noTabsBackground #000
editorGroupHeader.tabsBackground #000
editorGroupHeader.tabsBorder #686868
editorGutter.addedBackground #1DC121
editorGutter.background #000
editorGutter.deletedBackground #C51E14
editorGutter.modifiedBackground #68FDFE
editorHoverWidget.background #000
editorHoverWidget.border #686868
editorIndentGuide.background #686868
editorLineNumber.foreground #aaa
editorLink.activeForeground #C51E14
editorMarkerNavigation.background #000
editorMarkerNavigationError.background #C51E14
editorMarkerNavigationWarning.background #C7C329
editorOverviewRuler.border #686868
editorOverviewRuler.commonContentForeground #000
editorOverviewRuler.currentContentForeground #C839C5
editorOverviewRuler.incomingContentForeground #fff
editorRuler.foreground #000
editorSuggestWidget.background #000
editorSuggestWidget.border #686868
editorSuggestWidget.foreground #fff
editorSuggestWidget.highlightForeground #68FDFE
editorSuggestWidget.selectedBackground #686868
editorWarning.border #C7C329
editorWarning.foreground #000
editorWhitespace.foreground #1DC121
editorWidget.background #000
editorWidget.border #C839C5
errorForeground #C51E14
extensionButton.prominentBackground #1DC121
extensionButton.prominentForeground #000
extensionButton.prominentHoverBackground #686868
focusBorder #686868
foreground #fff
gitDecoration.conflictingResourceForeground #C51E14
gitDecoration.deletedResourceForeground #FD6F6B
gitDecoration.ignoredResourceForeground #686868
gitDecoration.modifiedResourceForeground #FFFA72
gitDecoration.untrackedResourceForeground #67F86F
input.background #000
input.border #686868
input.foreground #68FDFE
input.placeholderForeground #C7C7C7
inputOption.activeBorder #C7C7C7
inputValidation.errorBackground #C51E14
inputValidation.errorBorder #C51E14
inputValidation.infoBackground #6A76FB
inputValidation.infoBorder #6A76FB
inputValidation.warningBackground #C7C329
inputValidation.warningBorder #C7C329
list.activeSelectionBackground #000
list.activeSelectionForeground #fff
list.dropBackground #000
list.focusBackground #000
list.focusForeground #20C5C6
list.highlightForeground #fff
list.hoverBackground #000
list.hoverForeground #FD7CFC
list.inactiveSelectionBackground #000
list.inactiveSelectionForeground #68FDFE
menu.background #000
merge.border #ffffff00
merge.commonContentBackground #c97d0c
merge.commonHeaderBackground #c97d0c
merge.currentContentBackground #2F7366
merge.currentHeaderBackground #2F7366
merge.incomingContentBackground #185294
merge.incomingHeaderBackground #185294
notificationCenter.border #686868
notificationCenterHeader.background #000
notificationCenterHeader.foreground #fff
notificationLink.foreground #C839C5
notifications.background #000
notifications.border #686868
notifications.foreground #fff
notificationToast.border #686868
panel.background #000
panel.border #686868
panelTitle.activeBorder #C839C5
panelTitle.activeForeground #C839C5
panelTitle.inactiveForeground #686868
peekView.border #686868
peekViewEditor.background #193549
peekViewEditor.matchHighlightBackground #19354900
peekViewEditorGutter.background #122738
peekViewResult.background #15232d
peekViewResult.fileForeground #aaa
peekViewResult.lineForeground #fff
peekViewResult.matchHighlightBackground #0d3a58
peekViewResult.selectionBackground #0d3a58
peekViewResult.selectionForeground #fff
peekViewTitle.background #15232d
peekViewTitleDescription.foreground #aaa
peekViewTitleLabel.foreground #FFFA72
pickerGroup.border #686868
pickerGroup.foreground #fff
progressBar.background #000
scrollbar.shadow #000
scrollbarSlider.activeBackground #686868
scrollbarSlider.background #000
scrollbarSlider.hoverBackground #686868
selection.background #686868
sideBar.background #000
sideBar.border #686868
sideBar.foreground #fff
sideBarSectionHeader.background #000
sideBarSectionHeader.foreground #fff
sideBarTitle.foreground #fff
statusBar.background #000
statusBar.border #686868
statusBar.debuggingBackground #C839C5
statusBar.debuggingBorder #C839C5
statusBar.debuggingForeground #000
statusBar.foreground #C7C7C7
statusBar.noFolderBackground #000
statusBar.noFolderBorder #C839C5
statusBar.noFolderForeground #C7C7C7
statusBarItem.activeBackground #686868
statusBarItem.hoverBackground #C839C5
statusBarItem.prominentBackground #000
statusBarItem.prominentHoverBackground #000
tab.activeBackground #000
tab.activeBorder #000
tab.activeForeground #fff
tab.border #686868
tab.inactiveBackground #000
tab.inactiveForeground #C7C7C7
tab.unfocusedActiveForeground #C7C7C7
tab.unfocusedInactiveForeground #C7C7C7
terminal.ansiBlack #000000
terminal.ansiBlue #0A2FC4
terminal.ansiBrightBlack #686868
terminal.ansiBrightBlue #6A76FB
terminal.ansiBrightCyan #68FDFE
terminal.ansiBrightGreen #67F86F
terminal.ansiBrightMagenta #FD7CFC
terminal.ansiBrightRed #FD6F6B
terminal.ansiBrightWhite #fff
terminal.ansiBrightYellow #FFFA72
terminal.ansiCyan #20C5C6
terminal.ansiGreen #1DC121
terminal.ansiMagenta #C839C5
terminal.ansiRed #C51E14
terminal.ansiWhite #C7C7C7
terminal.ansiYellow #C7C329
terminal.background #000
terminal.foreground #fff
terminalCursor.background #C839C5
terminalCursor.foreground #C839C5
titleBar.activeBackground #000
titleBar.activeForeground #C7C7C7
titleBar.inactiveBackground #000
titleBar.inactiveForeground #686868 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 #68FDFE —
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter #F08080 —
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method #6A76FB —
meta.block variable.other #F08080 —
support.other.variable, string.other.link #F08080 —
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other #FD6F6B —
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 #67F86F —
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 #FFFA72 —
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 #C7C7C7 —
entity.name.module.js, variable.import.parameter.js, variable.other.class.js #FD7CFC —
variable.language #FD7CFC italic
entity.name.method.js #6A76FB italic
meta.class-method.js entity.name.function.js, variable.function.constructor #6A76FB —
entity.other.attribute-name #FD7CFC —
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name #FFFA72 italic
entity.other.attribute-name.class #FFFA72 —
source.sass keyword.control #6A76FB —
constant.character.escape #68FDFE —
*url*, *link*, *uri* — underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js #6A76FB italic
source.js constant.other.object.key.js string.unquoted.label.js #FD6F6B italic
source.json meta.structure.dictionary.json support.type.property-name.json #FD7CFC —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json #FFFA72 —
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 #FD6F6B —
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 #FD6F6B —
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 #F08080 —
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 #6A76FB —
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 #F08080 —
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 #FD7CFC —
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 #67F86F —
text.html.markdown, punctuation.definition.list_item.markdown #fff —
text.html.markdown markup.inline.raw.markdown #FD7CFC —
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown #686868 —
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown #67F86F —
markup.italic #F08080 italic
markup.bold, markup.bold string #F08080 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 #F08080 bold
markup.underline #FD6F6B underline
markup.quote punctuation.definition.blockquote.markdown #C7C7C7 —
string.other.link.title.markdown #6A76FB —
string.other.link.description.title.markdown #FD7CFC —
constant.other.reference.link.markdown #FFFA72 —
markup.raw.block.fenced.markdown #00000050 —
punctuation.definition.fenced.markdown #00000050 —
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end #fff —
variable.language.fenced.markdown #C7C7C7 —
meta.separator #C7C7C7 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
31
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
$
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 } ! ` ;
}
Hyper.is Theme | Coding Theme