DevMedia Theme

Name: DevMedia Theme
Author: João M J Braga

Publisher: João M J BragaThemes in package: 3

Tema inspirado na DevMedia - Plataforma para Programadores

Open in VS Code GitHub

Color themes

VS Code preview

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

DevMedia Theme — DevMedia Dark

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.background#161717
activityBar.border#262626
activityBar.foreground#82C020
activityBar.inactiveForeground#636B77
activityBarBadge.background#82C020
activityBarBadge.foreground#111111
badge.background#4A7010
badge.foreground#ECEFDC
breadcrumb.activeSelectionForeground#9CD633
breadcrumb.background#161717
breadcrumb.focusForeground#9CD633
breadcrumb.foreground#8090A0
breadcrumbPicker.background#1A2830
button.background#4A7010
button.foreground#ECEFDC
button.hoverBackground#568012
button.secondaryBackground#2A2A2A
button.secondaryForeground#D8DBE4
button.secondaryHoverBackground#383838
contrastBorder#262626
debugIcon.breakpointDisabledForeground#505660
debugIcon.breakpointForeground#F47070
debugIcon.pauseForeground#D4913A
debugIcon.startForeground#82C020
debugIcon.stopForeground#F47070
debugToolBar.background#1A2830
debugToolBar.border#2E5008
diffEditor.diagonalFill#282828
diffEditor.insertedLineBackground#82C02020
diffEditor.insertedTextBackground#82C02028
diffEditor.removedLineBackground#F4707020
diffEditor.removedTextBackground#F4707028
editor.background#1C1C1C
editor.findMatchBackground#D4913A60
editor.findMatchHighlightBackground#D4913A35
editor.findRangeHighlightBackground#82C0201A
editor.foreground#F0F2F7
editor.inactiveSelectionBackground#82C02035
editor.lineHighlightBackground#242424
editor.lineHighlightBorder#2E2E2E
editor.rangeHighlightBackground#82C02020
editor.selectionBackground#82C02075
editor.selectionHighlightBackground#82C02050
editor.wordHighlightBackground#5A9FCC28
editor.wordHighlightStrongBackground#5A9FCC42
editorBracketMatch.background#82C02040
editorBracketMatch.border#82C020
editorCursor.foreground#9CD633
editorError.border#F4707000
editorError.foreground#F47070
editorGroupHeader.noTabsBackground#161717
editorGroupHeader.tabsBackground#161717
editorGroupHeader.tabsBorder#262626
editorGutter.addedBackground#82C020
editorGutter.deletedBackground#F47070
editorGutter.modifiedBackground#21BAD6
editorHint.border#82C02000
editorHint.foreground#82C020
editorHoverWidget.background#1A2830
editorHoverWidget.border#2E5008
editorIndentGuide.activeBackground1#82C02060
editorIndentGuide.background1#282828
editorInfo.border#21BAD600
editorInfo.foreground#21BAD6
editorLineNumber.activeForeground#82C020
editorLineNumber.foreground#4A5060
editorOverviewRuler.addedForeground#82C020
editorOverviewRuler.border#262626
editorOverviewRuler.deletedForeground#F47070
editorOverviewRuler.errorForeground#F47070
editorOverviewRuler.infoForeground#21BAD6
editorOverviewRuler.modifiedForeground#21BAD6
editorOverviewRuler.warningForeground#D4913A
editorRuler.foreground#282828
editorSuggestWidget.background#1A2830
editorSuggestWidget.border#2E5008
editorSuggestWidget.foreground#D8DBE4
editorSuggestWidget.highlightForeground#9CD633
editorSuggestWidget.selectedBackground#82C02048
editorWarning.border#D4913A00
editorWarning.foreground#D4913A
editorWhitespace.foreground#383838
editorWidget.background#1A2830
editorWidget.border#82C020
editorWidget.foreground#F0F2F7
extensionButton.prominentBackground#4A7010
extensionButton.prominentForeground#ECEFDC
extensionButton.prominentHoverBackground#568012
focusBorder#82C020
gitDecoration.addedResourceForeground#82C020
gitDecoration.conflictingResourceForeground#D4913A
gitDecoration.deletedResourceForeground#F47070
gitDecoration.ignoredResourceForeground#505660
gitDecoration.modifiedResourceForeground#21BAD6
gitDecoration.submoduleResourceForeground#82C020
gitDecoration.untrackedResourceForeground#9CD633
input.background#202020
input.border#323232
input.foreground#F0F2F7
input.placeholderForeground#5A6070
inputOption.activeBackground#82C02028
inputOption.activeBorder#82C020
inputOption.activeForeground#9CD633
inputValidation.errorBackground#F4707018
inputValidation.errorBorder#F47070
inputValidation.infoBackground#21BAD618
inputValidation.infoBorder#21BAD6
inputValidation.warningBackground#D4913A18
inputValidation.warningBorder#D4913A
list.activeSelectionBackground#82C02045
list.activeSelectionForeground#9CD633
list.dropBackground#82C02035
list.focusBackground#82C02055
list.focusForeground#9CD633
list.highlightForeground#9CD633
list.hoverBackground#263C45
list.hoverForeground#F0F2F7
list.inactiveSelectionBackground#82C02025
list.inactiveSelectionForeground#C8CDD8
menu.background#1A2830
menu.foreground#D8DBE4
menu.selectionBackground#82C02035
menu.selectionForeground#9CD633
menu.separatorBackground#2A2A2A
menubar.selectionBackground#82C02035
menubar.selectionForeground#9CD633
merge.border#282828
merge.currentContentBackground#82C0201A
merge.currentHeaderBackground#82C02028
merge.incomingContentBackground#21BAD61A
merge.incomingHeaderBackground#21BAD628
minimap.background#161717
minimap.errorHighlight#F47070
minimap.findMatchHighlight#D4913A40
minimap.selectionHighlight#82C02045
minimap.warningHighlight#D4913A
minimapSlider.activeBackground#82C02060
minimapSlider.background#82C02025
minimapSlider.hoverBackground#82C02045
notificationCenter.border#82C020
notificationCenterHeader.background#1A2830
notificationCenterHeader.foreground#9CD633
notificationLink.foreground#21BAD6
notifications.background#1A2830
notifications.border#2E5008
notifications.foreground#D8DBE4
panel.background#161717
panel.border#262626
panelSection.border#262626
panelSectionHeader.background#1C1C1C
panelSectionHeader.foreground#82C020
panelTitle.activeBorder#82C020
panelTitle.activeForeground#9CD633
panelTitle.inactiveForeground#5A6070
peekView.border#82C020
peekViewEditor.background#1C1C1C
peekViewEditor.matchHighlightBackground#D4913A35
peekViewResult.background#1A2830
peekViewResult.matchHighlightBackground#82C02035
peekViewResult.selectionBackground#82C02048
peekViewTitle.background#161717
peekViewTitleDescription.foreground#666B75
peekViewTitleLabel.foreground#9CD633
pickerGroup.border#262626
pickerGroup.foreground#21BAD6
progressBar.background#82C020
quickInput.background#1C1C1C
scrollbarSlider.activeBackground#82C02070
scrollbarSlider.background#82C02030
scrollbarSlider.hoverBackground#82C02050
settings.headerForeground#F0F2F7
settings.modifiedItemIndicator#D4913A
sideBar.background#1F2F36
sideBar.border#262626
sideBar.foreground#D8DBE4
sideBarSectionHeader.background#161717
sideBarSectionHeader.border#2E2E2E
sideBarSectionHeader.foreground#82C020
sideBarTitle.foreground#82C020
statusBar.background#4A7010
statusBar.debuggingBackground#C47008
statusBar.debuggingForeground#F5ECD0
statusBar.foreground#ECEFDC
statusBar.noFolderBackground#4A7010
statusBarItem.hoverBackground#5A7B2A
statusBarItem.prominentBackground#1C1C1C
statusBarItem.prominentForeground#9CD633
statusBarItem.prominentHoverBackground#1C2D34
statusBarItem.prominentHoverForeground#9CD633
statusBarItem.remoteBackground#1C1C1C
statusBarItem.remoteForeground#9CD633
symbolIcon.arrayForeground#21BAD6
symbolIcon.classForeground#9CD633
symbolIcon.colorForeground#9CD633
symbolIcon.constantForeground#D4913A
symbolIcon.constructorForeground#9CD633
symbolIcon.enumeratorForeground#D4913A
symbolIcon.enumeratorMemberForeground#21BAD6
symbolIcon.eventForeground#D4913A
symbolIcon.fieldForeground#93C5FD
symbolIcon.fileForeground#D8DBE4
symbolIcon.folderForeground#82C020
symbolIcon.functionForeground#21BAD6
symbolIcon.interfaceForeground#9CD633
symbolIcon.keyForeground#82C020
symbolIcon.keywordForeground#82C020
symbolIcon.methodForeground#21BAD6
symbolIcon.moduleForeground#82C020
symbolIcon.namespaceForeground#82C020
symbolIcon.nullForeground#9CD633
symbolIcon.numberForeground#D4913A
symbolIcon.objectForeground#93C5FD
symbolIcon.operatorForeground#21BAD6
symbolIcon.packageForeground#82C020
symbolIcon.propertyForeground#93C5FD
symbolIcon.referenceForeground#21BAD6
symbolIcon.snippetForeground#82C020
symbolIcon.stringForeground#C8A96E
symbolIcon.structForeground#9CD633
symbolIcon.textForeground#D8DBE4
symbolIcon.typeParameterForeground#7AAFE0
symbolIcon.unitForeground#D4913A
symbolIcon.variableForeground#93C5FD
tab.activeBackground#1C1C1C
tab.activeBorderTop#82C020
tab.activeForeground#9CD633
tab.border#262626
tab.hoverBackground#222222
tab.hoverForeground#9CD633
tab.inactiveBackground#161717
tab.inactiveForeground#636B77
tab.unfocusedActiveForeground#A0A8B8
tab.unfocusedInactiveForeground#505660
terminal.ansiBlack#1A1A1A
terminal.ansiBlue#21BAD6
terminal.ansiBrightBlack#484E58
terminal.ansiBrightBlue#5FF5FF
terminal.ansiBrightCyan#5FF5FF
terminal.ansiBrightGreen#9CD633
terminal.ansiBrightMagenta#D4913A
terminal.ansiBrightRed#F47070
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#F0C060
terminal.ansiCyan#21BAD6
terminal.ansiGreen#82C020
terminal.ansiMagenta#D4913A
terminal.ansiRed#F47070
terminal.ansiWhite#D8DBE4
terminal.ansiYellow#D4913A
terminal.background#161717
terminal.border#262626
terminal.foreground#D8DBE4
terminal.selectionBackground#82C02048
textBlockQuote.background#1C1C1C
textBlockQuote.border#D4913A
textCodeBlock.background#252525
textLink.activeForeground#9CD633
textLink.foreground#82C020
textPreformat.foreground#DA6B77
titleBar.activeBackground#161717
titleBar.activeForeground#E8EAF0
titleBar.border#262626
titleBar.inactiveBackground#1E1E1E
titleBar.inactiveForeground#666B75

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#F0F2F7	—
emphasis	—	—
strong	—	—
comment	#5C6670	italic
constant.character	#5FF5FF	—
constant.character.escape	#5FF5FF	—
constant.language	#5FF5FF	—
constant.numeric	#C05776	—
constant.regexp	#5A9FCC	—
entity.name.class, entity.name.type.class	#D4913A	—
entity.name.function	#7574A5	—
entity.name.tag	#6B9E3A	—
entity.other.attribute-name	#D4913A	—
entity.other.inherited-class	#D4913A	—
invalid.deprecated	#1C1C1C	—
invalid.illegal	#1C1C1C	—
keyword	#6B9E3A	—
keyword.operator	#7A8A9A	—
keyword.other.new	#6B9E3A	—
markup.bold	—	—
markup.changed	#F5A623	—
markup.deleted	#F47070	—
markup.inserted	#DCF8C6	—
meta.preprocessor	#7574A5	—
punctuation	#7A8A9A	—
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters	#7A8A9A	—
punctuation.definition.tag	#6B9E3A	—
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment	#5C6670	—
punctuation.section	#7A8A9A	—
punctuation.section.embedded.begin, punctuation.section.embedded.end	#6B9E3A	—
punctuation.terminator	#7A8A9A	—
punctuation.definition.variable	#6B9E3A	—
storage	#6B9E3A	—
string	#C2E69A	—
string.regexp	#5A9FCC	—
support.class	#D4913A	—
support.constant	#5FF5FF	—
support.function	#7574A5	—
support.function.construct	#6B9E3A	—
support.type	#D4913A	—
support.type.exception	#F47070	—
token.debug-token	#6B9E3A	—
token.error-token	#F47070	—
token.info-token	#7574A5	—
token.warn-token	#F5A623	—
variable.other	#93C5FD	—
variable.language	#6B9E3A	—
variable.parameter	#7AAFE0	—
punctuation.separator.pointer-access.c	#6B9E3A	—
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include	#C2E69A	—
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive	#6B9E3A	—
source.css constant.other.color.rgb-value	#C05776	—
source.css meta.property-value	#C2E69A	—
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword	#6B9E3A	—
source.css punctuation.definition.keyword	#6B9E3A	—
source.css support.type.property-name	#93C5FD	—
source.diff meta.diff.range.context	#7574A5	—
source.diff meta.diff.header.from-file	#7574A5	—
source.diff punctuation.definition.from-file	#7574A5	—
source.diff punctuation.definition.range	#7574A5	—
source.diff punctuation.definition.separator	#6B9E3A	—
source.go constant.other.placeholder.go	#6B9E3A	—
source.java comment.block.documentation.javadoc punctuation.definition.entity.html	#6B9E3A	—
source.java constant.other	#93C5FD	—
source.java keyword.other.documentation	#5C6670	—
source.java keyword.other.documentation.author.javadoc	#5C6670	—
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom	#5C6670	—
source.java keyword.other.documentation.see.javadoc	#5C6670	—
source.java meta.method-call meta.method	#7574A5	—
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc	#5C6670	—
source.java meta.tag.template.value.javadoc	#5C6670	—
source.java punctuation.definition.keyword.javadoc	#5C6670	—
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc	#454545	—
source.java storage.modifier.import	#6B9E3A	—
source.java storage.modifier.package	#6B9E3A	—
source.java storage.type	#D4913A	—
source.java storage.type.annotation	#C05776	—
source.java storage.type.generic	#D4913A	—
source.java storage.type.primitive	#6B9E3A	—
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function	#C05776	—
source.js meta.object-literal.key	#93C5FD	—
source.js storage.type.class.jsdoc	#D4913A	—
source.js string.template punctuation.definition.template-expression	#C2E69A	—
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object	#93C5FD	—
source.js support.type.primitive	#6B9E3A	—
source.js meta.var.expr variable.other.object	#93C5FD	—
source.js variable.other.readwrite.alias	#93C5FD	—
text.html.basic constant.character.entity.html	#6B9E3A	—
text.html.basic constant.other.inline-data	#C2E69A	—
text.html.basic meta.tag.sgml.doctype	#7574A5	—
text.html.basic punctuation.definition.entity	#6B9E3A	—
source.properties entity.name.section.group-title.ini	#D4913A	—
source.properties punctuation.separator.key-value.ini	#6B9E3A	—
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition	#C2E69A	—
markup.heading	#6B9E3A	—
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw	#D4913A	—
text.html.markdown markup.italic	—	—
text.html.markdown markup.underline.link	—	—
text.html.markdown beginning.punctuation.definition.list	#6B9E3A	—
text.html.markdown beginning.punctuation.definition.quote	#5C6670	—
text.html.markdown markup.quote	#7A8A9A	—
text.html.markdown punctuation.definition.heading	#6B9E3A	—
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string	#6B9E3A	—
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title	#7574A5	—
source.php meta.function-call, source.php meta.function-call.object	#7574A5	—
source.python entity.name.function.decorator, source.python meta.function.decorator support.type	#C05776	—
source.python meta.function-call, source.python meta.function-call.generic	#7574A5	—
source.python support.type	#D4913A	—
source.python variable.parameter.function.language	#93C5FD	—
source.python meta.function.parameters variable.parameter.function.language.special.self	#6B9E3A	—
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly	#6B9E3A	—
source.css.scss variable.interpolation	#93C5FD	—
source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function	#C05776	—
source.ts meta.object-literal.key, source.tsx meta.object-literal.key	#93C5FD	—
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function	#7574A5	—
source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class	#D4913A	—
source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json	#5FF5FF	—
source.ts support.variable, source.tsx support.variable	#93C5FD	—
text.xml entity.name.tag.namespace	#D4913A	—
text.xml keyword.other.doctype	#7574A5	—
text.xml meta.tag.preprocessor entity.name.tag	#7574A5	—
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string	#C2E69A	—
source.yaml entity.name.tag	#D4913A	—

