Azure Color Theme

Name: Azure Color Theme
Author: usetheplatform

Publisher: usetheplatformThemes in package: 2

A color theme inspired by Framer Syntax and Ayu Dark

GitHub

Color themes

VS Code preview

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

Azure Color Theme — Azure Dark Color Theme

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#0a0e14
activityBar.border#0a0e14
activityBar.foreground#bab6c0
activityBar.inactiveForeground#525053
activityBarBadge.background#00AEFF
activityBarBadge.foreground#0a0e14
badge.background#00AEFF
badge.foreground#0a0e14
button.background#00AEFF
button.foreground#0a0e14
button.hoverBackground#00AEFF
debugExceptionWidget.background#0d1016
debugExceptionWidget.border#01060e
debugToolBar.background#0d1016
diffEditor.insertedTextBackground#91DD6426
diffEditor.removedTextBackground#FF66BB26
dropdown.background#0a0e14
dropdown.border#00000000
dropdown.foreground#8b888f
dropdown.listBackground#0a0e14
editor.background#0a0e14
editor.findMatchBackground#f7f1ff26
editor.findMatchBorder#00AEFF
editor.findMatchHighlightBackground#f7f1ff26
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#f7f1ff0c
editor.findRangeHighlightBorder#00000000
editor.foreground#f7f1ff
editor.hoverHighlightBackground#f7f1ff0c
editor.inactiveSelectionBackground#f7f1ff0c
editor.lineHighlightBackground#f7f1ff0c
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#0a0e14
editor.rangeHighlightBorder#0a0e14
editor.selectionBackground#bab6c026
editor.selectionHighlightBackground#f7f1ff26
editor.selectionHighlightBorder#00000000
editor.wordHighlightBackground#f7f1ff26
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#f7f1ff26
editor.wordHighlightStrongBorder#00000000
editorBracketMatch.background#3d424d4d
editorBracketMatch.border#3d424d99
editorCodeLens.foreground#626a73
editorError.foreground#ff3333
editorGroup.border#01060e
editorGroupHeader.noTabsBackground#0a0e14
editorGroupHeader.tabsBackground#0a0e14
editorGroupHeader.tabsBorder#01060e
editorGutter.addedBackground#7bd88f
editorGutter.deletedBackground#ff3333
editorGutter.modifiedBackground#fd9353
editorHoverWidget.background#0d1016
editorHoverWidget.border#000000
editorIndentGuide.activeBackground#3d424db3
editorIndentGuide.background#3d424d66
editorLink.activeForeground#00AEFF
editorMarkerNavigation.background#0d1016
editorOverviewRuler.addedForeground#7bd88f
editorOverviewRuler.border#01060e
editorOverviewRuler.currentContentForeground#0a0e14
editorOverviewRuler.deletedForeground#ff3333
editorOverviewRuler.errorForeground#ff3333
editorOverviewRuler.findMatchForeground#f7f1ff26
editorOverviewRuler.incomingContentForeground#0a0e14
editorOverviewRuler.infoForeground#5ad4e6
editorOverviewRuler.modifiedForeground#fd9353
editorOverviewRuler.rangeHighlightForeground#f7f1ff26
editorOverviewRuler.selectionHighlightForeground#f7f1ff26
editorOverviewRuler.warningForeground#fd9353
editorOverviewRuler.wordHighlightForeground#f7f1ff26
editorOverviewRuler.wordHighlightStrongForeground#f7f1ff26
editorRuler.foreground#525053
editorSuggestWidget.background#0d1016
editorSuggestWidget.border#000000
editorSuggestWidget.highlightForeground#00AEFF
editorSuggestWidget.selectedBackground#01060e
editorWarning.foreground#00AEFF
editorWhitespace.foreground#3d424d99
editorWidget.background#0d1016
extensionButton.prominentBackground#00AEFF
extensionButton.prominentForeground#0a0e14
extensionButton.prominentHoverBackground#00AEFF
focusBorder#0a0e14
foreground#f7f1ff
input.background#0a0e14
input.border#0a0e14
input.foreground#f7f1ff
input.placeholderForeground#69676c
inputOption.activeBorder#00AEFF
inputValidation.errorBackground#0a0e14
inputValidation.errorBorder#ff3333
inputValidation.infoBackground#0a0e14
inputValidation.infoBorder#39bae6
inputValidation.warningBackground#0a0e14
inputValidation.warningBorder#FFD14A
list.activeSelectionBackground#0a0e14
list.activeSelectionForeground#00AEFF
list.dropBackground#0a0e14bf
list.errorForeground#ff3333
list.focusBackground#50505034
list.focusForeground#f7f1ff
list.highlightForeground#00AEFF
list.hoverBackground#0a0e14
list.hoverForeground#f7f1ff
list.inactiveFocusBackground#0a0e14
list.inactiveSelectionBackground#0a0e14
list.inactiveSelectionForeground#00AEFF
list.invalidItemForeground#ff3333
list.warningForeground#fd9353
listFilterWidget.background#0a0e14
listFilterWidget.noMatchesOutline#ff3333
listFilterWidget.outline#0a0e14
panel.background#0a0e14
panel.border#01060e
panelTitle.activeBorder#00AEFF
panelTitle.activeForeground#b3b1ad
panelTitle.inactiveForeground#31313188
peekView.border#0a0e14
peekViewEditor.background#0a0e14
peekViewEditor.matchHighlightBackground#525053
peekViewEditorGutter.background#0a0e14
peekViewResult.background#0a0e14
peekViewResult.fileForeground#8b888f
peekViewResult.lineForeground#8b888f
peekViewResult.matchHighlightBackground#525053
peekViewResult.selectionBackground#0a0e14
peekViewResult.selectionForeground#f7f1ff
peekViewTitle.background#0a0e14
peekViewTitleDescription.foreground#8b888f
peekViewTitleLabel.foreground#f7f1ff
pickerGroup.border#01060e
pickerGroup.foreground#242831
progressBar.background#00AEFF
scrollbar.shadow#01060e
scrollbarSlider.activeBackground#3d424db3
scrollbarSlider.background#3d424d66
scrollbarSlider.hoverBackground#3d424d99
selection.background#bab6c026
settings.headerForeground#b3b1ad
settings.modifiedItemIndicator#6994bf
sideBar.background#0a0e14
sideBar.border#0a0e14
sideBar.dropBackground#0a0e14bf
sideBar.foreground#8b888f
sideBarSectionHeader.background#0a0e14
sideBarSectionHeader.foreground#69676c
sideBarTitle.foreground#525053
statusBar.background#0a0e14
statusBar.border#0a0e14
statusBar.debuggingBackground#69676c
statusBar.debuggingBorder#0a0e14
statusBar.debuggingForeground#f7f1ff
statusBar.foreground#69676c
statusBar.noFolderBackground#0a0e14
statusBar.noFolderBorder#0a0e14
statusBar.noFolderForeground#69676c
statusBarItem.activeBackground#0a0e14
statusBarItem.hoverBackground#0a0e14
statusBarItem.prominentBackground#0a0e14
statusBarItem.prominentHoverBackground#0a0e14
tab.activeBackground#0a0e14
tab.activeBorderTop#00AEFF
tab.activeForeground#8b888f
tab.border#01060e
tab.inactiveBackground#0a0e14
tab.inactiveForeground#8b888f
tab.unfocusedActiveBorderTop#3d424d
tab.unfocusedActiveForeground#3d424d
tab.unfocusedInactiveForeground#3d424d
terminal.ansiBlack#01060e
terminal.ansiBlue#53bdfa
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#00AEFF
terminal.ansiBrightCyan#95e6cb
terminal.ansiBrightGreen#91DD64
terminal.ansiBrightMagenta#ffee99
terminal.ansiBrightRed#f07178
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#FFD14A
terminal.ansiCyan#90e1c6
terminal.ansiGreen#91b362
terminal.ansiMagenta#fae994
terminal.ansiRed#ea6c73
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#f9af4f
terminal.background#0a0e14
terminal.foreground#b3b1ad
textBlockQuote.background#0a0e14
textLink.activeForeground#00AEFF
textLink.foreground#00AEFF
textPreformat.foreground#f7f1ff
titleBar.activeBackground#0a0e14
titleBar.activeForeground#8b888f
titleBar.border#0a0e14
titleBar.inactiveBackground#0a0e14
titleBar.inactiveForeground#525053
walkThrough.embeddedEditorBackground#0d1016
widget.shadow#0a0e14

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#626a73	italic
string, constant.other.symbol	#91DD64	—
string.regexp, constant.character, constant.other	#00AEFF	—
constant.numeric	#00AEFF	—
constant.language	#00AEFF	—
variable	#b3b1ad	—
variable.member	#f07178	—
variable.language	#FFD14A	italic
storage	#88DDFF	—
keyword	#FFD14A	—
keyword.operator, keyword.other, keyword.pipe, keyword.unused	#FF66BB	—
punctuation.separator, punctuation.terminator	#b3b1adb3	—
punctuation.section	#b3b1ad	—
punctuation.accessor	#FF66BB	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#00AEFF	—
entity.other.inherited-class	#39bae6	—
storage.type.function	#88DDFF	—
source.java storage.type.primitive	#39bae6	—
entity.name.function	#00AEFF	—
variable.parameter, meta.parameter	#B3B1AD	—
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#00AEFF	—
support.function, support.macro	#FFD14A	—
entity.name.import, entity.name.package	#91DD64	—
entity.name	#00AEFF	—
entity.name.tag, meta.tag.sgml	#00AEFF	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#39bae680	—
entity.other.attribute-name	#88DDFF	—
support.constant	#FF66BB	italic
support.type, support.class, source.go storage.type	#00AEFF	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation	#e6b673	—
invalid	#ff3333	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#00AEFF	—
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	#00AEFF	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#626a73	—
support.type.property-name	#B3B1AD	—
constant.numeric.line-number.find-in-files - match	#626a73	—
constant.numeric.line-number.match	#88DDFF	—
entity.name.filename.find-in-files	#91DD64	—
message.error	#ff3333	—
markup.heading, markup.heading entity.name	#91DD64	bold
markup.underline.link, string.other.link	#00AEFF	—
markup.italic	#f07178	italic
markup.bold	#f07178	bold
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
meta.separator	#626a73	bold
markup.quote	#95e6cb	italic
markup.list punctuation.definition.list.begin	#00AEFF	—
markup.inserted	#91b362	—
markup.changed	#6994bf	—
markup.deleted	#d96c75	—
markup.strike	#e6b673	—
markup.table	#00AEFF	—
text.html.markdown markup.inline.raw	#FF66BB	—
text.html.markdown meta.dummy.line-break	#626a73	—
punctuation.definition.markdown	#626a73	—

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