Asphalt Theme

Name: Asphalt Theme
Author: makbit

Publisher: makbitThemes in package: 1

A high contrast dark theme made with vivid colors for Visual Studio Code

GitHub

VS Code preview

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

Asphalt Theme — Asphalt 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.

_____EDITOR_____+ #08080F
____Panels___(Output,Terminal)Orange+BlackRussian
___Find/Replace popup+
___Pop-up windows in editor and IDE+
___Popup in Editor (hover) and Welcome Page+/-
___Themes selection+
__Check...+/
__Pane (canvas)-
__Panel: Debugger console-/+
_Read access to variableemerald
_Ruler is a page area mark at 80grey
_VertLine for text block (left)green
_Word match selectiongreen
_Write access to variablemalina
-----TABS-----+
----Bar (most left)+
----MiniMap-on-RightSide-----+
----Panel (fileList on left)+
----Popup Warning at start (+List)Magenta (violet: 102,214; x-orange: 410,C30)
---Button (grey)+
---Circles (search)+
---DropDown List (panel)+
---Input/Find (navy)+
---List groups (themes)+
---List is used in fileList and popup+
---Tabs Stripe & Popup (...)+
---To Do...
activityBar.activeBackground#346
activityBar.activeBorder#AAA
activityBar.activeFocusBorder#FF0
activityBar.background#212737
activityBar.border#555
activityBar.dropBackground#F0F8
activityBar.foreground#FFF
activityBar.inactiveForeground#888
activityBarBadge.background#282
activityBarBadge.foreground#CCC
badge.background#346
badge.foreground#FFF
breadcrumb.activeSelectionForeground#0DD
breadcrumb.background#3B4454
breadcrumb.focusForeground#FD3
breadcrumb.foreground#CCC
breadcrumbPicker.background#212737
button.background#AAA
button.border#777
button.foreground#000
button.hoverBackground#DDD
button.secondaryBackground#776
button.secondaryForeground#001
button.secondaryHoverBackground#AA8
button.separator#444
contrastActiveBorder#ACC4
contrastBorder#AAC4
debugExceptionWidget.background#000000
debugExceptionWidget.border#D0200099
debugToolBar.background#234
descriptionForeground#F8F8F8
diffEditor.insertedTextBackground#85cf7b46
diffEditor.insertedTextBorder#00000000
diffEditor.removedTextBackground#d12d1e41
diffEditor.removedTextBorder#00000000
double (not used)-
dropdown.background#112
dropdown.border#888
dropdown.foreground#CCC
dropdown.listBackground#112
editor.background#001
editor.findMatchBackground#1114
editor.findMatchBorder#F80
editor.findMatchHighlightBackground#0408
editor.findMatchHighlightBorder#0808
editor.findRangeHighlightBackground#0554
editor.findRangeHighlightBorder#0F88
editor.foreground#AAA
editor.hoverHighlightBackground#28F8
editor.inactiveSelectionBackground#4447
editor.lineHighlightBackground#4457
editor.lineHighlightBorder#4445
editor.rangeHighlightBackground#0704
editor.selectionBackground#5557
editor.selectionForeground#FFF
editor.selectionHighlightBackground#223
editor.selectionHighlightBorder#454
editor.wordHighlightBackground#052
editor.wordHighlightStrongBackground#502
editorBracketMatch.background#1111
editorBracketMatch.border#CC08
editorCodeLens.foreground#CA4
editorCursor.background#000
editorCursor.foreground#FFF
editorError.border#F008
editorError.foreground#F00
editorGroup.border#28E
editorGroup.dropBackground#222
editorGroup.emptyBackground#000
editorGroup.focusedEmptyBorder#555
editorGroupHeader.noTabsBackground#223
editorGroupHeader.tabsBackground#3B4454
editorGroupHeader.tabsBorder#556
editorGutter.addedBackground#0F08
editorGutter.background#212737
editorGutter.commentRangeForeground#FF08
editorGutter.deletedBackground#A408
editorGutter.modifiedBackground#0FF8
editorHint.foreground#8F0
editorHoverWidget.background#012
editorHoverWidget.border#28E
editorHoverWidget.foreground#FFF
editorIndentGuide.activeBackground#280
editorIndentGuide.background#130
editorInfo.foreground#0F8
editorLineNumber.activeForeground#CF0
editorLineNumber.foreground#777
editorLink.activeForeground#28E
editorMarkerNavigation.background#000
editorMarkerNavigationError.background#D208
editorMarkerNavigationWarning.background#db0A
editorOverviewRuler.border#242424
editorOverviewRuler.commonContentForeground#AE81FF26
editorOverviewRuler.currentContentForeground#4D7C4859
editorOverviewRuler.incomingContentForeground#6C160F80
editorPane.background#343
editorRuler.foreground#222
editorSuggestWidget.background#001
editorSuggestWidget.border#28E
editorSuggestWidget.foreground#AAA
editorSuggestWidget.highlightForeground#FFF
editorSuggestWidget.selectedBackground#024
editorWarning.border#F40
editorWarning.foreground#F80
editorWhitespace.foreground#0777
editorWidget.background#111727
editorWidget.border#555
errorForeground#F52
extensionButton.prominentBackground#313131
extensionButton.prominentForeground#F8F8F2
extensionButton.prominentHoverBackground#363636
focusBorder#AAA8
foreground#CCC
gitDecoration.conflictingResourceForeground#D02000
gitDecoration.deletedResourceForeground#e6226a
gitDecoration.ignoredResourceForeground#c9c3b4
gitDecoration.modifiedResourceForeground#DDB700
gitDecoration.submoduleResourceForeground#b9b3c5
gitDecoration.untrackedResourceForeground#7dac20
gitlens.gutterBackgroundColor#200
gitlens.gutterForegroundColor#CCC
gitlens.gutterUncommittedForegroundColor#3abaedf5
gitlens.lineHighlightBackgroundColor#3abaed17
gitlens.trailingLineBackgroundColor#00000000
gitlens.trailingLineForegroundColor#36342b
input.background#112
input.border#777
input.foreground#CCC
input.placeholderForeground#350
inputOption.activeBorder#FF0
inputValidation.errorBackground#800
inputValidation.errorBorder#C00
inputValidation.errorForeground#EEE
inputValidation.infoBackground#002
inputValidation.infoBorder#4BE
inputValidation.warningBackground#C30
inputValidation.warningBorder#410
list.activeSelectionBackground#AAC4
list.activeSelectionForeground#BF0
list.dropBackground#3338
list.focusBackground#4444
list.focusForeground#CCC
list.highlightForeground#FF8
list.hoverBackground#5794
list.hoverForeground#FFF
list.inactiveFocusBackground#3334
list.inactiveSelectionBackground#3464
list.inactiveSelectionForeground#BF0
list.invalidItemForeground#F00
listFilterWidget.background#000
menu.background#212737
menu.border#777
menu.foreground#CCC
menu.selectionBackground#4578
menu.selectionForeground#CF0
menu.separatorBackground#888
menubar.selectionBackground#346
menubar.selectionBorder#28F
menubar.selectionForeground#FFF
merge.border#AE81FF80
merge.commonContentBackground#AE81FF26
merge.commonHeaderBackground#AE81FF26
merge.currentContentBackground#4D7C4859
merge.currentHeaderBackground#4D7C4859
merge.incomingContentBackground#6C160F80
merge.incomingHeaderBackground#6C160F80
minimap.background#111727
minimap.errorHighlight#F008
minimap.findMatchHighlight#0F08
minimap.selectionHighlight#8BF8
minimap.warningHighlight#F408
minimapGutter.addedBackground#0808
minimapGutter.deletedBackground#8008
minimapGutter.modifiedBackground#8808
minimapSlider.activeBackground#5798
minimapSlider.background#3348
minimapSlider.hoverBackground#4568
notificationCenter.border#555
notificationCenterHeader.background#410
notificationCenterHeader.foreground#FFF
notificationLink.foreground#28F
notifications.background#D30
notifications.border#444
notifications.foreground#FFF
notificationToast.border#555
panel.background#111727
panel.border#555
panel.dropBackground#222
panelInput.border#555
panelTitle.activeBorder#FFF
panelTitle.activeForeground#FFF
panelTitle.inactiveForeground#FB0
peekView.border#555
peekViewEditor.background#020
peekViewEditor.matchHighlightBackground#111111E6
peekViewEditorGutter.background#000C
peekViewResult.background#222C
peekViewResult.fileForeground#C6C7C6
peekViewResult.lineForeground#F8F8F2
peekViewResult.matchHighlightBackground#2228
peekViewResult.selectionBackground#4A4A4AE6
peekViewResult.selectionForeground#F8F8F8
peekViewTitle.background#000000E6
peekViewTitleDescription.foreground#DCDCDB
peekViewTitleLabel.foreground#F8F8F8
pickerGroup.border#555
pickerGroup.foreground#FFF
progressBar.background#455
scrollbar.shadow#5558
scrollbarSlider.activeBackground#FFF8
scrollbarSlider.background#8888
scrollbarSlider.hoverBackground#8888
selection.background#3AB9ED59
settings.checkboxBackground#222
settings.checkboxBorder#555
settings.checkboxForeground#EEE
sideBar.background#001
sideBar.border#555
sideBar.dropBackground#112
sideBar.foreground#999
sideBarSectionHeader.background#212737
sideBarSectionHeader.border#555
sideBarSectionHeader.foreground#FB0
sideBarTitle.foreground#F80
statusBar.background#CCC
statusBar.border#555
statusBar.debuggingBackground#D41
statusBar.debuggingForeground#FFF
statusBar.foreground#111
statusBar.noFolderBackground#ABC
statusBar.noFolderForeground#000
statusBarItem.activeBackground#579
statusBarItem.hoverBackground#777A
statusBarItem.prominentBackground#502
statusBarItem.prominentForeground#FF8
tab.activeBackground#3B4454
tab.activeBorder#556
tab.activeForeground#FFF
tab.border#556
tab.hoverBackground#4A5060
tab.hoverBorder#457
tab.inactiveBackground#212737
tab.inactiveForeground#CCC
tab.unfocusedActiveBorder#000
tab.unfocusedActiveForeground#DDD
tab.unfocusedHoverBackground#8888
tab.unfocusedHoverBorder#000
tab.unfocusedInactiveForeground#BBB
terminal.ansiBlack#2E3436
terminal.ansiBlue#3465A4
terminal.ansiBrightBlack#555753
terminal.ansiBrightBlue#729FCF
terminal.ansiBrightCyan#34E2E2
terminal.ansiBrightGreen#8AE234
terminal.ansiBrightMagenta#AD7FA8
terminal.ansiBrightRed#EF2929
terminal.ansiBrightWhite#EEEEEC
terminal.ansiBrightYellow#FCE94F
terminal.ansiCyan#06989A
terminal.ansiGreen#4E9A06
terminal.ansiMagenta#75507B
terminal.ansiRed#CC0000
terminal.ansiWhite#D3D7CF
terminal.ansiYellow#C4A000
terminal.background#001
terminal.border#555
terminal.foreground#2A2
terminalCursor.background#040
terminalCursor.foreground#0F0
textBlockQuote.background#222
textBlockQuote.border#555
textCodeBlock.background#345
textLink.activeForeground#8CF
textLink.foreground#28F
textPreformat.foreground#EEE
textSeparator.foreground#CCC
titleBar.activeBackground#125
titleBar.activeForeground#EEE
titleBar.border#556
titleBar.inactiveBackground#112
titleBar.inactiveForeground#888
toolbar.activeBackground#F40
toolbar.hoverBackground#6798
toolbar.hoverOutline#28F
walkThrough.embeddedEditorBackground#022
welcomePage.buttonBackground#333
welcomePage.buttonHoverBackground#334
widget.shadow#000000
Word match selectionyellow

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, support	#FF0	—
comment, punctuation.definition.comment	#777	—
storage.type.class.doxygen	#741	—
invalid	#E15	—
constant.other.placeholder	#084	—
entity.name.label	#F40	bold
constant, constant.numeric, support.constant, keyword.other.unit, entity.name.type.parameter	#F4F	—
constant.language, constant.other	#F08	—
string, punctuation.definition.string, constant.character, constant.other.object.key, constant.other.symbol.quoted, meta.object-literal.key, variable.parameter.url	#480	—
variable, variable.name, variable.function, variable.language, variable.other, variable.other.local, meta.definition.variable	#FE2	—
variable.other.enummember	#0DA	—
variable.other.global	—	bold
variable.parameter, variable.parameter.preprocessor, constant.name.attribute.tag, support.variable.property, meta.function.argument, meta.function-call.arguments	#FA2	—
variable.other.class, variable.other.property, meta.member.access, meta.attribute, meta.attribute.python, meta.property.class, meta.property.object, meta.parameter.optional	#CF2	—
storage, storage.modifier, storage.modifier.reference, variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self	#FFF	—
storage.type, meta.qualified_type, meta.template	#FFF	—
entity.name.class, entity.name.type, entity.name.namespace, entity.name.tag, entity.name.section, entity.other.inherited-class, support.type, support.class, support.variable	#FFF	—
entity.name.function, entity.name.function.definition, entity.name.function.call, support.function, meta.function, meta.function.lua, meta.function.type-declaration, meta.function-call, meta.function-call.generic, meta.method, meta.method-call, meta.method.declaration, variable.language.super.ts	#4F0	—
entity.name.function.member	#0F4	—
keyword.control.directive, keyword.control.import, keyword.other.import, keyword.control.at-rule, meta.preprocessor, meta.tag.preprocessor, meta.import.elm, punctuation.definition.directive, variable.control.import.include	#FFF	regular
entity.name.function.preprocessor, meta.preprocessor.macro	#08F	—
punctuation, keyword.other.colon, keyword.other.period, begin.bracket, end.bracket, meta.brace, meta.tag.xml, meta.tag.template.block.twig, meta.tag.template.value.twig, meta.expression.parenthesized, meta.structure.dictionary, support.function.construct.begin, support.function.construct.end	#FFF	—
keyword.control, keyword.function, keyword.local, keyword.operator, keyword.other, keyword.type, keyword.type-alias, keyword.blade, keyword.begin, keyword.end, entity.name.function.operator, support.class.console, punctuation.definition.block.tag, punctuation.definition.attribute	#FFF	—
keyword.control	—	bold
text.html.derivative, text.html	#EEE	—
entity.name.tag.html, meta.tag	#08F	—
entity.other.attribute-name, support.type.property-name	#FE0	—
source.css, meta.embedded	#4A0	—
meta.selector	#4F0	—
token.info-token	#08F	—
token.warn-token	#FE0	—
token.error-token	#F08	—
token.debug-token	#F40	—

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