Aofuji Light Theme

Name: Aofuji Light Theme
Author: DSRKafuU

Publisher: DSRKafuUThemes in package: 4

A clean light theme extended from Aofuji.

Open in VS Code GitHub

Color themes

VS Code preview

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

Aofuji Light Theme — Aofuji

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.activeBorder#8aa2d3
activityBar.activeFocusBorder#8aa2d3
activityBar.background#f3f3f3
activityBar.border#3f455124
activityBar.foreground#8aa2d3
activityBar.inactiveForeground#3f4551bf
activityBarBadge.background#8aa2d3
activityBarBadge.foreground#fffffd
activityBarTop.activeBorder#8aa2d3
activityBarTop.background#f3f3f3
activityBarTop.foreground#8aa2d3
activityBarTop.inactiveForeground#3f4551bf
agents.background#f3f3f3
agentsBadge.background#8aa2d3
agentsBadge.foreground#fffffd
agentsChatInput.background#fafafa
agentsChatInput.border#3f455133
agentsChatInput.focusBorder#8aa2d3
agentsChatInput.foreground#3f4551
agentsChatInput.placeholderForeground#3f455180
agentsGradient.tintColor#8aa2d3
agentsNewSessionButton.background#ffffff00
agentsNewSessionButton.border#3f455133
agentsNewSessionButton.foreground#3f4551
agentsNewSessionButton.hoverBackground#8aa2d333
agentsPanel.background#fffffd
agentsPanel.border#3f455124
agentsPanel.foreground#3f4551
agentStatusIndicator.background#fffffd
agentsUnreadBadge.background#8aa2d3
agentsUnreadBadge.foreground#fffffd
badge.background#8aa2d3cc
badge.foreground#fffffd
breadcrumb.activeSelectionForeground#3f4551
breadcrumb.background#fffffd
breadcrumb.focusForeground#3f4551
breadcrumb.foreground#3f4551bf
breadcrumbPicker.background#fafafa
button.background#8aa2d3cc
button.border#8aa2d3
button.foreground#fffffd
button.hoverBackground#cfd5e2
button.secondaryBackground#f3f3f3
button.secondaryBorder#3f455124
button.secondaryForeground#3f4551
button.secondaryHoverBackground#8aa2d333
chat.inputWorkingBorderColor1#8aa2d3cc
chat.inputWorkingBorderColor2#8aa2d399
chat.inputWorkingBorderColor3#8aa2d366
chat.requestBubbleBackground#8aa2d31f
chat.requestBubbleHoverBackground#8aa2d333
chat.thinkingShimmer#3f455180
checkbox.background#fffffd
checkbox.border#3f455133
checkbox.foreground#3f4551bf
commandCenter.activeBackground#8aa2d333
commandCenter.activeBorder#8aa2d3
commandCenter.activeForeground#3f4551
commandCenter.background#fffffd
commandCenter.border#3f455133
commandCenter.foreground#3f4551
commandCenter.inactiveForeground#3f4551bf
descriptionForeground#3f4551bf
disabledForeground#3f455180
dropdown.background#fffffd
dropdown.border#3f455133
dropdown.foreground#3f4551bf
dropdown.listBackground#fffffd
editor.background#fffffd
editor.findMatchBackground#ff994099
editor.findMatchHighlightBackground#ff994066
editor.findRangeHighlightBackground#f3f3f3aa
editor.foreground#3f4551d8
editor.hoverHighlightBackground#8aa2d366
editor.inactiveSelectionBackground#f3f3f3aa
editor.lineHighlightBackground#f3f3f3
editor.rangeHighlightBackground#8aa2d31f
editor.selectionBackground#8aa2d333
editor.selectionHighlightBackground#8aa2d31f
editor.wordHighlightBackground#8aa2d32b
editor.wordHighlightStrongBackground#8aa2d33d
editorBracketHighlight.foreground1#6484c5e6
editorBracketHighlight.foreground2#9668c5e6
editorBracketHighlight.foreground3#2cb300d9
editorBracketHighlight.foreground4#f97e25d9
editorBracketHighlight.foreground5#2293e3d9
editorBracketHighlight.foreground6#ee6565d9
editorBracketHighlight.unexpectedBracket.foreground#ee6565
editorBracketMatch.background#ff994066
editorBracketMatch.border#ffffff00
editorBracketPairGuide.activeBackground1#6484c599
editorBracketPairGuide.activeBackground2#9668c599
editorBracketPairGuide.activeBackground3#2cb30099
editorBracketPairGuide.activeBackground4#f97e2599
editorBracketPairGuide.activeBackground5#2293e399
editorBracketPairGuide.activeBackground6#ee656599
editorBracketPairGuide.background1#6484c540
editorBracketPairGuide.background2#9668c540
editorBracketPairGuide.background3#2cb30040
editorBracketPairGuide.background4#f97e2540
editorBracketPairGuide.background5#2293e340
editorBracketPairGuide.background6#ee656540
editorCodeLens.foreground#3f4551bf
editorCursor.foreground#3f4551
editorGroup.border#3f45514d
editorGroupHeader.noTabsBackground#f3f3f3
editorGroupHeader.tabsBackground#f3f3f3
editorGroupHeader.tabsBorder#3f455124
editorHoverWidget.background#fafafa
editorHoverWidget.border#3f455124
editorHoverWidget.foreground#3f4551
editorLineNumber.activeForeground#8aa2d3
editorLineNumber.foreground#3f455166
editorLink.activeForeground#8aa2d3
editorRuler.foreground#3f455124
editorSuggestWidget.background#fafafa
editorSuggestWidget.border#3f455124
editorSuggestWidget.focusHighlightForeground#3f4551d8
editorSuggestWidget.focusOutline#8aa2d3
editorSuggestWidget.foreground#3f4551d8
editorSuggestWidget.highlightForeground#3f4551d8
editorSuggestWidget.selectedBackground#8aa2d366
editorSuggestWidget.selectedForeground#3f4551d8
editorSuggestWidget.selectedIconForeground#3f4551d8
editorUnnecessaryCode.opacity#ffffff99
editorWhitespace.foreground#3f455133
editorWidget.background#fafafa
editorWidget.border#3f455124
editorWidget.foreground#3f4551
errorForeground#ee6565
focusBorder#8aa2d3cc
foreground#3f4551
icon.foreground#3f4551bf
input.background#fffffd
input.border#3f455124
input.foreground#3f4551bf
input.placeholderForeground#3f455180
inputOption.activeBackground#8aa2d333
inputOption.activeBorder#8aa2d3
inputOption.activeForeground#3f4551
inputValidation.errorBackground#ee656533
inputValidation.errorBorder#ee6565
inputValidation.errorForeground#3f4551
inputValidation.infoBackground#8aa2d333
inputValidation.infoBorder#8aa2d3
inputValidation.infoForeground#3f4551
inputValidation.warningBackground#ff994033
inputValidation.warningBorder#ff9940
inputValidation.warningForeground#3f4551
list.activeSelectionBackground#8aa2d399
list.activeSelectionForeground#fffffd
list.deemphasizedForeground#3f4551bf
list.dropBackground#8aa2d399
list.errorForeground#ee6565
list.filterMatchBackground#ff994066
list.focusBackground#8aa2d399
list.focusForeground#3f4551
list.focusOutline#8aa2d3
list.highlightForeground#8aa2d3
list.hoverBackground#8aa2d333
list.hoverForeground#3f4551
list.inactiveSelectionBackground#8aa2d333
list.inactiveSelectionForeground#3f4551
list.warningForeground#f97e25
listFilterWidget.background#fffffd
listFilterWidget.noMatchesOutline#ff9940cc
listFilterWidget.outline#8aa2d3cc
menu.background#fffffd
menu.border#3f455124
menu.foreground#3f4551
menu.selectionBackground#8aa2d333
menu.selectionBorder#8aa2d3
menu.selectionForeground#3f4551
menu.separatorBackground#3f455124
menubar.selectionBackground#8aa2d333
menubar.selectionForeground#3f4551
notificationCenter.border#3f455124
notificationCenterHeader.background#f3f3f3
notificationCenterHeader.foreground#3f4551
notificationLink.foreground#8aa2d3
notifications.background#fafafa
notifications.border#3f455124
notifications.foreground#3f4551
notificationToast.border#3f455124
panel.background#f3f3f3
panel.border#ffffff00
panelSectionHeader.foreground#3f4551
panelStickyScroll.shadow#ffffff00
panelTitle.activeBorder#8aa2d3
panelTitle.activeForeground#3f4551
panelTitle.inactiveForeground#3f4551bf
progressBar.background#8aa2d3cc
quickInput.background#fafafa
quickInput.foreground#3f4551
quickInputList.focusBackground#8aa2d333
quickInputList.focusForeground#3f4551
quickInputList.focusHighlightForeground#8aa2d3
quickInputList.focusIconForeground#3f4551
quickInputTitle.background#f3f3f3
scrollbar.shadow#ffffff00
scrollbarSlider.activeBackground#3f455180
scrollbarSlider.background#3f45514d
scrollbarSlider.hoverBackground#3f455166
selection.background#8aa2d333
sideBar.background#fafafa
sideBar.border#3f455124
sideBar.foreground#3f4551
sideBarSectionHeader.background#f3f3f3
sideBarSectionHeader.border#3f455124
sideBarSectionHeader.foreground#3f4551bf
sideBarStickyScroll.shadow#ffffff00
sideBarTitle.foreground#3f4551
statusBar.background#f3f3f3
statusBar.border#3f455124
statusBar.debuggingBackground#8aa2d3
statusBar.debuggingForeground#fffffd
statusBar.focusBorder#8aa2d3
statusBar.foreground#3f4551
statusBar.noFolderBackground#f3f3f3
statusBar.noFolderForeground#3f4551
statusBarItem.activeBackground#8aa2d333
statusBarItem.focusBorder#8aa2d3
statusBarItem.hoverBackground#8aa2d333
statusBarItem.prominentBackground#8aa2d3cc
statusBarItem.prominentForeground#fffffd
statusBarItem.prominentHoverBackground#8aa2d3
statusBarItem.prominentHoverForeground#fffffd
surface.background#fffffd
surface.border#3f455124
surface.foreground#3f4551
tab.activeBackground#fffffd
tab.activeBorder#fffffd
tab.activeBorderTop#8aa2d3
tab.activeForeground#3f4551
tab.border#f3f3f3
tab.hoverBackground#fffffd
tab.hoverBorder#8aa2d3
tab.hoverForeground#3f4551
tab.inactiveBackground#f3f3f3
tab.inactiveForeground#3f4551bf
tab.lastPinnedBorder#3f455133
tab.unfocusedActiveBackground#fafafa
tab.unfocusedActiveForeground#3f4551bf
tab.unfocusedInactiveBackground#f3f3f3
tab.unfocusedInactiveForeground#3f455180
terminal.background#f3f3f3
terminal.selectionBackground#8aa2d333
terminalCursor.background#fffffd
terminalCursor.foreground#3f4551
textBlockQuote.background#fafafa
textBlockQuote.border#3f455124
textCodeBlock.background#f3f3f3
textLink.activeForeground#8aa2d3
textLink.foreground#8aa2d3
textPreformat.background#f3f3f3
textPreformat.foreground#3f4551bf
textSeparator.foreground#3f455124
titleBar.activeBackground#f3f3f3
titleBar.activeForeground#3f4551
titleBar.border#3f455124
titleBar.inactiveBackground#f3f3f3
titleBar.inactiveForeground#3f4551bf
toolbar.activeBackground#8aa2d34d
toolbar.hoverBackground#8aa2d333
widget.border#3f455124
widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#8d9297	italic
string	#f97e25	—
meta.template.expression	#3f4551d8	—
keyword	#ee6565	—
variable.language	#ee6565	—
storage.type	#6484c5	—
storage.modifier	#ee6565	—
string.regexp	#6484c5	—
constant.numeric, constant.character, constant.other	#9668c5	—
entity.name.function, support.function	#2cb300	—
entity.name.type, support.type.primitive, support.class	#2293e3	—
punctuation.definition.template-expression	#9668c5	—
constant.language	#9668c5	—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag	#ee6565	—
source.css support.constant, source.sass support.constant, source.scss support.constant, source.less support.constant, source.stylus support.constant	#2293e3	—
source.css support.function, source.sass support.function, source.scss support.function, source.less support.function, source.stylus support.function	#2cb300	—
source.css variable, source.sass variable, source.scss variable, source.less variable, source.stylus variable	#7793cc	—
source.css entity.other.attribute-name, source.sass entity.other.attribute-name, source.scss entity.other.attribute-name, source.less entity.other.attribute-name, source.stylus entity.other.attribute-name	#6484c5	—
entity.name.tag	#7793cc	—
entity.other.attribute-name	#2cb300	—
support.class.component	#2293e3	—
source.json support.type.property-name	#6484c5	—
source.yaml entity.name.tag	#6484c5	—
markup.heading, markup.heading entity.name	#7793cc	bold
markup.underline.link, string.other.link	#2293e3	—
markup.italic	#6484c5	italic
markup.bold	#6484c5	bold
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw, markup.inline.raw	#9668c5	—

