SJ Azure Theme

Name: SJ Azure Theme
Author: SAKSHAM JOSHI

Publisher: SAKSHAM JOSHIThemes in package: 4

A beautiful azure-theme extension, easy for eyes and psychologically relaxing

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

SJ Azure Theme — SJ CyberPunk Theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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 $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#0d0a1e33
activityBar.background#030d22
activityBar.border#ff259233
activityBar.foreground#ff2592
activityBar.inactiveForeground#5c4d8aaa
activityBarBadge.background#d31b77
activityBarBadge.foreground#ffffff
badge.background#d31b77
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#ff2592
breadcrumb.background#030d22
breadcrumb.focusForeground#fdfeff
breadcrumb.foreground#9ab8ddcc
button.background#087eb4
button.foreground#ffffff
button.hoverBackground#008dce
button.secondaryBackground#161130
button.secondaryForeground#fdfeff
button.secondaryHoverBackground#231a4e
checkbox.background#030d22
checkbox.border#ff259244
checkbox.foreground#ff2592
debugExceptionWidget.background#030d22
debugExceptionWidget.border#ffd400
debugIcon.pauseForeground#1f9aff
debugIcon.restartForeground#3dd69c
debugIcon.startForeground#3dd69c
debugIcon.stopForeground#d800ca
debugToolBar.background#0d0a1e
debugToolBar.border#ff2592
diffEditor.border#ff2592
diffEditor.insertedTextBackground#3dd69c33
diffEditor.removedTextBackground#d800ca33
dropdown.background#030d22
dropdown.border#ff259244
dropdown.foreground#fdfeff
editor.background#0d0a1e
editor.findMatchBackground#003496
editor.findMatchBorder#ffd400
editor.findMatchHighlightBackground#001288da
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#ff259218
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#ff25921a
editor.foreground#fdfeff
editor.hoverHighlightBackground#004696
editor.inactiveSelectionBackground#31007244
editor.lineHighlightBackground#1c1347
editor.lineHighlightBorder#221555
editor.rangeHighlightBackground#1c134744
editor.rangeHighlightBorder#ff259244
editor.selectionBackground#310072
editor.selectionHighlightBackground#35008b
editor.selectionHighlightBorder#35008b88
editor.wordHighlightBackground#47008ad5
editor.wordHighlightStrongBackground#440083d5
editorBracketMatch.background#ffd40033
editorBracketMatch.border#ffd400
editorCodeLens.foreground#5c4d8a
editorCursor.background#0d0a1e
editorCursor.foreground#ee0077
editorError.background#ac077a00
editorError.border#ffffff00
editorError.foreground#ac077a
editorGroup.border#ff259244
editorGroup.dropBackground#03153b
editorGroup.emptyBackground#0d0a1e
editorGroupHeader.tabsBackground#030d22
editorGutter.addedBackground#3dd69c
editorGutter.background#0d0a1e
editorGutter.commentRangeForeground#5c4d8a
editorGutter.deletedBackground#d800ca
editorGutter.foldingControlForeground#5c4d8a
editorGutter.modifiedBackground#ff2592
editorHoverWidget.background#222858
editorHoverWidget.border#2d324e
editorHoverWidget.foreground#fdfeff
editorIndentGuide.activeBackground#103483
editorIndentGuide.activeBackground1#103483
editorIndentGuide.background#0d0a1e
editorIndentGuide.background1#0d0a1e
editorInfo.background#af21e700
editorInfo.border#af21e700
editorInfo.foreground#af21e7
editorLineNumber.activeForeground#47a1fa
editorLineNumber.foreground#ee007788
editorLink.activeForeground#0ef3ff
editorMarkerNavigation.background#030d22
editorMarkerNavigationError.background#ac077a
editorMarkerNavigationInfo.background#af21e7
editorMarkerNavigationWarning.background#fad46d
editorOverviewRuler.background#0d0a1e00
editorOverviewRuler.border#ff259222
editorRuler.foreground#11215e
editorSuggestWidget.background#04112cee
editorSuggestWidget.border#ff259244
editorSuggestWidget.foreground#fdfeff
editorSuggestWidget.highlightForeground#ff2e97
editorSuggestWidget.selectedBackground#073170
editorWarning.background#fad46d00
editorWarning.border#ffffff00
editorWarning.foreground#fad46d
editorWhitespace.foreground#ff259222
editorWidget.background#04112c
editorWidget.foreground#fdfeff
editorWidget.resizeBorder#ff2592
focusBorder#ff2592
foreground#fdfeff
gitDecoration.addedResourceForeground#0097fc
gitDecoration.conflictingResourceForeground#ec0076
gitDecoration.deletedResourceForeground#d800ca
gitDecoration.ignoredResourceForeground#1183b8
gitDecoration.modifiedResourceForeground#fdd81d
gitDecoration.stageDeletedResourceForeground#d800ca
gitDecoration.stageModifiedResourceForeground#fdd81d
gitDecoration.submoduleResourceForeground#3787d6
gitDecoration.untrackedResourceForeground#0097fc
icon.foreground#ff2592
input.background#0d0931
input.border#150f53
input.foreground#fdfeff
input.placeholderForeground#f3f3f366
inputOption.activeBackground#ff259222
inputOption.activeBorder#ffd400
inputOption.activeForeground#fdfeff
list.activeSelectionBackground#073170
list.activeSelectionForeground#ffffff
list.dropBackground#063475
list.focusBackground#06306e
list.focusForeground#fdfeff
list.highlightForeground#ffd400
list.hoverBackground#0a2f66
list.hoverForeground#fdfeff
list.inactiveSelectionBackground#161130
list.inactiveSelectionForeground#ff2592
listFilterWidget.background#030d22
listFilterWidget.noMatchesOutline#d800ca
listFilterWidget.outline#ff2592
menu.background#0d0a1ecc
menu.border#ff259233
menu.foreground#fdfeff
menu.selectionBackground#161130
menu.selectionBorder#ff259233
menu.selectionForeground#ff2592
menu.separatorBackground#231a4e
menubar.selectionBackground#ff25921a
menubar.selectionForeground#fdfeff
merge.commonContentBackground#16113066
merge.commonHeaderBackground#231a4e88
merge.currentContentBackground#3dd69c22
merge.currentHeaderBackground#3dd69c44
merge.incomingContentBackground#ff259222
merge.incomingHeaderBackground#ff259244
minimap.background#030d22
minimap.errorHighlight#ac077a
minimap.findMatchHighlight#ffd40055
minimap.selectionHighlight#31007244
minimap.warningHighlight#fad46d
minimapGutter.addedBackground#3dd69c
minimapGutter.deletedBackground#d800ca
minimapGutter.modifiedBackground#ff2592
notificationCenter.border#ff2592
notificationCenterHeader.background#030d22
notificationCenterHeader.foreground#ff2592
notifications.background#0d0a1e
notifications.border#ff259233
notifications.foreground#fdfeff
notificationsErrorIcon.foreground#ac077a
notificationsInfoIcon.foreground#af21e7
notificationsWarningIcon.foreground#fad46d
notificationToast.border#ff2592
panel.background#0e0952
panel.border#181657
panelSection.border#231a4e
panelTitle.activeBorder#ff2592
panelTitle.activeForeground#ff2592
panelTitle.inactiveForeground#d600dd
peekView.border#ffd400
peekViewEditor.background#1971f770
peekViewEditor.matchHighlightBackground#120961
peekViewEditor.matchHighlightBorder#34006e
peekViewEditorGutter.background#030d22
peekViewResult.background#1a1079
peekViewResult.fileForeground#fdfeff
peekViewResult.lineForeground#9ab8dd
peekViewResult.matchHighlightBackground#ff259233
peekViewResult.selectionBackground#ffd400
peekViewResult.selectionForeground#030d22
peekViewTitle.background#372dc9
peekViewTitleDescription.foreground#348bee
peekViewTitleLabel.foreground#fdfeff
pickerGroup.border#ff259244
pickerGroup.foreground#ff2592
progressBar.background#fa0dea
scrollbar.shadow#ff25ed57
scrollbarSlider.activeBackground#ff29944f
scrollbarSlider.background#fc309654
scrollbarSlider.hoverBackground#ee0077
selection.background#310072
settings.focusedRowBackground#ff25920a
settings.headerForeground#fdfeff
sideBar.background#030d22
sideBar.border#ff259222
sideBar.dropBackground#ff259222
sideBar.foreground#fdfeffcc
sideBarSectionHeader.background#04112e
sideBarSectionHeader.border#ff259222
sideBarSectionHeader.foreground#1f9aff
sideBarTitle.foreground#ff2592
statusBar.background#0a0631
statusBar.border#ff259233
statusBar.debuggingBackground#0a0631
statusBar.debuggingForeground#4d8bee
statusBar.foreground#4d8bee
statusBar.noFolderBackground#0a0631
statusBar.noFolderForeground#4d8bee
statusBarItem.activeBackground#ff259225
statusBarItem.hoverBackground#ff25921a
statusBarItem.remoteBackground#ff2592
statusBarItem.remoteForeground#ffffff
tab.activeBackground#1d1641
tab.activeBorder#1d164100
tab.activeBorderTop#ff2592
tab.activeForeground#f9faff
tab.border#171033
tab.inactiveBackground#141138
tab.inactiveForeground#3e8efd
terminal.ansiBlack#3a1b75
terminal.ansiBlue#3787d6
terminal.ansiBrightBlack#5c6d7500
terminal.ansiBrightBlue#5994ce
terminal.ansiBrightCyan#4bc5fa
terminal.ansiBrightGreen#3dd69c
terminal.ansiBrightMagenta#ea00d9
terminal.ansiBrightRed#ff2e97
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffd400
terminal.ansiCyan#0ab2fa
terminal.ansiGreen#06ad00
terminal.ansiMagenta#ea00d9
terminal.ansiRed#ee1682
terminal.ansiWhite#f2f8ff
terminal.ansiYellow#ffd400
terminal.border#ff259233
terminal.foreground#e4eeff
terminal.selectionBackground#ff259233
terminalCursor.background#0d0a1e
terminalCursor.foreground#ee0077
textLink.activeForeground#4bc5fa
textLink.foreground#1f9aff
titleBar.activeBackground#0b082e
titleBar.activeForeground#fdfeff
titleBar.border#ff259222
titleBar.inactiveBackground#0b082e
titleBar.inactiveForeground#fdfeff66
tree.indentGuidesStroke#231a4e
walkThrough.embeddedEditorBackground#00000050
widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.quoted.docstring.multi.python	#0098df	italic
variable	#fdfeff	—
variable.other, variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx	#ff2e97	—
variable.language, entity.name.type.class.js, entity.name.type.class.ts, entity.name.type.class.tsx	#ff2e97	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#9e0a52	—
invalid.deprecated	#00d7e2	—
keyword	#ff2cf1	—
keyword.control	#ff2cf1	bold
keyword.other, keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as	#a83dff	—
storage, storage.modifier	#40a9ff	—
storage.type	#ff1bf0
source.js storage.type.function, source.ts storage	#ff25f0	—
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.separator.inheritance.php, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#44a1fd	—
punctuation.definition.parameters	#ffee80	—
punctuation.definition.template-expression, meta.template.expression	#18b6ff	—
entity.name.tag, meta.tag.sgml	#ff2e97	—
entity.other.attribute-name	#ffd400	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#ffd400
entity.name.function - meta.function-call, entity.name.function, variable.function	#39c0ff	—
support.function	#ffd400	—
meta.function-call	#2fb3ff	—
variable.parameter	#ff2e97	—
entity.name.class, entity.name.type.class	#ff2e97
entity.name	#ffd400	—
entity.other.inherited-class, meta.other.inherited-class.php, entity.other.inherited-class.js, entity.other.inherited-class.ts, entity.other.inherited-class.tsx	#6ab0ff	italic
entity.name.method.js	#39c0ff
meta.class-method.js entity.name.function.js, variable.function.constructor	#39c0ff	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#40a9ff	—
string	#0ef3ff	—
string.other.link	#0ef3ff	—
constant.numeric	#ffd400	—
constant.language	#ff2e97	—
constant.character, constant.escape, constant.other	#c832ff	—
support.constant	#39c0ff	—
meta.property-value, support.constant.property-value, constant.other.color	#fd21ef	—
meta	#ff2e97	—
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx	#ffd400	—
entity.other.attribute-name.class	#ff2e97	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#fdfeff	—
meta.property-value punctuation.separator.key-value	#44a1fd	—
support.type, support.class	#ff2cf1	italic
support.other.variable	#39c0ff	—
support.variable.property.dom	#67b3ff	—
constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#ffd400	—
support.other.namespace.php	#973dfd	—
meta.use	#2fb3ff
keyword.other.phpdoc.php	#35a3fd
variable.parameter.function.language.special.self.python	#ff2e97	—
source.ts entity.name.type	#dbcd00	—
source.ts keyword	#ff25f0	—
source.ts punctuation.definition.parameters	#dbcd00	—
meta.arrow.ts punctuation.definition.parameters	#ffee80	—
entity.other.inherited-class.ts, entity.other.inherited-class.tsx	#dbcd00	—
entity.other.inherited-class.js	#ff15ef	—
entity.name.type.class.js	#3ec8ff	—
support.type.property-name.json, source.json meta.structure.dictionary.json support.type.property-name.json	#ff2e97	—
meta.structure.dictionary.value.json string.quoted.double.json	#0ef3ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#40a9ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffd400	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#c832ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#0ef3ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#3dd69c	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffd400	—
meta.diff, meta.diff.header	#009af3	—
markup.deleted, markup.deleted.git_gutter	#ec107b	—
markup.inserted, markup.inserted.git_gutter	#dbcd00	—
markup.changed, markup.changed.git_gutter	#029fcf	—
constant.numeric.line-number.find-in-files - match	#e92778	—
entity.name.filename.find-in-files	#ff2e97	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#ff2e97
source.js constant.other.object.key.js string.unquoted.label.js	#ff2e97
text.html.vue-html	#ffd400	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown, string.other.link.title.markdown, punctuation.definition.heading.markdown	#ff2e97	—
text.html.markdown, punctuation.definition.list_item.markdown, meta.paragraph.markdown	#e1efff	—
markup.raw.inline.markdown, text.html.markdown markup.inline.raw.markdown, fenced_code.block.language, markup.inline.raw.markdown	#ff2e97	—
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown	#ff22f0	—
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown	#ff22f0
markup.bold, markup.bold string, markup.bold.markdown	#ff2e97	bold
markup.italic, markup.italic.markdown	#ff2e97	italic
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold	#0ef3ff	bold
markup.underline	#40a9ff	underline
markup.quote punctuation.definition.blockquote.markdown	#0098df	—
markup.quote	—	italic
markup.raw.block.fenced.markdown, markup.raw.block.markdown	#ffffff	—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown	#231a4e	—
meta.separator	#0098df	bold
markup.table	#e1efff	—

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