VS Code preview

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

DevMedia Theme — DevMedia Dark Modern

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.background#13171C
activityBar.border#22283200
activityBar.foreground#82C020
activityBar.inactiveForeground#4A5262
activityBarBadge.background#82C020
activityBarBadge.foreground#0D1015
badge.background#324C08
badge.foreground#D8EFBC
breadcrumb.activeSelectionForeground#9CD633
breadcrumb.background#13171C
breadcrumb.focusForeground#9CD633
breadcrumb.foreground#606878
breadcrumbPicker.background#15191F
button.background#324C08
button.foreground#D8EFBC
button.hoverBackground#3E5E0C
button.secondaryBackground#1E2430
button.secondaryForeground#C8CDD8
button.secondaryHoverBackground#282E3C
contrastBorder#1C2028
debugIcon.breakpointDisabledForeground#363D4A
debugIcon.breakpointForeground#F07070
debugIcon.pauseForeground#D08830
debugIcon.startForeground#82C020
debugIcon.stopForeground#F07070
debugToolBar.background#15191F
debugToolBar.border#22283200
diffEditor.diagonalFill#1C2028
diffEditor.insertedLineBackground#82C02018
diffEditor.insertedTextBackground#82C02022
diffEditor.removedLineBackground#F0707018
diffEditor.removedTextBackground#F0707022
editor.background#181C22
editor.findMatchBackground#C8881860
editor.findMatchHighlightBackground#C8881830
editor.findRangeHighlightBackground#82C02015
editor.foreground#E8ECF2
editor.inactiveSelectionBackground#82C02022
editor.lineHighlightBackground#1C2028
editor.lineHighlightBorder#22283200
editor.rangeHighlightBackground#82C02018
editor.selectionBackground#82C02060
editor.selectionHighlightBackground#82C02035
editor.wordHighlightBackground#4A8FBC22
editor.wordHighlightStrongBackground#4A8FBC38
editorBracketHighlight.foreground1#82C020
editorBracketHighlight.foreground2#18B8C8
editorBracketHighlight.foreground3#A098E8
editorBracketHighlight.foreground4#D89038
editorBracketHighlight.foreground5#6E9FD0
editorBracketHighlight.foreground6#D86848
editorBracketHighlight.unexpectedBracket.foreground#F07070
editorBracketMatch.background#82C02035
editorBracketMatch.border#6EA018
editorCursor.foreground#9CD633
editorError.border#F0707000
editorError.foreground#F07070
editorGhostText.background#00000000
editorGhostText.border#00000000
editorGhostText.foreground#5A7080
editorGroupHeader.noTabsBackground#13171C
editorGroupHeader.tabsBackground#13171C
editorGroupHeader.tabsBorder#22283200
editorGutter.addedBackground#5A9010
editorGutter.deletedBackground#F07070
editorGutter.modifiedBackground#18B0C8
editorHint.border#82C02000
editorHint.foreground#82C020
editorHoverWidget.background#15191F
editorHoverWidget.border#22283200
editorIndentGuide.activeBackground1#82C02040
editorIndentGuide.background1#1E2430
editorInfo.border#18B0C800
editorInfo.foreground#18B0C8
editorInlayHint.background#00000000
editorInlayHint.foreground#5A7080
editorInlayHint.parameterBackground#00000000
editorInlayHint.parameterForeground#D8B060
editorInlayHint.typeBackground#00000000
editorInlayHint.typeForeground#6E9FD0
editorLineNumber.activeForeground#6EA018
editorLineNumber.foreground#2E3C4E
editorOverviewRuler.addedForeground#82C020
editorOverviewRuler.border#1C2028
editorOverviewRuler.deletedForeground#F07070
editorOverviewRuler.errorForeground#F07070
editorOverviewRuler.infoForeground#18B0C8
editorOverviewRuler.modifiedForeground#18B0C8
editorOverviewRuler.warningForeground#D08830
editorRuler.foreground#1E2430
editorSuggestWidget.background#15191F
editorSuggestWidget.border#22283200
editorSuggestWidget.foreground#C8CDD8
editorSuggestWidget.highlightForeground#9CD633
editorSuggestWidget.selectedBackground#82C02040
editorWarning.border#D0883000
editorWarning.foreground#D08830
editorWhitespace.foreground#1E2430
editorWidget.background#15191F
editorWidget.border#6EA018
editorWidget.foreground#E8ECF2
extensionButton.prominentBackground#324C08
extensionButton.prominentForeground#D8EFBC
extensionButton.prominentHoverBackground#3E5E0C
focusBorder#6EA018
gitDecoration.addedResourceForeground#82C020
gitDecoration.conflictingResourceForeground#D08830
gitDecoration.deletedResourceForeground#F07070
gitDecoration.ignoredResourceForeground#363D4A
gitDecoration.modifiedResourceForeground#18B0C8
gitDecoration.submoduleResourceForeground#82C020
gitDecoration.untrackedResourceForeground#9CD633
input.background#13171C
input.border#22283200
input.foreground#E8ECF2
input.placeholderForeground#484F5E
inputOption.activeBackground#82C02020
inputOption.activeBorder#82C020
inputOption.activeForeground#9CD633
inputValidation.errorBackground#F0707015
inputValidation.errorBorder#F07070
inputValidation.infoBackground#18B0C815
inputValidation.infoBorder#18B0C8
inputValidation.warningBackground#D0883015
inputValidation.warningBorder#D08830
list.activeSelectionBackground#82C02038
list.activeSelectionForeground#9CD633
list.dropBackground#82C02030
list.focusBackground#82C02048
list.focusForeground#9CD633
list.highlightForeground#9CD633
list.hoverBackground#222830
list.hoverForeground#E8ECF2
list.inactiveSelectionBackground#82C0201A
list.inactiveSelectionForeground#B8BDC8
menu.background#15191F
menu.foreground#C8CDD8
menu.selectionBackground#82C02030
menu.selectionForeground#9CD633
menu.separatorBackground#1E2430
menubar.selectionBackground#82C02028
menubar.selectionForeground#9CD633
merge.border#1C2028
merge.currentContentBackground#82C02015
merge.currentHeaderBackground#82C02022
merge.incomingContentBackground#18B0C815
merge.incomingHeaderBackground#18B0C822
minimap.background#13171C
minimap.errorHighlight#F07070
minimap.findMatchHighlight#C8881838
minimap.selectionHighlight#82C02040
minimap.warningHighlight#D08830
minimapSlider.activeBackground#82C02058
minimapSlider.background#82C02020
minimapSlider.hoverBackground#82C02040
notificationCenter.border#6EA018
notificationCenterHeader.background#15191F
notificationCenterHeader.foreground#9CD633
notificationLink.foreground#18B0C8
notifications.background#15191F
notifications.border#22283200
notifications.foreground#C8CDD8
panel.background#13171C
panel.border#22283200
panelSection.border#22283200
panelSectionHeader.background#181C22
panelSectionHeader.foreground#82C020
panelTitle.activeBorder#6EA018
panelTitle.activeForeground#9CD633
panelTitle.inactiveForeground#484F5E
peekView.border#6EA018
peekViewEditor.background#13171C
peekViewEditor.matchHighlightBackground#C8881830
peekViewResult.background#15191F
peekViewResult.matchHighlightBackground#82C02030
peekViewResult.selectionBackground#82C02040
peekViewTitle.background#13171C
peekViewTitleDescription.foreground#505868
peekViewTitleLabel.foreground#9CD633
pickerGroup.border#1C2028
pickerGroup.foreground#18B0C8
progressBar.background#82C020
quickInput.background#181C22
scrollbarSlider.activeBackground#82C02055
scrollbarSlider.background#82C02020
scrollbarSlider.hoverBackground#82C02038
settings.headerForeground#E8ECF2
settings.modifiedItemIndicator#D08830
sideBar.background#1C2028
sideBar.border#22283200
sideBar.foreground#C0C6D4
sideBarSectionHeader.background#13171C
sideBarSectionHeader.border#22283200
sideBarSectionHeader.foreground#6A9018
sideBarTitle.foreground#82C020
statusBar.background#324C08
statusBar.debuggingBackground#A86000
statusBar.debuggingForeground#F5ECD0
statusBar.foreground#D8EFBC
statusBar.noFolderBackground#324C08
statusBarItem.hoverBackground#4E6E22
statusBarItem.prominentBackground#13171C
statusBarItem.prominentForeground#9CD633
statusBarItem.prominentHoverBackground#1A2A30
statusBarItem.prominentHoverForeground#9CD633
statusBarItem.remoteBackground#13171C
statusBarItem.remoteForeground#9CD633
symbolIcon.arrayForeground#18B0C8
symbolIcon.classForeground#9CD633
symbolIcon.colorForeground#9CD633
symbolIcon.constantForeground#D08830
symbolIcon.constructorForeground#9CD633
symbolIcon.enumeratorForeground#D08830
symbolIcon.enumeratorMemberForeground#18B0C8
symbolIcon.eventForeground#D08830
symbolIcon.fieldForeground#88B8F0
symbolIcon.fileForeground#C8CDD8
symbolIcon.folderForeground#82C020
symbolIcon.functionForeground#18B0C8
symbolIcon.interfaceForeground#9CD633
symbolIcon.keyForeground#82C020
symbolIcon.keywordForeground#82C020
symbolIcon.methodForeground#18B0C8
symbolIcon.moduleForeground#82C020
symbolIcon.namespaceForeground#82C020
symbolIcon.nullForeground#9CD633
symbolIcon.numberForeground#D08830
symbolIcon.objectForeground#88B8F0
symbolIcon.operatorForeground#18B0C8
symbolIcon.packageForeground#82C020
symbolIcon.propertyForeground#88B8F0
symbolIcon.referenceForeground#18B0C8
symbolIcon.snippetForeground#82C020
symbolIcon.stringForeground#C8A060
symbolIcon.structForeground#9CD633
symbolIcon.textForeground#C8CDD8
symbolIcon.typeParameterForeground#6E9FD0
symbolIcon.unitForeground#D08830
symbolIcon.variableForeground#88B8F0
tab.activeBackground#181C22
tab.activeBorderTop#6EA018
tab.activeForeground#9CD633
tab.border#22283200
tab.hoverBackground#1C2230
tab.hoverForeground#9CD633
tab.inactiveBackground#13171C
tab.inactiveForeground#484F5E
tab.unfocusedActiveForeground#8890A0
tab.unfocusedInactiveForeground#363D4A
terminal.ansiBlack#13171C
terminal.ansiBlue#18B0C8
terminal.ansiBrightBlack#404858
terminal.ansiBrightBlue#50E8FF
terminal.ansiBrightCyan#50E8FF
terminal.ansiBrightGreen#9CD633
terminal.ansiBrightMagenta#C88830
terminal.ansiBrightRed#F07070
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#E8B840
terminal.ansiCyan#18B0C8
terminal.ansiGreen#82C020
terminal.ansiMagenta#C88830
terminal.ansiRed#F07070
terminal.ansiWhite#C8CDD8
terminal.ansiYellow#C88830
terminal.background#13171C
terminal.border#22283200
terminal.foreground#C8CDD8
terminal.selectionBackground#82C02040
textBlockQuote.background#181C22
textBlockQuote.border#C88830
textCodeBlock.background#1C2028
textLink.activeForeground#9CD633
textLink.foreground#82C020
textPreformat.foreground#D86070
titleBar.activeBackground#13171C
titleBar.activeForeground#D8DCE8
titleBar.border#22283200
titleBar.inactiveBackground#181C22
titleBar.inactiveForeground#484F5E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#bbbbbbff	—
emphasis	—	italic
strong	—	—
comment	#858585	—
constant.character	#87a1c5	—
constant.character.escape	#87a1c5	—
constant.language	#81b38c	—
constant.numeric	#c05776	—
constant.regexp	#87a1c5	—
entity.name.class, entity.name.type.class	#7574a5	—
entity.name.function	#7574a5	—
entity.name.tag	#81b38c	—
entity.other.attribute-name	#7574a5	—
entity.other.inherited-class	#7574a5	—
invalid.deprecated	#bbbbbb	—
invalid.illegal	#bbbbbb	—
keyword	#81b38c	—
keyword.operator	#81b38c	—
keyword.other.new	#81b38c	—
markup.bold	—	—
markup.changed	#87a1c5	—
markup.deleted	#c05776	—
markup.inserted	#a7ecb7	—
meta.preprocessor	#5E81AC	—
punctuation	#e8e8e8	—
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters	#e8e8e8	—
punctuation.definition.tag	#81b38c	—
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment	#858585	—
punctuation.section	#e8e8e8	—
punctuation.section.embedded.begin, punctuation.section.embedded.end	#81b38c	—
punctuation.terminator	#81b38c	—
punctuation.definition.variable	#81b38c	—
storage	#81b38c	—
string	#a7ecb7	—
string.regexp	#87a1c5	—
support.class	#7574a5	—
support.constant	#81b38c	—
support.function	#7574a5	—
support.function.construct	#81b38c	—
support.type	#7574a5	—
support.type.exception	#7574a5	—
token.debug-token	#507057	—
token.error-token	#c05776	—
token.info-token	#7574a5	—
token.warn-token	#87a1c5	—
variable.other	#bbbbbb	—
variable.language	#81b38c	—
variable.parameter	#bbbbbb	—
punctuation.separator.pointer-access.c	#81b38c	—
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include	#7574a5	—
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive	#5E81AC	—
source.css constant.other.color.rgb-value	#507057	—
source.css meta.property-value	#7574a5	—
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword	#a3be8c	—
source.css punctuation.definition.keyword	#81b38c	—
source.css support.type.property-name	#bbbbbb	—
source.diff meta.diff.range.context	#7574a5	—
source.diff meta.diff.header.from-file	#7574a5	—
source.diff punctuation.definition.from-file	#7574a5	—
source.diff punctuation.definition.range	#7574a5	—
source.diff punctuation.definition.separator	#81b38c	—
source.go constant.other.placeholder.go	#87a1c5	—
source.java comment.block.documentation.javadoc punctuation.definition.entity.html	#81b38c	—
source.java constant.other	#bbbbbb	—
source.java keyword.other.documentation	#7574a5	—
source.java keyword.other.documentation.author.javadoc	#7574a5	—
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom	#7574a5	—
source.java keyword.other.documentation.see.javadoc	#7574a5	—
source.java meta.method-call meta.method	#7574a5	—
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc	#7574a5	—
source.java meta.tag.template.value.javadoc	#7574a5	—
source.java punctuation.definition.keyword.javadoc	#7574a5	—
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc	#454545	—
source.java storage.modifier.import	#7574a5	—
source.java storage.modifier.package	#7574a5	—
source.java storage.type	#7574a5	—
source.java storage.type.annotation	#a3be8c	—
source.java storage.type.generic	#7574a5	—
source.java storage.type.primitive	#81b38c	—
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function	#a3be8c	—
source.js meta.object-literal.key	#7574a5	—
source.js storage.type.class.jsdoc	#7574a5	—
source.js string.template punctuation.definition.template-expression	#5E81AC	—
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object	#bbbbbb	—
source.js support.type.primitive	#81b38c	—
source.js meta.var.expr variable.other.object	#7574a5	—
source.js variable.other.readwrite.alias	#7574a5	—
text.html.basic constant.character.entity.html	#87a1c5	—
text.html.basic constant.other.inline-data	#a3be8c	italic
text.html.basic meta.tag.sgml.doctype	#5E81AC	—
text.html.basic punctuation.definition.entity	#81b38c	—
source.properties entity.name.section.group-title.ini	#7574a5	—
source.properties punctuation.separator.key-value.ini	#81b38c	—
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition	#507057	—
markup.heading	#81b38c	—
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw	#7574a5	—
text.html.markdown markup.italic	—	italic
text.html.markdown markup.underline.link	—	underline
text.html.markdown beginning.punctuation.definition.list	#81b38c	—
text.html.markdown beginning.punctuation.definition.quote	#7574a5	—
text.html.markdown markup.quote	#454545	—
text.html.markdown punctuation.definition.heading	#81b38c	—
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string	#81b38c	—
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title	#7574a5	—
source.php meta.function-call, source.php meta.function-call.object	#7574a5	—
source.python entity.name.function.decorator, source.python meta.function.decorator support.type	#a3be8c	—
source.python meta.function-call, source.python meta.function-call.generic	#7574a5	—
source.python support.type	#7574a5	—
source.python variable.parameter.function.language	#bbbbbb	—
source.python meta.function.parameters variable.parameter.function.language.special.self	#81b38c	—
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly	#81b38c	—
source.css.scss variable.interpolation	#bbbbbb	italic
source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function	#a3be8c	—
source.ts meta.object-literal.key, source.tsx meta.object-literal.key	#bbbbbb	—
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function	#7574a5	—
source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class	#7574a5	—
source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json	#7574a5	—
source.ts support.variable, source.tsx support.variable	#bbbbbb	—
text.xml entity.name.tag.namespace	#7574a5	—
text.xml keyword.other.doctype	#5E81AC	—
text.xml meta.tag.preprocessor entity.name.tag	#5E81AC	—
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string	#a3be8c	italic
source.yaml entity.name.tag	#7574a5	—