VS Code preview

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

Aofuji Light Theme — Aofuji (No 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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#8aa2d3
activityBar.activeFocusBorder#8aa2d3
activityBar.background#f3f3f3
activityBar.border#3f455124
activityBar.foreground#8aa2d3
activityBar.inactiveForeground#3f4551bf
activityBarBadge.background#8aa2d3
activityBarBadge.foreground#fffffd
activityBarTop.activeBorder#8aa2d3
activityBarTop.background#f3f3f3
activityBarTop.foreground#8aa2d3
activityBarTop.inactiveForeground#3f4551bf
agents.background#f3f3f3
agentsBadge.background#8aa2d3
agentsBadge.foreground#fffffd
agentsChatInput.background#fafafa
agentsChatInput.border#3f455133
agentsChatInput.focusBorder#8aa2d3
agentsChatInput.foreground#3f4551
agentsChatInput.placeholderForeground#3f455180
agentsGradient.tintColor#8aa2d3
agentsNewSessionButton.background#ffffff00
agentsNewSessionButton.border#3f455133
agentsNewSessionButton.foreground#3f4551
agentsNewSessionButton.hoverBackground#8aa2d333
agentsPanel.background#fffffd
agentsPanel.border#3f455124
agentsPanel.foreground#3f4551
agentStatusIndicator.background#fffffd
agentsUnreadBadge.background#8aa2d3
agentsUnreadBadge.foreground#fffffd
badge.background#8aa2d3cc
badge.foreground#fffffd
breadcrumb.activeSelectionForeground#3f4551
breadcrumb.background#fffffd
breadcrumb.focusForeground#3f4551
breadcrumb.foreground#3f4551bf
breadcrumbPicker.background#fafafa
button.background#8aa2d3cc
button.border#8aa2d3
button.foreground#fffffd
button.hoverBackground#cfd5e2
button.secondaryBackground#f3f3f3
button.secondaryBorder#3f455124
button.secondaryForeground#3f4551
button.secondaryHoverBackground#8aa2d333
chat.inputWorkingBorderColor1#8aa2d3cc
chat.inputWorkingBorderColor2#8aa2d399
chat.inputWorkingBorderColor3#8aa2d366
chat.requestBubbleBackground#8aa2d31f
chat.requestBubbleHoverBackground#8aa2d333
chat.thinkingShimmer#3f455180
checkbox.background#fffffd
checkbox.border#3f455133
checkbox.foreground#3f4551bf
commandCenter.activeBackground#8aa2d333
commandCenter.activeBorder#8aa2d3
commandCenter.activeForeground#3f4551
commandCenter.background#fffffd
commandCenter.border#3f455133
commandCenter.foreground#3f4551
commandCenter.inactiveForeground#3f4551bf
descriptionForeground#3f4551bf
disabledForeground#3f455180
dropdown.background#fffffd
dropdown.border#3f455133
dropdown.foreground#3f4551bf
dropdown.listBackground#fffffd
editor.background#fffffd
editor.findMatchBackground#ff994099
editor.findMatchHighlightBackground#ff994066
editor.findRangeHighlightBackground#f3f3f3aa
editor.foreground#3f4551d8
editor.hoverHighlightBackground#8aa2d366
editor.inactiveSelectionBackground#f3f3f3aa
editor.lineHighlightBackground#f3f3f3
editor.rangeHighlightBackground#8aa2d31f
editor.selectionBackground#8aa2d333
editor.selectionHighlightBackground#8aa2d31f
editor.wordHighlightBackground#8aa2d32b
editor.wordHighlightStrongBackground#8aa2d33d
editorBracketHighlight.foreground1#6484c5e6
editorBracketHighlight.foreground2#9668c5e6
editorBracketHighlight.foreground3#2cb300d9
editorBracketHighlight.foreground4#f97e25d9
editorBracketHighlight.foreground5#2293e3d9
editorBracketHighlight.foreground6#ee6565d9
editorBracketHighlight.unexpectedBracket.foreground#ee6565
editorBracketMatch.background#ff994066
editorBracketMatch.border#ffffff00
editorBracketPairGuide.activeBackground1#6484c599
editorBracketPairGuide.activeBackground2#9668c599
editorBracketPairGuide.activeBackground3#2cb30099
editorBracketPairGuide.activeBackground4#f97e2599
editorBracketPairGuide.activeBackground5#2293e399
editorBracketPairGuide.activeBackground6#ee656599
editorBracketPairGuide.background1#6484c540
editorBracketPairGuide.background2#9668c540
editorBracketPairGuide.background3#2cb30040
editorBracketPairGuide.background4#f97e2540
editorBracketPairGuide.background5#2293e340
editorBracketPairGuide.background6#ee656540
editorCodeLens.foreground#3f4551bf
editorCursor.foreground#3f4551
editorGroup.border#3f45514d
editorGroupHeader.noTabsBackground#f3f3f3
editorGroupHeader.tabsBackground#f3f3f3
editorGroupHeader.tabsBorder#3f455124
editorHoverWidget.background#fafafa
editorHoverWidget.border#3f455124
editorHoverWidget.foreground#3f4551
editorLineNumber.activeForeground#8aa2d3
editorLineNumber.foreground#3f455166
editorLink.activeForeground#8aa2d3
editorRuler.foreground#3f455124
editorSuggestWidget.background#fafafa
editorSuggestWidget.border#3f455124
editorSuggestWidget.focusHighlightForeground#3f4551d8
editorSuggestWidget.focusOutline#8aa2d3
editorSuggestWidget.foreground#3f4551d8
editorSuggestWidget.highlightForeground#3f4551d8
editorSuggestWidget.selectedBackground#8aa2d366
editorSuggestWidget.selectedForeground#3f4551d8
editorSuggestWidget.selectedIconForeground#3f4551d8
editorUnnecessaryCode.opacity#ffffff99
editorWhitespace.foreground#3f455133
editorWidget.background#fafafa
editorWidget.border#3f455124
editorWidget.foreground#3f4551
errorForeground#ee6565
focusBorder#8aa2d3cc
foreground#3f4551
icon.foreground#3f4551bf
input.background#fffffd
input.border#3f455124
input.foreground#3f4551bf
input.placeholderForeground#3f455180
inputOption.activeBackground#8aa2d333
inputOption.activeBorder#8aa2d3
inputOption.activeForeground#3f4551
inputValidation.errorBackground#ee656533
inputValidation.errorBorder#ee6565
inputValidation.errorForeground#3f4551
inputValidation.infoBackground#8aa2d333
inputValidation.infoBorder#8aa2d3
inputValidation.infoForeground#3f4551
inputValidation.warningBackground#ff994033
inputValidation.warningBorder#ff9940
inputValidation.warningForeground#3f4551
list.activeSelectionBackground#8aa2d399
list.activeSelectionForeground#fffffd
list.deemphasizedForeground#3f4551bf
list.dropBackground#8aa2d399
list.errorForeground#ee6565
list.filterMatchBackground#ff994066
list.focusBackground#8aa2d399
list.focusForeground#3f4551
list.focusOutline#8aa2d3
list.highlightForeground#8aa2d3
list.hoverBackground#8aa2d333
list.hoverForeground#3f4551
list.inactiveSelectionBackground#8aa2d333
list.inactiveSelectionForeground#3f4551
list.warningForeground#f97e25
listFilterWidget.background#fffffd
listFilterWidget.noMatchesOutline#ff9940cc
listFilterWidget.outline#8aa2d3cc
menu.background#fffffd
menu.border#3f455124
menu.foreground#3f4551
menu.selectionBackground#8aa2d333
menu.selectionBorder#8aa2d3
menu.selectionForeground#3f4551
menu.separatorBackground#3f455124
menubar.selectionBackground#8aa2d333
menubar.selectionForeground#3f4551
notificationCenter.border#3f455124
notificationCenterHeader.background#f3f3f3
notificationCenterHeader.foreground#3f4551
notificationLink.foreground#8aa2d3
notifications.background#fafafa
notifications.border#3f455124
notifications.foreground#3f4551
notificationToast.border#3f455124
panel.background#f3f3f3
panel.border#ffffff00
panelSectionHeader.foreground#3f4551
panelStickyScroll.shadow#ffffff00
panelTitle.activeBorder#8aa2d3
panelTitle.activeForeground#3f4551
panelTitle.inactiveForeground#3f4551bf
progressBar.background#8aa2d3cc
quickInput.background#fafafa
quickInput.foreground#3f4551
quickInputList.focusBackground#8aa2d333
quickInputList.focusForeground#3f4551
quickInputList.focusHighlightForeground#8aa2d3
quickInputList.focusIconForeground#3f4551
quickInputTitle.background#f3f3f3
scrollbar.shadow#ffffff00
scrollbarSlider.activeBackground#3f455180
scrollbarSlider.background#3f45514d
scrollbarSlider.hoverBackground#3f455166
selection.background#8aa2d333
sideBar.background#fafafa
sideBar.border#3f455124
sideBar.foreground#3f4551
sideBarSectionHeader.background#f3f3f3
sideBarSectionHeader.border#3f455124
sideBarSectionHeader.foreground#3f4551bf
sideBarStickyScroll.shadow#ffffff00
sideBarTitle.foreground#3f4551
statusBar.background#f3f3f3
statusBar.border#3f455124
statusBar.debuggingBackground#8aa2d3
statusBar.debuggingForeground#fffffd
statusBar.focusBorder#8aa2d3
statusBar.foreground#3f4551
statusBar.noFolderBackground#f3f3f3
statusBar.noFolderForeground#3f4551
statusBarItem.activeBackground#8aa2d333
statusBarItem.focusBorder#8aa2d3
statusBarItem.hoverBackground#8aa2d333
statusBarItem.prominentBackground#8aa2d3cc
statusBarItem.prominentForeground#fffffd
statusBarItem.prominentHoverBackground#8aa2d3
statusBarItem.prominentHoverForeground#fffffd
surface.background#fffffd
surface.border#3f455124
surface.foreground#3f4551
tab.activeBackground#fffffd
tab.activeBorder#fffffd
tab.activeBorderTop#8aa2d3
tab.activeForeground#3f4551
tab.border#f3f3f3
tab.hoverBackground#fffffd
tab.hoverBorder#8aa2d3
tab.hoverForeground#3f4551
tab.inactiveBackground#f3f3f3
tab.inactiveForeground#3f4551bf
tab.lastPinnedBorder#3f455133
tab.unfocusedActiveBackground#fafafa
tab.unfocusedActiveForeground#3f4551bf
tab.unfocusedInactiveBackground#f3f3f3
tab.unfocusedInactiveForeground#3f455180
terminal.background#f3f3f3
terminal.selectionBackground#8aa2d333
terminalCursor.background#fffffd
terminalCursor.foreground#3f4551
textBlockQuote.background#fafafa
textBlockQuote.border#3f455124
textCodeBlock.background#f3f3f3
textLink.activeForeground#8aa2d3
textLink.foreground#8aa2d3
textPreformat.background#f3f3f3
textPreformat.foreground#3f4551bf
textSeparator.foreground#3f455124
titleBar.activeBackground#f3f3f3
titleBar.activeForeground#3f4551
titleBar.border#3f455124
titleBar.inactiveBackground#f3f3f3
titleBar.inactiveForeground#3f4551bf
toolbar.activeBackground#8aa2d34d
toolbar.hoverBackground#8aa2d333
widget.border#3f455124
widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#8d9297	—
string	#f97e25	—
meta.template.expression	#3f4551d8	—
keyword	#ee6565	—
variable.language	#ee6565	—
storage.type	#6484c5	—
storage.modifier	#ee6565	—
string.regexp	#6484c5	—
constant.numeric, constant.character, constant.other	#9668c5	—
entity.name.function, support.function	#2cb300	—
entity.name.type, support.type.primitive, support.class	#2293e3	—
punctuation.definition.template-expression	#9668c5	—
constant.language	#9668c5	—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag	#ee6565	—
source.css support.constant, source.sass support.constant, source.scss support.constant, source.less support.constant, source.stylus support.constant	#2293e3	—
source.css support.function, source.sass support.function, source.scss support.function, source.less support.function, source.stylus support.function	#2cb300	—
source.css variable, source.sass variable, source.scss variable, source.less variable, source.stylus variable	#7793cc	—
source.css entity.other.attribute-name, source.sass entity.other.attribute-name, source.scss entity.other.attribute-name, source.less entity.other.attribute-name, source.stylus entity.other.attribute-name	#6484c5	—
entity.name.tag	#7793cc	—
entity.other.attribute-name	#2cb300	—
support.class.component	#2293e3	—
source.json support.type.property-name	#6484c5	—
source.yaml entity.name.tag	#6484c5	—
markup.heading, markup.heading entity.name	#7793cc	—
markup.underline.link, string.other.link	#2293e3	—
markup.italic	#6484c5	italic
markup.bold	#6484c5	—
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw, markup.inline.raw	#9668c5	—

VS Code preview

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

Aofuji Light Theme — Oranji

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.activeBorder#ff9940
activityBar.activeFocusBorder#ff9940
activityBar.background#f3f3f3
activityBar.border#3f455124
activityBar.foreground#ff9940
activityBar.inactiveForeground#3f4551bf
activityBarBadge.background#ff9940
activityBarBadge.foreground#fffffd
activityBarTop.activeBorder#ff9940
activityBarTop.background#f3f3f3
activityBarTop.foreground#ff9940
activityBarTop.inactiveForeground#3f4551bf
agents.background#f3f3f3
agentsBadge.background#ff9940
agentsBadge.foreground#fffffd
agentsChatInput.background#fafafa
agentsChatInput.border#3f455133
agentsChatInput.focusBorder#ff9940
agentsChatInput.foreground#3f4551
agentsChatInput.placeholderForeground#3f455180
agentsGradient.tintColor#ff9940
agentsNewSessionButton.background#ffffff00
agentsNewSessionButton.border#3f455133
agentsNewSessionButton.foreground#3f4551
agentsNewSessionButton.hoverBackground#ff994033
agentsPanel.background#fffffd
agentsPanel.border#3f455124
agentsPanel.foreground#3f4551
agentStatusIndicator.background#fffffd
agentsUnreadBadge.background#ff9940
agentsUnreadBadge.foreground#fffffd
badge.background#ff9940cc
badge.foreground#fffffd
breadcrumb.activeSelectionForeground#3f4551
breadcrumb.background#fffffd
breadcrumb.focusForeground#3f4551
breadcrumb.foreground#3f4551bf
breadcrumbPicker.background#fafafa
button.background#ff9940cc
button.border#ff9940
button.foreground#fffffd
button.hoverBackground#cfd5e2
button.secondaryBackground#f3f3f3
button.secondaryBorder#3f455124
button.secondaryForeground#3f4551
button.secondaryHoverBackground#ff994033
chat.inputWorkingBorderColor1#ff9940cc
chat.inputWorkingBorderColor2#ff994099
chat.inputWorkingBorderColor3#ff994066
chat.requestBubbleBackground#ff99401f
chat.requestBubbleHoverBackground#ff994033
chat.thinkingShimmer#3f455180
checkbox.background#fffffd
checkbox.border#3f455133
checkbox.foreground#3f4551bf
commandCenter.activeBackground#ff994033
commandCenter.activeBorder#ff9940
commandCenter.activeForeground#3f4551
commandCenter.background#fffffd
commandCenter.border#3f455133
commandCenter.foreground#3f4551
commandCenter.inactiveForeground#3f4551bf
descriptionForeground#3f4551bf
disabledForeground#3f455180
dropdown.background#fffffd
dropdown.border#3f455133
dropdown.foreground#3f4551bf
dropdown.listBackground#fffffd
editor.background#fffffd
editor.findMatchBackground#8aa2d399
editor.findMatchHighlightBackground#8aa2d366
editor.findRangeHighlightBackground#f3f3f3aa
editor.foreground#3f4551d8
editor.hoverHighlightBackground#ff994066
editor.inactiveSelectionBackground#f3f3f3aa
editor.lineHighlightBackground#f3f3f3
editor.rangeHighlightBackground#ff99401f
editor.selectionBackground#ff994033
editor.selectionHighlightBackground#ff99401f
editor.wordHighlightBackground#ff99402b
editor.wordHighlightStrongBackground#ff99403d
editorBracketHighlight.foreground1#6484c5e6
editorBracketHighlight.foreground2#9668c5e6
editorBracketHighlight.foreground3#2cb300d9
editorBracketHighlight.foreground4#f97e25d9
editorBracketHighlight.foreground5#2293e3d9
editorBracketHighlight.foreground6#ee6565d9
editorBracketHighlight.unexpectedBracket.foreground#ee6565
editorBracketMatch.background#8aa2d366
editorBracketMatch.border#ffffff00
editorBracketPairGuide.activeBackground1#6484c599
editorBracketPairGuide.activeBackground2#9668c599
editorBracketPairGuide.activeBackground3#2cb30099
editorBracketPairGuide.activeBackground4#f97e2599
editorBracketPairGuide.activeBackground5#2293e399
editorBracketPairGuide.activeBackground6#ee656599
editorBracketPairGuide.background1#6484c540
editorBracketPairGuide.background2#9668c540
editorBracketPairGuide.background3#2cb30040
editorBracketPairGuide.background4#f97e2540
editorBracketPairGuide.background5#2293e340
editorBracketPairGuide.background6#ee656540
editorCodeLens.foreground#3f4551bf
editorCursor.foreground#3f4551
editorGroup.border#3f45514d
editorGroupHeader.noTabsBackground#f3f3f3
editorGroupHeader.tabsBackground#f3f3f3
editorGroupHeader.tabsBorder#3f455124
editorHoverWidget.background#fafafa
editorHoverWidget.border#3f455124
editorHoverWidget.foreground#3f4551
editorLineNumber.activeForeground#ff9940
editorLineNumber.foreground#3f455166
editorLink.activeForeground#ff9940
editorRuler.foreground#3f455124
editorSuggestWidget.background#fafafa
editorSuggestWidget.border#3f455124
editorSuggestWidget.focusHighlightForeground#3f4551d8
editorSuggestWidget.focusOutline#ff9940
editorSuggestWidget.foreground#3f4551d8
editorSuggestWidget.highlightForeground#3f4551d8
editorSuggestWidget.selectedBackground#ff994066
editorSuggestWidget.selectedForeground#3f4551d8
editorSuggestWidget.selectedIconForeground#3f4551d8
editorUnnecessaryCode.opacity#ffffff99
editorWhitespace.foreground#3f455133
editorWidget.background#fafafa
editorWidget.border#3f455124
editorWidget.foreground#3f4551
errorForeground#ee6565
focusBorder#ff9940cc
foreground#3f4551
icon.foreground#3f4551bf
input.background#fffffd
input.border#3f455124
input.foreground#3f4551bf
input.placeholderForeground#3f455180
inputOption.activeBackground#ff994033
inputOption.activeBorder#ff9940
inputOption.activeForeground#3f4551
inputValidation.errorBackground#ee656533
inputValidation.errorBorder#ee6565
inputValidation.errorForeground#3f4551
inputValidation.infoBackground#ff994033
inputValidation.infoBorder#ff9940
inputValidation.infoForeground#3f4551
inputValidation.warningBackground#8aa2d333
inputValidation.warningBorder#8aa2d3
inputValidation.warningForeground#3f4551
list.activeSelectionBackground#ff994099
list.activeSelectionForeground#fffffd
list.deemphasizedForeground#3f4551bf
list.dropBackground#ff994099
list.errorForeground#ee6565
list.filterMatchBackground#8aa2d366
list.focusBackground#ff994099
list.focusForeground#3f4551
list.focusOutline#ff9940
list.highlightForeground#ff9940
list.hoverBackground#ff994033
list.hoverForeground#3f4551
list.inactiveSelectionBackground#ff994033
list.inactiveSelectionForeground#3f4551
list.warningForeground#f97e25
listFilterWidget.background#fffffd
listFilterWidget.noMatchesOutline#8aa2d3cc
listFilterWidget.outline#ff9940cc
menu.background#fffffd
menu.border#3f455124
menu.foreground#3f4551
menu.selectionBackground#ff994033
menu.selectionBorder#ff9940
menu.selectionForeground#3f4551
menu.separatorBackground#3f455124
menubar.selectionBackground#ff994033
menubar.selectionForeground#3f4551
notificationCenter.border#3f455124
notificationCenterHeader.background#f3f3f3
notificationCenterHeader.foreground#3f4551
notificationLink.foreground#ff9940
notifications.background#fafafa
notifications.border#3f455124
notifications.foreground#3f4551
notificationToast.border#3f455124
panel.background#f3f3f3
panel.border#ffffff00
panelSectionHeader.foreground#3f4551
panelStickyScroll.shadow#ffffff00
panelTitle.activeBorder#ff9940
panelTitle.activeForeground#3f4551
panelTitle.inactiveForeground#3f4551bf
progressBar.background#ff9940cc
quickInput.background#fafafa
quickInput.foreground#3f4551
quickInputList.focusBackground#ff994033
quickInputList.focusForeground#3f4551
quickInputList.focusHighlightForeground#ff9940
quickInputList.focusIconForeground#3f4551
quickInputTitle.background#f3f3f3
scrollbar.shadow#ffffff00
scrollbarSlider.activeBackground#3f455180
scrollbarSlider.background#3f45514d
scrollbarSlider.hoverBackground#3f455166
selection.background#ff994033
sideBar.background#fafafa
sideBar.border#3f455124
sideBar.foreground#3f4551
sideBarSectionHeader.background#f3f3f3
sideBarSectionHeader.border#3f455124
sideBarSectionHeader.foreground#3f4551bf
sideBarStickyScroll.shadow#ffffff00
sideBarTitle.foreground#3f4551
statusBar.background#f3f3f3
statusBar.border#3f455124
statusBar.debuggingBackground#ff9940
statusBar.debuggingForeground#fffffd
statusBar.focusBorder#ff9940
statusBar.foreground#3f4551
statusBar.noFolderBackground#f3f3f3
statusBar.noFolderForeground#3f4551
statusBarItem.activeBackground#ff994033
statusBarItem.focusBorder#ff9940
statusBarItem.hoverBackground#ff994033
statusBarItem.prominentBackground#ff9940cc
statusBarItem.prominentForeground#fffffd
statusBarItem.prominentHoverBackground#ff9940
statusBarItem.prominentHoverForeground#fffffd
surface.background#fffffd
surface.border#3f455124
surface.foreground#3f4551
tab.activeBackground#fffffd
tab.activeBorder#fffffd
tab.activeBorderTop#ff9940
tab.activeForeground#3f4551
tab.border#f3f3f3
tab.hoverBackground#fffffd
tab.hoverBorder#ff9940
tab.hoverForeground#3f4551
tab.inactiveBackground#f3f3f3
tab.inactiveForeground#3f4551bf
tab.lastPinnedBorder#3f455133
tab.unfocusedActiveBackground#fafafa
tab.unfocusedActiveForeground#3f4551bf
tab.unfocusedInactiveBackground#f3f3f3
tab.unfocusedInactiveForeground#3f455180
terminal.background#f3f3f3
terminal.selectionBackground#ff994033
terminalCursor.background#fffffd
terminalCursor.foreground#3f4551
textBlockQuote.background#fafafa
textBlockQuote.border#3f455124
textCodeBlock.background#f3f3f3
textLink.activeForeground#ff9940
textLink.foreground#ff9940
textPreformat.background#f3f3f3
textPreformat.foreground#3f4551bf
textSeparator.foreground#3f455124
titleBar.activeBackground#f3f3f3
titleBar.activeForeground#3f4551
titleBar.border#3f455124
titleBar.inactiveBackground#f3f3f3
titleBar.inactiveForeground#3f4551bf
toolbar.activeBackground#ff99404d
toolbar.hoverBackground#ff994033
widget.border#3f455124
widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#8d9297	italic
string	#f97e25	—
meta.template.expression	#3f4551d8	—
keyword	#ee6565	—
variable.language	#ee6565	—
storage.type	#6484c5	—
storage.modifier	#ee6565	—
string.regexp	#6484c5	—
constant.numeric, constant.character, constant.other	#9668c5	—
entity.name.function, support.function	#2cb300	—
entity.name.type, support.type.primitive, support.class	#2293e3	—
punctuation.definition.template-expression	#9668c5	—
constant.language	#9668c5	—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag	#ee6565	—
source.css support.constant, source.sass support.constant, source.scss support.constant, source.less support.constant, source.stylus support.constant	#2293e3	—
source.css support.function, source.sass support.function, source.scss support.function, source.less support.function, source.stylus support.function	#2cb300	—
source.css variable, source.sass variable, source.scss variable, source.less variable, source.stylus variable	#7793cc	—
source.css entity.other.attribute-name, source.sass entity.other.attribute-name, source.scss entity.other.attribute-name, source.less entity.other.attribute-name, source.stylus entity.other.attribute-name	#6484c5	—
entity.name.tag	#7793cc	—
entity.other.attribute-name	#2cb300	—
support.class.component	#2293e3	—
source.json support.type.property-name	#6484c5	—
source.yaml entity.name.tag	#6484c5	—
markup.heading, markup.heading entity.name	#7793cc	bold
markup.underline.link, string.other.link	#2293e3	—
markup.italic	#6484c5	italic
markup.bold	#6484c5	bold
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw, markup.inline.raw	#9668c5	—

VS Code preview

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

Aofuji Light Theme — Oranji (No 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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#ff9940
activityBar.activeFocusBorder#ff9940
activityBar.background#f3f3f3
activityBar.border#3f455124
activityBar.foreground#ff9940
activityBar.inactiveForeground#3f4551bf
activityBarBadge.background#ff9940
activityBarBadge.foreground#fffffd
activityBarTop.activeBorder#ff9940
activityBarTop.background#f3f3f3
activityBarTop.foreground#ff9940
activityBarTop.inactiveForeground#3f4551bf
agents.background#f3f3f3
agentsBadge.background#ff9940
agentsBadge.foreground#fffffd
agentsChatInput.background#fafafa
agentsChatInput.border#3f455133
agentsChatInput.focusBorder#ff9940
agentsChatInput.foreground#3f4551
agentsChatInput.placeholderForeground#3f455180
agentsGradient.tintColor#ff9940
agentsNewSessionButton.background#ffffff00
agentsNewSessionButton.border#3f455133
agentsNewSessionButton.foreground#3f4551
agentsNewSessionButton.hoverBackground#ff994033
agentsPanel.background#fffffd
agentsPanel.border#3f455124
agentsPanel.foreground#3f4551
agentStatusIndicator.background#fffffd
agentsUnreadBadge.background#ff9940
agentsUnreadBadge.foreground#fffffd
badge.background#ff9940cc
badge.foreground#fffffd
breadcrumb.activeSelectionForeground#3f4551
breadcrumb.background#fffffd
breadcrumb.focusForeground#3f4551
breadcrumb.foreground#3f4551bf
breadcrumbPicker.background#fafafa
button.background#ff9940cc
button.border#ff9940
button.foreground#fffffd
button.hoverBackground#cfd5e2
button.secondaryBackground#f3f3f3
button.secondaryBorder#3f455124
button.secondaryForeground#3f4551
button.secondaryHoverBackground#ff994033
chat.inputWorkingBorderColor1#ff9940cc
chat.inputWorkingBorderColor2#ff994099
chat.inputWorkingBorderColor3#ff994066
chat.requestBubbleBackground#ff99401f
chat.requestBubbleHoverBackground#ff994033
chat.thinkingShimmer#3f455180
checkbox.background#fffffd
checkbox.border#3f455133
checkbox.foreground#3f4551bf
commandCenter.activeBackground#ff994033
commandCenter.activeBorder#ff9940
commandCenter.activeForeground#3f4551
commandCenter.background#fffffd
commandCenter.border#3f455133
commandCenter.foreground#3f4551
commandCenter.inactiveForeground#3f4551bf
descriptionForeground#3f4551bf
disabledForeground#3f455180
dropdown.background#fffffd
dropdown.border#3f455133
dropdown.foreground#3f4551bf
dropdown.listBackground#fffffd
editor.background#fffffd
editor.findMatchBackground#8aa2d399
editor.findMatchHighlightBackground#8aa2d366
editor.findRangeHighlightBackground#f3f3f3aa
editor.foreground#3f4551d8
editor.hoverHighlightBackground#ff994066
editor.inactiveSelectionBackground#f3f3f3aa
editor.lineHighlightBackground#f3f3f3
editor.rangeHighlightBackground#ff99401f
editor.selectionBackground#ff994033
editor.selectionHighlightBackground#ff99401f
editor.wordHighlightBackground#ff99402b
editor.wordHighlightStrongBackground#ff99403d
editorBracketHighlight.foreground1#6484c5e6
editorBracketHighlight.foreground2#9668c5e6
editorBracketHighlight.foreground3#2cb300d9
editorBracketHighlight.foreground4#f97e25d9
editorBracketHighlight.foreground5#2293e3d9
editorBracketHighlight.foreground6#ee6565d9
editorBracketHighlight.unexpectedBracket.foreground#ee6565
editorBracketMatch.background#8aa2d366
editorBracketMatch.border#ffffff00
editorBracketPairGuide.activeBackground1#6484c599
editorBracketPairGuide.activeBackground2#9668c599
editorBracketPairGuide.activeBackground3#2cb30099
editorBracketPairGuide.activeBackground4#f97e2599
editorBracketPairGuide.activeBackground5#2293e399
editorBracketPairGuide.activeBackground6#ee656599
editorBracketPairGuide.background1#6484c540
editorBracketPairGuide.background2#9668c540
editorBracketPairGuide.background3#2cb30040
editorBracketPairGuide.background4#f97e2540
editorBracketPairGuide.background5#2293e340
editorBracketPairGuide.background6#ee656540
editorCodeLens.foreground#3f4551bf
editorCursor.foreground#3f4551
editorGroup.border#3f45514d
editorGroupHeader.noTabsBackground#f3f3f3
editorGroupHeader.tabsBackground#f3f3f3
editorGroupHeader.tabsBorder#3f455124
editorHoverWidget.background#fafafa
editorHoverWidget.border#3f455124
editorHoverWidget.foreground#3f4551
editorLineNumber.activeForeground#ff9940
editorLineNumber.foreground#3f455166
editorLink.activeForeground#ff9940
editorRuler.foreground#3f455124
editorSuggestWidget.background#fafafa
editorSuggestWidget.border#3f455124
editorSuggestWidget.focusHighlightForeground#3f4551d8
editorSuggestWidget.focusOutline#ff9940
editorSuggestWidget.foreground#3f4551d8
editorSuggestWidget.highlightForeground#3f4551d8
editorSuggestWidget.selectedBackground#ff994066
editorSuggestWidget.selectedForeground#3f4551d8
editorSuggestWidget.selectedIconForeground#3f4551d8
editorUnnecessaryCode.opacity#ffffff99
editorWhitespace.foreground#3f455133
editorWidget.background#fafafa
editorWidget.border#3f455124
editorWidget.foreground#3f4551
errorForeground#ee6565
focusBorder#ff9940cc
foreground#3f4551
icon.foreground#3f4551bf
input.background#fffffd
input.border#3f455124
input.foreground#3f4551bf
input.placeholderForeground#3f455180
inputOption.activeBackground#ff994033
inputOption.activeBorder#ff9940
inputOption.activeForeground#3f4551
inputValidation.errorBackground#ee656533
inputValidation.errorBorder#ee6565
inputValidation.errorForeground#3f4551
inputValidation.infoBackground#ff994033
inputValidation.infoBorder#ff9940
inputValidation.infoForeground#3f4551
inputValidation.warningBackground#8aa2d333
inputValidation.warningBorder#8aa2d3
inputValidation.warningForeground#3f4551
list.activeSelectionBackground#ff994099
list.activeSelectionForeground#fffffd
list.deemphasizedForeground#3f4551bf
list.dropBackground#ff994099
list.errorForeground#ee6565
list.filterMatchBackground#8aa2d366
list.focusBackground#ff994099
list.focusForeground#3f4551
list.focusOutline#ff9940
list.highlightForeground#ff9940
list.hoverBackground#ff994033
list.hoverForeground#3f4551
list.inactiveSelectionBackground#ff994033
list.inactiveSelectionForeground#3f4551
list.warningForeground#f97e25
listFilterWidget.background#fffffd
listFilterWidget.noMatchesOutline#8aa2d3cc
listFilterWidget.outline#ff9940cc
menu.background#fffffd
menu.border#3f455124
menu.foreground#3f4551
menu.selectionBackground#ff994033
menu.selectionBorder#ff9940
menu.selectionForeground#3f4551
menu.separatorBackground#3f455124
menubar.selectionBackground#ff994033
menubar.selectionForeground#3f4551
notificationCenter.border#3f455124
notificationCenterHeader.background#f3f3f3
notificationCenterHeader.foreground#3f4551
notificationLink.foreground#ff9940
notifications.background#fafafa
notifications.border#3f455124
notifications.foreground#3f4551
notificationToast.border#3f455124
panel.background#f3f3f3
panel.border#ffffff00
panelSectionHeader.foreground#3f4551
panelStickyScroll.shadow#ffffff00
panelTitle.activeBorder#ff9940
panelTitle.activeForeground#3f4551
panelTitle.inactiveForeground#3f4551bf
progressBar.background#ff9940cc
quickInput.background#fafafa
quickInput.foreground#3f4551
quickInputList.focusBackground#ff994033
quickInputList.focusForeground#3f4551
quickInputList.focusHighlightForeground#ff9940
quickInputList.focusIconForeground#3f4551
quickInputTitle.background#f3f3f3
scrollbar.shadow#ffffff00
scrollbarSlider.activeBackground#3f455180
scrollbarSlider.background#3f45514d
scrollbarSlider.hoverBackground#3f455166
selection.background#ff994033
sideBar.background#fafafa
sideBar.border#3f455124
sideBar.foreground#3f4551
sideBarSectionHeader.background#f3f3f3
sideBarSectionHeader.border#3f455124
sideBarSectionHeader.foreground#3f4551bf
sideBarStickyScroll.shadow#ffffff00
sideBarTitle.foreground#3f4551
statusBar.background#f3f3f3
statusBar.border#3f455124
statusBar.debuggingBackground#ff9940
statusBar.debuggingForeground#fffffd
statusBar.focusBorder#ff9940
statusBar.foreground#3f4551
statusBar.noFolderBackground#f3f3f3
statusBar.noFolderForeground#3f4551
statusBarItem.activeBackground#ff994033
statusBarItem.focusBorder#ff9940
statusBarItem.hoverBackground#ff994033
statusBarItem.prominentBackground#ff9940cc
statusBarItem.prominentForeground#fffffd
statusBarItem.prominentHoverBackground#ff9940
statusBarItem.prominentHoverForeground#fffffd
surface.background#fffffd
surface.border#3f455124
surface.foreground#3f4551
tab.activeBackground#fffffd
tab.activeBorder#fffffd
tab.activeBorderTop#ff9940
tab.activeForeground#3f4551
tab.border#f3f3f3
tab.hoverBackground#fffffd
tab.hoverBorder#ff9940
tab.hoverForeground#3f4551
tab.inactiveBackground#f3f3f3
tab.inactiveForeground#3f4551bf
tab.lastPinnedBorder#3f455133
tab.unfocusedActiveBackground#fafafa
tab.unfocusedActiveForeground#3f4551bf
tab.unfocusedInactiveBackground#f3f3f3
tab.unfocusedInactiveForeground#3f455180
terminal.background#f3f3f3
terminal.selectionBackground#ff994033
terminalCursor.background#fffffd
terminalCursor.foreground#3f4551
textBlockQuote.background#fafafa
textBlockQuote.border#3f455124
textCodeBlock.background#f3f3f3
textLink.activeForeground#ff9940
textLink.foreground#ff9940
textPreformat.background#f3f3f3
textPreformat.foreground#3f4551bf
textSeparator.foreground#3f455124
titleBar.activeBackground#f3f3f3
titleBar.activeForeground#3f4551
titleBar.border#3f455124
titleBar.inactiveBackground#f3f3f3
titleBar.inactiveForeground#3f4551bf
toolbar.activeBackground#ff99404d
toolbar.hoverBackground#ff994033
widget.border#3f455124
widget.shadow#ffffff00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#8d9297	—
string	#f97e25	—
meta.template.expression	#3f4551d8	—
keyword	#ee6565	—
variable.language	#ee6565	—
storage.type	#6484c5	—
storage.modifier	#ee6565	—
string.regexp	#6484c5	—
constant.numeric, constant.character, constant.other	#9668c5	—
entity.name.function, support.function	#2cb300	—
entity.name.type, support.type.primitive, support.class	#2293e3	—
punctuation.definition.template-expression	#9668c5	—
constant.language	#9668c5	—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag	#ee6565	—
source.css support.constant, source.sass support.constant, source.scss support.constant, source.less support.constant, source.stylus support.constant	#2293e3	—
source.css support.function, source.sass support.function, source.scss support.function, source.less support.function, source.stylus support.function	#2cb300	—
source.css variable, source.sass variable, source.scss variable, source.less variable, source.stylus variable	#7793cc	—
source.css entity.other.attribute-name, source.sass entity.other.attribute-name, source.scss entity.other.attribute-name, source.less entity.other.attribute-name, source.stylus entity.other.attribute-name	#6484c5	—
entity.name.tag	#7793cc	—
entity.other.attribute-name	#2cb300	—
support.class.component	#2293e3	—
source.json support.type.property-name	#6484c5	—
source.yaml entity.name.tag	#6484c5	—
markup.heading, markup.heading entity.name	#7793cc	—
markup.underline.link, string.other.link	#2293e3	—
markup.italic	#6484c5	italic
markup.bold	#6484c5	—
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw, markup.inline.raw	#9668c5	—