Spino Theme
Publisher: Orhan AlizadehThemes in package: 1
A modern, elegant, and carefully crafted dark theme for Visual Studio Code.
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.activeBackground#171A1F
- activityBar.activeBorder#61AFEF
- activityBar.background#12151A
- activityBar.border#22252D
- activityBar.foreground#F5F5F5
- activityBar.inactiveForeground#7E8698
- activityBarBadge.background#61AFEF
- activityBarBadge.foreground#FFFFFF
- badge.background#61AFEF
- badge.foreground#FFFFFF
- breadcrumb.activeSelectionForeground#FFFFFF
- breadcrumb.background#171A1F
- breadcrumb.foreground#9AA4B3
- commandCenter.activeBackground#253753
- commandCenter.activeForeground#FFFFFF
- commandCenter.background#171A1F
- commandCenter.foreground#D6D9E0
- debugExceptionWidget.background#3D1E1E
- debugExceptionWidget.border#FF6B6B
- debugToolBar.background#20242C
- descriptionForeground#8F98AA
- diffEditor.insertedLineBackground#2E7D321A
- diffEditor.insertedTextBackground#2E7D3233
- diffEditor.removedLineBackground#C628281A
- diffEditor.removedTextBackground#C6282833
- disabledForeground#6C7486
- dropdown.background#20242C
- dropdown.border#2D3440
- dropdown.foreground#D6D9E0
- editor.background#171A1F
- editor.findMatchBackground#EBCB8B55
- editor.findMatchHighlightBackground#EBCB8B22
- editor.foreground#D6D9E0
- editor.hoverHighlightBackground#3B82F622
- editor.selectionBackground#315C9C66
- editor.selectionHighlightBackground#3B82F633
- editor.wordHighlightBackground#4A638C55
- editor.wordHighlightStrongBackground#61AFEF44
- editorBracketHighlight.foreground1#61AFEF
- editorBracketHighlight.foreground2#C678DD
- editorBracketHighlight.foreground3#E5A97B
- editorBracketHighlight.foreground4#7DCEA0
- editorBracketHighlight.foreground5#D19A66
- editorBracketHighlight.foreground6#7CC7FF
- editorBracketMatch.background#3B82F622
- editorBracketMatch.border#61AFEF
- editorBracketPairGuide.activeBackground1#61AFEF
- editorBracketPairGuide.activeBackground2#C678DD
- editorBracketPairGuide.activeBackground3#E5A97B
- editorBracketPairGuide.activeBackground4#7DCEA0
- editorBracketPairGuide.activeBackground5#D19A66
- editorBracketPairGuide.activeBackground6#7CC7FF
- editorCursor.foreground#7CC7FF
- editorError.foreground#FF6B6B
- editorGutter.addedBackground#7DCEA0
- editorGutter.deletedBackground#FF6B6B
- editorGutter.modifiedBackground#61AFEF
- editorHint.foreground#7DCEA0
- editorHoverWidget.background#20242C
- editorHoverWidget.border#2D3440
- editorIndentGuide.activeBackground1#27577e
- editorIndentGuide.activeBackground2#C678DD
- editorIndentGuide.activeBackground3#E5A97B
- editorIndentGuide.background1#2B313B
- editorIndentGuide.background2#353D48
- editorIndentGuide.background3#414B57
- editorInfo.foreground#61AFEF
- editorLineNumber.activeForeground#AEB7C7
- editorLineNumber.foreground#555F73
- editorSuggestWidget.background#20242C
- editorSuggestWidget.border#2D3440
- editorSuggestWidget.foreground#D6D9E0
- editorSuggestWidget.highlightForeground#61AFEF
- editorSuggestWidget.selectedBackground#253753
- editorWarning.foreground#F7C948
- editorWhitespace.foreground#353C47
- editorWidget.background#20242C
- editorWidget.border#2D3440
- errorForeground#FF6B6B
- focusBorder#3B82F6
- foreground#D6D9E0
- gitDecoration.addedResourceForeground#7DCEA0
- gitDecoration.conflictingResourceForeground#EBCB8B
- gitDecoration.deletedResourceForeground#FF6B6B
- gitDecoration.ignoredResourceForeground#6B7280
- gitDecoration.modifiedResourceForeground#61AFEF
- gitDecoration.renamedResourceForeground#56B6C2
- gitDecoration.untrackedResourceForeground#98C379
- icon.foreground#C8D1E0
- input.background#1B1F27
- input.border#2D3440
- input.foreground#D6D9E0
- input.placeholderForeground#7A8495
- list.activeSelectionBackground#253753
- list.activeSelectionForeground#FFFFFF
- list.focusBackground#253753
- list.focusForeground#FFFFFF
- list.highlightForeground#61AFEF
- list.hoverBackground#222B39
- list.hoverForeground#FFFFFF
- list.inactiveSelectionBackground#1F2835
- list.inactiveSelectionForeground#D6D9E0
- menu.background#20242C
- menu.foreground#D6D9E0
- menu.selectionBackground#253753
- menu.selectionForeground#FFFFFF
- minimap.background#171A1F
- minimap.errorHighlight#FF6B6B
- minimap.findMatchHighlight#EBCB8B55
- minimap.selectionHighlight#315C9C66
- minimap.warningHighlight#F7C948
- notificationCenterHeader.background#171A1F
- notifications.background#20242C
- notifications.border#2D3440
- notifications.foreground#D6D9E0
- panel.background#171A1F
- panel.border#22252D
- panelTitle.activeForeground#FFFFFF
- panelTitle.inactiveForeground#8F98AA
- peekView.border#61AFEF
- peekViewEditor.background#1B1F27
- peekViewEditor.matchHighlightBackground#EBCB8B44
- peekViewResult.background#171A1F
- peekViewResult.matchHighlightBackground#61AFEF33
- peekViewResult.selectionBackground#253753
- peekViewTitle.background#12151A
- problemsErrorIcon.foreground#FF6B6B
- problemsInfoIcon.foreground#61AFEF
- problemsWarningIcon.foreground#F7C948
- progressBar.background#61AFEF
- scrollbarSlider.activeBackground#8F98AAAA
- scrollbarSlider.background#5A657755
- scrollbarSlider.hoverBackground#74819588
- selection.background#315C9C66
- sideBar.background#171A1F
- sideBar.border#22252D
- sideBar.foreground#C7CDD9
- sideBarSectionHeader.background#1C2028
- sideBarSectionHeader.border#252932
- sideBarSectionHeader.foreground#FFFFFF
- sideBarTitle.foreground#FFFFFF
- statusBar.background#12151A
- statusBar.debuggingBackground#D08770
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#FFFFFF
- statusBar.noFolderBackground#12151A
- tab.activeBackground#171A1F
- tab.activeForeground#FFFFFF
- tab.border#22252D
- tab.inactiveBackground#1C2028
- tab.inactiveForeground#8F98AA
- terminal.ansiBlack#1B1D23
- terminal.ansiBlue#61AFEF
- terminal.ansiBrightBlack#6B7280
- terminal.ansiBrightBlue#7CC7FF
- terminal.ansiBrightCyan#7FDBFF
- terminal.ansiBrightGreen#A3E635
- terminal.ansiBrightMagenta#D8A9F1
- terminal.ansiBrightRed#FF8787
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFD166
- terminal.ansiCyan#56B6C2
- terminal.ansiGreen#7DCEA0
- terminal.ansiMagenta#C678DD
- terminal.ansiRed#FF6B6B
- terminal.ansiWhite#D6D9E0
- terminal.ansiYellow#EBCB8B
- terminal.background#171A1F
- terminal.foreground#D6D9E0
- terminal.selectionBackground#315C9C66
- terminalCursor.foreground#7CC7FF
- testing.iconErrored#FF6B6B
- testing.iconFailed#FF6B6B
- testing.iconPassed#7DCEA0
- testing.iconQueued#EBCB8B
- textLink.activeForeground#7CC7FF
- textLink.foreground#61AFEF
- titleBar.activeBackground#12151A
- titleBar.activeForeground#FFFFFF
- titleBar.border#22252D
- titleBar.inactiveBackground#171A1F
- titleBar.inactiveForeground#8D93A1
- walkThrough.embeddedEditorBackground#20242C
- welcomePage.background#171A1F
- window.activeBorder#00000000
- window.inactiveBorder#00000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #7A8495 | italic bold |
| keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.control.export, keyword.operator.new | #d52528 | italic |
| storage, storage.type, storage.modifier | #d52528 | italic |
| keyword.operator, keyword.operator.assignment, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.comparison | #56B6C2 | — |
| string, string.quoted, string.template | #E5A97B | — |
| constant.character.escape | #61AFEF | — |
| constant.numeric | #A3D977 | — |
| constant.language, constant | #D19A66 | — |
| entity.name.function, support.function | #ffffff | — |
| entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.interface | #4FD6BE | bold |
| variable, variable.other.readwrite | #82CFFF | — |
| variable.parameter | #F2C38F | — |
| variable.language, support.variable | #D19A66 | — |
| entity.name.namespace, entity.name.module | #00ff04 | bold |
| entity.name.tag | #a50714 | bold |
| entity.other.attribute-name | #D19A66 | bold |
| support.type, support.class | #4FD6BE | — |
| meta.import, keyword.control.import, keyword.control.export | #c831ee | — |
| meta.function-call | #EBCB8B | — |
| meta.object-literal.key | #82CFFF | — |
| meta.property-name | #8bf315 | — |
| markup.heading | #61AFEF | bold |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.heading.1.markdown, markup.heading.markdown | #61AFEF | bold |
| markup.heading.2.markdown | #7CC7FF | bold |
| markup.heading.3.markdown | #56B6C2 | bold |
| markup.fenced_code.block.markdown | #D6D9E0 | — |
| string.other.link.title.markdown, string.other.link.description.markdown | #56B6C2 | — |
| meta.separator.markdown | #404852 | — |
| markup.inline.raw, markup.fenced_code | #7CC7FF | — |
| invalid, invalid.illegal | #FF6B6B | underline |
| invalid.deprecated | #F7C948 | underline |
| string.quoted.double.json, meta.structure.dictionary.value.json string | #E5A97B | — |
| string.quoted.double.json, meta.structure.dictionary.value.json string | #E5A97B | — |
| constant.numeric.json | #A3D977 | — |
| constant.language.boolean.json | #C678DD | bold |
| constant.language.null.json | #D19A66 | italic |
| punctuation.separator.dictionary.key-value.json | #6C7486 | — |
| punctuation.separator.dictionary.pair.json | #6C7486 | — |
| punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json | #5F6876 | — |
| punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json | #113978 | — |
| constant.character.escape.json | #56c27f | bold |
| support.type.property-name.json meta.object-literal.key | #6EC6FF | bold |
| support.type.property-name.json | #51ef2e | — |