Skip to main content
codeorzo | 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.activeBackground #ffbb00 activityBar.activeBorder #ffc400 activityBar.background #0f0e13c7 activityBar.foreground #000000 activityBar.inactiveForeground #fff activityBarBadge.background #00ffe1 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, string.quoted.docstring.multi.python, string.quoted.docstring.multi.python punctuation.definition.string.begin.python, string.quoted.docstring.multi.python punctuation.definition.string.end.python #848BBD italic string.quoted, string.template, punctuation.definition.string #F2FF01 — string.template meta.embedded.line #B6B1B1 — variable, entity.name.variable #FF7EDB —
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
activityBarBadge.foreground #16131b
badge.background #050405
badge.foreground #ffffff
breadcrumbPicker.background #17181d
button.background #ffb006
button.foreground #020202
debugToolBar.background #191919
diffEditor.insertedTextBackground #0beb9935
diffEditor.removedTextBackground #fe445035
dropdown.background #232530
dropdown.listBackground #2a2139
editor.background #0f0e13
editor.findMatchBackground #d18616bb
editor.findMatchHighlightBackground #ff9c07
editor.findRangeHighlightBackground #34294f1a
editor.hoverHighlightBackground #3d3d3db4
editor.lineHighlightBackground #1a1b1b
editor.selectionBackground #ffffff20
editor.selectionHighlightBackground #201f1dbd
editor.wordHighlightBackground #1a191b88
editor.wordHighlightStrongBackground #0d0c1188
editorBracketMatch.background #e0e0e066
editorBracketMatch.border #13151b
editorCodeLens.foreground #e61616
editorCursor.background #141217
editorCursor.foreground #e0ff57
editorError.foreground #fe4450
editorGroup.border #ffffff
editorGroup.dropBackground #4954954a
editorGroupHeader.tabsBackground #171619
editorGutter.addedBackground #206d4bd6
editorGutter.deletedBackground #fa2e46a4
editorGutter.modifiedBackground #b893ce8f
editorIndentGuide.activeBackground #a148ab80
editorIndentGuide.background #444251
editorLineNumber.activeForeground #ffffffcc
editorLineNumber.foreground #ffffff73
editorOverviewRuler.addedForeground #09f7a099
editorOverviewRuler.border #34294fb3
editorOverviewRuler.deletedForeground #fe445099
editorOverviewRuler.errorForeground #fe4450dd
editorOverviewRuler.findMatchForeground #d1861699
editorOverviewRuler.modifiedForeground #b893ce99
editorOverviewRuler.warningForeground #72f1b8cc
editorRuler.foreground #a148ab80
editorSuggestWidget.highlightForeground #f97e72
editorSuggestWidget.selectedBackground #ffffff36
editorWarning.foreground #72f1b8cc
editorWidget.background #171520dc
editorWidget.border #ffffff22
editorWidget.resizeBorder #ffffff44
errorForeground #fe4450
extensionButton.prominentBackground #f97e72
extensionButton.prominentHoverBackground #ff7edb
focusBorder #1f212b
foreground #ffffff
gitDecoration.addedResourceForeground #72f1b8cc
gitDecoration.deletedResourceForeground #fe4450
gitDecoration.ignoredResourceForeground #ffffff59
gitDecoration.modifiedResourceForeground #b893ceee
gitDecoration.untrackedResourceForeground #72f1b8
icon.foreground #ffffff
input.background #1a1a1b
inputOption.activeBorder #ff7edb99
inputValidation.errorBackground #fe445080
inputValidation.errorBorder #fe445000
list.activeSelectionBackground #ffffff20
list.activeSelectionForeground #ffffff
list.dropBackground #34294f66
list.errorForeground #fe4450e6
list.focusBackground #ffffff20
list.focusForeground #ffffff
list.highlightForeground #7f6e6c
list.hoverBackground #37294d99
list.hoverForeground #ffffff
list.inactiveFocusBackground #2a213999
list.inactiveSelectionBackground #ffffff20
list.inactiveSelectionForeground #ffffff
list.warningForeground #72f1b8bb
menu.background #161319
minimapGutter.addedBackground #09f7a099
minimapGutter.deletedBackground #fe4450
minimapGutter.modifiedBackground #b893ce
notifications.background #1919173e
notifications.foreground #fff
panelTitle.activeBorder #f9e972
peekView.border #171719
peekViewEditor.background #232530
peekViewEditor.matchHighlightBackground #d18616bb
peekViewResult.background #232530
peekViewResult.matchHighlightBackground #d1861655
peekViewResult.selectionBackground #2a213980
peekViewTitle.background #232530
pickerGroup.foreground #00fff7ea
progressBar.background #f97e72
scrollbar.shadow #2a2139
scrollbarSlider.activeBackground #9d8bca20
scrollbarSlider.background #9d8bca30
scrollbarSlider.hoverBackground #9d8bca50
selection.background #ffffff20
sideBar.background #0f0e13
sideBar.border #23544f2a
sideBar.dropBackground #34294f4c
sideBar.foreground #ffffff99
sideBarSectionHeader.background #181620
sideBarSectionHeader.foreground #ffffff
statusBar.background #211e23
statusBar.debuggingBackground #f2ff00
statusBar.debuggingForeground #08080f
statusBar.foreground #ffffffd9
statusBar.noFolderBackground #241b2f
statusBarItem.prominentBackground #2a2139
statusBarItem.prominentHoverBackground #34294f
symbolIcon.textForeground #ff0000
tab.activeBorder #1b1a1b
tab.activeBorderTop #ffc400
tab.border #241b2f00
tab.hoverBackground #312f2f8d
tab.inactiveBackground #151416
terminal.ansiBlue #03edf9
terminal.ansiBrightBlue #03edf9
terminal.ansiBrightCyan #03edf9
terminal.ansiBrightGreen #72f1b8
terminal.ansiBrightMagenta #ff7edb
terminal.ansiBrightRed #fe4450
terminal.ansiBrightYellow #2bff00
terminal.ansiCyan #03edf9
terminal.ansiGreen #72f1b8
terminal.ansiMagenta #ff7edb
terminal.ansiRed #fe4450
terminal.ansiYellow #f97e72
terminal.foreground #2bff00
terminal.selectionBackground #00ff3339
terminal.tab.activeBorder #ff9100
terminalCursor.background #901919
terminalCursor.foreground #03f903
textLink.activeForeground #ffffff
textLink.foreground #fdff6e
titleBar.activeBackground #1e1d1e
titleBar.inactiveBackground #241b2f
toolbar.hoverBackground #ffae00a8
walkThrough.embeddedEditorBackground #232530
welcomePage.progress.background #1a1a1b
welcomePage.progress.foreground #fdff6e
welcomePage.tileBackground #171520dc
welcomePage.tileHoverBackground #1c1927dc
welcomePage.tileShadow. #3a3b3b
widget.shadow #3a3b3b variable.language #FE4450 bold
variable.parameter — italic
storage.type, storage.modifier #FEDE5D —
constant.language #F97E72 —
constant.character.escape #36F9F6 —
punctuation.definition.tag #36F9F6 —
entity.other.attribute-name #00B3FF —
entity.other.attribute-name.html #FEDE5D italic
entity.name.type, meta.attribute.class.html #FE4450 —
entity.other.inherited-class #DD5500 —
entity.name.function, variable.function #36F9F6 —
keyword.control.export.js, keyword.control.import.js #72F1B8 —
constant.numeric.decimal.js #2EE2FA —
keyword.control #00FFF7 bold
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 #DD5500 —
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 #DD5500 —
string.other.link.description #F97E72 —
meta.function-call.generic.python #36F9F6 —
variable.parameter.function-call.python #72F1B8 —
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 #FF7EDB —
source.go meta.function-call.go #36F9F6 —
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go #07F3FF —
source.go storage.type, source.go keyword.struct.go, source.go keyword.interface.go #72F1B8 —
source.go constant.language.go, source.go constant.other.placeholder.go, source.go variable #2EE2FA —
markup.underline.link.markdown, markup.inline.raw.string.markdown #72F1B8 italic
string.other.link.title.markdown #00AAFF —
markup.heading.markdown, entity.name.section.markdown #FF7EDB bold
markup.italic.markdown #2EE2FA italic
markup.bold.markdown #2EE2FA bold
punctuation.definition.quote.begin.markdown, markup.quote.markdown #72F1B8 —
source.dart, source.python, source.scala #B9E778 —
string.interpolated.single.dart #F97E72 —
variable.parameter.dart #72F1B8 —
constant.numeric.dart #2EE2FA —
variable.parameter.scala #2EE2FA —
meta.template.expression.scala #72F1B8 —
token.error-token #F44747 —
token.debug-token #B267E6 —
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 } !` ;
}