SJ Azure Theme — SJ Purple Goddess

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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 $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#0e0e1d
activityBar.activeBorder#4213ff62
activityBar.background#101020
activityBar.border#0e0e1d
activityBar.foreground#E0E0E0
activityBar.inactiveForeground#8373E1
activityBarBadge.background#D4B100
activityBarBadge.foreground#101020
badge.background#D4B100
badge.foreground#101020
breadcrumb.activeSelectionForeground#E0E0E0
breadcrumb.focusForeground#D4B100
breadcrumb.foreground#8373E1
breadcrumbPicker.background#101020
button.background#D4B100dd
button.foreground#0e0e1d
button.hoverBackground#D4B100
button.secondaryBackground#8373E1cc
button.secondaryForeground#0e0e1d
button.secondaryHoverBackground#8373E1
checkbox.background#0e0e1d
checkbox.foreground#D4B100
contrastActiveBorder#E0E0E000
contrastBorder#E0E0E000
debugExceptionWidget.background#101020
debugExceptionWidget.border#8373E1
debugIcon.continueForeground#D4B100
debugIcon.disconnectForeground#D4B100
debugIcon.pauseForeground#D4B100
debugIcon.restartForeground#31B800
debugIcon.startForeground#D4B100
debugIcon.stepBackForeground#D4B100
debugIcon.stepIntoForeground#D4B100
debugIcon.stepOutForeground#D4B100
debugIcon.stepOverForeground#D4B100
debugIcon.stopForeground#E21915F5
debugToolBar.background#101020
descriptionForeground#8373E1
diffEditor.insertedTextBackground#31B80020
diffEditor.removedTextBackground#E8141F20
dropdown.background#101020
dropdown.border#101020
dropdown.foreground#E0E0E0
editor.background#131224
editor.findMatchBackground#d96200ab
editor.findMatchHighlightBackground#DBDB0036
editor.findRangeHighlightBackground#DBDB0036
editor.foreground#E0E0E0
editor.hoverHighlightBackground#17173180
editor.inactiveSelectionBackground#5765A9C0
editor.lineHighlightBackground#181832
editor.lineHighlightBorder#181832
editor.linkedEditingBackground#6525D4AA
editor.rangeHighlightBackground#181832
editor.selectionBackground#47058588
editor.selectionHighlightBackground#6525D446
editor.snippetFinalTabstopHighlightBackground#4213ff62
editor.snippetFinalTabstopHighlightBorder#4213ff62
editor.snippetTabstopHighlightBackground#4213ff62
editor.snippetTabstopHighlightBorder#4213ff62
editor.wordHighlightBackground#E0E0E00D
editor.wordHighlightStrongBackground#E0E0E00D
editorBracketMatch.background#9445FB46
editorBracketMatch.border#9445FB46
editorCodeLens.foreground#8373E1
editorCursor.foreground#D4B100
editorError.foreground#E21915F5
editorGroup.border#0e0e1d
editorGroup.dropBackground#0e0e1dD0
editorGroupHeader.noTabsBackground#131224
editorGroupHeader.tabsBackground#131224
editorGroupHeader.tabsBorder#181832
editorGutter.addedBackground#2D9358
editorGutter.background#101020
editorGutter.deletedBackground#E21915F5
editorGutter.modifiedBackground#9445FB46
editorHoverWidget.background#101026
editorHoverWidget.border#101026
editorIndentGuide.activeBackground#8373E142
editorIndentGuide.activeBackground1#8373E142
editorIndentGuide.background#8373E10F
editorIndentGuide.background1#8373E10F
editorLineNumber.foreground#615998
editorLink.activeForeground#8373E1
editorMarkerNavigation.background#30445233
editorMarkerNavigationError.background#E21915F5
editorMarkerNavigationWarning.background#D4B100
editorOverviewRuler.border#8373E11C
editorOverviewRuler.commonContentForeground#D9A80055
editorOverviewRuler.currentContentForeground#E8141F55
editorOverviewRuler.incomingContentForeground#31B80055
editorRuler.foreground#8373E11C
editorSuggestWidget.background#181832
editorSuggestWidget.border#181832
editorSuggestWidget.foreground#8373E1
editorSuggestWidget.highlightForeground#D4B100
editorSuggestWidget.selectedBackground#131224
editorWarning.border#E0E0E000
editorWarning.foreground#D4B100
editorWhitespace.foreground#E0E0E01A
editorWidget.background#0e0e1d
editorWidget.border#181832
errorForeground#E21915F5
extensionButton.prominentBackground#3E11E9
extensionButton.prominentForeground#E0E0E0
extensionButton.prominentHoverBackground#D98500
focusBorder#101020
foreground#8373E1
gitDecoration.conflictingResourceForeground#D96100
gitDecoration.deletedResourceForeground#E21915F5
gitDecoration.ignoredResourceForeground#8373E181
gitDecoration.modifiedResourceForeground#D4B100
gitDecoration.untrackedResourceForeground#31B800
input.background#131224
input.border#101020
input.foreground#D4B100
input.placeholderForeground#8373E1
inputOption.activeBackground#3E11E9
inputOption.activeBorder#101020
inputValidation.errorBackground#131224
inputValidation.errorBorder#D4B100
inputValidation.infoBackground#131224
inputValidation.infoBorder#131224
inputValidation.warningBackground#131224
inputValidation.warningBorder#D4B100
list.activeSelectionBackground#131224
list.activeSelectionForeground#E0E0E0
list.dropBackground#131224
list.focusBackground#131224
list.focusForeground#E0E0E0
list.highlightForeground#D4B100
list.hoverBackground#131224
list.hoverForeground#A08FFF
list.inactiveSelectionBackground#131224
list.inactiveSelectionForeground#AAA
listFilterWidget.background#131224
listFilterWidget.noMatchesOutline#E21915F5
listFilterWidget.outline#131224
menu.separatorBackground#8373E1
merge.currentContentBackground#31B80070
merge.currentHeaderBackground#31B80070
merge.incomingContentBackground#8373E170
merge.incomingHeaderBackground#8373E170
notificationCenter.border#101020
notificationCenterHeader.background#4213FF
notificationCenterHeader.foreground#E0E0E0
notificationLink.foreground#E0E0E0
notifications.background#101020
notifications.border#131224
notifications.foreground#A08FFF
notificationToast.border#101020
panel.background#101020
panel.border#D4B100
panelTitle.activeBorder#D4B100
panelTitle.activeForeground#D4B100
panelTitle.inactiveForeground#8373E1
peekView.border#D4B100
peekViewEditor.background#101020
peekViewEditor.matchHighlightBackground#13293800
peekViewEditorGutter.background#131329
peekViewResult.background#101020
peekViewResult.fileForeground#AAA
peekViewResult.lineForeground#E0E0E0
peekViewResult.matchHighlightBackground#131224
peekViewResult.selectionBackground#131224
peekViewResult.selectionForeground#E0E0E0
peekViewTitle.background#181832
peekViewTitleDescription.foreground#AAA
peekViewTitleLabel.foreground#D4B100
pickerGroup.border#101020
pickerGroup.foreground#8373E1
progressBar.background#D4B100
sash.hoverBorder#D4B100
scrollbar.shadow#8373e181
scrollbarSlider.activeBackground#D4B100
scrollbarSlider.background#8373e181
scrollbarSlider.hoverBackground#3303EF
selection.background#470585
settings.checkboxBackground#101020
settings.checkboxBorder#101020
settings.checkboxForeground#B5B2F4
settings.dropdownBackground#101020
settings.dropdownBorder#101020
settings.dropdownForeground#B5B2F4
settings.dropdownListBorder#131224
settings.headerForeground#E0E0E0
settings.modifiedItemIndicator#D4B100
settings.numberInputBackground#101020
settings.numberInputBorder#101020
settings.numberInputForeground#B5B2F4
settings.textInputBackground#101020
settings.textInputBorder#101020
settings.textInputForeground#B5B2F4
sideBar.background#0e0e1d
sideBar.border#141429
sideBar.foreground#8373E1
sideBarSectionHeader.background#101020
sideBarSectionHeader.border#101020
sideBarSectionHeader.foreground#8373E1
sideBarTitle.foreground#8373E1
statusBar.background#101020
statusBar.border#101020
statusBar.debuggingBackground#D4B100
statusBar.debuggingForeground#101020
statusBar.foreground#8373E1
statusBar.noFolderBackground#101020
statusBar.noFolderForeground#8373E1
statusBarItem.activeBackground#3303EF
statusBarItem.hoverBackground#3303EF
statusBarItem.prominentBackground#101020
statusBarItem.prominentHoverBackground#131224
tab.activeBackground#0e0e1d
tab.activeBorder#D4B100
tab.activeForeground#E0E0E0
tab.activeModifiedBorder#8373E1
tab.border#101020
tab.inactiveBackground#131224
tab.inactiveForeground#8373E1
tab.inactiveModifiedBorder#8373E166
tab.unfocusedActiveForeground#8373E1
tab.unfocusedActiveModifiedBorder#8373E166
tab.unfocusedInactiveForeground#8373E1
tab.unfocusedInactiveModifiedBorder#8373E166
terminal.ansiBlack#000000
terminal.ansiBlue#572efe
terminal.ansiBrightBlack#4B4B50
terminal.ansiBrightBlue#4213FF
terminal.ansiBrightCyan#52FBFF
terminal.ansiBrightGreen#31B800
terminal.ansiBrightMagenta#F964FF
terminal.ansiBrightRed#E21915F5
terminal.ansiBrightWhite#E0E0E0
terminal.ansiBrightYellow#D4B100
terminal.ansiCyan#52FBFF
terminal.ansiGreen#31B800
terminal.ansiMagenta#FE0052
terminal.ansiRed#E21915F5
terminal.ansiWhite#E0E0E0
terminal.ansiYellow#D4B100
terminal.background#101020
terminal.foreground#E0E0E0
terminalCursor.background#D4B100
terminalCursor.foreground#D4B100
textBlockQuote.background#101020
textBlockQuote.border#4213FF
textCodeBlock.background#101020
textLink.activeForeground#9E38FF
textLink.foreground#D4B100
textPreformat.foreground#D4B100
textSeparator.foreground#101020
titleBar.activeBackground#101020
titleBar.activeForeground#E0E0E0
titleBar.inactiveBackground#101020
titleBar.inactiveForeground#8373E1
walkThrough.embeddedEditorBackground#101020
widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#9E38FF	—
entity	#D4B100	—
constant	#FF386D	—
keyword, storage.type.class.js	#D98500	—
meta	#6CFFFF	—
invalid	#E21915F5	—
meta.brace, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js	#A7D0FF	—
punctuation	#A7D0FF	—
punctuation.definition.parameters	#FFE852	—
punctuation.definition.template-expression	#FFE852	—
storage	#D4B100	—
storage.type.function.arrow	#D4B100	—
string, punctuation.definition.string	#7EFF60	—
string.template, punctuation.definition.string.template	#31B800	—
support	#52FFA2	—
support.function	#D98500	—
support.variable.property.dom	#6CFFFF	—
variable	#A7D0FF	—
source.ini entity, meta.embedded.block.ini, source.ini	#A7D0FF	—
source.ini keyword, keyword.other.definition.ini	#D4B100	—
source.ini punctuation.definition	#FFE852	—
source.ini punctuation.separator, punctuation.separator.key-value.ini	#D98500	—
source.css entity, source.stylus entity	#31B800	—
entity.other.attribute-name.class.css	#6CFFFF	—
entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css	#FFA22B	—
entity.name.tag	#6CFFFF	—
source.css support, entity.name.tag.css, source.stylus support	#7EFF60	—
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant	#FFE852	—
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string	#FFE852	—
source.css variable, source.stylus variable	#6CFFFF	—
text.html.basic entity.name, punctuation.definition.tag.html, entity.name.tag.inline.any.html, meta.tag.other.html, meta.tag.inline.any.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html	#6CFFFF	—
meta.toc-list.id.html	#7EFF60	—
text.html.basic entity.other	#D4B100	—
meta.tag.metadata.script.html entity.name.tag.html	#D4B100	—
punctuation.definition.string.begin, punctuation.definition.string.end	#6EFB4D	—
meta.tag.inline.any.html, meta.tag.other	#D98500	—
source.json support	#D4B100	—
source.json string, source.json punctuation.definition.string	#6EFB4D	—
source.js storage.type.function	#F964FF	—
variable.language, entity.name.type.class.js	#F964FF	—
entity.other.inherited-class	#FFE852	—
storage.type.extends.js, storage.type.class.jsdoc	#D98500	—
punctuation.definition.block.tag.jsdoc	#D98500	—
variable.other.jsdoc, entity.name.type.instance.jsdoc	#6CFFFF	—
variable.other.constant	#6CFFFF	—
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js	#6CFFFF	—
meta.jsx.children.js	#E0E0E0	—
storage.type, storage.type.class, storage.modifier, keyword.control, keyword.operator	#D98500	—
punctuation.definition.bracket.curly	#3c396d	—
keyword.operator.assignment.tsx, keyword.operator.assignment.jsx	#D98500	—
keyword.operator.assignment	#D98500	—
meta.jsx.children.tsx	#E0E0E0	—
meta.object-literal.key.js	#52FFA2	—
entity.name.type.class.tsx, entity.name.type.class.jsx, variable.other.readwrite.alias.tsx, variable.other.readwrite.tsx, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.js, variable.other.object.tsx, variable.other.object.jsx, variable.other.object, support.class.component.tsx, support.class.component.jsx, entity.name.type.tsx, entity.name.type.jsx, variable.other.readwrite, variable.other.object.js	#6CFFFF	—
variable.other.property, variable.other.object.property	#FFE852	—
JSXNested	#E0E0E0	—
variable.parameter	#6CFFFF	—
variable.parameter.function.language.special.self.python	#6CFFFF	—
meta.function-call.python, meta.function-call.generic.python, support.function.builtin.python	#D4B100	—
source.ts entity.name.type	#52FFA2	—
source.ts keyword	#D4B100	—
source.ts punctuation.definition.parameters	#A7D0FF	—
meta.arrow.ts punctuation.definition.parameters	#FFE852	—
source.ts storage	#6CFFFF	—
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown	#D4B100	bold
markup.inserted.diff, punctuation.definition.inserted.diff	#79d400	—
markup.deleted.diff, punctuation.definition.deleted.diff	#ED4945	—
meta.embedded.block.diff	#E0E0E0	—
meta.paragraph.markdown	#E0E0E0	—
punctuation.definition.from-file.diff, meta.diff.header.from-file	#470585	—
markup.inline.raw.string.markdown	#8373E1	—
beginning.punctuation.definition.quote.markdown	#D4B100	—
markup.quote.markdown meta.paragraph.markdown, punctuation.definition.quote.begin.markdown	#8373E1	—
meta.separator.markdown	#D4B100	—
markup.bold.markdown	—	bold
markup.italic.markdown	—	italic
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown	#D4B100	—
string.other.link.description.title.markdown punctuation.definition.string.markdown, meta.link.inline.markdown string.other.link.description.title.markdown, string.other.link.description.title.markdown punctuation.definition.string.begin.markdown, string.other.link.description.title.markdown punctuation.definition.string.end.markdown, meta.image.inline.markdown string.other.link.description.title.markdown	#7EFF60
meta.link.inline.markdown string.other.link.title.markdown, meta.link.reference.markdown string.other.link.title.markdown, meta.link.reference.def.markdown markup.underline.link.markdown	#D4B100	underline
markup.underline.link.markdown, string.other.link.description.title.markdown	#8373E1	—
fenced_code.block.language, markup.inline.raw.markdown	#6CFFFF	—
punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown	#3c396d	—
meta.link.inline.markdown punctuation.definition.string.begin.markdown, meta.link.inline.markdown punctuation.definition.string.end.markdown, meta.link.reference.markdown punctuation.definition.string.begin.markdown, meta.link.reference.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown	#D4B100	—
meta.image.inline.markdown punctuation.definition.string.begin.markdown, meta.image.inline.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown	#D98500	—
markup.underline.link.markdown, punctuation.definition.metadata.markdown, markup.underline.link.image.markdown, constant.other.reference.link.markdown, punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown	#8373E1	—
text.jade entity.name	#6CFFFF	—
storage.type.function.pug	#D98500	—
variable.parameter.function.js	#6CFFFF	—
variable.control.import.include.pug	#6EFB4D	—
text.jade string.interpolated	#FFE852	—
storage.type.cs	#6CFFFF	—
entity.name.variable.property.cs	#6CFFFF	—
storage.modifier.cs	#52FFA2	—
source.php entity, variable.other.class.php	#6CFFFF	—
keyword.other.phpdoc.php	#D98500	—
entity.name.function.php, support.function.basic_functions.php, meta.function-call.php, variable.other.property	#D4B100	—
variable.other.php, punctuation.definition.variable.php, variable.other.global.php, variable.language.this.php	#6CFFFF	—
storage.modifier.php, keyword.other.namespace.php	#D98500	—
entity.name.tag.yaml	#D4B100	—
punctuation.definition.block.sequence.item.yaml	#A7D0FF	—
storage.type.function.php, meta.function.parameters.php	#F964FF	—
keyword.blade	#D98500	—
begin.bracket.round.blade.php, end.bracket.round.blade.php	#A7D0FF	—
support.function.construct.begin.blade, support.function.construct.end.blade	#FFE852	—
keyword.package.go, keyword.import.go	#D98500	—
keyword.function.go	#F964FF	—
variable.other.assignment.go	#6CFFFF	—
punctuation.definition.string.begin.go, punctuation.definition.string.end.go, support.function.go	#D4B100	—
punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.ruby, punctuation.section.scope.begin.ruby, punctuation.section.scope.end.ruby	#FFE852	—
variable.other.constant.ruby	#52FFA2	—
entity.name.type.class.ruby	#F964FF	—
variable.other.block.ruby, variable.other.ruby	#6CFFFF	—
punctuation.separator.other.ruby	#D98500	—
keyword.other.special-method.ruby	#FFE852	—
storage.type.function.shell	#F964FF	—
variable.other.special.shell, punctuation.definition.variable.shell	#D98500	—
variable.graphql	#F7E776	—
keyword.operation.graphql	#F964FF	—
source.sql	#A7D0FF	—
source.sql keyword.other, support.function.mysqli.php	#F7E776	—
support.function.mysqli.php, source.sql support.function	#D4B100	—
string.regexp, string.regexp keyword.other	#A7D0FF	—
keyword.other.DML.sql	#D98500	—
punctuation.definition.table.array.toml	#A7D0FF	—
entity.other.attribute-name.table.array.toml, entity.other.attribute-name.table.toml	#D98500	—
keyword.key.toml	#D4B100	—
keyword.other.special-method.dockerfile	#D4B100	—
keyword.other.rust	#D98500	—
keyword.other.fn.rust	#F964FF	—
keyword.other.env	#D98500	—
variable.other.env	#D4B100	—
source.env	#A7D0FF	—
keyword.other.template.begin.env, keyword.other.template.end.env, keyword.operator.assignment.env	#D98500	—
variable.object.property	#6CFFFF	—
string.regexp.js	#F964FF	—
keyword.rainbow2	#D98500	—
keyword.other.nim, keyword.other	#D98500	—
keyword.boolean	#FF386D	—
punctuation.pragma.start.nim, punctuation.pragma.end.nim, entity.name.function.nim	#d4b100	—
markup.deleted	#ED4945	—
markup.inserted	#79d400	—
markup.underline	—	underline
modifier, this, comment, storage.modifier, entity.other.attribute-name, entity.other.attribute-name.html, punctuation.definition.comment, text.html.basic entity.other, entity.other.attribute-name, markup.quote.markdown meta.paragraph.markdown, markup.italic.markdown, text.jade entity.other.attribute-name.tag, keyword.control.from, entity.other.attribute-name.tag.pug	—	italic

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

