Skip to main content
Home Theme VS Code Intouch-Language and Formatter for VSCode. (c)2021-2025 vitalyruhl Intouch-Language syntax highlighting, formatter and code snippets for VSCode
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 #24292e activityBar.border #1b1f23 activityBar.foreground #959da5 activityBar.inactiveForeground #6a737d activityBarBadge.background #0366d6 tokenColors TextMate scopes and font styles (syntax highlighting rules).
scope foreground fontStyle comment, punctuation.definition.comment, string.comment #22863a — constant, entity.name.constant #79b8ff — entity, entity.name #b392f0 — entity.modifires #d73a49 — entity.name.tag
Shiki preview TypeScript sample highlighted with this variant's colors and tokenColors.
Intouch-Language and Formatter for VSCode. (c)2021-2025 vitalyruhl — Intouch Dark
activityBarBadge.foreground
#ffffff
badge.background #044289
badge.foreground #c8e1ff
breadcrumb.activeSelectionForeground #d1d5da
breadcrumb.focusForeground #959da5
breadcrumb.foreground #959da5
breadcrumbPicker.background #2b3036
button.background #176f2c
button.foreground #dcffe4
button.hoverBackground #22863a
checkbox.background #444d56
checkbox.border #1b1f23
debugToolBar.background #2b3036
descriptionForeground #959da5
diffEditor.insertedTextBackground #28a74530
diffEditor.removedTextBackground #d73a4930
dropdown.background #2f363d
dropdown.border #1b1f23
dropdown.foreground #959da5
dropdown.listBackground #24292e
editor.background #0d1117
editor.findMatchBackground #ffd33d44
editor.findMatchHighlightBackground #ffd33d22
editor.focusedStackFrameHighlightBackground #b808
editor.foldBackground #282e33
editor.foreground #f6f8fa
editor.inactiveSelectionBackground #3392FF22
editor.lineHighlightBackground #2b3036
editor.selectionBackground #3392FF44
editor.selectionHighlightBackground #17E5E633
editor.selectionHighlightBorder #17E5E600
editor.stackFrameHighlightBackground #a707
editor.wordHighlightBackground #17E5E600
editor.wordHighlightBorder #17E5E699
editor.wordHighlightStrongBackground #17E5E600
editor.wordHighlightStrongBorder #17E5E666
editorBracketMatch.background #17E5E650
editorBracketMatch.border #17E5E600
editorCursor.foreground #c8e1ff
editorGroup.border #1b1f23
editorGroupHeader.tabsBackground #1f2428
editorGroupHeader.tabsBorder #1b1f23
editorGutter.addedBackground #28a745
editorGutter.deletedBackground #ea4a5a
editorGutter.modifiedBackground #2188ff
editorIndentGuide.activeBackground #444d56
editorIndentGuide.background #2f363d
editorLineNumber.activeForeground #f6f8fa
editorLineNumber.foreground #444d56
editorOverviewRuler.border #1b1f23
editorWhitespace.foreground #444d56
editorWidget.background #1f2428
errorForeground #f97583
focusBorder #005cc5
foreground #d1d5da
gitDecoration.addedResourceForeground #34d058
gitDecoration.conflictingResourceForeground #ffab70
gitDecoration.deletedResourceForeground #ea4a5a
gitDecoration.ignoredResourceForeground #6a737d
gitDecoration.modifiedResourceForeground #79b8ff
gitDecoration.submoduleResourceForeground #6a737d
gitDecoration.untrackedResourceForeground #34d058
input.background #2f363d
input.border #1b1f23
input.foreground #959da5
input.placeholderForeground #959da5
list.activeSelectionBackground #39414a
list.activeSelectionForeground #959da5
list.focusBackground #044289
list.hoverBackground #282e34
list.hoverForeground #959da5
list.inactiveFocusBackground #1d2d3e
list.inactiveSelectionBackground #282e34
list.inactiveSelectionForeground #959da5
notificationCenterHeader.background #24292e
notificationCenterHeader.foreground #959da5
notifications.background #2f363d
notifications.border #1b1f23
notifications.foreground #959da5
notificationsErrorIcon.foreground #ea4a5a
notificationsInfoIcon.foreground #79b8ff
notificationsWarningIcon.foreground #ffab70
panel.background #1f2428
panel.border #1b1f23
panelInput.border #2f363d
panelTitle.activeBorder #f9826c
panelTitle.activeForeground #959da5
panelTitle.inactiveForeground #959da5
peekViewEditor.background #1f242888
peekViewEditor.matchHighlightBackground #ffd33d33
peekViewResult.background #1f2428
peekViewResult.matchHighlightBackground #ffd33d33
pickerGroup.border #444d56
pickerGroup.foreground #959da5
progressBar.background #0366d6
quickInput.background #24292e
quickInput.foreground #959da5
scrollbar.shadow #0008
scrollbarSlider.activeBackground #6a737d88
scrollbarSlider.background #6a737d33
scrollbarSlider.hoverBackground #6a737d44
settings.headerForeground #959da5
settings.modifiedItemIndicator #0366d6
sideBar.background #1f2428
sideBar.border #1b1f23
sideBar.foreground #d1d5da
sideBarSectionHeader.background #1f2428
sideBarSectionHeader.border #1b1f23
sideBarSectionHeader.foreground #959da5
sideBarTitle.foreground #959da5
statusBar.background #24292e
statusBar.border #1b1f23
statusBar.debuggingBackground #f9826c
statusBar.debuggingForeground #ffffff
statusBar.foreground #d1d5da
statusBar.noFolderBackground #24292e
statusBarItem.prominentBackground #282e34
tab.activeBackground #24292e
tab.activeBorder #24292e
tab.activeBorderTop #f9826c
tab.activeForeground #959da5
tab.border #1b1f23
tab.hoverBackground #24292e
tab.inactiveBackground #1f2428
tab.inactiveForeground #959da5
tab.unfocusedActiveBorder #24292e
tab.unfocusedActiveBorderTop #1b1f23
tab.unfocusedHoverBackground #24292e
terminal.foreground #6a737d
textBlockQuote.background #24292e
textBlockQuote.border #444d56
textCodeBlock.background #2f363d
textLink.activeForeground #c8e1ff
textLink.foreground #032f62
textPreformat.foreground #d1d5da
textSeparator.foreground #586069
titleBar.activeBackground #24292e
titleBar.activeForeground #959da5
titleBar.border #1b1f23
titleBar.inactiveBackground #1f2428
titleBar.inactiveForeground #959da5
tree.indentGuidesStroke #2f363d
welcomePage.buttonBackground #2f363d
welcomePage.buttonHoverBackground #444d56 #f97583
entity.numbers, constant.numeric.hexadecimal, punctuation.separator.constant.numeric, keyword.other.unit.hexadecimal, keyword.other.unit.exponent.hexadecimal, keyword.other.unit.suffix.floating-point, keyword.other.unit.user-defined, keyword.other.unit.exponent.decimal, keyword.operator.plus.exponent.decimal, constant.numeric.exponent.decimal, keyword.other.unit.suffix.floating-point, keyword.other.unit.binary, constant.numeric.binary, keyword.other.unit.suffix.integer, constant.numeric.decimal #d73a49 —
entity.name.function #f0fff4 —
keyword.datatype #8a63d2 italic
keyword.other.numbers #cb2431 —
keyword.operator.comparison #f97583 —
keyword.operator.assignment #d73a49 —
keyword.operator.other #d73a49 —
storage, storage.type #f97583 —
storage.modifier.package, storage.modifier.import, storage.type.java #f6f8fa —
string, punctuation.definition.string, string punctuation.section.embedded source #ffd1ac —
string.quoted.double, string.quoted.single #ffd1ac —
meta.property-name #79b8ff —
variable.parameter.function #2188ff —
variable.parameter #79b8ff —
variable.parameter.dotfield #ffab70 —
variable.parameter.trend #ffab70 —
variable.other.constant, variable.language #2188ff —
invalid.broken #b31d28 italic
invalid.deprecated #b31d28 italic
invalid.illegal #b31d28 italic
invalid.unimplemented #b31d28 italic
carriage-return #24292e italic underline
source.regexp, string.regexp #dbedff —
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition #dbedff —
string.regexp constant.character.escape #85e89d bold
meta.module-reference #79b8ff —
punctuation.definition.list.begin.markdown #ffab70 —
markup.heading, markup.heading entity.name #79b8ff bold
markup.italic #f6f8fa italic
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted #fdaeb7 —
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted #85e89d —
markup.changed, punctuation.definition.changed #ffab70 —
markup.ignored, markup.untracked #2f363d —
meta.diff.range #b392f0 bold
meta.separator #79b8ff bold
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote #d1d5da —
brackethighlighter.unmatched #fdaeb7 —
constant.other.reference.link, string.other.link #dbedff underline
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...
~/my-project
main*
Button.tsx
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 }!` ;
}
Intouch-Language and Formatter for VSCode. (c)2021-2025 vitalyruhl | Coding Theme