Skip to main content
Venus Theme | Coding Theme
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 #0b0d16ff activityBar.border #0D1F2C activityBar.dropBackground #0b0d16ff activityBar.foreground #ffffffCC activityBarBadge.background #fe7297 activityBarBadge.foreground #070E13 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment #5b628d italic string.quoted, string.template, punctuation.definition.string #7bf04c — string.template meta.embedded.line #b6b1b1 — variable, entity.name.variable #f78e2d — variable.language
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
badge.background
#2a2139
badge.foreground #070E13
breadcrumbPicker.background #232530
button.background #2a2139
button.hoverBackground #070E13
debugToolBar.background #0b0d16ff
diffEditor.insertedTextBackground #0beb9916
diffEditor.removedTextBackground #fe445016
dropdown.background #070E13
dropdown.border #070E13
dropdown.listBackground #1d2328
editor.background #0b0d16ff
editor.findMatchBackground #fab72746
editor.findMatchHighlightBackground #fab72746
editor.findRangeHighlightBackground #34294f1a
editor.hoverHighlightBackground #0b0d16ff
editor.lineHighlightBackground #0b0d16ff
editor.rangeHighlightBackground #49549539
editor.selectionBackground #97185e21
editor.selectionHighlightBackground #ffffff1c
editor.wordHighlightBackground #34294f88
editor.wordHighlightStrongBackground #34294f88
editorBracketMatch.background #0b0d16ff
editorBracketMatch.border #495495
editorCodeLens.foreground #ffffff7c
editorCursor.background #0b0d16ff
editorCursor.foreground #ffffff
editorError.foreground #fe4450
editorGroup.border #495495
editorGroup.dropBackground #0D0F1A
editorGroupHeader.tabsBackground #0b0d16ff
editorGutter.addedBackground #206d4bd6
editorGutter.background #0b0d16ff
editorGutter.deletedBackground #fa2e46a4
editorGutter.modifiedBackground #0b0d16ff
editorIndentGuide.activeBackground #0b0d16ff
editorIndentGuide.background #49549539
editorLineNumber.activeForeground #75C3A8
editorLineNumber.foreground #EEC98B
editorOverviewRuler.addedForeground #09f7a099
editorOverviewRuler.border #0b0d16ff
editorOverviewRuler.deletedForeground #fe445099
editorOverviewRuler.errorForeground #fe4450dd
editorOverviewRuler.findMatchForeground #16d11f99
editorOverviewRuler.modifiedForeground #b893ce99
editorOverviewRuler.warningForeground #72f1b8cc
editorRuler.foreground #34294f33
editorSuggestWidget.highlightForeground #03f9af
editorSuggestWidget.selectedBackground #c41d5549
editorWarning.foreground #72f1b8cc
editorWidget.background #0b0d16ff
editorWidget.border #16222c
editorWidget.resizeBorder #16d11f99
errorForeground #fe4450
extensionButton.prominentBackground #1ba163
extensionButton.prominentHoverBackground #36f510a6
focusBorder #1f212b
foreground #ffffff
gitDecoration.addedResourceForeground #72f1b8cc
gitDecoration.deletedResourceForeground #fe4450
gitDecoration.ignoredResourceForeground #ffffff59
gitDecoration.modifiedResourceForeground #b893ceee
gitDecoration.untrackedResourceForeground #72f1b8
input.background #1d2328
input.border #1d2328
input.foreground #ffffff
inputOption.activeBorder #34393d
inputValidation.errorBackground #fe445080
inputValidation.errorBorder #fe445000
list.activeSelectionBackground #0E111C
list.activeSelectionForeground #88FC35
list.dropBackground #0b0d16ff
list.errorForeground #fe4450E6
list.focusBackground #1d2328
list.focusForeground #ffffff
list.highlightForeground #ffffff
list.hoverBackground #0E111C
list.hoverForeground #ffffff
list.inactiveFocusBackground #060b0e
list.inactiveSelectionBackground #0E111C
list.inactiveSelectionForeground #88FC35
list.warningForeground #fe4450E6
menu.background #0b0d16ff
minimapGutter.addedBackground #09f7a099
minimapGutter.deletedBackground #fe4450
minimapGutter.modifiedBackground #b893ce
panelTitle.activeBorder #fede5d
peekView.border #495495
peekViewEditor.background #232530
peekViewEditor.matchHighlightBackground #26d116bb
peekViewResult.background #232530
peekViewResult.matchHighlightBackground #D1861655
peekViewResult.selectionBackground #2a213980
peekViewTitle.background #232530
pickerGroup.foreground #ffffff
progressBar.background #f97e72
scrollbar.shadow #070E13
scrollbarSlider.activeBackground #9d8bca20
scrollbarSlider.background #9d8bca30
scrollbarSlider.hoverBackground #9d8bca50
selection.background #ffffff36
sideBar.background #0b0d16ff
sideBar.dropBackground #34294f4c
sideBar.foreground #ffffff99
sideBarSectionHeader.background #0b0d16ff
sideBarSectionHeader.foreground #ffffffca
statusBar.background #0b0d16ff
statusBar.debuggingBackground #ffffff
statusBar.debuggingForeground #08080f
statusBar.foreground #ffffff80
statusBar.noFolderBackground #0b0d16ff
statusBarItem.prominentBackground #0b0d16ff
statusBarItem.prominentHoverBackground #fede5d
tab.activeBorder #5dd42e
tab.border #0b0d16ff
tab.inactiveBackground #0D0F1A
terminal.ansiBlue #03edf9
terminal.ansiBrightBlue #03edf9
terminal.ansiBrightCyan #03edf9
terminal.ansiBrightGreen #72f1b8
terminal.ansiBrightMagenta #ff7edb
terminal.ansiBrightRed #fe4450
terminal.ansiBrightYellow #fede5d
terminal.ansiCyan #03edf9
terminal.ansiGreen #72f1b8
terminal.ansiMagenta #ff7edb
terminal.ansiRed #fe4450
terminal.ansiYellow #f97e72
terminal.foreground #ffffff
terminal.selectionBackground #0b0d16ff
terminalCursor.background #ffffff
terminalCursor.foreground #03edf9
textBlockQuote.background #1d2328
textBlockQuote.border #1d2328
textCodeBlock.background #1d2328
textLink.activeForeground #ffffff
textLink.foreground #3cffef
titleBar.activeBackground #0b0d16ff
titleBar.inactiveBackground #0b0d16ff
walkThrough.embeddedEditorBackground #232530
widget.shadow #2a2139 variable.parameter — italic
storage.type, storage.modifier #fede5d —
constant.language #f97e72 —
constant.character.escape #36f9f6 —
punctuation.definition.tag #36f9f6 —
entity.other.attribute-name #fede5d —
entity.other.attribute-name.html #fede5d italic
entity.name.type, meta.attribute.class.html #fe4450 —
entity.other.inherited-class #D50 —
entity.name.function, variable.function #36f9f6 —
keyword.control.export.js, keyword.control.import.js #72f1b8 —
keyword.operator.new, keyword.operator.expression, keyword.operator.logical #fede5d —
keyword.other.unit #f97e72 —
meta.object-literal.key, support.type.property-name #ff7edb —
punctuation.separator.key-value #b6b1b1 —
punctuation.section.embedded #fede5d —
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end #72f1b8 —
support.type.property-name.css, support.type.property-name.json #72f1b8 —
switch-block.expr.js #72f1b8 —
variable.other.constant.property.js, variable.other.property.js #2ee2fa —
constant.other.color #f97e72 —
support.constant.font-name #f97e72 —
entity.other.attribute-name.id #36f9f6 —
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class #D50 —
support.function.misc.css #fe4450 —
markup.heading, entity.name.section #ff7edb —
text.html, keyword.operator.assignment #ffffffee —
markup.quote #b6b1b1cc italic
beginning.punctuation.definition.list #ff7edb —
markup.underline.link #D50 —
string.other.link.description #f97e72 —
meta.function-call.generic.python #36f9f6 —
entity.name.variable.local.cs #ff7edb —
entity.name.variable.field.cs, entity.name.variable.property.cs #ff7edb —
constant.other.placeholder.c #72f1b8 italic
keyword.control.directive.include.c, keyword.control.directive.define.c #72f1b8 —
storage.modifier.c #fe4450 —
source.cpp keyword.operator #fede5d —
constant.other.placeholder.cpp #72f1b8 italic
keyword.control.directive.include.cpp, keyword.control.directive.define.cpp #72f1b8 —
storage.modifier.specifier.const.cpp #fe4450 —
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir #36f9f6 —
source.elixir entity.name.function #72f1b8 —
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir #36f9f6 —
source.elixir punctuation.definition.string #72f1b8 —
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir #72f1b8 —
source.elixir .punctuation.binary.elixir #ff7edb italic
entity.global.clojure #36f9f6 bold
storage.control.clojure #36f9f6 italic
meta.metadata.simple.clojure, meta.metadata.map.clojure #fe4450 italic
meta.quoted-expression.clojure — italic
meta.symbol.clojure #ff7edbff —
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 } !` ;
}