SJ Azure Theme — SJ Theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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 $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#0d1f2d33
activityBar.background#091827
activityBar.border#24aedd33
activityBar.foreground#24aedd
activityBar.inactiveForeground#3a6482aa
activityBarBadge.background#ffc410
activityBarBadge.foreground#0d1f2d
badge.background#24aedd
badge.foreground#0d1f2d
breadcrumb.activeSelectionForeground#24aedd
breadcrumb.background#091827
breadcrumb.focusForeground#c8e6f4
breadcrumb.foreground#7fb3cccc
button.background#24aedd
button.foreground#0d1f2d
button.hoverBackground#3bbee8
button.secondaryBackground#122435
button.secondaryForeground#c8e6f4
button.secondaryHoverBackground#1a3550
checkbox.background#091827
checkbox.border#24aedd44
checkbox.foreground#24aedd
debugExceptionWidget.background#091827
debugExceptionWidget.border#ffc410
debugIcon.pauseForeground#24aedd
debugIcon.restartForeground#4ec994
debugIcon.startForeground#4ec994
debugIcon.stopForeground#f07178
debugToolBar.background#0d1f2d
debugToolBar.border#24aedd
diffEditor.border#24aedd
diffEditor.insertedTextBackground#4ec99433
diffEditor.removedTextBackground#f0717833
dropdown.background#091827
dropdown.border#24aedd44
dropdown.foreground#c8e6f4
editor.background#0d1f2d
editor.findMatchBackground#ffffff00
editor.findMatchBorder#ffc410
editor.findMatchHighlightBackground#24aedd33
editor.findMatchHighlightBorder#24aedd00
editor.findRangeHighlightBackground#24aedd18
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#24aedd1a
editor.foreground#c8e6f4
editor.hoverHighlightBackground#24aedd22
editor.inactiveSelectionBackground#24aedd1a
editor.lineHighlightBackground#091827
editor.lineHighlightBorder#0a2337
editor.rangeHighlightBackground#09182744
editor.rangeHighlightBorder#24aedd44
editor.selectionBackground#24aedd33
editor.selectionHighlightBackground#24aedd22
editor.selectionHighlightBorder#24aedd55
editor.wordHighlightBackground#24aedd1c
editor.wordHighlightStrongBackground#24aedd30
editorBracketMatch.background#24aedd1a
editorBracketMatch.border#24aedd
editorCodeLens.foreground#5b7a8f
editorCursor.background#0d1f2d
editorCursor.foreground#24aedd
editorError.background#f0717800
editorError.border#ffffff00
editorError.foreground#f07178
editorGroup.border#24aedd44
editorGroup.emptyBackground#0d1f2d
editorGroupHeader.tabsBackground#091827
editorGutter.addedBackground#4ec994
editorGutter.background#0d1f2d
editorGutter.commentRangeForeground#5b7a8f
editorGutter.deletedBackground#f07178
editorGutter.foldingControlForeground#5b7a8f
editorGutter.modifiedBackground#24aedd
editorHoverWidget.background#091827ee
editorHoverWidget.border#24aedd44
editorHoverWidget.foreground#c8e6f4
editorIndentGuide.activeBackground#24aedd55
editorIndentGuide.activeBackground1#24aedd55
editorIndentGuide.background#1e3a4f
editorIndentGuide.background1#1e3a4f
editorInfo.background#24aedd00
editorInfo.border#24aedd00
editorInfo.foreground#24aedd
editorLineNumber.activeForeground#24aedd
editorLineNumber.foreground#3a6482aa
editorLink.activeForeground#24aedd
editorMarkerNavigation.background#091827
editorMarkerNavigationError.background#f07178
editorMarkerNavigationInfo.background#24aedd
editorMarkerNavigationWarning.background#ffc410
editorOverviewRuler.background#0d1f2d00
editorOverviewRuler.border#24aedd22
editorRuler.foreground#1e3a4f
editorSuggestWidget.background#091827ee
editorSuggestWidget.border#24aedd44
editorSuggestWidget.foreground#c8e6f4
editorSuggestWidget.highlightForeground#24aedd
editorSuggestWidget.selectedBackground#122435
editorWarning.background#ffc41000
editorWarning.border#ffffff00
editorWarning.foreground#ffc410
editorWhitespace.foreground#24aedd22
editorWidget.background#091827ee
editorWidget.foreground#c8e6f4
editorWidget.resizeBorder#24aedd
focusBorder#24aedd
foreground#c8e6f4
gitDecoration.addedResourceForeground#4ec994
gitDecoration.conflictingResourceForeground#bb9af7
gitDecoration.deletedResourceForeground#f07178
gitDecoration.ignoredResourceForeground#3a6482
gitDecoration.modifiedResourceForeground#ffc410
gitDecoration.stageDeletedResourceForeground#f07178
gitDecoration.stageModifiedResourceForeground#ffc410
gitDecoration.submoduleResourceForeground#24aedd
gitDecoration.untrackedResourceForeground#4ec994
icon.foreground#24aedd
input.background#122435
input.border#24aedd55
input.foreground#c8e6f4
input.placeholderForeground#5b7a8f
inputOption.activeBackground#24aedd22
inputOption.activeBorder#24aedd
inputOption.activeForeground#c8e6f4
list.activeSelectionBackground#1a3550
list.activeSelectionForeground#24aedd
list.dropBackground#091827
list.focusBackground#122435
list.focusForeground#c8e6f4
list.highlightForeground#ffc410
list.hoverBackground#122435
list.hoverForeground#c8e6f4
list.inactiveSelectionBackground#122435
list.inactiveSelectionForeground#24aedd
listFilterWidget.background#091827
listFilterWidget.noMatchesOutline#f07178
listFilterWidget.outline#24aedd
menu.background#0d1f2dcc
menu.border#24aedd33
menu.foreground#c8e6f4
menu.selectionBackground#122435
menu.selectionBorder#24aedd33
menu.selectionForeground#24aedd
menu.separatorBackground#1e3a4f
menubar.selectionBackground#24aedd1a
menubar.selectionForeground#c8e6f4
merge.commonContentBackground#12243566
merge.commonHeaderBackground#1e3a4f88
merge.currentContentBackground#4ec99422
merge.currentHeaderBackground#4ec99444
merge.incomingContentBackground#24aedd22
merge.incomingHeaderBackground#24aedd44
minimap.background#091827
minimap.errorHighlight#f07178
minimap.findMatchHighlight#ffc41055
minimap.selectionHighlight#24aedd44
minimap.warningHighlight#ffc410
minimapGutter.addedBackground#4ec994
minimapGutter.deletedBackground#f07178
minimapGutter.modifiedBackground#24aedd
notificationCenter.border#24aedd
notificationCenterHeader.background#091827
notificationCenterHeader.foreground#24aedd
notifications.background#0d1f2d
notifications.border#24aedd33
notifications.foreground#c8e6f4
notificationsErrorIcon.foreground#f07178
notificationsInfoIcon.foreground#24aedd
notificationsWarningIcon.foreground#ffc410
notificationToast.border#24aedd
panel.background#091827
panel.border#24aedd33
panelSection.border#1e3a4f
panelTitle.activeBorder#24aedd
panelTitle.activeForeground#c8e6f4
panelTitle.inactiveForeground#5b7a8f
peekView.border#24aedd
peekViewEditor.background#091827
peekViewEditor.matchHighlightBackground#ffc41044
peekViewEditor.matchHighlightBorder#ffc410
peekViewEditorGutter.background#091827
peekViewResult.background#091827
peekViewResult.fileForeground#c8e6f4
peekViewResult.lineForeground#7fb3cc
peekViewResult.matchHighlightBackground#24aedd33
peekViewResult.selectionBackground#24aedd22
peekViewResult.selectionForeground#c8e6f4
peekViewTitle.background#0d1f2d
peekViewTitleDescription.foreground#7fb3ccbb
peekViewTitleLabel.foreground#24aedd
pickerGroup.border#24aedd44
pickerGroup.foreground#24aedd
progressBar.background#24aedd
scrollbar.shadow#0d1f2d
scrollbarSlider.activeBackground#24aedd88
scrollbarSlider.background#24aedd33
scrollbarSlider.hoverBackground#24aedd55
selection.background#24aedd40
settings.focusedRowBackground#24aedd0a
settings.headerForeground#c8e6f4
sideBar.background#091827
sideBar.border#24aedd22
sideBar.dropBackground#24aedd22
sideBar.foreground#c8e6f4cc
sideBarSectionHeader.background#0d1f2d
sideBarSectionHeader.border#24aedd22
sideBarSectionHeader.foreground#24aedd
sideBarTitle.foreground#24aedd
statusBar.background#091827
statusBar.border#24aedd33
statusBar.debuggingBackground#091827
statusBar.debuggingForeground#ffc410
statusBar.foreground#24aedd
statusBar.noFolderBackground#091827
statusBar.noFolderForeground#24aedd
statusBarItem.activeBackground#24aedd25
statusBarItem.hoverBackground#24aedd1a
statusBarItem.remoteBackground#24aedd
statusBarItem.remoteForeground#0d1f2d
tab.activeBackground#0d1f2d
tab.activeBorder#0d1f2d00
tab.activeBorderTop#ffc410
tab.activeForeground#c8e6f4
tab.border#0d1f2d
tab.inactiveBackground#091827
tab.inactiveForeground#5b7a8f
terminal.ansiBlack#0d1f2d
terminal.ansiBlue#24aedd
terminal.ansiBrightBlack#3a6482
terminal.ansiBrightBlue#50d9ff
terminal.ansiBrightCyan#4dcfff
terminal.ansiBrightGreen#4ec994
terminal.ansiBrightMagenta#c792ea
terminal.ansiBrightRed#f07178
terminal.ansiBrightWhite#e8f4fd
terminal.ansiBrightYellow#ffc410
terminal.ansiCyan#24aedd
terminal.ansiGreen#4ec994
terminal.ansiMagenta#bb9af7
terminal.ansiRed#f07178
terminal.ansiWhite#c8e6f4
terminal.ansiYellow#ffc410
terminal.border#24aedd33
terminal.foreground#c8e6f4
terminal.selectionBackground#24aedd33
terminalCursor.background#0d1f2d
terminalCursor.foreground#24aedd
textLink.activeForeground#50d9ff
textLink.foreground#24aedd
titleBar.activeBackground#091827
titleBar.activeForeground#c8e6f4
titleBar.border#24aedd22
titleBar.inactiveBackground#091827
titleBar.inactiveForeground#c8e6f466
tree.indentGuidesStroke#1e3a4f
walkThrough.embeddedEditorBackground#00000050
widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#3a6482
variable, string constant.other.placeholder	#c8e6f4	—
string constant.other.placeholder	#c3e88d	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#f07178	—
keyword, storage.modifier	#24aedd	—
storage.type	#bb9af7	bold
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.separator.inheritance.php, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#7fb3cc	—
keyword.control	#24aedd	bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#50d9ff	—
entity.name.function, variable.function, support.function, keyword.other.special-method	#50d9ff	—
meta.function-call	#4ec994	—
meta.block variable.other	#c8e6f4	—
support.other.variable, string.other.link	#c8e6f4	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#f78c6c	—
support.constant	#ffc410	—
keyword.other.unit, keyword.other	#4dcfff	—
constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#ffc410	—
string	#c3e88d	—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#ffc410	—
support.type	#ffc410	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#c8e6f4	—
source.css support.type.property-name	#24aedd	bold
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#50d9ff	—
variable.language	#24aedd
entity.name.method.js	#50d9ff
meta.class-method.js entity.name.function.js, variable.function.constructor	#4dcfff	—
entity.other.attribute-name	#9dd8f5
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#ffc410
entity.other.attribute-name.class	#ffc410	—
source.sass keyword.control	#24aedd	—
markup.inserted	#4ec994	—
markup.deleted	#f07178	—
markup.changed	#bb9af7	—
string.regexp	#4dcfff	—
constant.character.escape	#4dcfff	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#24aedd
source.js constant.other.object.key.js string.unquoted.label.js	#f07178
source.json meta.structure.dictionary.json support.type.property-name.json	#24aedd	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffc410	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#50d9ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#4ec994	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#bb9af7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f78c6c	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#c8e6f4	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#24aedd	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#4ec994	—
text.html.markdown, punctuation.definition.list_item.markdown	#c8e6f4	—
text.html.markdown markup.inline.raw.markdown	#24aedd	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#3a6482	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#ffc410	—
markup.italic	#24aedd	italic
markup.bold, markup.bold string	#ffc410	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#50d9ff	bold
markup.underline	#4dcfff	underline
markup.quote punctuation.definition.blockquote.markdown	#3a6482	—
markup.quote	—	italic
string.other.link.title.markdown	#24aedd	—
string.other.link.description.title.markdown	#24aedd	—
constant.other.reference.link.markdown	#ffc410	—
markup.raw.block	#4dcfff	—
markup.raw.block.fenced.markdown	#1e3a4f	—
punctuation.definition.fenced.markdown	#1e3a4f	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#c8e6f4	—
variable.language.fenced.markdown	#3a6482	—
meta.separator	#3a6482	bold
markup.table	#c8e6f4	—

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

