August Themes

Name: August Themes
Author: inci-august

Publisher: inci-augustThemes in package: 30

‧ ˙ᕀ ✧ᱸ༝ ‧ Dark Visual Studio Code themes made even darker and perfect ‧ ˙ᕀ ✧ᱸ༝ ‧

GitHub

Color themes

VS Code preview

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

August Themes — August - City Lights

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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#1D252C
activityBar.dropBackground#333F4A99
activityBar.foreground#8094a7
activityBarBadge.background#037f88
activityBarBadge.foreground#fff
badge.background#037f88
badge.foreground#fff
breadcrumb.activeSelectionForeground#8094a7
breadcrumb.background#1d252c
breadcrumb.foreground#8094a799
breadcrumbPicker.background#1d252c
button.background#037f88
button.foreground#fff
button.hoverBackground#008B9499
contrastBorder#b7c5d300
debugExceptionWidget.background#1D252C
debugExceptionWidget.border#b7c5d3
debugToolBar.background#1D252C
descriptionForeground#b7c5d3
diffEditor.insertedTextBackground#33CED811
diffEditor.removedTextBackground#b62d6511
dropdown.background#28313a
dropdown.border#28313a
dropdown.foreground#8094a7
editor.background#1D252C
editor.findMatchBackground#1d252c
editor.findMatchBorder#41505e
editor.findMatchHighlightBackground#41505e77
editor.findRangeHighlightBackground#243E51
editor.foreground#8094a7
editor.hoverHighlightBackground#28313a
editor.inactiveSelectionBackground#28313a99
editor.lineHighlightBackground#28313a77
editor.lineHighlightBorder#28313a99
editor.rangeHighlightBackground#28313a
editor.selectionBackground#28313a
editor.selectionHighlightBackground#28313a
editor.wordHighlightBackground#b7c5d30D
editor.wordHighlightStrongBackground#41505e88
editorBracketMatch.border#4e6e99
editorCodeLens.foreground#42628ccc
editorCursor.foreground#5ec4ff
editorError.border#333F4A
editorError.foreground#b62d65
editorGroup.border#1D252C
editorGroup.dropBackground#333F4A99
editorGroup.emptyBackground#1D252C
editorGroupHeader.noTabsBackground#1D252C
editorGroupHeader.tabsBackground#1D252C
editorGutter.addedBackground#33CED8
editorGutter.background#1D252C
editorGutter.deletedBackground#b62d65
editorGutter.modifiedBackground#26506D
editorHoverWidget.background#28313a
editorHoverWidget.border#333F4A
editorIndentActive.background#28323a
editorIndentGuide.background#28323a99
editorInlayHint.background#00000000
editorInlayHint.foreground#33CED855
editorInlayHint.parameterBackground#00000000
editorInlayHint.parameterForeground#33CED855
editorInlayHint.typeBackground#00000000
editorInlayHint.typeForeground#33CED855
editorLineNumber.activeForeground#b7c5d399
editorLineNumber.foreground#41505E
editorLink.activeForeground#42628c
editorMarkerNavigation.background#1D252C
editorMarkerNavigationError.background#b62d65
editorMarkerNavigationWarning.background#d98e48
editorOverviewRuler.addedForeground#33CED899
editorOverviewRuler.border#00000000
editorOverviewRuler.bracketMatchForeground#00000000
editorOverviewRuler.commonContentForeground#b62d65
editorOverviewRuler.currentContentForeground#b62d65
editorOverviewRuler.deletedForeground#b62d6599
editorOverviewRuler.errorForeground#b62d65
editorOverviewRuler.findMatchForeground#00000000
editorOverviewRuler.incomingContentForeground#b62d65
editorOverviewRuler.infoForeground#00000000
editorOverviewRuler.modifiedForeground#d98e4899
editorOverviewRuler.rangeHighlightForeground#00000000
editorOverviewRuler.selectionHighlightForeground#00000000
editorOverviewRuler.warningForeground#d98e48
editorOverviewRuler.wordHighlightForeground#00000000
editorOverviewRuler.wordHighlightStrongForeground#00000000
editorRuler.foreground#1F4662
editorSuggestWidget.background#1D252C
editorSuggestWidget.border#1D252C
editorSuggestWidget.foreground#b7c5d3
editorSuggestWidget.highlightForeground#ebbf83
editorSuggestWidget.selectedBackground#28323a
editorWarning.border#b7c5d300
editorWarning.foreground#ebbf83
editorWhitespace.foreground#b7c5d31a
editorWidget.background#1D252C
editorWidget.resizeBorder#037f88
errorForeground#b62d65
extensionButton.prominentBackground#008B94
extensionButton.prominentForeground#fff
extensionButton.prominentHoverBackground#008B94
focusBorder#00000000
foreground#8094a7
gitDecoration.addedResourceForeground#33CED8
gitDecoration.deletedResourceForeground#b62d65
gitDecoration.ignoredResourceForeground#b7c5d380
gitDecoration.modifiedResourceForeground#ebbf83
gitDecoration.untrackedResourceForeground#008B94
gitlens.trailingLineForegroundColor#42628c
input.background#28313a
input.border#28313a
input.foreground#b7c5d3
input.placeholderForeground#b7c5d355
inputOption.activeBorder#333F4A
inputValidation.errorBackground#b62d65
inputValidation.errorBorder#b62d6599
inputValidation.infoBackground#5ec4ff
inputValidation.infoBorder#539afc
inputValidation.warningBackground#ebbf83
inputValidation.warningBorder#d98e48
list.activeSelectionBackground#28313a99
list.activeSelectionForeground#b7c5d3
list.dropBackground#28313a99
list.focusBackground#28313a99
list.focusForeground#b7c5d3
list.highlightForeground#008b94
list.hoverBackground#28313a99
list.hoverForeground#b7c5d3
list.inactiveSelectionBackground#1d252c
list.inactiveSelectionForeground#b7c5d3
menu.selectionBackground#b7c5d311
menu.separatorBackground#b7c5d380
menubar.selectionBackground#28313a
notificationCenterHeader.background#1d252c
notificationLink.foreground#008b94
notifications.background#28313a
notifications.border#008b94
panel.background#1d252c
panel.border#333F4A00
panelTitle.activeForeground#008B94
panelTitle.inactiveForeground#8094a7
peekView.border#333F4A
peekViewEditor.background#28313a
peekViewEditor.matchHighlightBackground#28313a
peekViewEditorGutter.background#333F4A
peekViewResult.background#28313a
peekViewResult.fileForeground#b7c5d3
peekViewResult.lineForeground#fff
peekViewResult.matchHighlightBackground#333F4A
peekViewResult.selectionBackground#333F4A
peekViewResult.selectionForeground#fff
peekViewTitle.background#28313a
peekViewTitleDescription.foreground#b7c5d3
peekViewTitleLabel.foreground#008b94
pickerGroup.border#333F4A
pickerGroup.foreground#b7c5d3
progressBar.background#008b94
scrollbar.shadow#00000000
scrollbarSlider.activeBackground#333F4A77
scrollbarSlider.background#333F4A77
scrollbarSlider.hoverBackground#333F4A77
selection.background#037f8833
sideBar.background#1d252c
sideBar.foreground#8094a7
sideBarSectionHeader.background#1D252C
sideBarSectionHeader.foreground#8094a7
sideBarTitle.foreground#8094a7
statusBar.background#1D252C
statusBar.debuggingBackground#037f88
statusBar.debuggingBorder#037f88
statusBar.debuggingForeground#fff
statusBar.foreground#8094a7
statusBar.noFolderBackground#1D252C
statusBar.noFolderForeground#8094a7
statusBarItem.activeBackground#333F4A
statusBarItem.hoverBackground#333F4A
statusBarItem.prominentBackground#171d23
statusBarItem.prominentHoverBackground#333F4A
tab.activeBackground#1D252C
tab.activeBorderTop#037f88
tab.activeForeground#8094a7
tab.hoverBorderTop#037f88
tab.inactiveBackground#1D252C
tab.inactiveForeground#8094a799
tab.unfocusedActiveForeground#8094a7
tab.unfocusedInactiveForeground#8094a7
terminal.ansiBlack#41505E
terminal.ansiBlue#539afc
terminal.ansiBrightBlack#41505E
terminal.ansiBrightBlue#5EC4FF
terminal.ansiBrightCyan#70e1e8
terminal.ansiBrightGreen#33CED8
terminal.ansiBrightMagenta#b62d65
terminal.ansiBrightRed#b62d65
terminal.ansiBrightWhite#b7c5d3
terminal.ansiBrightYellow#ebbf83
terminal.ansiCyan#70e1e8
terminal.ansiGreen#008B94
terminal.ansiMagenta#b62d65
terminal.ansiRed#b62d65
terminal.ansiWhite#b7c5d3
terminal.ansiYellow#ebbf83
terminal.background#1d252c
terminal.foreground#b7c5d3
terminal.selectionBackground#8094a733
terminalCursor.background#008B9422
terminalCursor.foreground#008B94
textBlockQuote.background#171d23
textBlockQuote.border#171d23
textCodeBlock.background#171d23
textLink.activeForeground#718ca1
textLink.foreground#718ca1
textPreformat.foreground#718ca1
textSeparator.foreground#718ca1
titleBar.activeBackground#1D252C
titleBar.activeForeground#8094a7
titleBar.inactiveBackground#1D252C
titleBar.inactiveForeground#8094a799
tree.indentGuidesStroke#6c7d8f55
walkThrough.embeddedEditorBackground#1D252C
welcomePage.buttonBackground#1D252C
welcomePage.buttonHoverBackground#333F4A
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#42628c	italic
punctuation.accessor	#5EC4FF	—
constant	#b62d53	—
constant.language.null, constant.language.undefined	#b62d5399	—
entity	#70e1e8	—
invalid	#d95468	—
keyword	#5ec4ff	—
storage.type.class.js	#008B94	—
meta	#718CA1	—
meta.brace	#718CA1	—
punctuation	#70e1e8	—
fenced_code.block.language.markdown	#70e1e8	—
punctuation.definition.parameters	#718CA1	—
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter	#ebbf83	—
punctuation.definition.template-expression	#68A1F0	—
storage	#008B94	—
storage.type.function.arrow	#008B94	—
string, punctuation.definition.string	#68A1F0	—
string.template, punctuation.definition.string.template	#68A1F0	—
support	#718CA1	—
support.function	#70e1e8	—
support.class.component.js	#5ca1f0	—
meta.jsx.children.js	#b7c5d3ee	—
support.variable.property.dom	#b7c5d3	—
variable	#718CA1	—
source.css, source.stylus, source.scss, entity.other.attribute-name.class.css	#68A1F0	—
punctuation.definition.constant.css	#D95468	—
constant.other.color.rgb-value.hex.css	#E27E8Dff	—
support.type.property-name.css	#B7C5D3	—
keyword.other.important.scss	#b62d65	—
entity.other.attribute-name.pseudo-element.css	#5EC4FF	—
support.function.misc.scss	#B7C5D3	—
entity.other.attribute-name.id.css, punctuation.definition.entity.css	#68A1F0	—
entity.name.tag.css	#68A1F0	—
source.css support, source.stylus support	##B7C5D3	—
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant	#e27e8d	—
support.constant.property-value.css	#718CA1	—
keyword.other.unit.px.css, keyword.other.unit.percentage.css, constant.other.color.rgb-value.hex.css, keyword.other.unit.ms.css, keyword.other.unit.s.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.deg.css	#d95468	—
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string	#68A1F0	—
source.css variable, source.stylus variable	#ebbf83	—
entity.other	#33CED8	—
text.html.basic	#B7C5D3	—
toc-list.id.html	#68A1F0	—
punctuation.definition.tag.end.html, punctuation.definition.tag.begin.html	#718CA1	—
entity.name.tag.block.any.html, meta.tag.block.any.html, entity.name.tag.inline.any.html, entity.name.tag.structure.any.html, meta.tag.inline.any.html, entity.name.tag.html, entity.name.tag.js, meta.tag.js, meta.jsx.children.tsx, meta.tag.js, meta.jsx.children.tsx, meta.tag.js	#008b94	—
punctuation.definition.string.begin, punctuation.definition.string.end	#68A1F0	—
source.js storage.type.function	#008B94	—
variable.language, entity.name.type.class.js	#d98e48	—
meta.object-literal.key.js, meta.object.member.js	#718ca1	—
entity.other.inherited-class.js, variable.language.this.js, variable.other.readwrite.alias.js, meta.import.js	#b62d53	—
variable.other.constant.js, variable.other.constant.js.jsx	#8BD49C	—
support.type.property-name.json	#d98e48	—
variable.parameter.function.language.special.self.python	#fb94ff	—
storage.type.function.python	#b62d65	—
meta.function-call.arguments.python	#8bd49c	—
meta.function-call.generic.python	#008b94	—
source.json support	#718CA1	—
source.json string, source.json punctuation.definition.string, punctuation.definition.string.end.json, punctuation.definition.string.begin.json	#B7C5D3	—
source.php entity	#9effff	—
variable.other.php, punctuation.definition.variable.php, variable.other.php	#ebbf83	—
meta.paragraph.markdown	#b7c5d3ee	—
meta.paragraph.markdown	#b7c5d3ee	—
markup.bold	#718693	bold
markup.bold markup.italic, markup.italic markup.bold	#718693	italic bold
markup.inserted	#33CED8	—
markup.deleted	#b62d65	—
punctuation.definition.template-expression, punctuation.definition.string.template	#d98e48	—
punctuation.definition.inserted	#33CED8	—
punctuation.definition.deleted	#b62d65	—

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}!`;
}