Arsenal Theme

Name: Arsenal Theme
Author: Joseph Akayesi

Publisher: Joseph AkayesiThemes in package: 2

Dark and light themes inspired by Arsenal FC

Open in VS Code GitHub

Color themes

VS Code preview

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

Arsenal Theme — Arsenal Dark

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#0D0606
activityBar.border#1F0A0A
activityBar.foreground#F0E6E6
activityBar.inactiveForeground#6B3030
activityBarBadge.background#EF0107
activityBarBadge.foreground#FFFFFF
badge.background#EF0107
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#EF0107
breadcrumb.background#140808
breadcrumb.foreground#6B3030
breadcrumbPicker.background#1A0A0A
button.background#EF0107
button.foreground#FFFFFF
button.hoverBackground#CC0006
button.secondaryBackground#2A1010
button.secondaryForeground#F0E6E6
checkbox.background#1A0A0A
checkbox.border#3A1515
checkbox.foreground#EF0107
descriptionForeground#A07070
diffEditor.insertedTextBackground#2A4A2A20
diffEditor.removedTextBackground#EF010720
disabledForeground#5C2A2A
dropdown.background#1A0A0A
dropdown.border#3A1515
dropdown.foreground#F0E6E6
editor.background#140808
editor.findMatchBackground#C5A02850
editor.findMatchHighlightBackground#C5A02830
editor.foreground#F0E6E6
editor.hoverHighlightBackground#EF010720
editor.inactiveSelectionBackground#EF010725
editor.lineHighlightBackground#1F0E0E
editor.rangeHighlightBackground#EF010715
editor.selectionBackground#EF010740
editor.selectionHighlightBackground#EF010720
editor.wordHighlightBackground#C5A02825
editor.wordHighlightStrongBackground#C5A02840
editorBracketMatch.background#C5A02830
editorBracketMatch.border#C5A028
editorCodeLens.foreground#5C2A2A
editorCursor.background#140808
editorCursor.foreground#EF0107
editorError.foreground#FF4444
editorGroup.border#2A1010
editorGroup.dropBackground#EF010720
editorGroupHeader.tabsBackground#0D0606
editorGroupHeader.tabsBorder#1F0A0A
editorGutter.addedBackground#2A7A2A
editorGutter.background#140808
editorGutter.deletedBackground#EF0107
editorGutter.modifiedBackground#C5A028
editorHoverWidget.background#1A0A0A
editorHoverWidget.border#3A1515
editorIndentGuide.activeBackground#5C2A2A
editorIndentGuide.background#2A1010
editorInfo.foreground#EF8080
editorLineNumber.activeForeground#EF0107
editorLineNumber.foreground#5C2A2A
editorOverviewRuler.border#1F0E0E
editorOverviewRuler.errorForeground#FF4444
editorOverviewRuler.findMatchForeground#C5A028
editorOverviewRuler.infoForeground#EF0107
editorOverviewRuler.rangeHighlightForeground#EF0107
editorOverviewRuler.selectionHighlightForeground#EF0107
editorOverviewRuler.warningForeground#C5A028
editorOverviewRuler.wordHighlightForeground#C5A028
editorOverviewRuler.wordHighlightStrongForeground#C5A028
editorRuler.foreground#2A1010
editorSuggestWidget.background#1A0A0A
editorSuggestWidget.border#3A1515
editorSuggestWidget.foreground#F0E6E6
editorSuggestWidget.highlightForeground#EF0107
editorSuggestWidget.selectedBackground#2A1010
editorWarning.foreground#C5A028
editorWhitespace.foreground#3A1A1A
editorWidget.background#1A0A0A
editorWidget.border#3A1515
editorWidget.foreground#F0E6E6
errorForeground#FF4444
focusBorder#EF010780
foreground#F0E6E6
gitDecoration.addedResourceForeground#4CAF50
gitDecoration.conflictingResourceForeground#FF6B6B
gitDecoration.deletedResourceForeground#EF0107
gitDecoration.ignoredResourceForeground#5C2A2A
gitDecoration.modifiedResourceForeground#C5A028
gitDecoration.submoduleResourceForeground#7090C0
gitDecoration.untrackedResourceForeground#66BB6A
icon.foreground#EF8080
input.background#1A0A0A
input.border#3A1515
input.foreground#F0E6E6
input.placeholderForeground#5C2A2A
inputOption.activeBackground#EF010720
inputOption.activeBorder#EF0107
inputValidation.errorBackground#3A0A0A
inputValidation.errorBorder#EF0107
inputValidation.warningBackground#2A1A00
inputValidation.warningBorder#C5A028
list.activeSelectionBackground#2A1010
list.activeSelectionForeground#FFFFFF
list.dropBackground#EF010730
list.focusBackground#2A1010
list.focusForeground#FFFFFF
list.highlightForeground#EF0107
list.hoverBackground#1F0C0C
list.hoverForeground#FFFFFF
list.inactiveSelectionBackground#1F0C0C
list.inactiveSelectionForeground#F0E6E6
menu.background#1A0A0A
menu.border#3A1515
menu.foreground#F0E6E6
menu.selectionBackground#2A1010
menu.selectionForeground#FFFFFF
menu.separatorBackground#3A1515
menubar.selectionBackground#2A1010
menubar.selectionForeground#FFFFFF
merge.currentHeaderBackground#2A4A2A80
merge.incomingHeaderBackground#2A2A4A80
notificationLink.foreground#C5A028
notifications.background#1A0A0A
notifications.border#3A1515
notifications.foreground#F0E6E6
notificationsErrorIcon.foreground#FF4444
notificationsInfoIcon.foreground#EF8080
notificationsWarningIcon.foreground#C5A028
notificationToast.border#EF0107
panel.background#110808
panel.border#2A1010
panelTitle.activeBorder#EF0107
panelTitle.activeForeground#F0E6E6
panelTitle.inactiveForeground#6B3030
peekView.border#EF0107
peekViewEditor.background#140808
peekViewEditor.matchHighlightBackground#C5A02840
peekViewEditorGutter.background#110808
peekViewResult.background#1A0A0A
peekViewResult.fileForeground#EF0107
peekViewResult.lineForeground#D4BFBF
peekViewResult.matchHighlightBackground#C5A02840
peekViewResult.selectionBackground#2A1010
peekViewResult.selectionForeground#FFFFFF
peekViewTitle.background#1A0A0A
peekViewTitleDescription.foreground#A07070
peekViewTitleLabel.foreground#FFFFFF
progressBar.background#EF0107
scrollbar.shadow#0D060640
scrollbarSlider.activeBackground#EF010740
scrollbarSlider.background#3A151530
scrollbarSlider.hoverBackground#5C2A2A50
selection.background#EF010740
sideBar.background#110808
sideBar.border#1F0A0A
sideBar.foreground#D4BFBF
sideBarSectionHeader.background#1A0A0A
sideBarSectionHeader.border#2A1010
sideBarSectionHeader.foreground#C5A028
sideBarTitle.foreground#EF0107
statusBar.background#EF0107
statusBar.border#CC0006
statusBar.debuggingBackground#C5A028
statusBar.debuggingForeground#140808
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#8B0000
statusBar.noFolderForeground#FFFFFF
statusBarItem.activeBackground#AA0005
statusBarItem.hoverBackground#CC0006
statusBarItem.remoteBackground#C5A028
statusBarItem.remoteForeground#140808
tab.activeBackground#140808
tab.activeBorder#EF0107
tab.activeBorderTop#EF0107
tab.activeForeground#FFFFFF
tab.border#1F0A0A
tab.hoverBackground#1A0A0A
tab.hoverForeground#F0E6E6
tab.inactiveBackground#0D0606
tab.inactiveForeground#6B3030
tab.unfocusedActiveBackground#140808
tab.unfocusedActiveForeground#A07070
tab.unfocusedInactiveBackground#0D0606
terminal.ansiBlue#7090C0
terminal.ansiBrightGreen#66BB6A
terminal.ansiBrightRed#FF4444
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#D4B84A
terminal.ansiGreen#4CAF50
terminal.ansiMagenta#C05070
terminal.ansiRed#EF0107
terminal.ansiYellow#C5A028
terminal.background#110808
terminal.foreground#F0E6E6
terminalCursor.background#140808
terminalCursor.foreground#EF0107
textBlockQuote.background#1A0A0A
textBlockQuote.border#EF0107
textCodeBlock.background#1A0A0A
textLink.activeForeground#D4B84A
textLink.foreground#C5A028
textPreformat.foreground#C5A028
textSeparator.foreground#3A1515
titleBar.activeBackground#0D0606
titleBar.activeForeground#F0E6E6
titleBar.border#1F0A0A
titleBar.inactiveBackground#0D0606
titleBar.inactiveForeground#6B3030
walkThrough.embeddedEditorBackground#1A0A0A
welcomePage.buttonBackground#1A0A0A
welcomePage.buttonHoverBackground#2A1010
widget.shadow#0D060680

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6B3A3A	italic
comment.block.documentation	#7A4444	italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python, storage.type, storage.modifier	#EF0107	bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as	#FF4444	—
string, string.quoted, string.template, string.regexp	#C5A028	—
constant.character.escape, string.regexp constant.character	#D4B84A	—
punctuation.definition.template-expression	#EF0107	—
constant.numeric	#D4883A	—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language.nan	#EF5050	italic
constant, variable.other.constant	#C5A028	—
entity.name.function, meta.function-call entity.name.function, support.function	#FF8080	—
variable.parameter, meta.function.parameters variable.other	#E8C090	italic
entity.name.class, entity.name.type, entity.name.type.class, entity.other.inherited-class, support.class	#FF9090	bold
meta.type.annotation, support.type, keyword.operator.type	#E8B0B0	—
entity.name.type.interface, entity.name.type.enum	#D4A0A0	italic
variable, variable.other, variable.other.readwrite	#F0E6E6	—
variable.other.property, support.variable.property, meta.property-name	#DDB8B8	—
meta.objectliteral string.quoted, meta.object-literal.key	#DDB8B8	—
keyword.operator	#EF4040	—
punctuation, meta.brace, punctuation.definition, punctuation.separator	#8A5050	—
meta.decorator, entity.name.function.decorator, punctuation.decorator	#C5A028	italic
entity.name.tag, meta.tag.sgml	#EF0107	bold
entity.other.attribute-name, meta.tag entity.other.attribute-name	#C5A028	—
entity.name.selector, meta.selector, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css	#FF8080	—
support.type.property-name.css	#DDB8B8	—
support.constant.property-value.css, constant.other.color.rgb-value.css	#C5A028	—
keyword.other.unit	#D4883A	—
markup.heading, entity.name.section.markdown, punctuation.definition.heading	#EF0107	bold
markup.bold	#FF8080	bold
markup.italic	#C5A028	italic
markup.underline.link, string.other.link	#C5A028	underline
markup.inline.raw, markup.fenced_code.block	#DDB8B8
source.json support.type.property-name, source.json meta.structure.dictionary.json string.quoted.double.json	#FF8080	—
source.json string.quoted.double.json	#C5A028	—
variable.language.special.self.python, variable.parameter.function.language.special.self.python	#EF0107	italic
support.function.builtin.python	#FF9090	—
entity.name.lifetime.rust, punctuation.definition.lifetime	#C5A028	italic
invalid, invalid.illegal, invalid.deprecated	#FF4444	strikethrough