SJ Azure Theme — SJ Theme (Italic)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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 $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#0d1f2d33
activityBar.background#091827
activityBar.border#24aedd33
activityBar.foreground#24aedd
activityBar.inactiveForeground#3a6482aa
activityBarBadge.background#ffc410
activityBarBadge.foreground#0d1f2d
badge.background#24aedd
badge.foreground#0d1f2d
breadcrumb.activeSelectionForeground#24aedd
breadcrumb.background#091827
breadcrumb.focusForeground#c8e6f4
breadcrumb.foreground#7fb3cccc
button.background#24aedd
button.foreground#0d1f2d
button.hoverBackground#3bbee8
button.secondaryBackground#122435
button.secondaryForeground#c8e6f4
button.secondaryHoverBackground#1a3550
checkbox.background#091827
checkbox.border#24aedd44
checkbox.foreground#24aedd
debugExceptionWidget.background#091827
debugExceptionWidget.border#ffc410
debugIcon.pauseForeground#24aedd
debugIcon.restartForeground#4ec994
debugIcon.startForeground#4ec994
debugIcon.stopForeground#f07178
debugToolBar.background#0d1f2d
debugToolBar.border#24aedd
diffEditor.border#24aedd
diffEditor.insertedTextBackground#4ec99433
diffEditor.removedTextBackground#f0717833
dropdown.background#091827
dropdown.border#24aedd44
dropdown.foreground#c8e6f4
editor.background#0d1f2d
editor.findMatchBackground#ffffff00
editor.findMatchBorder#ffc410
editor.findMatchHighlightBackground#24aedd33
editor.findMatchHighlightBorder#24aedd00
editor.findRangeHighlightBackground#24aedd18
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#24aedd1a
editor.foreground#c8e6f4
editor.hoverHighlightBackground#24aedd22
editor.inactiveSelectionBackground#24aedd1a
editor.lineHighlightBackground#091827
editor.lineHighlightBorder#0a2337
editor.rangeHighlightBackground#09182744
editor.rangeHighlightBorder#24aedd44
editor.selectionBackground#24aedd33
editor.selectionHighlightBackground#24aedd22
editor.selectionHighlightBorder#24aedd55
editor.wordHighlightBackground#24aedd1c
editor.wordHighlightStrongBackground#24aedd30
editorBracketMatch.background#24aedd1a
editorBracketMatch.border#24aedd
editorCodeLens.foreground#5b7a8f
editorCursor.background#0d1f2d
editorCursor.foreground#24aedd
editorError.background#f0717800
editorError.border#ffffff00
editorError.foreground#f07178
editorGroup.border#24aedd44
editorGroup.emptyBackground#0d1f2d
editorGroupHeader.tabsBackground#091827
editorGutter.addedBackground#4ec994
editorGutter.background#0d1f2d
editorGutter.commentRangeForeground#5b7a8f
editorGutter.deletedBackground#f07178
editorGutter.foldingControlForeground#5b7a8f
editorGutter.modifiedBackground#24aedd
editorHoverWidget.background#091827ee
editorHoverWidget.border#24aedd44
editorHoverWidget.foreground#c8e6f4
editorIndentGuide.activeBackground#24aedd55
editorIndentGuide.activeBackground1#24aedd55
editorIndentGuide.background#1e3a4f
editorIndentGuide.background1#1e3a4f
editorInfo.background#24aedd00
editorInfo.border#24aedd00
editorInfo.foreground#24aedd
editorLineNumber.activeForeground#24aedd
editorLineNumber.foreground#3a6482aa
editorLink.activeForeground#24aedd
editorMarkerNavigation.background#091827
editorMarkerNavigationError.background#f07178
editorMarkerNavigationInfo.background#24aedd
editorMarkerNavigationWarning.background#ffc410
editorOverviewRuler.background#0d1f2d00
editorOverviewRuler.border#24aedd22
editorRuler.foreground#1e3a4f
editorSuggestWidget.background#091827ee
editorSuggestWidget.border#24aedd44
editorSuggestWidget.foreground#c8e6f4
editorSuggestWidget.highlightForeground#24aedd
editorSuggestWidget.selectedBackground#122435
editorWarning.background#ffc41000
editorWarning.border#ffffff00
editorWarning.foreground#ffc410
editorWhitespace.foreground#24aedd22
editorWidget.background#091827ee
editorWidget.foreground#c8e6f4
editorWidget.resizeBorder#24aedd
focusBorder#24aedd
foreground#c8e6f4
gitDecoration.addedResourceForeground#4ec994
gitDecoration.conflictingResourceForeground#bb9af7
gitDecoration.deletedResourceForeground#f07178
gitDecoration.ignoredResourceForeground#3a6482
gitDecoration.modifiedResourceForeground#ffc410
gitDecoration.stageDeletedResourceForeground#f07178
gitDecoration.stageModifiedResourceForeground#ffc410
gitDecoration.submoduleResourceForeground#24aedd
gitDecoration.untrackedResourceForeground#4ec994
icon.foreground#24aedd
input.background#122435
input.border#24aedd55
input.foreground#c8e6f4
input.placeholderForeground#5b7a8f
inputOption.activeBackground#24aedd22
inputOption.activeBorder#24aedd
inputOption.activeForeground#c8e6f4
list.activeSelectionBackground#1a3550
list.activeSelectionForeground#24aedd
list.dropBackground#091827
list.focusBackground#122435
list.focusForeground#c8e6f4
list.highlightForeground#ffc410
list.hoverBackground#122435
list.hoverForeground#c8e6f4
list.inactiveSelectionBackground#122435
list.inactiveSelectionForeground#24aedd
listFilterWidget.background#091827
listFilterWidget.noMatchesOutline#f07178
listFilterWidget.outline#24aedd
menu.background#0d1f2dcc
menu.border#24aedd33
menu.foreground#c8e6f4
menu.selectionBackground#122435
menu.selectionBorder#24aedd33
menu.selectionForeground#24aedd
menu.separatorBackground#1e3a4f
menubar.selectionBackground#24aedd1a
menubar.selectionForeground#c8e6f4
merge.commonContentBackground#12243566
merge.commonHeaderBackground#1e3a4f88
merge.currentContentBackground#4ec99422
merge.currentHeaderBackground#4ec99444
merge.incomingContentBackground#24aedd22
merge.incomingHeaderBackground#24aedd44
minimap.background#091827
minimap.errorHighlight#f07178
minimap.findMatchHighlight#ffc41055
minimap.selectionHighlight#24aedd44
minimap.warningHighlight#ffc410
minimapGutter.addedBackground#4ec994
minimapGutter.deletedBackground#f07178
minimapGutter.modifiedBackground#24aedd
notificationCenter.border#24aedd
notificationCenterHeader.background#091827
notificationCenterHeader.foreground#24aedd
notifications.background#0d1f2d
notifications.border#24aedd33
notifications.foreground#c8e6f4
notificationsErrorIcon.foreground#f07178
notificationsInfoIcon.foreground#24aedd
notificationsWarningIcon.foreground#ffc410
notificationToast.border#24aedd
panel.background#091827
panel.border#24aedd33
panelSection.border#1e3a4f
panelTitle.activeBorder#24aedd
panelTitle.activeForeground#c8e6f4
panelTitle.inactiveForeground#5b7a8f
peekView.border#24aedd
peekViewEditor.background#091827
peekViewEditor.matchHighlightBackground#ffc41044
peekViewEditor.matchHighlightBorder#ffc410
peekViewEditorGutter.background#091827
peekViewResult.background#091827
peekViewResult.fileForeground#c8e6f4
peekViewResult.lineForeground#7fb3cc
peekViewResult.matchHighlightBackground#24aedd33
peekViewResult.selectionBackground#24aedd22
peekViewResult.selectionForeground#c8e6f4
peekViewTitle.background#0d1f2d
peekViewTitleDescription.foreground#7fb3ccbb
peekViewTitleLabel.foreground#24aedd
pickerGroup.border#24aedd44
pickerGroup.foreground#24aedd
progressBar.background#24aedd
scrollbar.shadow#0d1f2d
scrollbarSlider.activeBackground#24aedd88
scrollbarSlider.background#24aedd33
scrollbarSlider.hoverBackground#24aedd55
selection.background#24aedd40
settings.focusedRowBackground#24aedd0a
settings.headerForeground#c8e6f4
sideBar.background#091827
sideBar.border#24aedd22
sideBar.dropBackground#24aedd22
sideBar.foreground#c8e6f4cc
sideBarSectionHeader.background#0d1f2d
sideBarSectionHeader.border#24aedd22
sideBarSectionHeader.foreground#24aedd
sideBarTitle.foreground#24aedd
statusBar.background#091827
statusBar.border#24aedd33
statusBar.debuggingBackground#091827
statusBar.debuggingForeground#ffc410
statusBar.foreground#24aedd
statusBar.noFolderBackground#091827
statusBar.noFolderForeground#24aedd
statusBarItem.activeBackground#24aedd25
statusBarItem.hoverBackground#24aedd1a
statusBarItem.remoteBackground#24aedd
statusBarItem.remoteForeground#0d1f2d
tab.activeBackground#0d1f2d
tab.activeBorder#0d1f2d00
tab.activeBorderTop#ffc410
tab.activeForeground#c8e6f4
tab.border#0d1f2d
tab.inactiveBackground#091827
tab.inactiveForeground#5b7a8f
terminal.ansiBlack#0d1f2d
terminal.ansiBlue#24aedd
terminal.ansiBrightBlack#3a6482
terminal.ansiBrightBlue#50d9ff
terminal.ansiBrightCyan#4dcfff
terminal.ansiBrightGreen#4ec994
terminal.ansiBrightMagenta#c792ea
terminal.ansiBrightRed#f07178
terminal.ansiBrightWhite#e8f4fd
terminal.ansiBrightYellow#ffc410
terminal.ansiCyan#24aedd
terminal.ansiGreen#4ec994
terminal.ansiMagenta#bb9af7
terminal.ansiRed#f07178
terminal.ansiWhite#c8e6f4
terminal.ansiYellow#ffc410
terminal.border#24aedd33
terminal.foreground#c8e6f4
terminal.selectionBackground#24aedd33
terminalCursor.background#0d1f2d
terminalCursor.foreground#24aedd
textLink.activeForeground#50d9ff
textLink.foreground#24aedd
titleBar.activeBackground#091827
titleBar.activeForeground#c8e6f4
titleBar.border#24aedd22
titleBar.inactiveBackground#091827
titleBar.inactiveForeground#c8e6f466
tree.indentGuidesStroke#1e3a4f
walkThrough.embeddedEditorBackground#00000050
widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#3a6482	italic
variable, string constant.other.placeholder	#c8e6f4	—
string constant.other.placeholder	#c3e88d	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#f07178	—
keyword, storage.modifier	#24aedd	—
storage.type	#bb9af7	bold
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.separator.inheritance.php, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#7fb3cc	—
keyword.control	#24aedd	bold italic
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#50d9ff	—
entity.name.function, variable.function, support.function, keyword.other.special-method	#50d9ff	—
meta.function-call	#4ec994	—
meta.block variable.other	#c8e6f4	—
support.other.variable, string.other.link	#c8e6f4	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#f78c6c	—
support.constant	#ffc410	—
keyword.other.unit, keyword.other	#4dcfff	—
constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#ffc410	—
string	#c3e88d	—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#ffc410	—
support.type	#ffc410	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#c8e6f4	—
source.css support.type.property-name	#24aedd	bold
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#50d9ff	—
variable.language	#24aedd	italic
entity.name.method.js	#50d9ff	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#4dcfff	—
entity.other.attribute-name	#9dd8f5	italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#ffc410	italic
entity.other.attribute-name.class	#ffc410	—
source.sass keyword.control	#24aedd	—
markup.inserted	#4ec994	—
markup.deleted	#f07178	—
markup.changed	#bb9af7	—
string.regexp	#4dcfff	—
constant.character.escape	#4dcfff	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#24aedd	italic
source.js constant.other.object.key.js string.unquoted.label.js	#f07178	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#24aedd	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#ffc410	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#50d9ff	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#4ec994	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#bb9af7	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#f78c6c	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#c8e6f4	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#24aedd	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#4ec994	—
text.html.markdown, punctuation.definition.list_item.markdown	#c8e6f4	—
text.html.markdown markup.inline.raw.markdown	#24aedd	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#3a6482	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#ffc410	—
markup.italic	#24aedd	italic
markup.bold, markup.bold string	#ffc410	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#50d9ff	bold italic
markup.underline	#4dcfff	underline
markup.quote punctuation.definition.blockquote.markdown	#3a6482	—
markup.quote	—	italic
string.other.link.title.markdown	#24aedd	—
string.other.link.description.title.markdown	#24aedd	—
constant.other.reference.link.markdown	#ffc410	—
markup.raw.block	#4dcfff	—
markup.raw.block.fenced.markdown	#1e3a4f	—
punctuation.definition.fenced.markdown	#1e3a4f	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#c8e6f4	—
variable.language.fenced.markdown	#3a6482	—
meta.separator	#3a6482	bold
markup.table	#c8e6f4	—