VS Code preview

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

DevMedia Theme — DevMedia Light

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#BCC1CB
activityBar.border#B0B6C0
activityBar.foreground#1A2B32
activityBar.inactiveForeground#555D6B
activityBarBadge.background#2E6B15
activityBarBadge.foreground#EEF1F0
badge.background#2E6B15
badge.foreground#EEF1F0
breadcrumb.activeSelectionForeground#2E6B15
breadcrumb.background#F2F4F7
breadcrumb.focusForeground#1A2B32
breadcrumb.foreground#555D6B
breadcrumbPicker.background#E9EBF0
button.background#2E6B15
button.foreground#EEF1F0
button.hoverBackground#5C8A28
button.secondaryBackground#E6E9EF
button.secondaryForeground#1A2B32
button.secondaryHoverBackground#DEE1E8
contrastBorder#D4D8E0
debugIcon.breakpointDisabledForeground#9CA3AF
debugIcon.breakpointForeground#C0281E
debugIcon.pauseForeground#8F5500
debugIcon.startForeground#2E6B15
debugIcon.stopForeground#C0281E
debugToolBar.background#E9EBF0
debugToolBar.border#2E6B15
diffEditor.diagonalFill#DEE1E8
diffEditor.insertedLineBackground#6F9A3520
diffEditor.insertedTextBackground#6F9A3528
diffEditor.removedLineBackground#C0281E20
diffEditor.removedTextBackground#C0281E28
editor.background#F2F4F7
editor.findMatchBackground#BBDB6070
editor.findMatchHighlightBackground#BBDB6040
editor.findRangeHighlightBackground#6F9A3515
editor.foreground#1A2B32
editor.inactiveSelectionBackground#6F9A3520
editor.lineHighlightBackground#E6E9EF
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#6F9A3518
editor.selectionBackground#6F9A3548
editor.selectionHighlightBackground#6F9A3530
editor.wordHighlightBackground#6F9A3528
editor.wordHighlightStrongBackground#6F9A3538
editorBracketMatch.background#6F9A3530
editorBracketMatch.border#2E6B15
editorCursor.foreground#1A2B32
editorError.border#C0281E00
editorError.foreground#C0281E
editorGroupHeader.noTabsBackground#E6E9EF
editorGroupHeader.tabsBackground#E6E9EF
editorGroupHeader.tabsBorder#D4D8E0
editorGutter.addedBackground#2E6B15
editorGutter.deletedBackground#C0281E
editorGutter.modifiedBackground#006A8F
editorHint.border#6F9A3500
editorHint.foreground#2E6B15
editorHoverWidget.background#E9EBF0
editorHoverWidget.border#2E6B15
editorIndentGuide.activeBackground1#6F9A3548
editorIndentGuide.background1#E0E3EA
editorInfo.border#0780A800
editorInfo.foreground#006A8F
editorLineNumber.activeForeground#4A5568
editorLineNumber.foreground#A8B0BE
editorOverviewRuler.addedForeground#2E6B15
editorOverviewRuler.border#E0E3EA
editorOverviewRuler.deletedForeground#C0281E
editorOverviewRuler.errorForeground#C0281E
editorOverviewRuler.infoForeground#006A8F
editorOverviewRuler.modifiedForeground#006A8F
editorOverviewRuler.warningForeground#8F5500
editorRuler.foreground#E0E3EA
editorSuggestWidget.background#E9EBF0
editorSuggestWidget.border#D4D8E0
editorSuggestWidget.foreground#1A2B32
editorSuggestWidget.highlightForeground#2E6B15
editorSuggestWidget.selectedBackground#6F9A3540
editorWarning.border#C4730A00
editorWarning.foreground#8F5500
editorWhitespace.foreground#CDD1DA
editorWidget.background#E9EBF0
editorWidget.border#D4D8E0
editorWidget.foreground#1A2B32
extensionButton.prominentBackground#2E6B15
extensionButton.prominentForeground#EEF1F0
extensionButton.prominentHoverBackground#1A2B32
focusBorder#2E6B15
gitDecoration.addedResourceForeground#2E6B15
gitDecoration.conflictingResourceForeground#8F5500
gitDecoration.deletedResourceForeground#C0281E
gitDecoration.ignoredResourceForeground#9CA3AF
gitDecoration.modifiedResourceForeground#006A8F
gitDecoration.submoduleResourceForeground#7C22CC
gitDecoration.untrackedResourceForeground#2E6B15
input.background#F8F9FA
input.border#C4C9D4
input.foreground#1A2B32
input.placeholderForeground#9CA3AF
inputOption.activeBackground#6F9A3522
inputOption.activeBorder#2E6B15
inputOption.activeForeground#1A2B32
inputValidation.errorBackground#C0281E18
inputValidation.errorBorder#C0281E
inputValidation.infoBackground#0780A818
inputValidation.infoBorder#006A8F
inputValidation.warningBackground#C4730A18
inputValidation.warningBorder#8F5500
list.activeSelectionBackground#6F9A3545
list.activeSelectionForeground#1A2B32
list.dropBackground#6F9A3535
list.focusBackground#6F9A3555
list.focusForeground#1A2B32
list.highlightForeground#2E6B15
list.hoverBackground#B8BDC7
list.hoverForeground#1A2B32
list.inactiveSelectionBackground#6F9A3530
list.inactiveSelectionForeground#374151
menu.background#E9EBF0
menu.foreground#1A2B32
menu.selectionBackground#6F9A3530
menu.selectionForeground#1A2B32
menu.separatorBackground#D4D8E0
menubar.selectionBackground#6F9A3530
menubar.selectionForeground#1A2B32
merge.border#D4D8E0
merge.currentContentBackground#6F9A3528
merge.currentHeaderBackground#6F9A3532
merge.incomingContentBackground#0780A828
merge.incomingHeaderBackground#0780A832
minimap.background#F0F2F5
minimap.errorHighlight#C0281E
minimap.findMatchHighlight#BBDB6060
minimap.selectionHighlight#6F9A3538
minimap.warningHighlight#8F5500
minimapSlider.activeBackground#9CA3AF68
minimapSlider.background#9CA3AF28
minimapSlider.hoverBackground#9CA3AF48
notificationCenter.border#D4D8E0
notificationCenterHeader.background#DEE1E8
notificationCenterHeader.foreground#1A2B32
notificationLink.foreground#006A8F
notifications.background#E9EBF0
notifications.border#2E6B15
notifications.foreground#1A2B32
panel.background#F2F4F7
panel.border#D4D8E0
panelSection.border#D4D8E0
panelSectionHeader.background#E6E9EF
panelSectionHeader.foreground#1A2B32
panelTitle.activeBorder#2E6B15
panelTitle.activeForeground#1A2B32
panelTitle.inactiveForeground#555D6B
peekView.border#2E6B15
peekViewEditor.background#E6E9EF
peekViewEditor.matchHighlightBackground#BBDB6050
peekViewResult.background#E9EBF0
peekViewResult.matchHighlightBackground#BBDB6050
peekViewResult.selectionBackground#6F9A3540
peekViewTitle.background#DEE1E8
peekViewTitleDescription.foreground#555D6B
peekViewTitleLabel.foreground#1A2B32
pickerGroup.border#D4D8E0
pickerGroup.foreground#006A8F
progressBar.background#2E6B15
quickInput.background#F2F4F7
scrollbarSlider.activeBackground#9CA3AF80
scrollbarSlider.background#9CA3AF40
scrollbarSlider.hoverBackground#9CA3AF60
settings.headerForeground#1A2B32
settings.modifiedItemIndicator#8F5500
sideBar.background#C8CDD6
sideBar.border#B0B6C0
sideBar.foreground#1A2B32
sideBarSectionHeader.background#BCC1CB
sideBarSectionHeader.border#B0B6C0
sideBarSectionHeader.foreground#1A2B32
sideBarTitle.foreground#1A2B32
statusBar.background#5C8A28
statusBar.border#4A7020
statusBar.debuggingBackground#8F5500
statusBar.debuggingForeground#EEF1F0
statusBar.foreground#EEF1F0
statusBar.noFolderBackground#DEE1E8
statusBar.noFolderForeground#1A2B32
symbolIcon.arrayForeground#006A8F
symbolIcon.classForeground#8F5500
symbolIcon.colorForeground#2E6B15
symbolIcon.constantForeground#8F5500
symbolIcon.constructorForeground#8F5500
symbolIcon.enumeratorForeground#8F5500
symbolIcon.enumeratorMemberForeground#006A8F
symbolIcon.eventForeground#8F5500
symbolIcon.fieldForeground#0369A1
symbolIcon.fileForeground#1A2B32
symbolIcon.folderForeground#2E6B15
symbolIcon.functionForeground#2E6B15
symbolIcon.interfaceForeground#8F5500
symbolIcon.keyForeground#2E6B15
symbolIcon.keywordForeground#0369A1
symbolIcon.methodForeground#2E6B15
symbolIcon.moduleForeground#8F5500
symbolIcon.namespaceForeground#8F5500
symbolIcon.nullForeground#7C22CC
symbolIcon.numberForeground#8F5500
symbolIcon.objectForeground#0369A1
symbolIcon.operatorForeground#006A8F
symbolIcon.packageForeground#8F5500
symbolIcon.propertyForeground#0369A1
symbolIcon.referenceForeground#006A8F
symbolIcon.snippetForeground#2E6B15
symbolIcon.stringForeground#1A8040
symbolIcon.structForeground#8F5500
symbolIcon.textForeground#1A2B32
symbolIcon.typeParameterForeground#8F5500
symbolIcon.unitForeground#8F5500
symbolIcon.variableForeground#0369A1
tab.activeBackground#F2F4F7
tab.activeBorder#2E6B15
tab.activeBorderTop#2E6B15
tab.activeForeground#1A2B32
tab.border#D4D8E0
tab.hoverBackground#DEE1E8
tab.hoverForeground#1A2B32
tab.inactiveBackground#E6E9EF
tab.inactiveForeground#555D6B
tab.unfocusedActiveForeground#374151
tab.unfocusedInactiveForeground#9CA3AF
terminal.ansiBlack#1A1A1A
terminal.ansiBlue#0369A1
terminal.ansiBrightBlack#6B7280
terminal.ansiBrightBlue#0284C7
terminal.ansiBrightCyan#06B6D4
terminal.ansiBrightGreen#2E6B15
terminal.ansiBrightMagenta#9333EA
terminal.ansiBrightRed#EF4444
terminal.ansiBrightWhite#F8F9FA
terminal.ansiBrightYellow#D4900A
terminal.ansiCyan#0891B2
terminal.ansiGreen#5A8A28
terminal.ansiMagenta#7C22CC
terminal.ansiRed#C0281E
terminal.ansiWhite#F0F2F5
terminal.ansiYellow#8F5500
terminal.background#F2F4F7
terminal.border#D4D8E0
terminal.foreground#1A2B32
terminal.selectionBackground#6F9A3548
textBlockQuote.background#F0F2F5
textBlockQuote.border#8F5500
textCodeBlock.background#1A1A1A
textLink.activeForeground#1A2B32
textLink.foreground#2E6B15
textPreformat.foreground#A8C040
titleBar.activeBackground#5C8A28
titleBar.activeForeground#EEF1F0
titleBar.border#4A7020
titleBar.inactiveBackground#4A7020
titleBar.inactiveForeground#C8D4C0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#555D6B	italic
string, string.quoted, string.template	#166E35
string.template meta.template.expression	#1A2B32
punctuation.definition.template-expression	#006A8F
constant.numeric, constant.language.numeric	#9A4E00
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined	#7C22CC
keyword, keyword.control, storage.type, storage.modifier	#0369A1	—
keyword.control.import, keyword.control.export, keyword.control.from	#7C22CC	—
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.logical	#006A8F
storage.type.function.arrow	#006A8F	—
entity.name.function, meta.function-call, support.function	#2E6B15
variable.parameter, meta.parameters variable	#0369A1
entity.name.class, entity.name.type.class, support.class	#9A4E00	—
variable, variable.other	#1A2B32
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key	#0369A1
variable.other.constant, variable.other.enummember	#9A4E00
variable.language.this, variable.language.super	#7C22CC
entity.name.tag, meta.tag	#0369A1
entity.other.attribute-name	#9A4E00
support.class.component, entity.name.tag.tsx, entity.name.tag.jsx	#9A4E00	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss	#2E6B15
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss	#9A4E00
support.type.property-name.css, support.type.property-name.scss	#0369A1
support.constant.property-value.css, support.constant.property-value.scss	#2E6B15
keyword.other.unit.css, keyword.other.unit.scss	#9A4E00
support.type.property-name.json	#0369A1	—
string.quoted.double.json	#166E35
constant.numeric.json	#9A4E00
constant.language.json	#7C22CC
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, punctuation.separator.array.json	#7A8494
entity.name.type, support.type	#9A4E00
entity.name.type.interface	#9A4E00
entity.name.type.parameter	#7C22CC
meta.function.decorator.python, entity.name.function.decorator.python	#9A4E00
variable.language.special.self.python	#7C22CC
support.function.magic.python	#7C22CC
storage.type.annotation.java	#9A4E00
meta.import.java, storage.modifier.import.java	#7C22CC	—
entity.name.package.java, support.other.package.java	#0369A1
entity.name.type.class.java, support.class.java	#9A4E00
storage.modifier.static.java	#7C22CC
keyword.other.DML.sql, keyword.other.DDL.sql	#0369A1	—
markup.heading, entity.name.section.markdown	#1A2B32	—
markup.bold	#9A4E00	—
markup.italic	#006A8F	italic
markup.inline.raw, markup.fenced_code.block.markdown	#2E6B15
markup.underline.link	#006A8F	underline
markup.quote	#555D6B
invalid, invalid.illegal	#C0281E
invalid.deprecated	#8F5500	strikethrough
string.regexp	#7C22CC
constant.character.escape.regexp	#9A4E00	—
constant.character.escape	#9A4E00
punctuation	#4A5568
punctuation.separator, punctuation.terminator	#555D6B
variable.other.php, punctuation.definition.variable.php	#0369A1
keyword.control.php, keyword.other.php, storage.type.php	#0369A1	—
entity.name.function.php, support.function.php, support.function.builtin.php	#2E6B15
entity.name.type.class.php, support.class.php, variable.other.class.php	#9A4E00	—
constant.other.php, support.constant.core.php, variable.other.constant.php	#7C22CC
entity.name.function.method.php, support.function.magic.php	#2E6B15