Dark Breeze Color Scheme

Name: Dark Breeze Color Scheme
Author: Jason Liu

Publisher: Jason LiuThemes in package: 1

A Visual Studio Code theme with lots of blue

Open in VS Code

VS Code preview

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

Dark Breeze Color Scheme — Dark Breeze Color Scheme

fetchUser.ts

index.ts

README.md

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#1c1c1c
activityBar.border#1c1c1c
activityBar.dropBackground#313131
activityBar.foreground#858585
activityBarBadge.background#dc7ed7
activityBarBadge.foreground#1c1c1c
badge.background#dc7ed7
badge.foreground#1c1c1c
button.background#45b484
button.foreground#1c1c1c
button.hoverBackground#64bff5
debugExceptionWidget.background#313131
debugExceptionWidget.border#313131
debugToolBar.background#313131
diffEditor.insertedTextBackground#559cc820
diffEditor.removedTextBackground#1c1c1c20
dropdown.background#313131
dropdown.border#313131
dropdown.foreground#9a9a9a
editor.background#1c1c1c
editor.findMatchBackground#467b9c7f
editor.findMatchHighlightBackground#467b9c3f
editor.findRangeHighlightBackground#313131
editor.foreground#afafaf
editor.hoverHighlightBackground#464646
editor.inactiveSelectionBackground#45b48433
editor.lineHighlightBackground#1c1c1c
editor.lineHighlightBorder#313131
editor.rangeHighlightBackground#313131
editor.selectionBackground#45b48433
editor.selectionHighlightBackground#313131
editor.wordHighlightBackground#dc7ed77f
editor.wordHighlightStrongBackground#f2f3f47f
editorBracketMatch.background#313131
editorBracketMatch.border#313131
editorCodeLens.foreground#858585
editorCursor.foreground#dc7ed7
editorError.border#afafaf
editorError.foreground#1c1c1c
editorGroup.border#313131
editorGroup.dropBackground#4646467f
editorGroup.emptyBackground#1c1c1c
editorGroup.focusedEmptyBorder#313131
editorGroupHeader.noTabsBackground#1c1c1c
editorGroupHeader.tabsBackground#1c1c1c
editorGroupHeader.tabsBorder#1c1c1c
editorGutter.addedBackground#559cc8
editorGutter.background#1c1c1c
editorGutter.deletedBackground#1c1c1c
editorGutter.modifiedBackground#467b9c
editorHoverWidget.background#313131
editorHoverWidget.border#313131
editorIndentGuide.activeBackground#464646
editorIndentGuide.background#313131
editorLineNumber.foreground#464646
editorLink.activeForeground#64bff5
editorMarkerNavigation.background#313131
editorMarkerNavigationError.background#1c1c1c
editorMarkerNavigationWarning.background#365b73
editorOverviewRuler.addedForeground#559cc87f
editorOverviewRuler.border#313131
editorOverviewRuler.commonContentForeground#dc7ed7
editorOverviewRuler.currentContentForeground#64bff5
editorOverviewRuler.deletedForeground#1c1c1c7f
editorOverviewRuler.errorForeground#1c1c1c7f
editorOverviewRuler.findMatchForeground#467b9cbf
editorOverviewRuler.incomingContentForeground#45b484
editorOverviewRuler.infoForeground#45b4847f
editorOverviewRuler.modifiedForeground#467b9c7f
editorOverviewRuler.rangeHighlightForeground#464646bf
editorOverviewRuler.selectionHighlightForeground#313131bf
editorOverviewRuler.warningForeground#365b737f
editorOverviewRuler.wordHighlightForeground#464646bf
editorOverviewRuler.wordHighlightStrongForeground#5b5b5bbf
editorPane.background#1c1c1c
editorRuler.foreground#313131
editorSuggestWidget.background#313131
editorSuggestWidget.border#313131
editorSuggestWidget.foreground#9a9a9a
editorSuggestWidget.highlightForeground#f2f3f4
editorSuggestWidget.selectedBackground#464646
editorWarning.border#9a9a9a
editorWarning.foreground#365b73
editorWhitespace.foreground#313131
editorWidget.background#313131
editorWidget.border#313131
errorForeground#1c1c1c
extensionButton.prominentBackground#45b484
extensionButton.prominentForeground#1c1c1c
extensionButton.prominentHoverBackground#64bff5
focusBorder#dc7ed7
foreground#afafaf
gitDecoration.conflictingResourceForeground#64bff5
gitDecoration.deletedResourceForeground#1c1c1c
gitDecoration.ignoredResourceForeground#5b5b5b
gitDecoration.modifiedResourceForeground#467b9c
gitDecoration.untrackedResourceForeground#dc7ed7
input.background#313131
input.border#313131
input.foreground#9a9a9a
input.placeholderForeground#464646
inputOption.activeBorder#64bff5
inputValidation.errorBackground#313131
inputValidation.errorBorder#1c1c1c
inputValidation.infoBackground#313131
inputValidation.infoBorder#45b484
inputValidation.warningBackground#313131
inputValidation.warningBorder#365b73
list.activeSelectionBackground#559cc87f
list.activeSelectionForeground#1c1c1c
list.dropBackground#5b5b5b
list.errorForeground#1c1c1c
list.focusBackground#5b5b5b
list.focusForeground#1c1c1c
list.highlightForeground#467b9c
list.hoverBackground#313131
list.hoverForeground#858585
list.inactiveSelectionBackground#313131
list.inactiveSelectionForeground#afafaf
list.invalidItemForeground#1c1c1c
list.warningForeground#467b9c
listFilterWidget.background#313131
listFilterWidget.noMatchesOutline#1c1c1c
listFilterWidget.outline#45b484
merge.border#707070
merge.commonContentBackground#dc7ed74c
merge.commonHeaderBackground#dc7ed74c
merge.currentContentBackground#64bff54c
merge.currentHeaderBackground#64bff54c
merge.incomingContentBackground#45b4844c
merge.incomingHeaderBackground#45b4844c
notification.background#313131
notification.buttonBackground#45b484
notification.buttonForeground#1c1c1c
notification.buttonHoverBackground#64bff5
notification.errorBackground#1c1c1c
notification.errorForeground#1c1c1c
notification.foreground#afafaf
notification.infoBackground#45b484
notification.infoForeground#1c1c1c
notification.warningBackground#365b73
notification.warningForeground#1c1c1c
panel.background#1c1c1c
panel.border#313131
panelTitle.activeBorder#5b5b5b
panelTitle.activeForeground#9a9a9a
panelTitle.inactiveForeground#707070
peekView.border#f2f3f4
peekViewEditor.background#313131
peekViewEditor.matchHighlightBackground#467b9c7f
peekViewEditorGutter.background#313131
peekViewResult.background#313131
peekViewResult.fileForeground#9a9a9a
peekViewResult.lineForeground#464646
peekViewResult.matchHighlightBackground#467b9c
peekViewResult.selectionBackground#5b5b5b
peekViewResult.selectionForeground#afafaf
peekViewTitle.background#464646
peekViewTitleDescription.foreground#858585
peekViewTitleLabel.foreground#afafaf
pickerGroup.border#858585
pickerGroup.foreground#afafaf
progressBar.background#559cc8
scrollbar.shadow#1c1c1c
scrollbarSlider.activeBackground#8585857f
scrollbarSlider.background#5b5b5b7f
scrollbarSlider.hoverBackground#7070707f
selection.background#464646
sideBar.background#1c1c1c
sideBar.border#313131
sideBar.foreground#9a9a9a
sideBarSectionHeader.background#464646
sideBarSectionHeader.foreground#9a9a9a
sideBarTitle.foreground#858585
statusBar.background#45b484
statusBar.border#45b4847f
statusBar.debuggingBackground#365b73
statusBar.debuggingBorder#365b737f
statusBar.debuggingForeground#1c1c1c
statusBar.foreground#1c1c1c
statusBar.noFolderBackground#dc7ed7
statusBar.noFolderBorder#dc7ed77f
statusBar.noFolderForeground#1c1c1c
statusBarItem.activeBackground#64bff5
statusBarItem.hoverBackground#559cc8
statusBarItem.prominentBackground#64bff5
statusBarItem.prominentHoverBackground#559cc8
tab.activeBackground#1c1c1c
tab.activeForeground#9a9a9a
tab.border#1c1c1c
tab.inactiveBackground#313131
tab.inactiveForeground#5b5b5b
tab.unfocusedActiveForeground#5b5b5b
tab.unfocusedInactiveForeground#464646
terminal.ansiBlack#1c1c1c
terminal.ansiBlue#45b484
terminal.ansiBrightBlack#313131
terminal.ansiBrightBlue#45b484
terminal.ansiBrightCyan#64bff5
terminal.ansiBrightGreen#64bff5
terminal.ansiBrightMagenta#f2f3f4
terminal.ansiBrightRed#365b73
terminal.ansiBrightWhite#afafaf
terminal.ansiBrightYellow#467b9c
terminal.ansiCyan#64bff5
terminal.ansiGreen#559cc8
terminal.ansiMagenta#f2f3f4
terminal.ansiRed#1c1c1c
terminal.ansiWhite#9a9a9a
terminal.ansiYellow#467b9c
terminal.background#1c1c1c
terminal.foreground#9a9a9a
terminal.selectionBackground#45b4847f
terminalCursor.background#313131
terminalCursor.foreground#858585
titleBar.activeBackground#1c1c1c
titleBar.activeForeground#858585
titleBar.inactiveBackground#1c1c1c
titleBar.inactiveForeground#5b5b5b
tree.indentGuidesStroke#313131
walkThrough.embeddedEditorBackground#1c1c1c
welcomePage.buttonBackground#313131
welcomePage.buttonHoverBackground#464646
widget.shadow#1c1c1c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#9a9a9a	—
comment	#5b5b5b	—
constant	#f2f3f4	—
entity	#64bff5	—
invalid	#1c1c1c	—
keyword	#dc7ed7	—
storage	#f2f3f4	—
string	#559cc8	—
support	#64bff5	—
variable	#afafaf	—
markup.heading	#64bff5	—
markup.deleted	#1c1c1c	—
markup.inserted	#559cc8	—
markup.changed	#467b9c	—
markup.underline	—	underline
markup.underline.link	#45b484	—
markup.list	#afafaf	—
markup.raw	#f2f3f4	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}