Logos Themes

Name: Logos Themes
Author: brendes

Publisher: brendesThemes in package: 7

Themes with monochrome syntax colors and calm UI

Open in VS Code GitHub

Color themes

VS Code preview

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

Logos Themes — Logos

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#000000
activityBar.background#f8f8f8
activityBar.border#00000028
activityBar.foreground#000000
activityBar.inactiveForeground#00000033
activityBarBadge.background#707070
activityBarBadge.foreground#ffffff
activityBarTop.activeBorder#000000
activityBarTop.background#f8f8f8
activityBarTop.foreground#000000
activityBarTop.inactiveForeground#00000033
badge.background#e8e8e8
badge.foreground#000000
breadcrumb.focusForeground#000000
breadcrumb.foreground#00000080
button.background#707070ee
button.border#00000028
button.foreground#ffffff
button.hoverBackground#707070
button.secondaryBackground#f2f2f2
button.secondaryForeground#000000
button.secondaryHoverBackground#e8e8e8
chat.slashCommandForeground#6680b8
checkbox.background#ffffff
checkbox.border#00000028
checkbox.foreground#000000
checkbox.selectBackground#667799
checkbox.selectBorder#00000028
commandCenter.activeBackground#f2f2f2
commandCenter.activeBorder#00000028
commandCenter.background#00000000
commandCenter.border#00000000
commandCenter.foreground#00000098
commandCenter.inactiveBorder#00000000
debugConsole.errorForeground#bb5555
debugConsole.infoForeground#000000
debugConsole.sourceForeground#000000
debugConsole.warningForeground#d08868
debugIcon.breakpointForeground#e89090
debugToolBar.background#f8f8f8
debugToolBar.border#00000028
descriptionForeground#000000
disabledForeground#00000080
dropdown.background#ffffff
dropdown.border#00000028
dropdown.foreground#000000
dropdown.listBackground#ffffff
editor.background#ffffff
editor.findMatchBackground#ddddddee
editor.findMatchForeground#000000
editor.findMatchHighlightBackground#f0d0aadd
editor.findMatchHighlightForeground#000000
editor.foldBackground#ffffff
editor.foreground#000000
editor.hoverHighlightBackground#e8e8e8
editor.lineHighlightBorder#e8e8e8
editor.placeholder.foreground#00000080
editor.rangeHighlightBackground#f2f2f2dd
editor.selectionBackground#e8e8e8ee
editor.selectionForeground#000000
editor.wordHighlightBackground#e8e8e8
editor.wordHighlightStrongBackground#e8e8e8
editor.wordHighlightTextBackground#e8e8e8
editorBracketMatch.background#e8e8e8
editorBracketMatch.border#000000
editorCodeLens.foreground#00000033
editorCursor.foreground#000000
editorGhostText.foreground#00000033
editorGroup.border#00000028
editorGroup.dropBackground#e8e8e888
editorGroupHeader.border#ffffff
editorGroupHeader.noTabsBackground#f8f8f8
editorGroupHeader.tabsBackground#f8f8f8
editorGroupHeader.tabsBorder#00000028
editorGutter.addedBackground#889944
editorGutter.addedSecondaryBackground#00000033
editorGutter.deletedSecondaryBackground#00000033
editorGutter.modifiedBackground#667799
editorGutter.modifiedSecondaryBackground#00000033
editorHoverWidget.background#f8f8f8
editorHoverWidget.border#00000088
editorHoverWidget.statusBarBackground#f8f8f8
editorIndentGuide.activeBackground1#00000033
editorIndentGuide.activeBackground2#00000033
editorIndentGuide.background1#00000018
editorIndentGuide.background2#00000000
editorInfo.foreground#00000098
editorInlayHint.background#ffffff
editorInlayHint.foreground#00000033
editorLightBulb.foreground#000000
editorLightBulbAi.foreground#000000
editorLightBulbAutoFix.foreground#000000
editorLineNumber.activeForeground#00000098
editorLineNumber.foreground#00000033
editorLink.activeForeground#6680b8
editorOverviewRuler.border#00000000
editorPane.background#ffffff
editorStickyScroll.border#00000000
editorStickyScrollHover.background#f2f2f2
editorSuggestWidget.background#f8f8f8
editorSuggestWidget.border#00000088
editorWidget.background#ffffff
editorWidget.border#00000028
editorWidget.foreground#000000
errorForeground#bb5555
focusBorder#00000040
foreground#000000
gitDecoration.deletedResourceForeground#00000098
gitDecoration.ignoredResourceForeground#00000068
gitDecoration.modifiedResourceForeground#00000098
gitDecoration.stageDeletedResourceForeground#00000098
gitDecoration.stageModifiedResourceForeground#00000098
gitDecoration.submoduleResourceForeground#00000098
gitDecoration.untrackedResourceForeground#00000098
gitlens.trailingLineForegroundColor#00000033
icon.foreground#000000
input.background#ffffff
input.border#00000028
input.foreground#000000
input.placeholderForeground#00000080
keybindingLabel.background#f2f2f2
keybindingLabel.border#000000
keybindingLabel.bottomBorder#000000
keybindingLabel.foreground#000000
list.activeSelectionBackground#e8e8e8
list.activeSelectionForeground#000000
list.deemphasizedForeground#00000068
list.dropBackground#e8e8e888
list.dropBetweenBackground#e8e8e888
list.errorForeground#bb5555
list.focusBackground#e8e8e8
list.focusForeground#000000
list.focusHighlightForeground#000000
list.highlightForeground#000000
list.hoverBackground#f2f2f2
list.hoverForeground#000000
list.inactiveFocusBackground#e8e8e8
list.inactiveFocusOutline#00000000
list.inactiveSelectionBackground#f2f2f2
list.inactiveSelectionForeground#000000
list.warningForeground#d08868
notebook.cellBorderColor#00000018
notebook.cellEditorBackground#ffffff
notebook.focusedCellBorder#00000033
notificationCenter.border#00000028
notificationCenterHeader.background#f2f2f2
notificationCenterHeader.foreground#000000
notificationLink.foreground#6680b8
notifications.background#ffffff
notifications.border#00000028
notifications.foreground#000000
notificationsErrorIcon.foreground#bb5555
notificationsInfoIcon.foreground#000000
notificationsWarningIcon.foreground#d08868
notificationToast.border#00000028
panel.background#f8f8f8
panel.border#00000028
panelInput.border#00000028
panelSection.border#00000028
panelSection.dropBackground#e8e8e888
panelSectionHeader.background#f8f8f8
panelSectionHeader.border#00000028
panelTitle.activeBorder#000000
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#00000068
peekView.border#00000088
peekViewEditor.background#f8f8f8
peekViewEditor.matchHighlightBackground#f0d0aadd
peekViewResult.background#f8f8f8
peekViewResult.fileForeground#000000
peekViewResult.lineForeground#000000
peekViewResult.matchHighlightBackground#f0d0aadd
peekViewResult.selectionBackground#e8e8e8
peekViewResult.selectionForeground#000000
peekViewTitle.background#f8f8f8
peekViewTitleDescription.foreground#00000098
peekViewTitleLabel.foreground#000000
pickerGroup.border#00000028
pickerGroup.foreground#000000
progressBar.background#000000
quickInput.background#ffffff
quickInput.foreground#000000
sash.hoverBorder#00000098
scmGraph.foreground1#707070
scmGraph.foreground2#707070
scmGraph.foreground3#707070
scmGraph.foreground4#707070
scmGraph.foreground5#707070
scmGraph.historyItemBaseRefColor#f0bca0
scmGraph.historyItemHoverAdditionsForeground#889944
scmGraph.historyItemHoverDefaultLabelBackground#aa8866
scmGraph.historyItemHoverDefaultLabelForeground#ffffff
scmGraph.historyItemHoverDeletionsForeground#bb5555
scmGraph.historyItemHoverLabelForeground#ffffff
scmGraph.historyItemRefColor#707070
scmGraph.historyItemRemoteRefColor#e89090
selection.background#e8e8e8
settings.dropdownListBorder#00000028
settings.focusedRowBackground#f2f2f2
settings.headerForeground#000000
settings.modifiedItemIndicator#00000098
settings.rowHoverBackground#f8f8f8
settings.textInputBackground#ffffff
settings.textInputBorder#00000040
sideBar.background#ffffff
sideBar.border#00000028
sideBar.dropBackground#e8e8e888
sideBar.foreground#00000098
sideBarActivityBarTop.border#f8f8f8
sideBarSectionHeader.background#ffffff
sideBarSectionHeader.border#00000028
sideBarSectionHeader.foreground#000000
sideBarTitle.background#f8f8f8
sideBarTitle.border#00000028
sideBySideEditor.horizontalBorder#00000028
sideBySideEditor.verticalBorder#00000028
statusBar.background#f8f8f8
statusBar.border#00000028
statusBar.debuggingBackground#f0bca0
statusBar.debuggingForeground#000000
statusBar.foreground#00000098
statusBar.noFolderBackground#ffffff
statusBar.noFolderForeground#000000
statusBarItem.compactHoverBackground#f2f2f2
statusBarItem.errorBackground#ffffff
statusBarItem.errorForeground#bb5555
statusBarItem.errorHoverBackground#bb5555
statusBarItem.errorHoverForeground#ffffff
statusBarItem.hoverBackground#f2f2f2
statusBarItem.hoverForeground#000000
statusBarItem.prominentBackground#ffffff
statusBarItem.prominentForeground#000000
statusBarItem.prominentHoverBackground#f2f2f2
statusBarItem.prominentHoverForeground#000000
statusBarItem.remoteBackground#f8f8f8
statusBarItem.remoteForeground#000000
statusBarItem.remoteHoverBackground#e8e8e8
statusBarItem.remoteHoverForeground#000000
statusBarItem.warningBackground#ffffff
statusBarItem.warningForeground#d08868
statusBarItem.warningHoverBackground#d08868
statusBarItem.warningHoverForeground#ffffff
symbolIcon.arrayForeground#000000
symbolIcon.booleanForeground#000000
symbolIcon.classForeground#000000
symbolIcon.colorForeground#000000
symbolIcon.constantForeground#000000
symbolIcon.constructorForeground#000000
symbolIcon.enumeratorForeground#000000
symbolIcon.enumeratorMemberForeground#000000
symbolIcon.eventForeground#000000
symbolIcon.fieldForeground#000000
symbolIcon.fileForeground#000000
symbolIcon.folderForeground#000000
symbolIcon.functionForeground#000000
symbolIcon.interfaceForeground#000000
symbolIcon.keyForeground#000000
symbolIcon.keywordForeground#000000
symbolIcon.methodForeground#000000
symbolIcon.moduleForeground#000000
symbolIcon.namespaceForeground#000000
symbolIcon.nullForeground#000000
symbolIcon.numberForeground#000000
symbolIcon.objectForeground#000000
symbolIcon.operatorForeground#000000
symbolIcon.packageForeground#000000
symbolIcon.propertyForeground#000000
symbolIcon.referenceForeground#000000
symbolIcon.snippetForeground#000000
symbolIcon.stringForeground#000000
symbolIcon.structForeground#000000
symbolIcon.textForeground#000000
symbolIcon.typeParameterForeground#000000
symbolIcon.unitForeground#000000
symbolIcon.variableForeground#000000
tab.activeBackground#ffffff
tab.activeBorder#ffffff
tab.activeBorderTop#00000028
tab.activeForeground#000000
tab.border#00000028
tab.dragAndDropBorder#00000098
tab.hoverBackground#f8f8f8
tab.hoverForeground#000000
tab.inactiveBackground#f8f8f8
tab.inactiveForeground#00000068
tab.inactiveModifiedBorder#00000000
tab.lastPinnedBorder#00000028
tab.unfocusedActiveBackground#ffffff
tab.unfocusedActiveBorder#ffffff
tab.unfocusedActiveBorderTop#00000000
tab.unfocusedActiveForeground#00000098
tab.unfocusedInactiveForeground#00000080
terminal.ansiBlack#000000
terminal.ansiBlue#667799
terminal.ansiBrightBlack#00000068
terminal.ansiBrightBlue#bbc8dd
terminal.ansiBrightCyan#b8dbd4
terminal.ansiBrightGreen#b0c088
terminal.ansiBrightMagenta#d8b8c8
terminal.ansiBrightRed#e89090
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#f0d0aa
terminal.ansiCyan#669988
terminal.ansiGreen#889944
terminal.ansiMagenta#aa7788
terminal.ansiRed#bb5555
terminal.ansiWhite#e8e8e8
terminal.ansiYellow#aa8866
terminal.background#ffffff
terminal.foreground#000000
terminal.initialHintForeground#00000033
terminal.selectionBackground#e8e8e8ee
terminal.tab.activeBorder#000000
terminalCommandDecoration.defaultBackground#00000068
terminalCommandDecoration.errorBackground#bb5555
terminalCommandDecoration.successBackground#707070
terminalOverviewRuler.border#00000000
terminalStickyScrollHover.background#f2f2f2
textBlockQuote.background#f8f8f8
textBlockQuote.border#00000028
textCodeBlock.background#f8f8f8
textLink.activeForeground#6680b8
textLink.foreground#6680b8
textPreformat.background#f8f8f8
textPreformat.foreground#000000
titleBar.activeBackground#f8f8f8
titleBar.activeForeground#000000
titleBar.border#f8f8f8
titleBar.inactiveBackground#f8f8f8
titleBar.inactiveForeground#00000080
toolbar.hoverBackground#e8e8e8
tree.inactiveIndentGuidesStroke#00000018
tree.indentGuidesStroke#00000018
widget.border#00000028
window.activeBorder#ffffff
window.inactiveBorder#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
keyword, storage.modifier	#000000	—
string	#00000098	—
comment, punctuation.definition.comment	#00000068	—
invalid.illegal	#bb5555	—
entity.name.section.markdown, heading, markup.heading	#000000	bold
markup.inline	#bb6677	—
entity.name.tag.yaml, punctuation.section.block, support.type.property-name.json	#000000	—