Grapevine Theme
Publisher: rautenbergfThemes in package: 1
A versatile dark theme that focuses on semantic highlighting and readability across multiple languages.
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#a3898900
- activityBar.background#181921
- activityBar.border#3c3949
- activityBar.foreground#afb6b4
- activityBar.inactiveForeground#c7c2cc46
- activityBarBadge.background#b84eff70
- activityBarBadge.foreground#ffffff
- badge.background#b84effcc
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#ffffff
- breadcrumb.background#21222a
- breadcrumb.focusForeground#ffffff
- breadcrumb.foreground#afb6b4
- breadcrumbPicker.background#111216
- button.background#2E2660
- button.border#ffffff1d
- button.foreground#ffffffcd
- button.hoverBackground#3d356b
- button.secondaryBackground#00000062
- button.secondaryForeground#b6afb3
- button.secondaryHoverBackground#ffffff18
- checkbox.background#181921
- checkbox.border#00000000
- checkbox.foreground#afb6b4
- commandCenter.background#181921
- commandCenter.border#3c3949
- commandCenter.foreground#aeacb3
- debugExceptionWidget.background#000000
- debugExceptionWidget.border#ffffff38
- debugIcon.breakpointForeground#fff000
- debugToolBar.background#000000
- debugToolBar.border#ffffff38
- diffEditor.border#444444
- diffEditor.insertedTextBackground#9bb95533
- diffEditor.removedTextBackground#ff000033
- dropdown.background#181921
- dropdown.border#00000000
- dropdown.foreground#afb6b4
- editor.background#181921
- editor.findMatchBackground#515c6a
- editor.findMatchBorder#74879f
- editor.findMatchHighlightBackground#ea5c0055
- editor.findMatchHighlightBorder#ffffff00
- editor.findRangeHighlightBackground#3a3d4166
- editor.findRangeHighlightBorder#ffffff00
- editor.foldBackground#264f784d
- editor.foreground#b4bec8
- editor.hoverHighlightBackground#264f7840
- editor.inactiveSelectionBackground#3a3d41
- editor.lineHighlightBackground#ecafff0c
- editor.rangeHighlightBackground#ffffff0b
- editor.rangeHighlightBorder#ffffff00
- editor.selectionBackground#7e56b651
- editor.selectionHighlightBackground#add6ff26
- editor.selectionHighlightBorder#495F77
- editor.wordHighlightBackground#ffffff00
- editor.wordHighlightBorder#c065f486
- editor.wordHighlightStrongBackground#ffffff00
- editor.wordHighlightStrongBorder#c065f486
- editorBracketHighlight.foreground1#9d79ba
- editorBracketHighlight.foreground2#daa7a1
- editorBracketHighlight.foreground3#d8b693
- editorBracketHighlight.foreground4#c1d998
- editorBracketHighlight.foreground5#7dbaa1
- editorBracketHighlight.foreground6#7e99bf
- editorBracketMatch.background#0064001a
- editorBracketMatch.border#888888
- editorCodeLens.foreground#999999
- editorCursor.background#000000
- editorCursor.foreground#ee7cf8cc
- editorError.background#B73A3400
- editorError.border#ffffff00
- editorError.foreground#f48771
- editorGroup.border#444444
- editorGroup.emptyBackground#21222a
- editorGroupHeader.tabsBackground#181921
- editorGroupHeader.tabsBorder#ffffff00
- editorGutter.addedBackground#628e5b
- editorGutter.background#181921
- editorGutter.commentRangeForeground#c5c5c5
- editorGutter.deletedBackground#b82c33
- editorGutter.foldingControlForeground#c5c5c5
- editorGutter.modifiedBackground#0c5e9d
- editorHoverWidget.background#14151b
- editorHoverWidget.border#2e3036
- editorHoverWidget.foreground#cccccc
- editorIndentGuide.activeBackground#ffffff33
- editorIndentGuide.background#3c3949
- editorInfo.background#4490BF00
- editorInfo.border#4490BF00
- editorInfo.foreground#75beff
- editorLineNumber.activeForeground#aba9b1
- editorLineNumber.foreground#3c3949
- editorLink.activeForeground#4e94ce
- editorMarkerNavigation.background#2d2d30
- editorMarkerNavigationError.background#f48771
- editorMarkerNavigationInfo.background#75beff
- editorMarkerNavigationWarning.background#cca700
- editorOverviewRuler.background#25252500
- editorOverviewRuler.border#7f7f7f4d
- editorRuler.foreground#5a5a5a
- editorSuggestWidget.background#14151b
- editorSuggestWidget.border#454545
- editorSuggestWidget.foreground#d4d4d4
- editorSuggestWidget.highlightForeground#f77d72
- editorSuggestWidget.selectedBackground#34185d
- editorWarning.background#A9904000
- editorWarning.border#ffffff00
- editorWarning.foreground#cca700
- editorWhitespace.foreground#e3e4e229
- editorWidget.background#000000
- editorWidget.foreground#cccccc
- editorWidget.resizeBorder#ffffff46
- focusBorder#ffffff3e
- gitDecoration.addedResourceForeground#76ffc9
- gitDecoration.conflictingResourceForeground#6269e6
- gitDecoration.deletedResourceForeground#ea2754
- gitDecoration.ignoredResourceForeground#6a716f
- gitDecoration.modifiedResourceForeground#cdac81
- gitDecoration.stageDeletedResourceForeground#ff7a98
- gitDecoration.stageModifiedResourceForeground#f9f1a5
- gitDecoration.submoduleResourceForeground#78cfff
- gitDecoration.untrackedResourceForeground#0cd493
- icon.foreground#afb6b4
- input.background#21222a
- input.border#3c3949
- input.foreground#afb6b4
- input.placeholderForeground#ffffff4e
- inputOption.activeBackground#574bea66
- inputOption.activeBorder#756bf0ab
- inputOption.activeForeground#ffffff
- list.activeSelectionBackground#3c3949
- list.activeSelectionForeground#ffffff
- list.dropBackground#00000026
- list.focusAndSelectionOutline#00000000
- list.focusBackground#61f2c912
- list.focusForeground#f7f7f7
- list.highlightForeground#f77d72
- list.hoverBackground#3c39498b
- list.hoverForeground#f9f9f9
- list.inactiveSelectionBackground#3c39494d
- list.inactiveSelectionForeground#aeacb3
- listFilterWidget.background#381b3c
- listFilterWidget.noMatchesOutline#e4134e
- listFilterWidget.outline#ffffff12
- menu.background#111216
- menu.border#ffffff2a
- menu.foreground#cbc4ca
- menu.selectionBackground#bf61f23c
- menu.selectionBorder#00000000
- menu.selectionForeground#fbbae5
- menu.separatorBackground#ffffff2a
- menubar.selectionBackground#000000
- menubar.selectionBorder#ffffff00
- menubar.selectionForeground#b6afb5
- merge.commonContentBackground#282828
- merge.commonHeaderBackground#383838
- merge.currentContentBackground#27403B
- merge.currentHeaderBackground#367366
- merge.incomingContentBackground#28384B
- merge.incomingHeaderBackground#395F8F
- minimap.background#00000000
- minimap.errorHighlight#f48771
- minimap.findMatchHighlight#515c6a
- minimap.selectionHighlight#574bea4e
- minimap.warningHighlight#cca700
- minimapGutter.addedBackground#628e5b
- minimapGutter.deletedBackground#b82c33
- minimapGutter.modifiedBackground#0c5e9d
- notificationCenter.border#ffffff12
- notificationCenterHeader.background#1b1c1d
- notificationCenterHeader.foreground#afb6b4
- notifications.background#181921
- notifications.border#ffffff12
- notifications.foreground#afb6b4
- notificationsErrorIcon.foreground#ea2754
- notificationsInfoIcon.foreground#6269e6
- notificationsWarningIcon.foreground#fec93b
- notificationToast.border#ffffff12
- panel.background#181921
- panel.border#ffffff12
- panelSection.border#ffffff12
- panelTitle.activeBorder#ffffff
- panelTitle.activeForeground#fdfdfd
- panelTitle.inactiveForeground#afb6b4
- peekView.border#007acc
- peekViewEditor.background#001f33
- peekViewEditor.matchHighlightBackground#ff8f0099
- peekViewEditor.matchHighlightBorder#ee931e
- peekViewEditorGutter.background#001f33
- peekViewResult.background#252526
- peekViewResult.fileForeground#ffffff
- peekViewResult.lineForeground#bbbbbb
- peekViewResult.matchHighlightBackground#ea5c004d
- peekViewResult.selectionBackground#3399ff33
- peekViewResult.selectionForeground#ffffff
- peekViewTitle.background#1e1e1e
- peekViewTitleDescription.foreground#ccccccb3
- peekViewTitleLabel.foreground#ffffff
- pickerGroup.border#ffffff32
- pickerGroup.foreground#449fff
- progressBar.background#ffffff
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#bfbfbf66
- scrollbarSlider.background#00000048
- scrollbarSlider.hoverBackground#ffffff14
- settings.focusedRowBackground#ffffff07
- settings.headerForeground#afb6b4
- sideBar.background#181921
- sideBar.border#3c3949
- sideBar.dropBackground#00000026
- sideBar.foreground#afb6b4
- sideBarSectionHeader.background#181921
- sideBarSectionHeader.border#3c3949
- sideBarSectionHeader.foreground#dbdbdb
- sideBarTitle.foreground#afb6b4
- statusBar.background#21222a
- statusBar.debuggingBackground#e84c27
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#aeacb3
- statusBar.noFolderBackground#000000
- statusBar.noFolderForeground#ffffff
- statusBarItem.activeBackground#FFFFFF25
- statusBarItem.hoverBackground#ffffff3a
- statusBarItem.remoteBackground#64106b
- statusBarItem.remoteForeground#ffffff
- tab.activeBackground#21222a
- tab.activeBorder#ffffff00
- tab.activeBorderTop#afb6b4
- tab.activeForeground#afb6b4
- tab.border#00000000
- tab.hoverBackground#ffffff0a
- tab.inactiveBackground#181921
- tab.inactiveForeground#b9b5bb74
- terminal.ansiBlack#000000
- terminal.ansiBlue#6269e6
- terminal.ansiBrightBlack#857c7e
- terminal.ansiBrightBlue#78cfff
- terminal.ansiBrightCyan#96fcff
- terminal.ansiBrightGreen#76ffc9
- terminal.ansiBrightMagenta#eea6ff
- terminal.ansiBrightRed#ff7a98
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#f9f1a5
- terminal.ansiCyan#2abbca
- terminal.ansiGreen#0cd493
- terminal.ansiMagenta#cc4e91
- terminal.ansiRed#ea2754
- terminal.ansiWhite#c7c7c7
- terminal.ansiYellow#fec93b
- terminal.border#ffffff12
- terminal.foreground#cccccc
- terminal.selectionBackground#ffffff18
- terminalCursor.background#ffffff32
- terminalCursor.foreground#afb6b4
- textLink.activeForeground#acaee8
- textLink.foreground#7275e3
- titleBar.activeBackground#181921
- titleBar.activeForeground#ffffff
- titleBar.border#00000000
- titleBar.inactiveBackground#181921
- titleBar.inactiveForeground#92929299
- tree.indentGuidesStroke#3c3949
- walkThrough.embeddedEditorBackground#00000050
- welcomeOverlay.background#181921
- welcomePage.background#181921
- welcomePage.progress.foreground#b84effcc
- welcomePage.tileBackground#111218
- widget.shadow#00000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #605d6d | — |
| keyword.operator,keyword.operator.logical,keyword.operator.relational,keyword.operator.assignment,keyword.operator.comparison,keyword.operator.ternary,keyword.operator.arithmetic,keyword.operator.spread | #a9b7c6 | — |
| string,string.character.escape,string.template.quoted,string.template.quoted.punctuation,string.template.quoted.punctuation.single,string.template.quoted.punctuation.double,string.type.declaration.annotation,string.template.quoted.punctuation.tag | #9dcb85 | — |
| punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end | #f77d72 | — |
| expression.string,meta.template.expression | #a9b7c6 | — |
| constant.numeric | #62badf | — |
| constant.language,variable.language | #f77d72 | — |
| constant.character, constant.other | #d9d5e1 | — |
| keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression | #f77d72 | — |
| entity.name.type,meta.return.type,meta.type.annotation,meta.type.parameters | #7a61ba | — |
| support.type.primitive | #62badf | — |
| storage,storage.type,storage.modifier,storage.arrow | #f77d72 | — |
| class.instance.constructor,new.expr entity.name.type | #f7ad8a | — |
| support.function, entity.name.function | #f7ad8a | — |
| annotation.meta.ts, annotation.meta.tsx | #7ca7d2 | — |
| variable.parameter, operator.rest.parameters | #a9b7c6 | — |
| variable.property,variable.other.property,variable.other.object.property,variable.object.property,support.variable.property | #808d9a | — |
| markup.heading | #f77d72 | — |
| punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag | #88a662 | — |
| entity.other.attribute-name | #a9b7c6 | — |
| meta.object-literal.key | #d9d5e1 | — |
| storage.modifier.ts | #f77d72 | — |
| ts.cast.expr,ts.meta.entity.class.method.new.expr.cast,ts.meta.entity.type.name.new.expr.cast,ts.meta.entity.type.name.var-single-variable.annotation,tsx.cast.expr,tsx.meta.entity.class.method.new.expr.cast,tsx.meta.entity.type.name.new.expr.cast,tsx.meta.entity.type.name.var-single-variable.annotation | #7a61ba | — |
| ts.meta.type.support,ts.meta.type.entity.name,ts.meta.class.inherited-class,tsx.meta.type.support,tsx.meta.type.entity.name,tsx.meta.class.inherited-class,type-declaration,enum-declaration | #7a61ba | — |
| function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters | #f7ad8a | — |
| comment.block.documentation | #605d6d | — |
| storage.type.class.jsdoc | #f77d72 | — |
| constant.language.import-export-all | #a9b7c6 | — |
| objectliteral.key.separator, punctuation.separator.key-value | #a9b7c6 | — |
| regex | — | italic |
| ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace | #a9b7c6 | — |
| regex.character-class | #a9b7c6 | — |
| entity.name.type.class | #a9b7c6 | — |
| entity.other.inherited-class | #7a61ba | — |
| entity.name.type.instance.jsdoc | #f7ad8a | — |
| yaml.entity.name,yaml.string.entity.name | #f77d72 | — |
| yaml.string.out | #a9b7c6 | — |
| meta.brace.square.ts,block.support.module,block.support.type.module,block.support.function.variable,punctuation.definition.typeparameters.begin,punctuation.definition.typeparameters.end | #a9b7c6 | — |
| string.regexp | #f77d72 | — |
| punctuation.definition.group.regexp,punctuation.definition.character-class.regexp | #f7ad8a | — |
| constant.other.character-class.regexp, constant.character.escape.ts | #a9b7c6 | — |
| expr.regex.or.operator | #a9b7c6 | — |
| string.template.tag,string.template.punctuation.tag,string.quoted.punctuation.tag,string.quoted.embedded.tag, string.quoted.double.tag | #9dcb85 | — |
| tag.punctuation.begin.arrow.parameters.embedded,tag.punctuation.end.arrow.parameters.embedded | #a9b7c6 | — |
| object-literal.object.member.key.field.other,object-literal.object.member.key.accessor,object-literal.object.member.key.array.brace.square | #a9b7c6 | — |
| property-list.property-value,property-list.constant | #9dcb85 | — |
| support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss | #f7ad8a | — |
| entity.other.attribute-name.class.css,entity.other.attribute-name.class.scss,entity.other.attribute-name.parent-selector-suffix.css,entity.other.attribute-name.parent-selector-suffix.scss | #7a61ba | — |
| property-list.property-value.rgb-value, keyword.other.unit.css,keyword.other.unit.scss | #f7ad8a | — |
| property-list.property-value.function | #f7ad8a | — |
| support.constant.property-value.css,support.constant.property-value.scss | #62badf | — |
| css.entity.name.tag,scss.entity.name.tag | #f77d72 | — |
| meta.selector.css, entity.attribute-name.id, entity.other.attribute-name.pseudo-class.css,entity.other.attribute-name.pseudo-element.css | #f77d72 | — |
| keyword.scss,keyword.css | #f77d72 | — |
| triple-slash.tag | #a9b7c6 | italic |
| token.info-token | #6897bb | — |
| token.warn-token | #fdcb41 | — |
| token.error-token | #ef1e56 | — |
| token.debug-token | #a89dad | — |
| keyword.operator.logical.python | #f77d72 | — |
| support.class.dart | #f77d72 | — |
| variable.language.php, variable.other.php | #a89dad | — |
| variable.other.readwrite.perl | #a89dad | — |
| variable.other.property.php | #f77d72 | — |
| support.variable.property.php | #f7ad8a | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...