Svelte Theme 5

Name: Svelte Theme 5
Author: Zubair Ibn Zamir

Publisher: Zubair Ibn ZamirThemes in package: 1

Svelte Theme, inspired by Svelte Docs

Open in VS Code GitHub

VS Code preview

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

Svelte Theme 5 — Svelte Theme v5

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.activeBorder#f78166
activityBar.background#0d1117
activityBar.border#30363d
activityBar.foreground#e6edf3
activityBar.inactiveForeground#7d8590
activityBarBadge.background#1f6feb
activityBarBadge.foreground#ffffff
badge.background#1f6feb
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#7d8590
breadcrumb.focusForeground#e6edf3
breadcrumb.foreground#7d8590
breadcrumbPicker.background#161b22
button.background#238636
button.foreground#ffffff
button.hoverBackground#2ea043
button.secondaryBackground#282e33
button.secondaryForeground#c9d1d9
button.secondaryHoverBackground#30363d
checkbox.background#161b22
checkbox.border#30363d
debugConsole.errorForeground#ffa198
debugConsole.infoForeground#8b949e
debugConsole.sourceForeground#e3b341
debugConsole.warningForeground#d29922
debugConsoleInputIcon.foreground#bc8cff
debugIcon.breakpointForeground#f85149
debugTokenExpression.boolean#56d364
debugTokenExpression.error#ffa198
debugTokenExpression.name#79c0ff
debugTokenExpression.number#56d364
debugTokenExpression.string#a5d6ff
debugTokenExpression.value#a5d6ff
debugToolBar.background#161b22
descriptionForeground#7d8590
diffEditor.insertedLineBackground#23863626
diffEditor.insertedTextBackground#3fb9504d
diffEditor.removedLineBackground#da363326
diffEditor.removedTextBackground#ff7b724d
dropdown.background#161b22
dropdown.border#30363d
dropdown.foreground#e6edf3
dropdown.listBackground#161b22
editor.background#0d1117
editor.findMatchBackground#9e6a03
editor.findMatchHighlightBackground#f2cc6080
editor.focusedStackFrameHighlightBackground#2ea04366
editor.foldBackground#6e76811a
editor.foreground#e6edf3
editor.lineHighlightBackground#6e76811a
editor.linkedEditingBackground#2f81f712
editor.selectionHighlightBackground#3fb95040
editor.stackFrameHighlightBackground#bb800966
editor.wordHighlightBackground#6e768180
editor.wordHighlightBorder#6e768199
editor.wordHighlightStrongBackground#6e76814d
editor.wordHighlightStrongBorder#6e768199
editorBracketHighlight.foreground1#79c0ff
editorBracketHighlight.foreground2#56d364
editorBracketHighlight.foreground3#e3b341
editorBracketHighlight.foreground4#ffa198
editorBracketHighlight.foreground5#ff9bce
editorBracketHighlight.foreground6#d2a8ff
editorBracketHighlight.unexpectedBracket.foreground#7d8590
editorBracketMatch.background#3fb95040
editorBracketMatch.border#3fb95099
editorCursor.foreground#2f81f7
editorGroup.border#30363d
editorGroupHeader.tabsBackground#010409
editorGroupHeader.tabsBorder#30363d
editorGutter.addedBackground#2ea04366
editorGutter.deletedBackground#f8514966
editorGutter.modifiedBackground#bb800966
editorIndentGuide.activeBackground#e6edf33d
editorIndentGuide.background#e6edf31f
editorInlayHint.background#8b949e33
editorInlayHint.foreground#7d8590
editorInlayHint.paramBackground#8b949e33
editorInlayHint.paramForeground#7d8590
editorInlayHint.typeBackground#8b949e33
editorInlayHint.typeForeground#7d8590
editorLineNumber.activeForeground#e6edf3
editorLineNumber.foreground#6e7681
editorOverviewRuler.border#010409
editorWhitespace.foreground#484f58
editorWidget.background#161b22
errorForeground#f85149
focusBorder#1f6feb
foreground#e6edf3
gitDecoration.addedResourceForeground#3fb950
gitDecoration.conflictingResourceForeground#db6d28
gitDecoration.deletedResourceForeground#f85149
gitDecoration.ignoredResourceForeground#6e7681
gitDecoration.modifiedResourceForeground#d29922
gitDecoration.submoduleResourceForeground#7d8590
gitDecoration.untrackedResourceForeground#3fb950
icon.foreground#7d8590
input.background#0d1117
input.border#30363d
input.foreground#e6edf3
input.placeholderForeground#6e7681
keybindingLabel.foreground#e6edf3
list.activeSelectionBackground#6e768166
list.activeSelectionForeground#e6edf3
list.focusBackground#388bfd26
list.focusForeground#e6edf3
list.highlightForeground#2f81f7
list.hoverBackground#6e76811a
list.hoverForeground#e6edf3
list.inactiveFocusBackground#388bfd26
list.inactiveSelectionBackground#6e768166
list.inactiveSelectionForeground#e6edf3
minimapSlider.activeBackground#8b949e47
minimapSlider.background#8b949e33
minimapSlider.hoverBackground#8b949e3d
notificationCenterHeader.background#161b22
notificationCenterHeader.foreground#7d8590
notifications.background#161b22
notifications.border#30363d
notifications.foreground#e6edf3
notificationsErrorIcon.foreground#f85149
notificationsInfoIcon.foreground#2f81f7
notificationsWarningIcon.foreground#d29922
panel.background#010409
panel.border#30363d
panelInput.border#30363d
panelTitle.activeBorder#f78166
panelTitle.activeForeground#e6edf3
panelTitle.inactiveForeground#7d8590
peekViewEditor.background#6e76811a
peekViewEditor.matchHighlightBackground#bb800966
peekViewResult.background#0d1117
peekViewResult.matchHighlightBackground#bb800966
pickerGroup.border#30363d
pickerGroup.foreground#7d8590
progressBar.background#1f6feb
quickInput.background#161b22
quickInput.foreground#e6edf3
scrollbar.shadow#484f5833
scrollbarSlider.activeBackground#8b949e47
scrollbarSlider.background#8b949e33
scrollbarSlider.hoverBackground#8b949e3d
settings.headerForeground#e6edf3
settings.modifiedItemIndicator#bb800966
sideBar.background#010409
sideBar.border#30363d
sideBar.foreground#e6edf3
sideBarSectionHeader.background#010409
sideBarSectionHeader.border#30363d
sideBarSectionHeader.foreground#e6edf3
sideBarTitle.foreground#e6edf3
statusBar.background#0d1117
statusBar.border#30363d
statusBar.debuggingBackground#da3633
statusBar.debuggingForeground#ffffff
statusBar.focusBorder#1f6feb80
statusBar.foreground#7d8590
statusBar.noFolderBackground#0d1117
statusBarItem.activeBackground#e6edf31f
statusBarItem.focusBorder#1f6feb
statusBarItem.hoverBackground#e6edf314
statusBarItem.prominentBackground#6e768166
statusBarItem.remoteBackground#30363d
statusBarItem.remoteForeground#e6edf3
symbolIcon.arrayForeground#f0883e
symbolIcon.booleanForeground#58a6ff
symbolIcon.classForeground#f0883e
symbolIcon.colorForeground#79c0ff
symbolIcon.constantForeground#aff5b4#7ee787#56d364#3fb950#2ea043#238636#196c2e#0f5323#033a16#04260f
symbolIcon.constructorForeground#d2a8ff
symbolIcon.enumeratorForeground#f0883e
symbolIcon.enumeratorMemberForeground#58a6ff
symbolIcon.eventForeground#6e7681
symbolIcon.fieldForeground#f0883e
symbolIcon.fileForeground#d29922
symbolIcon.folderForeground#d29922
symbolIcon.functionForeground#bc8cff
symbolIcon.interfaceForeground#f0883e
symbolIcon.keyForeground#58a6ff
symbolIcon.keywordForeground#ff7b72
symbolIcon.methodForeground#bc8cff
symbolIcon.moduleForeground#ff7b72
symbolIcon.namespaceForeground#ff7b72
symbolIcon.nullForeground#58a6ff
symbolIcon.numberForeground#3fb950
symbolIcon.objectForeground#f0883e
symbolIcon.operatorForeground#79c0ff
symbolIcon.packageForeground#f0883e
symbolIcon.propertyForeground#f0883e
symbolIcon.referenceForeground#58a6ff
symbolIcon.snippetForeground#58a6ff
symbolIcon.stringForeground#79c0ff
symbolIcon.structForeground#f0883e
symbolIcon.textForeground#79c0ff
symbolIcon.typeParameterForeground#79c0ff
symbolIcon.unitForeground#58a6ff
symbolIcon.variableForeground#f0883e
tab.activeBackground#0d1117
tab.activeBorder#0d1117
tab.activeBorderTop#f78166
tab.activeForeground#e6edf3
tab.border#30363d
tab.hoverBackground#0d1117
tab.inactiveBackground#010409
tab.inactiveForeground#7d8590
tab.unfocusedActiveBorder#0d1117
tab.unfocusedActiveBorderTop#30363d
tab.unfocusedHoverBackground#6e76811a
terminal.ansiBlack#484f58
terminal.ansiBlue#12b5e5
terminal.ansiBrightBlack#6e7681
terminal.ansiBrightBlue#79c0ff
terminal.ansiBrightCyan#56d4dd
terminal.ansiBrightGreen#56d364
terminal.ansiBrightMagenta#d2a8ff
terminal.ansiBrightRed#ffa198
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#fcba28
terminal.ansiCyan#39c5cf
terminal.ansiGreen#0ba95b
terminal.ansiMagenta#9d7dce
terminal.ansiRed#f38ba3
terminal.ansiWhite#c0c5ce
terminal.ansiYellow#f99157
terminal.foreground#e6edf3
textBlockQuote.background#010409
textBlockQuote.border#30363d
textCodeBlock.background#6e768166
textLink.activeForeground#2f81f7
textLink.foreground#2f81f7
textPreformat.foreground#7d8590
textSeparator.foreground#21262d
titleBar.activeBackground#0d1117
titleBar.activeForeground#7d8590
titleBar.border#30363d
titleBar.inactiveBackground#010409
titleBar.inactiveForeground#7d8590
tree.indentGuidesStroke#21262d
welcomePage.buttonBackground#21262d
welcomePage.buttonHoverBackground#30363d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8c8c8c	—
keyword, storage.type, storage.modifier	#57b5f4	—
entity.name.tag, support.type.property-name.json, source meta.var.expr meta.function-call, support.function, meta.definition.function, meta.function-call, source.svelte, meta.selector.css, constant.numeric.css, meta.embedded.block.svelte constant.numeric.decimal.js, source.svelte meta.embedded.expression.svelte source.ts constant.numeric.decimal, punctuation.definition.variable.svelte, meta.type.annotation entity.name.type	#ebaf94	—
string, punctuation.definition.string, meta.tag.void.svelte meta.embedded.expression.svelte variable.other.readwrite.ts	#ccb88f	—
source, text, punctuation.accessor, string.template.js, keyword.operator, meta.attribute-selector, entity.name.type, source meta.embedded.block.svelte meta.function, variable.other.object, source.svelte meta.tag.void.svelte meta.directive.bind.svelte meta.embedded.expression.svelte source.ts variable.other.readwrite.ts, entity.other.attribute-name.svelte, punctuation.separator.key-value.svelte, punctuation.section.embedded, string.quoted.svelte variable.other.readwrite.ts, meta.attribute.alt.svelte meta.embedded.expression.svelte variable.other.readwrite, punctuation.definition.block.begin.svelte, punctuation.definition.block.end.svelte, punctuation.definition.tag.begin.svelte, punctuation.definition.tag.end.svelte, punctuation.definition.string.template.begin.js, punctuation.definition.string.template.end.js, punctuation.definition.keyword.svelte	#c4c1bb	—