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 #0E131B activityBarBadge.background #8BE9FD activityBarBadge.foreground #0E131B badge.background #EBF85B badge.foreground #0E131B button.background #0E131B tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle support.function.idl-procedure-method #ff79c6 bold entity.name.function.idl-method #f1fa8c 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.neon%
debugConsole.errorForeground
#FF3EAC
debugConsole.infoForeground #2FA4FF
debugConsole.warningForeground #FFD36E
debugConsoleInputIcon.foreground #C678DD
debugIcon.continueForeground #C678DD
debugIcon.pauseForeground #C678DD
debugIcon.restartForeground #FFD36E
debugIcon.stepBackForeground #C678DD
debugIcon.stepIntoForeground #C678DD
debugIcon.stepOutForeground #C678DD
debugIcon.stepOverForeground #C678DD
debugIcon.stopForeground #FF3EAC
debugToolBar.background #0E131B
debugToolBar.border #b38098
diffEditor.insertedTextBackground #00809B33
dropdown.background #131c2a
dropdown.border #181A1F
editor.background #0E131B
editor.findMatchBackground #f386bf55
editor.findMatchHighlightBackground #f386bf33
editor.foreground #c8d1df
editor.lineHighlightBackground #131c2a
editor.selectionBackground #2a3b5a
editor.selectionHighlightBackground #2a3b5a
editor.wordHighlightBackground #484e5b
editor.wordHighlightBorder #7f848e
editor.wordHighlightStrongBackground #abb2bf26
editor.wordHighlightStrongBorder #7f848e
editorBracketHighlight.foreground1 #FA163F
editorBracketHighlight.foreground2 #12CAD6
editorBracketHighlight.foreground3 #F1FA3C
editorBracketHighlight.foreground4 #2F89FC
editorBracketHighlight.foreground5 #32FF6A
editorBracketHighlight.foreground6 #EAEAEA
editorBracketMatch.background #131c2a
editorBracketMatch.border #6c8093c5
editorCursor.background #c8d1df
editorCursor.foreground #88abf9
editorError.foreground #e16ba0
editorGroup.border #181A1F
editorGroup.emptyBackground #0E131B
editorGroupHeader.tabsBackground #111722
editorGutter.addedBackground #0aad82
editorGutter.deletedBackground #FF3EAC
editorGutter.modifiedBackground #2FA4FF
editorHoverWidget.background #0E131B
editorHoverWidget.border #6c8093
editorIndentGuide.activeBackground #6c8093
editorIndentGuide.background #1e293e
editorLightBulb.foreground #88abf9
editorLightBulbAutoFix.foreground #e8c37d
editorLineNumber.activeForeground #a8b6cc
editorLineNumber.foreground #6c809370
editorMarkerNavigation.background #0E131B
editorOverviewRuler.border #1e293e
editorRuler.foreground #1e293e
editorSuggestWidget.background #0E131B
editorSuggestWidget.border #6c8093
editorSuggestWidget.foreground #a8b6cc
editorSuggestWidget.highlightForeground #88abf9
editorSuggestWidget.selectedBackground #1e293e
editorUnnecessaryCode.opacity #000000b2
editorWarning.foreground #e0c084d5
editorWhitespace.foreground #6c809370
editorWidget.background #0E131B
focusBorder #6c8093
gitDecoration.addedResourceForeground #88abf9d5
gitDecoration.conflictingResourceForeground #e16ba0
gitDecoration.deletedResourceForeground #88abf9d5
gitDecoration.ignoredResourceForeground #6c80939d
gitDecoration.modifiedResourceForeground #88abf9d5
gitDecoration.submoduleResourceForeground #6c8093
gitDecoration.untrackedResourceForeground #98c379
icon.foreground #6c8093
input.background #131c2a
list.activeSelectionBackground #1e293e
list.activeSelectionForeground #c8d1df
list.dropBackground #1e293e
list.errorForeground #ba7bcc
list.focusBackground #292d35
list.highlightForeground #C5C5C5
list.hoverBackground #111722
list.hoverForeground #c8d1df
list.inactiveSelectionBackground #131c2a
list.inactiveSelectionForeground #c8d1df
list.warningForeground #e8c37d
panel.border #1e293e
peekViewEditor.matchHighlightBackground #131c2a
problemsErrorIcon.foreground #FF3EAC
problemsInfoIcon.foreground #2FA4FF
problemsWarningIcon.foreground #FFD36E
sash.hoverBorder #2a3b5a
scrollbarSlider.activeBackground #2a3b5a
scrollbarSlider.background #1e293e
scrollbarSlider.hoverBackground #24324c
settings.checkboxBorder #c8d1df
settings.checkboxForeground #ba7bcc
settings.modifiedItemIndicator #88abf9
sideBar.background #0b1212
sideBar.border #1e293e
sideBar.foreground #6c8093
sideBarSectionHeader.background #131c2a
statusBar.background #0b1212
statusBar.debuggingBackground #0FF5B8
statusBar.debuggingBorder #0E131B
statusBar.debuggingForeground #0E131B
statusBar.foreground #ABB2BF
statusBar.noFolderBackground #0E131B
statusBarItem.hoverBackground #5c6e6c
tab.activeBackground #0E131B
tab.activeBorderTop #88abf9
tab.activeForeground #c8d1df
tab.border #0E131B
tab.inactiveBackground #131c2a
tab.inactiveForeground #6c8093
terminal.ansiBlack #0E131B
terminal.ansiBlue #7ecec6
terminal.ansiGreen #98c379
terminal.ansiYellow #e8c37d
terminal.background #0E131B
terminal.foreground #ba7bcc
textBlockQuote.background #131c2a
titleBar.activeBackground #0E131B
titleBar.activeForeground #c8d1df
titleBar.inactiveBackground #0E131B
titleBar.inactiveForeground #6B717D constant.language.idl — bold
comment.line.semicolon.idl #2fa4ff —
string.quoted.single.idl, string.quoted.double.idl #50fa7b —
constant.numeric.idl — bold
entity.name.tag.idl — italic
entity.name.type.idl — bold
comment, comment.block #2fa4ff —
variable.other.readwrite.ts.idl, variable.parameter.idl #C8D1DF —
comment markup.link #5C6370 —
entity.other.inherited-class #50FA7B —
keyword.other.special-method #61AFEF —
keyword.other.unit #fff56d —
storage.type.annotation, storage.type.primitive #C678DD —
storage.modifier.package, storage.modifier.import #ABB2BF —
constant.variable #FF9A3B —
constant.character.escape #8BE9FD bold
constant.other.color #94DAFF —
constant.other.symbol #94DAFF —
variable.interpolation #BE5046 —
variable.parameter #ABB2BF —
string.regexp source.ruby.embedded #ffd36e —
string.other.link #0ff5b8 —
punctuation.definition.comment #2fa4ff —
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 #ffd36e 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 #ebf85b —
entity.name.function #ebf85b —
entity.name.class, entity.name.type.class #ffd36e —
entity.name.section #61AFEF —
entity.other.attribute-name #0FF5B8 —
entity.other.attribute-name.id #61AFEF —
meta.method-call, meta.method #ABB2BF —
meta.definition.variable #0ff5b8 —
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 #0ff5b8 —
source.java storage.modifier.import #ffd36e —
source.java storage.type #ffd36e —
source.java keyword.operator.instanceof #C678DD —
source.java-properties meta.key-pair #0ff5b8 —
source.java-properties meta.key-pair > punctuation #ABB2BF —
source.js keyword.operator #94DAFF —
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 #0ff5b8 —
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string #0ff5b8 —
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 #50FA7B —
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json #94DAFF —
source.ruby constant.other.symbol > punctuation inherit —
source.python keyword.operator.logical.python #C678DD —
source.python variable.parameter #fff56d —
meta.attribute.rust #BCC199 —
storage.modifier.lifetime.rust, entity.name.lifetime.rust #33E8EC —
keyword.unsafe.rust #CC6B73 —
support.type.property-name #FF3EAC —
string.quoted.double punctuation #50FA7B —
support.type.property-name.json #FF3EAC —
support.type.property-name.json punctuation #FF3EAC —
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx #94DAFF —
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator #94DAFF —
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx #ABB2BF —
support.variable.dom.js, support.variable.dom.ts #0ff5b8 —
support.variable.property.dom.js, support.variable.property.dom.ts #0ff5b8 —
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 #0ff5b8 —
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx #0ff5b8 —
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 #fff56d —
source.js support.variable, source.ts support.variable, source.tsx support.variable #0ff5b8 —
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx #fff56d —
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx #C678DD —
source.ts keyword.operator, source.tsx keyword.operator #94DAFF —
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 #0ff5b8 —
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx #94DAFF —
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 #0ff5b8 —
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx #fff56d —
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts #0ff5b8 —
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor #50FA7B —
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 #50FA7B —
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 #ffd36e —
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx #0ff5b8 —
constant.language.json #94DAFF —
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx #fff56d —
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx #94DAFF —
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 #50FA7B —
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 #50FA7B —
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 #fff56d —
constant.character.format.placeholder.other.python storage #fff56d —
support.variable.magic.python #0ff5b8 —
meta.function.parameters.python #fff56d —
punctuation.separator.annotation.python #ABB2BF —
punctuation.separator.parameters.python #ABB2BF —
entity.name.variable.field.cs #0ff5b8 —
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 #0ff5b8 —
markup.raw.block.markdown #ABB2BF —
punctuation.definition.variable.shell #0ff5b8 —
support.constant.property-value.css #ABB2BF —
punctuation.definition.constant.css #fff56d —
punctuation.separator.key-value.scss #0ff5b8 —
punctuation.definition.constant.scss #fff56d —
meta.property-list.scss punctuation.separator.key-value.scss #ABB2BF —
storage.type.primitive.array.java #ffd36e —
entity.name.section.markdown #0ff5b8 —
punctuation.definition.heading.markdown #0ff5b8 —
markup.heading.setext #ABB2BF —
punctuation.definition.bold.markdown #fff56d —
markup.inline.raw.markdown #50FA7B —
beginning.punctuation.definition.list.markdown #0ff5b8 —
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 #0ff5b8 —
variable.other.constant.ruby #fff56d —
keyword.operator.other.ruby #50FA7B —
punctuation.definition.variable.php #0ff5b8 —
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}!`;
}