Skip to main content
Home Theme VS Code UGLY KALEID INSPIRED THEME WHY IS THIS UPPERCASE ugly theme with a loud display name
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 #ff2cff activityBar.background #001b38 activityBar.dropBorder #ff2cff activityBar.foreground #004cff activityBar.inactiveForeground #00a2ff66 activityBarBadge.background #2979ff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle variable.parameter.function #f87000 — variable.parameter #0077ff — comment, punctuation.definition.comment #bb8432bf italic none #ffffff — keyword.operator
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
UGLY KALEID INSPIRED THEME WHY IS THIS UPPERCASE — ugly-kal
activityBarBadge.foreground
#00c8ff
badge.background #282828
badge.foreground #01ff05
button.background #00025a
button.foreground #2580ff
dropdown.background #00004f
dropdown.border #fb00ff
dropdown.foreground #007bff
editor.background #000221
editor.findMatchBackground #ffffff
editor.findMatchHighlightBackground #0023eaca
editor.foreground #005eff
editor.hoverHighlightBackground #00346840
editor.inactiveSelectionBackground #02194c80
editor.lineHighlightBackground #0060f16e
editor.selectionBackground #136800
editor.selectionHighlightBackground #ffe18f
editorCursor.foreground #00b3ff
editorGroup.border #e600ff
editorGroupHeader.tabsBackground #001d3d
editorGroupHeader.tabsBorder #ff00bb
editorGutter.addedBackground #66ff00
editorGutter.background #000000
editorGutter.commentRangeForeground #ffffff
editorGutter.deletedBackground #ff000d
editorGutter.foldingControlForeground #f70000
editorGutter.modifiedBackground #00c8ff
editorHint.foreground #ffffff
editorHoverWidget.background #080308
editorIndentGuide.background #00325b
editorSuggestWidget.highlightForeground #2979ff
editorWhitespace.foreground #4d0042
editorWidget.background #070054
gitDecoration.addedResourceForeground #00ff2f
gitDecoration.conflictingResourceForeground #ff0008
gitDecoration.deletedResourceForeground #ff2600
gitDecoration.ignoredResourceForeground #3d003ceb
gitDecoration.modifiedResourceForeground #fffb00
gitDecoration.renamedResourceForeground #00ff2f
gitDecoration.stageDeletedResourceForeground #ff2600
gitDecoration.stageModifiedResourceForeground #fffb00
gitDecoration.submoduleResourceForeground #0084ff
gitDecoration.untrackedResourceForeground #00ff2f
input.background #330032
list.activeSelectionBackground #000561
list.activeSelectionForeground #2979ff
list.highlightForeground #ff2cff
list.hoverBackground #000000
list.inactiveSelectionBackground #0000b048
list.inactiveSelectionForeground #2979ff
menu.foreground #630062
menu.selectionBackground #280032
menu.selectionForeground #00a6ff
menu.separatorBackground #fff2f2
menubar.selectionBackground #47005a5d
menubar.selectionForeground #0095ff
panel.background #000126
panel.border #bb00ffdb
panel.dropBorder #0088ff
panelTitle.activeForeground #00a2ff
panelTitle.inactiveForeground #00a2ff99
pickerGroup.foreground #ff2cff
progressBar.background #001436
scrollbarSlider.activeBackground #005eff50
scrollbarSlider.background #9d00b5b3
scrollbarSlider.hoverBackground #dd00ffb3
sideBar.background #05002b
sideBar.foreground #9000bc
sideBarSectionHeader.background #000000
statusBar.background #16202b
statusBar.foreground #0099ff
tab.activeBackground #000924
tab.activeBorder #ff2cff
tab.activeForeground #860098
tab.activeModifiedBorder #00aaff
tab.border #162228
tab.hoverBackground #0f5100
tab.hoverForeground #ffffff
tab.inactiveBackground #00053e93
tab.inactiveForeground #a5009280
tab.inactiveModifiedBorder #00aaff80
tab.unfocusedActiveBackground #11005f
terminal.background #000126
terminal.border #e100fffe
terminal.foreground #0055ff
terminal.selectionBackground #2a5212
textLink.foreground #2979ff
titleBar.activeBackground #2300a2
titleBar.activeForeground #ff2cff #3cff00
meta.function-call #00ccff —
entity.name.function, meta.require, support.function.any-method #FFEB00 —
support.class, entity.name.class, entity.name.type.class #00ffd5 —
keyword.other.special-method #00FFAE —
string, constant.other.symbol, entity.other.inherited-class #64FE2E —
entity.other.attribute-name #B45EFF —
entity.other.attribute-name.id, punctuation.definition.entity #FF2EB9 —
markup.heading punctuation.definition.heading, entity.name.section #FE0099
keyword.other.unit #FFCC00 —
markup.bold, punctuation.definition.bold #FFCC00 —
markup.italic, punctuation.definition.italic #DF5CFF —
markup.raw.inline #4DFF00 —
string.other.link, punctuation.definition.string.end.markdown #FF8000 —
constant.other.color #FFCC00 —
constant.character.escape #00e1ff —
punctuation.section.embedded, variable.interpolation #ffffff —
invalid.deprecated #000000 —
invalid.unimplemented #000000 —
source.json meta.structure.dictionary.json string.quoted.double.json #bf00ff —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json #00CCFF —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json string.quoted.double.json #FF8000 —
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json #4DFF00 —
support.type.property-name.json #A349F9 —
support.type.property-name.json punctuation #A349F9 —
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade #DF5CFF —
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade #DF5CFF —
meta.function-call variable.function #FFEB00 —
sublimelinter.mark.error #c90000 —
sublimelinter.gutter-mark #FFFFFF —
sublimelinter.mark.warning #DDB700 —
flake8lint.mark.error #DA2000 —
flake8lint.mark.gutter #FFFFFF —
flake8lint.mark.warning #EDBA00 —
flake8lint.mark.critical #981600 —
token.error-token #F44747 —
token.debug-token #B267E6 —
meta.embedded.assembly #95DCF1 —
entity.name.function #00FF40 —
entity.name.variable #f701ff —
support.variable #cf7c00 italic bold
support.type.property-name #00ff0d italic 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...
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 }!` ;
}
UGLY KALEID INSPIRED THEME WHY IS THIS UPPERCASE | Coding Theme