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 #333842 activityBar.foreground #D7DAE0 activityBarBadge.background #528BFF activityBarBadge.foreground #D7DAE0 badge.background #528BFF badge.foreground #D7DAE0 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle support.function.idl-procedure-method #A555C2 bold entity.name.function.idl-method #DE52D5 bold support.function.idl-procedure, entity.name.procedure.idl — bold support.function.idl-function, entity.name.function.idl — 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.new%
button.background
#4D78CC
button.foreground #FFFFFF
button.hoverBackground #6087CF
diffEditor.insertedTextBackground #00809B33
dropdown.background #353b45
dropdown.border #181A1F
editor.background #282C34
editor.lineHighlightBackground #2C313A
editor.selectionBackground #3E4451
editorCursor.foreground #528BFF
editorGroup.background #21252B
editorGroup.border #181A1F
editorGroupHeader.tabsBackground #21252B
editorHoverWidget.background #21252B
editorHoverWidget.border #181A1F
editorIndentGuide.background #3C4049
editorLineNumber.foreground #636D83
editorSuggestWidget.background #21252B
editorSuggestWidget.border #181A1F
editorSuggestWidget.selectedBackground #2C313A
editorWhitespace.foreground #3C4049
editorWidget.background #21252B
extensionButton.prominentBackground #2BA143
extensionButton.prominentHoverBackground #37AF4E
focusBorder #528BFF
input.background #1B1D23
input.border #181A1F
list.activeSelectionBackground #2C313A
list.activeSelectionForeground #D7DAE0
list.focusBackground #2C313A
list.highlightForeground #D7DAE0
list.hoverBackground #2C313A66
list.inactiveSelectionBackground #2C313A
list.inactiveSelectionForeground #D7DAE0
notification.background #21252B
peekView.border #528BFF
peekViewEditor.background #1B1D23
peekViewResult.background #21252B
peekViewResult.selectionBackground #2C313A
peekViewTitle.background #1B1D23
pickerGroup.border #528BFF
scrollbarSlider.activeBackground #747D9180
scrollbarSlider.background #4E566680
scrollbarSlider.hoverBackground #5A637580
sideBar.background #21252B
sideBarSectionHeader.background #333842
statusBar.background #21252B
statusBar.debuggingForeground #FFFFFF
statusBar.foreground #9DA5B4
statusBar.noFolderBackground #21252B
statusBarItem.hoverBackground #2C313A
tab.activeBackground #282C34
tab.border #181A1F
tab.inactiveBackground #21252B
titleBar.activeBackground #21252B
titleBar.activeForeground #9DA5B4
titleBar.inactiveBackground #21252B
titleBar.inactiveForeground #9DA5B4 constant.language.idl — bold
comment.line.semicolon.idl #408080 —
string.quoted.single.idl, string.quoted.double.idl #98C379 —
constant.numeric.idl — bold
entity.name.tag.idl — italic
entity.name.type.idl — bold
comment markup.link #5C6370 —
entity.other.inherited-class #98C379 —
keyword.other.special-method #61AFEF —
keyword.other.unit #D19A66 —
storage.type.annotation, storage.type.primitive #C678DD —
storage.modifier.package, storage.modifier.import #ABB2BF —
constant.variable #D19A66 —
constant.character.escape #56B6C2 —
constant.other.color #56B6C2 —
constant.other.symbol #56B6C2 —
variable.interpolation #BE5046 —
variable.parameter #ABB2BF —
string.regexp source.ruby.embedded #E5C07B —
string.other.link #E06C75 —
punctuation.definition.comment #5C6370 —
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array #ABB2BF —
punctuation.definition.heading, punctuation.definition.identity #61AFEF —
punctuation.definition.bold #E5C07B bold
punctuation.definition.italic #C678DD italic
punctuation.section.embedded #BE5046 —
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class #ABB2BF —
support.function.any-method #61AFEF —
entity.name.function #61AFEF —
entity.name.class, entity.name.type.class #E5C07B —
entity.name.section #61AFEF —
entity.other.attribute-name #D19A66 —
entity.other.attribute-name.id #61AFEF —
meta.method-call, meta.method #ABB2BF —
meta.definition.variable #E06C75 —
invalid.deprecated #523D14 —
markup.italic #C678DD italic
markup.heading punctuation.definition.heading #61AFEF —
source.c keyword.operator #C678DD —
source.cpp keyword.operator #C678DD —
source.cs keyword.operator #C678DD —
source.css property-name, source.css property-value #828997 —
source.css property-name.support, source.css property-value.support #ABB2BF —
source.gfm link entity #61AFEF —
source.go storage.type.string #C678DD —
source.ini keyword.other.definition.ini #E06C75 —
source.java storage.modifier.import #E5C07B —
source.java storage.type #E5C07B —
source.java keyword.operator.instanceof #C678DD —
source.java-properties meta.key-pair #E06C75 —
source.java-properties meta.key-pair > punctuation #ABB2BF —
source.js keyword.operator #56B6C2 —
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 #C678DD —
source.json meta.structure.dictionary.json > string.quoted.json #E06C75 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #E06C75 —
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 #98C379 —
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json #56B6C2 —
source.ruby constant.other.symbol > punctuation inherit —
source.python keyword.operator.logical.python #C678DD —
source.python variable.parameter #D19A66 —
meta.attribute.rust #BCC199 —
storage.modifier.lifetime.rust, entity.name.lifetime.rust #33E8EC —
keyword.unsafe.rust #CC6B73 —
support.type.property-name #ABB2BF —
string.quoted.double punctuation #98C379 —
support.type.property-name.json #E06C75 —
support.type.property-name.json punctuation #E06C75 —
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx #56B6C2 —
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator #56B6C2 —
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx #ABB2BF —
support.variable.dom.js, support.variable.dom.ts #E06C75 —
support.variable.property.dom.js, support.variable.property.dom.ts #E06C75 —
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition #BE5046 —
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters #ABB2BF —
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block #ABB2BF —
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma #ABB2BF —
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx #E06C75 —
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx #E06C75 —
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx #C678DD —
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx #C678DD —
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 #ABB2BF —
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor #ABB2BF —
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx #ABB2BF —
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 #D19A66 —
source.js support.variable, source.ts support.variable, source.tsx support.variable #E06C75 —
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx #D19A66 —
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx #C678DD —
source.ts keyword.operator, source.tsx keyword.operator #56B6C2 —
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #ABB2BF —
constant.language.import-export-all.js, constant.language.import-export-all.ts #E06C75 —
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx #56B6C2 —
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx #ABB2BF —
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx #E06C75 —
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx #D19A66 —
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts #E06C75 —
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor #98C379 —
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 #ABB2BF —
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx #98C379 —
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx #ABB2BF —
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable #ABB2BF —
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type #ABB2BF —
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 #ABB2BF —
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded #ABB2BF —
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable #E5C07B —
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx #E06C75 —
constant.language.json #56B6C2 —
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx #D19A66 —
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx #56B6C2 —
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 #98C379 —
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 #98C379 —
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx #C678DD —
source.python constant.other #ABB2BF —
source.python constant #D19A66 —
constant.character.format.placeholder.other.python storage #D19A66 —
support.variable.magic.python #E06C75 —
meta.function.parameters.python #D19A66 —
punctuation.separator.annotation.python #ABB2BF —
punctuation.separator.parameters.python #ABB2BF —
entity.name.variable.field.cs #E06C75 —
source.cs keyword.operator #ABB2BF —
variable.other.readwrite.cs #ABB2BF —
variable.other.object.cs #ABB2BF —
variable.other.object.property.cs #ABB2BF —
entity.name.variable.property.cs #61AFEF —
keyword.other.unsafe.rust #E06C75 —
markup.raw.block.markdown #ABB2BF —
punctuation.definition.variable.shell #E06C75 —
support.constant.property-value.css #ABB2BF —
punctuation.definition.constant.css #D19A66 —
punctuation.separator.key-value.scss #E06C75 —
punctuation.definition.constant.scss #D19A66 —
meta.property-list.scss punctuation.separator.key-value.scss #ABB2BF —
storage.type.primitive.array.java #E5C07B —
entity.name.section.markdown #E06C75 —
punctuation.definition.heading.markdown #E06C75 —
markup.heading.setext #ABB2BF —
punctuation.definition.bold.markdown #D19A66 —
markup.inline.raw.markdown #98C379 —
beginning.punctuation.definition.list.markdown #E06C75 —
markup.quote.markdown #5C6370 italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown #ABB2BF —
punctuation.definition.metadata.markdown #C678DD —
markup.underline.link.markdown, markup.underline.link.image.markdown #C678DD —
string.other.link.title.markdown, string.other.link.description.markdown #61AFEF —
punctuation.separator.variable.ruby #E06C75 —
variable.other.constant.ruby #D19A66 —
keyword.operator.other.ruby #98C379 —
punctuation.definition.variable.php #E06C75 —
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
Dark+
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}!`;
}