Skip to main content
IDL for VSCode | Coding Theme
Home Theme VS Code IDL for VSCode IDL syntax highlighting, code snippets, running IDL programs, notebooks, and much more!
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 #FAFAFA activityBar.foreground #121417 activityBarBadge.background #526FFF activityBarBadge.foreground #FFFFFF badge.background #526FFF badge.foreground #FFFFFF tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle support.function.idl-procedure-method #007F7F bold entity.name.function.idl-method #00C0C0 bold support.function.idl-procedure, entity.name.procedure.idl #00007F bold support.function.idl-function, entity.name.function.idl #0000FF bold parameter.definition.keyword.idl, parameter.usage.keyword.idl
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
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}!`;
}
IDL for VSCode — %themes.retro%
button.background
#5871EF
button.foreground #FFFFFF
button.hoverBackground #6B83ED
diffEditor.insertedTextBackground #00809B33
dropdown.background #FFFFFF
dropdown.border #DBDBDC
editor.background #FAFAFA
editor.lineHighlightBackground #F2F2F2
editor.selectionBackground #E5E5E6
editorBracketHighlight.foreground1 #395B64
editorBracketHighlight.foreground2 #774360
editorBracketHighlight.foreground3 #D49B54
editorBracketHighlight.foreground4 #16003B
editorBracketHighlight.foreground5 #270082
editorBracketHighlight.foreground6 #B25068
editorCursor.foreground #526FFF
editorGroup.background #EAEAEB
editorGroup.border #DBDBDC
editorGroupHeader.tabsBackground #EAEAEB
editorHoverWidget.background #EAEAEB
editorHoverWidget.border #DBDBDC
editorIndentGuide.background #D3D4D5
editorLineNumber.foreground #9D9D9F
editorSuggestWidget.background #EAEAEB
editorSuggestWidget.border #DBDBDC
editorSuggestWidget.selectedBackground #FFFFFF
editorWhitespace.foreground #D3D4D5
editorWidget.background #EAEAEB
extensionButton.prominentBackground #3BBA54
extensionButton.prominentHoverBackground #4CC263
focusBorder #526FFF
input.background #FFFFFF
input.border #DBDBDC
list.activeSelectionBackground #DBDBDC
list.activeSelectionForeground #232324
list.focusBackground #DBDBDC
list.highlightForeground #121417
list.hoverBackground #DBDBDC66
list.inactiveSelectionBackground #DBDBDC
list.inactiveSelectionForeground #232324
notification.background #333333
peekView.border #526FFF
peekViewEditor.background #FFFFFF
peekViewResult.background #EAEAEB
peekViewResult.selectionBackground #DBDBDC
peekViewTitle.background #FFFFFF
pickerGroup.border #526FFF
scrollbarSlider.activeBackground #747D9180
scrollbarSlider.background #4E566680
scrollbarSlider.hoverBackground #5A637580
sideBar.background #EAEAEB
sideBarSectionHeader.background #FAFAFA
statusBar.background #EAEAEB
statusBar.debuggingBackground #526FFF
statusBar.debuggingForeground #FFFFFF
statusBar.foreground #424243
statusBar.noFolderBackground #EAEAEB
statusBarItem.hoverBackground #DBDBDC
tab.activeBackground #FAFAFA
tab.border #DBDBDC
tab.inactiveBackground #EAEAEB
titleBar.activeBackground #EAEAEB
titleBar.activeForeground #424243
titleBar.inactiveBackground #EAEAEB
titleBar.inactiveForeground #424243 constant.language.idl #333333 bold
keyword.control.idl #7f0000 bold
comment.line.semicolon.idl #408080 —
string.quoted.single.idl, string.quoted.double.idl #FF0000 —
constant.numeric.idl #957d47 bold
entity.name.tag.idl #333333 italic
entity.name.type.idl #333333 bold
variable.other.readwrite.ts.idl #000000 —
storage.type.idl #333333 bold
string.template.idl #FF0000 —
comment markup.link #408080 —
entity.other.inherited-class #50A14F —
keyword.other.special-method #4078F2 —
keyword.other.unit #957d47 —
storage.type.annotation, storage.type.primitive #A626A4 —
storage.modifier.package, storage.modifier.import #383A42 —
constant.variable #957d47 —
constant.character.escape #0184BC —
constant.other.color #0184BC —
constant.other.symbol #0184BC —
variable.interpolation #CA1243 —
variable.parameter #383A42 —
string.regexp source.ruby.embedded #C18401 —
string.other.link #E45649 —
punctuation.definition.comment #408080 —
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array #383A42 —
punctuation.definition.heading, punctuation.definition.identity #4078F2 —
punctuation.definition.bold #C18401 bold
punctuation.definition.italic #A626A4 italic
punctuation.section.embedded #CA1243 —
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class #383A42 —
support.function.any-method #4078F2 —
entity.name.function #4078F2 —
entity.name.class, entity.name.type.class #C18401 —
entity.name.section #4078F2 —
entity.other.attribute-name #000000 italic
entity.other.attribute-name.id #4078F2 —
meta.method-call, meta.method #383A42 —
meta.definition.variable #E45649 —
invalid.deprecated #000000 —
markup.italic #A626A4 italic
markup.heading punctuation.definition.heading #4078F2 —
source.c keyword.operator #A626A4 —
source.cpp keyword.operator #A626A4 —
source.cs keyword.operator #A626A4 —
source.css property-name, source.css property-value #696C77 —
source.css property-name.support, source.css property-value.support #383A42 —
source.gfm link entity #4078F2 —
source.go storage.type.string #A626A4 —
source.ini keyword.other.definition.ini #E45649 —
source.java storage.modifier.import #C18401 —
source.java storage.type #C18401 —
source.java keyword.operator.instanceof #A626A4 —
source.java-properties meta.key-pair #E45649 —
source.java-properties meta.key-pair > punctuation #383A42 —
source.js keyword.operator #0184BC —
source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void #A626A4 —
source.json meta.structure.dictionary.json > string.quoted.json #E45649 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #E45649 —
source.json meta.structure.dictionary.json > value.json > string.quoted.json, source.json meta.structure.array.json > value.json > string.quoted.json, source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation, source.json meta.structure.array.json > value.json > string.quoted.json > punctuation #50A14F —
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json #0184BC —
source.ruby constant.other.symbol > punctuation inherit —
source.python keyword.operator.logical.python #A626A4 —
source.python variable.parameter #957d47 —
meta.attribute.rust #606135 —
storage.modifier.lifetime.rust, entity.name.lifetime.rust #11C4C6 —
keyword.unsafe.rust #882328 —
support.type.property-name #383A42 —
string.quoted.double punctuation #50A14F —
support.type.property-name.json #E45649 —
support.type.property-name.json punctuation #E45649 —
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx #0184BC —
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator #0184BC —
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx #383A42 —
support.variable.dom.js, support.variable.dom.ts #E45649 —
support.variable.property.dom.js, support.variable.property.dom.ts #E45649 —
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition #CA1243 —
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters #383A42 —
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block #383A42 —
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma #383A42 —
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx #E45649 —
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx #E45649 —
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx #A626A4 —
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx #A626A4 —
meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx #383A42 —
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor #383A42 —
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx #383A42 —
meta.array-binding-pattern-variable.js variable.other.readwrite.js, meta.array-binding-pattern-variable.ts variable.other.readwrite.ts, meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx #957d47 —
source.js support.variable, source.ts support.variable, source.tsx support.variable #E45649 —
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx #957d47 —
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx #A626A4 —
source.ts keyword.operator, source.tsx keyword.operator #0184BC —
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #383A42 —
constant.language.import-export-all.js, constant.language.import-export-all.ts #E45649 —
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx #0184BC —
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx #383A42 —
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx #E45649 —
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx #957d47 —
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts #E45649 —
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor #50A14F —
source.js meta.import-equals.external.js keyword.operator, source.jsx meta.import-equals.external.jsx keyword.operator, source.ts meta.import-equals.external.ts keyword.operator, source.tsx meta.import-equals.external.tsx keyword.operator #383A42 —
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx #50A14F —
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx #383A42 —
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable #383A42 —
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type #383A42 —
source.js meta.tag.js keyword.operator, source.jsx meta.tag.jsx keyword.operator, source.ts meta.tag.ts keyword.operator, source.tsx meta.tag.tsx keyword.operator #383A42 —
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded #383A42 —
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable #C18401 —
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx #E45649 —
constant.language.json #0184BC —
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx #957d47 —
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx #0184BC —
meta.template.expression.js string.quoted punctuation.definition, meta.template.expression.jsx string.quoted punctuation.definition, meta.template.expression.ts string.quoted punctuation.definition, meta.template.expression.tsx string.quoted punctuation.definition #50A14F —
meta.template.expression.js string.template punctuation.definition.string.template, meta.template.expression.jsx string.template punctuation.definition.string.template, meta.template.expression.ts string.template punctuation.definition.string.template, meta.template.expression.tsx string.template punctuation.definition.string.template #50A14F —
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx #A626A4 —
source.python constant.other #383A42 —
source.python constant #957d47 —
constant.character.format.placeholder.other.python storage #957d47 —
support.variable.magic.python #E45649 —
meta.function.parameters.python #957d47 —
punctuation.separator.annotation.python #383A42 —
punctuation.separator.parameters.python #383A42 —
entity.name.variable.field.cs #E45649 —
source.cs keyword.operator #383A42 —
variable.other.readwrite.cs #383A42 —
variable.other.object.cs #383A42 —
variable.other.object.property.cs #383A42 —
entity.name.variable.property.cs #4078F2 —
keyword.other.unsafe.rust #E45649 —
markup.raw.block.markdown #383A42 —
punctuation.definition.variable.shell #E45649 —
support.constant.property-value.css #383A42 —
punctuation.definition.constant.css #957d47 —
punctuation.separator.key-value.scss #E45649 —
punctuation.definition.constant.scss #957d47 —
meta.property-list.scss punctuation.separator.key-value.scss #383A42 —
storage.type.primitive.array.java #C18401 —
entity.name.section.markdown #E45649 —
punctuation.definition.heading.markdown #E45649 —
markup.heading.setext #383A42 —
punctuation.definition.bold.markdown #957d47 —
markup.inline.raw.markdown #50A14F —
beginning.punctuation.definition.list.markdown #E45649 —
markup.quote.markdown #408080 italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #383A42 —
punctuation.definition.metadata.markdown #A626A4 —
markup.underline.link.markdown, markup.underline.link.image.markdown #A626A4 —
string.other.link.title.markdown, string.other.link.description.markdown #4078F2 —
punctuation.separator.variable.ruby #E45649 —
variable.other.constant.ruby #957d47 —
keyword.operator.other.ruby #50A14F —
punctuation.definition.variable.php #E45649 —
Open Editors fetchUser.ts index.ts README.md My-Project src components fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline fetchUser.ts
index.ts
README.md
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*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Light+
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}!`;
}