Skip to main content
Home Theme VS Code Hypex Theme 💜 Purple Dark theme for Visual Studio Code made by Leon Arantes.
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.activeBackground #ab93f910 activityBar.activeBorder #7b79ff activityBar.background #2F2F4E activityBar.border #d4d0ff10 activityBar.foreground #F8F8F2 activityBar.inactiveForeground #6272A4 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle emphasis — italic strong — bold header #BD93F9 — source #F8F8F2 — meta.diff, meta.diff.header #6272A4 —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Hypex Theme — Hypex Theme
activityBarBadge.background
#7b79ff
activityBarBadge.foreground #F8F8F2
badge.background #7b79ff
badge.foreground #F8F8F2
button.background #7b79ff
button.foreground #F8F8F2
button.hoverBackground #7b79ff83
contrastActiveBorder #00000000
contrastBorder #00000000
debugExceptionWidget.background #2e2e4d
debugExceptionWidget.border #A599E9
debugToolBar.background #2e2e4d
descriptionForeground #A599E9
diffEditor.insertedTextBackground #00FF000E
diffEditor.insertedTextBorder #00FF009A
diffEditor.removedTextBackground #FF000D1A
diffEditor.removedTextBorder #FF000D81
dropdown.background #2F2F4E
dropdown.border #d4d0ff10
dropdown.foreground #FFFFFF
editor.background #2F2F4E
editor.findMatchBackground #8f8f8f48
editor.findMatchHighlightBackground #867dff36
editor.findRangeHighlightBackground #867dff36
editor.foreground #FFFFFF
editor.hoverHighlightBackground #c5c0fa10
editor.inactiveSelectionBackground #c5c0fa1f
editor.lineHighlightBackground #d4d0ff13
editor.lineHighlightBorder #dbdbdf00
editor.rangeHighlightBackground #00000000
editor.selectionBackground #c5c0fa57
editor.selectionHighlightBackground #96969938
editor.wordHighlightBackground #ffffff17
editor.wordHighlightStrongBackground #FFFFFF0D
editorBracketMatch.background #c2b8ce5e
editorBracketMatch.border #c2b8ce5e
editorCodeLens.foreground #e7e7e7d3
editorCursor.foreground #f0efe9dc
editorError.border #00000000
editorError.foreground #EC3A37F5
editorGroup.border #A599E91C
editorGroup.dropBackground #a599e910
editorGroupHeader.noTabsBackground #f7f6fa
editorGroupHeader.tabsBackground #00000002
editorGroupHeader.tabsBorder #00000000
editorGutter.addedBackground #35AD68
editorGutter.background #00000000
editorGutter.deletedBackground #EC3A37F5
editorGutter.modifiedBackground #AD70FC46
editorHoverWidget.background #212136
editorHoverWidget.border #212136
editorIndentGuide.activeBackground #c2b8ce0a
editorIndentGuide.background #c2b8ce0a
editorLineNumber.activeForeground #ffffff80
editorLineNumber.foreground #d4d0ff36
editorLink.activeForeground #2bc4ff
editorMarkerNavigation.background #24243b
editorMarkerNavigationError.background #EC3A37F5
editorMarkerNavigationWarning.background #FAD000
editorOverviewRuler.addedForeground #50FA7B80
editorOverviewRuler.border #d4d0ff2c
editorOverviewRuler.commonContentForeground #78e681
editorOverviewRuler.currentContentForeground #EE3A4355
editorOverviewRuler.deletedForeground #FF555580
editorOverviewRuler.errorForeground #ff53539f
editorOverviewRuler.findMatchForeground #525053
editorOverviewRuler.incomingContentForeground #3AD90055
editorOverviewRuler.infoForeground #8BE9FD80
editorOverviewRuler.modifiedForeground #8BE9FD80
editorOverviewRuler.rangeHighlightForeground #363537
editorOverviewRuler.selectionHighlightForeground #fff56c
editorOverviewRuler.warningForeground #fdd464e7
editorOverviewRuler.wordHighlightForeground #8BE9FD
editorOverviewRuler.wordHighlightStrongForeground #50FA7B
editorRuler.foreground #3416ddf1
editorSuggestWidget.background #212136
editorSuggestWidget.border #212136
editorSuggestWidget.foreground #A599E9
editorSuggestWidget.highlightForeground #7b79ff
editorSuggestWidget.selectedBackground #2F2F4E
editorWarning.border #FFFFFF00
editorWarning.foreground #7b79ff
editorWhitespace.foreground #FFFFFF1A
editorWidget.background #2F2F4E
editorWidget.border #2F2F4E
errorForeground #EC3A37F5
extensionButton.prominentBackground #7b79ff
extensionButton.prominentForeground #FFFFFF
extensionButton.prominentHoverBackground #9eff4e
focusBorder #7b79ff0a
foreground #ffffffad
gitDecoration.conflictingResourceForeground #FFB86C
gitDecoration.deletedResourceForeground #FF5555
gitDecoration.ignoredResourceForeground #6272A4
gitDecoration.modifiedResourceForeground #8BE9FD
gitDecoration.untrackedResourceForeground #50FA7B
input.background #323247
input.border #40405c
input.foreground #b8b7ff
input.placeholderForeground #A599E9
inputOption.activeBorder #A599E9
inputValidation.errorBackground #2D2B55
inputValidation.errorBorder #7b79ff
inputValidation.infoBackground #d9d7ff
inputValidation.infoBorder #2D2B55
inputValidation.warningBackground #2D2B55
inputValidation.warningBorder #7b79ff
list.activeSelectionBackground #f4f3ff1f
list.activeSelectionForeground #b3a8ff
list.dropBackground #a599e925
list.focusBackground #f4f3ff1f
list.focusForeground #b3a8ff
list.highlightForeground #7b79ff
list.hoverBackground #f4f3ff13
list.hoverForeground #fafafa
list.inactiveSelectionBackground #00000000
list.inactiveSelectionForeground #ddd9f68c
merge.border #FFFFFF00
merge.commonContentBackground #FFFFFF00
merge.commonHeaderBackground #FFFFFF00
merge.currentContentBackground #FFFFFF00
merge.currentHeaderBackground #FFFFFF00
merge.incomingContentBackground #FFFFFF00
merge.incomingHeaderBackground #FFFFFF00
notificationCenter.border #212136
notificationCenterHeader.background #7b79ff
notificationCenterHeader.foreground #FFFFFF
notificationLink.foreground #2bc4ff
notifications.background #212136
notifications.border #252346
notifications.foreground #CEC5FF
notificationToast.border #212136
panel.background #2e2e4d
panel.border #7b79ff
panelTitle.activeBorder #7b79ff
panelTitle.activeForeground #7b79ff
panelTitle.inactiveForeground #fafafac9
peekView.border #7b79ff
peekViewEditor.background #2e2e4d
peekViewEditor.matchHighlightBackground #19354900
peekViewEditorGutter.background #191935
peekViewResult.background #2e2e4d
peekViewResult.fileForeground #AAA
peekViewResult.lineForeground #FFFFFF
peekViewResult.matchHighlightBackground #2D2B55
peekViewResult.selectionBackground #2D2B55
peekViewResult.selectionForeground #FFFFFF
peekViewTitle.background #1F1F41
peekViewTitleDescription.foreground #AAA
peekViewTitleLabel.foreground #7b79ff
pickerGroup.border #2e2e4d
pickerGroup.foreground #A599E9
progressBar.background #7b79ff
scrollbar.shadow #00000098
scrollbarSlider.activeBackground #d4d0ff3a
scrollbarSlider.background #d4d0ff2f
scrollbarSlider.hoverBackground #d4d0ff3a
selection.background #B362FF
sideBar.background #2F2F4E
sideBar.border #d4d0ff10
sideBar.foreground #F8F8F2
sideBarSectionHeader.background #2c2c49
sideBarSectionHeader.border #d4d0ff10
sideBarSectionHeader.foreground #ffffff
sideBarTitle.foreground #7b79ff
statusBar.background #28283f
statusBar.border #7b79ff36
statusBar.debuggingBackground #28283f
statusBar.debuggingForeground #7b79ff
statusBar.foreground #7b79ff
statusBar.noFolderBackground #28283f
statusBar.noFolderForeground #a599e91f
statusBarItem.activeBackground #7b79ff36
statusBarItem.hoverBackground #2D2B55
statusBarItem.prominentBackground #2D2B55
statusBarItem.prominentHoverBackground #292849
tab.activeBackground #f4f3ff13
tab.activeBorder #7b79ff
tab.activeForeground #ffffff
tab.border #d4d0ff0a
tab.inactiveBackground #00000000
tab.inactiveForeground #ddd9f68c
terminal.ansiBlack #21222C
terminal.ansiBlue #BD93F9
terminal.ansiBrightBlack #6272A4
terminal.ansiBrightBlue #D6ACFF
terminal.ansiBrightCyan #A4FFFF
terminal.ansiBrightGreen #69FF94
terminal.ansiBrightMagenta #FF92DF
terminal.ansiBrightRed #FF6E6E
terminal.ansiBrightWhite #FFFFFF
terminal.ansiBrightYellow #FFFFA5
terminal.ansiCyan #8BE9FD
terminal.ansiGreen #50FA7B
terminal.ansiMagenta #FF79C6
terminal.ansiRed #FF5555
terminal.ansiWhite #F8F8F2
terminal.ansiYellow #F1FA8C
terminal.background #282A36
terminal.foreground #F8F8F2
terminalCursor.background #7b79ff
terminalCursor.foreground #7b79ff
textBlockQuote.background #28283f
textBlockQuote.border #6943FF
textCodeBlock.background #28283f
textLink.activeForeground #2bc4ff
textLink.foreground #2bc4ff
textPreformat.foreground #7b79ff
textSeparator.foreground #28283f
titleBar.activeBackground #28283f
titleBar.activeForeground #FFFFFF
titleBar.inactiveBackground #28283f
titleBar.inactiveForeground #A599E9
walkThrough.embeddedEditorBackground #28283f
welcomePage.buttonBackground #28283f
welcomePage.buttonHoverBackground #28283f
widget.shadow #00000026 invalid #FF5555 underline italic
invalid.deprecated #F8F8F2 underline italic
entity.name.filename #F1FA8C —
markup.underline — underline
markup.heading #BD93F9 bold
markup.italic #F1FA8C italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext #8BE9FD —
markup.inline.raw, markup.raw.restructuredtext #50FA7B —
markup.underline.link, markup.underline.link.image #8BE9FD —
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title #FF79C6 —
entity.name.directive.restructuredtext, markup.quote #F1FA8C italic
meta.separator.markdown #6272A4 —
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown #50FA7B —
punctuation.definition.constant.restructuredtext #BD93F9 —
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end #BD93F9 —
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end #F8F8F2 —
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end #F1FA8C —
entity.name.type.class, entity.name.class #8BE9FD normal
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special #BD93F9 italic
entity.other.inherited-class #8BE9FD italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment #7a83fb —
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class #FF79C6 —
comment.block.documentation entity.name.type #8BE9FD italic
comment.block.documentation entity.name.type punctuation.definition.bracket #8BE9FD —
comment.block.documentation variable #FFB86C italic
constant, variable.other.constant #BD93F9 —
constant.character.escape, constant.character.string.escape, constant.regexp #FF79C6 —
entity.other.attribute-name.parent-selector #FF79C6 —
entity.other.attribute-name #50FA7B italic
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix #50FA7B —
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter #FFB86C italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property #50FA7B italic
meta.decorator variable.other.object #50FA7B —
keyword, punctuation.definition.keyword #FF79C6 —
keyword.control.new, keyword.operator.new — bold
support.function.magic, support.variable, variable.other.predefined #BD93F9 regular
support.function, support.type.property-name — regular
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation #FF79C6 —
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor #F8F8F2 —
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile #FF79C6 —
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml #8BE9FD —
constant.other.date, constant.other.timestamp #FFB86C —
variable.other.alias.yaml #50FA7B italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def #FF79C6 regular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml #8BE9FD italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type #FFB86C —
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp #F1FA8C —
punctuation.definition.group.capture.regexp #FF79C6 —
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end #FF5555 —
punctuation.definition.character-class.regexp #8BE9FD —
punctuation.definition.group.regexp #FFB86C —
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp #FF5555 —
meta.assertion.look-ahead.regexp #50FA7B —
punctuation.definition.string.begin, punctuation.definition.string.end #E9F284 —
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end #8BE9FE —
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape #6272A4 —
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx #e1f5ff —
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable #FFB86C italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable #F8F8F2 normal
meta.selectionset.graphql variable #F1FA8C —
meta.selectionset.graphql meta.arguments variable #F8F8F2 —
entity.name.fragment.graphql, variable.fragment.graphql #8BE9FD —
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell #F8F8F2 —
source.shell variable.other #BD93F9 —
support.constant #BD93F9 normal
meta.scope.prerequisites.makefile #F1FA8C —
meta.attribute-selector.scss #F1FA8C —
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss #F8F8F2 —
meta.preprocessor.haskell #6272A4 —
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 } !` ;
}
Hypex Theme | Coding Theme