Skip to main content
One Light Italic2 | 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.activeBorder #f9826c activityBar.background #fafafa activityBar.border #e1e4e8 activityBar.foreground #24292e activityBar.inactiveForeground #6a737d activityBarBadge.background #2188ff tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle — #383A42 — comment #A0A1A7 italic comment markup.link #A0A1A7 — entity.name.type #C18401 — entity.other.inherited-class
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}!`;
}
One Light Italic2 — Atom One Light2
3
Open Editors fetchUser.ts index.ts README.md fetchUser.ts
index.ts
README.md
src main*
0 1
Copilot
Ln 5, Col 12
Spaces: 2
UTF-8
LF
TypeScript
Light+
activityBarBadge.foreground
#fafafa
badge.background #dbedff
badge.foreground #005cc5
breadcrumb.activeSelectionForeground #586069
breadcrumb.focusForeground #24292e
breadcrumb.foreground #6a737d
breadcrumbPicker.background #fafafa
button.background #2ea44f
button.foreground #fafafa
button.hoverBackground #2c974b
button.secondaryBackground #eaecef
button.secondaryForeground #24292e
button.secondaryHoverBackground #f3f4f6
checkbox.background #f6f8fa
checkbox.border #e1e4e8
debugToolBar.background #fafafa
descriptionForeground #6a737d
diffEditor.insertedTextBackground #85e89d33
diffEditor.removedTextBackground #f9758326
dropdown.background #fafafa
dropdown.border #e1e4e8
dropdown.foreground #24292e
dropdown.listBackground #fafafa
editor.background #fafafa
editor.findMatchBackground #ffdf5d
editor.findMatchHighlightBackground #ffdf5d66
editor.focusedStackFrameHighlightBackground #28a74525
editor.foldBackground #959da51a
editor.foreground #24292e
editor.inactiveSelectionBackground #0366d611
editor.lineHighlightBackground #fafbfc
editor.linkedEditingBackground #0366d611
editor.selectionBackground #0366d625
editor.selectionHighlightBackground #34d05840
editor.selectionHighlightBorder #34d05800
editor.stackFrameHighlightBackground #ffd33d33
editor.wordHighlightBackground #34d05800
editor.wordHighlightBorder #24943e99
editor.wordHighlightStrongBackground #34d05800
editor.wordHighlightStrongBorder #24943e50
editorBracketMatch.background #34d05840
editorBracketMatch.border #34d05800
editorCursor.foreground #044289
editorGroup.border #e1e4e8
editorGroupHeader.tabsBackground #f6f8fa
editorGroupHeader.tabsBorder #e1e4e8
editorGutter.addedBackground #34d058
editorGutter.deletedBackground #d73a49
editorGutter.modifiedBackground #f9c513
editorIndentGuide.activeBackground #e1e4e8
editorIndentGuide.background #eaecef
editorLineNumber.activeForeground #24292e
editorLineNumber.foreground #959da5
editorOverviewRuler.border #fafafa
editorWhitespace.foreground #d1d5da
editorWidget.background #fafafa
errorForeground #cb2431
focusBorder #0366d6
foreground #24292e
gitDecoration.addedResourceForeground #22863a
gitDecoration.conflictingResourceForeground #b08800
gitDecoration.deletedResourceForeground #cb2431
gitDecoration.ignoredResourceForeground #959da5
gitDecoration.modifiedResourceForeground #b08800
gitDecoration.submoduleResourceForeground #586069
gitDecoration.untrackedResourceForeground #22863a
input.background #fafafa
input.border #e1e4e8
input.foreground #24292e
input.placeholderForeground #6a737d
list.activeSelectionBackground #e2e5e9
list.activeSelectionForeground #24292e
list.focusBackground #cce5ff
list.focusForeground #05264c
list.highlightForeground #0366d6
list.hoverBackground #ebf0f4
list.hoverForeground #24292e
list.inactiveFocusBackground #dbedff
list.inactiveSelectionBackground #e8eaed
list.inactiveSelectionForeground #24292e
notificationCenterHeader.background #e1e4e8
notificationCenterHeader.foreground #6a737d
notifications.background #fafbfc
notifications.border #e1e4e8
notifications.foreground #586069
notificationsErrorIcon.foreground #d73a49
notificationsInfoIcon.foreground #005cc5
notificationsWarningIcon.foreground #e36209
panel.background #f6f8fa
panel.border #e1e4e8
panelInput.border #e1e4e8
panelTitle.activeBorder #f9826c
panelTitle.activeForeground #24292e
panelTitle.inactiveForeground #6a737d
pickerGroup.border #e1e4e8
pickerGroup.foreground #586069
progressBar.background #2188ff
quickInput.background #fafbfc
quickInput.foreground #24292e
scrollbar.shadow #6a737d33
scrollbarSlider.activeBackground #959da588
scrollbarSlider.background #959da533
scrollbarSlider.hoverBackground #959da544
settings.headerForeground #586069
settings.modifiedItemIndicator #f9c513
sideBar.background #f6f8fa
sideBar.border #e1e4e8
sideBar.foreground #24292e
sideBarSectionHeader.background #f6f8fa
sideBarSectionHeader.border #e1e4e8
sideBarSectionHeader.foreground #24292e
sideBarTitle.foreground #24292e
statusBar.background #fafafa
statusBar.border #e1e4e8
statusBar.debuggingBackground #d73a49
statusBar.debuggingForeground #fafafa
statusBar.foreground #586069
statusBar.noFolderBackground #fafafa
statusBarItem.prominentBackground #f6f8fa
tab.activeBackground #fafafa
tab.activeBorder #fafafa
tab.activeBorderTop #f9826c
tab.activeForeground #24292e
tab.border #e1e4e8
tab.hoverBackground #fafafa
tab.inactiveBackground #f6f8fa
tab.inactiveForeground #6a737d
tab.unfocusedActiveBorder #fafafa
tab.unfocusedActiveBorderTop #e1e4e8
tab.unfocusedHoverBackground #f6f8fa
terminal.ansiBlack #383a42
terminal.ansiBlue #2f5af3
terminal.ansiBrightBlack #797979
terminal.ansiBrightBlue #4b72ff
terminal.ansiBrightCyan #00b7eb
terminal.ansiBrightGreen #98c379
terminal.ansiBrightMagenta #c678dd
terminal.ansiBrightRed #e06c75
terminal.ansiBrightWhite #fafafa
terminal.ansiBrightYellow #e5c07b
terminal.ansiCyan #00b7eb
terminal.ansiGreen #50a14f
terminal.ansiMagenta #a626a4
terminal.ansiRed #e45649
terminal.ansiWhite #fafafa
terminal.ansiYellow #c18401
terminal.background #fafafa
terminal.border #657b83
terminal.foreground #383a42
terminal.selectionBackground #bfceff
terminal.selectionForeground #383a42
terminalCursor.foreground #cc00be
textBlockQuote.background #f6f8fa
textBlockQuote.border #dfe2e5
textCodeBlock.background #1b1f230d
textLink.activeForeground #0366d6
textLink.foreground #0366d6
textPreformat.foreground #586069
textSeparator.foreground #eaecef
titleBar.activeBackground #fafafa
titleBar.activeForeground #586069
titleBar.border #e1e4e8
titleBar.inactiveBackground #f6f8fa
titleBar.inactiveForeground #6a737d
tree.indentGuidesStroke #eaecef
welcomePage.buttonBackground #fafbfc
welcomePage.buttonHoverBackground #f3f4f6
#50A14F
keyword.other.special-method #4078F2 —
keyword.other.unit #986801 —
storage.type.annotation, storage.type.primitive #A626A4 —
storage.modifier.package, storage.modifier.import #383A42 —
constant.variable #986801 —
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 #A0A1A7 —
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 #0184bc —
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 #0184bc —
entity.name.function #0184bc —
entity.name.class, entity.name.type.class #C18401 —
entity.name.section #4078F2 —
entity.other.attribute-name #986801 —
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 #986801 —
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 #986801 —
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 #986801 —
keyword.operator.new.ts, keyword.operator.new.js, 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, 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 #383A42 —
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx #986801 —
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.python constant #383A42 —
support.constant.property-value.css #383A42 —
punctuation.definition.constant.css #986801 —
punctuation.separator.key-value.scss #E45649 —
punctuation.definition.constant.scss #986801 —
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 #986801 —
markup.inline.raw.markdown #50A14F —
beginning.punctuation.definition.list.markdown #E45649 —
markup.quote.markdown #A0A1A7 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 #986801 —
keyword.operator.other.ruby #50A14F —
punctuation.definition.variable.php #E45649 —
markup.italic, punctuation.definition.italic, comment, punctuation.definition.comment, string.comment, comment.block.documentation, comment.block.documentation variable, comment.block.documentation punctuation.definition, keyword.other.documentation, storage.type.class.jsdoc, comment.block, comment.block variable.parameter, keyword.other.phpdoc, comment.block.documentation entity.name.type, keyword, keyword.operator.expression, keyword.operator.new, variable.language, markup.quote, markup.inserted, markup.deleted, markup.changed, storage, constant.language, entity.name.class, entity.other.attribute-name — italic
keyword.operator, keyword.other.unit, support.type.property-name, keyword.other.special-method, entity.name.tag — normal
components
fetchUser.ts Button.tsx Modal.tsx hooks utils index.ts public package.json tsconfig.json README.md Outline 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
31
32
33
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}!`;
}
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 $