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.background#1C1E29
- activityBar.border#3F455D
- activityBar.foreground#F6F8FF
- activityBar.inactiveForeground#494F6A
- activityBarBadge.background#A9C0DE
- activityBarBadge.foreground#1C1E29
- badge.background#A9C0DE
- badge.foreground#1C1E29
- breadcrumb.foreground#737B9E
- diffEditor.insertedTextBackground#9DA47120
- diffEditor.removedTextBackground#E6968820
- editor.background#1C1E29
- editor.findMatchBackground#3F455D
- editor.findMatchBorder#737B9E
- editor.findMatchHighlightBackground#3F455D
- editor.foreground#C3C5CC
- editor.hoverHighlightBackground#3F455D
- editor.lineHighlightBackground#202335
- editor.rangeHighlightBackground#3F455D
- editor.selectionBackground#3F455D
- editor.selectionHighlightBackground#3F455D
- editor.symbolHighlightBackground#3F455D
- editor.wordHighlightBackground#3F455D
- editor.wordHighlightStrongBackground#3F455D
- editorCodeLens.foreground#737B9E
- editorCursor.background#13151F
- editorCursor.foreground#F6F8FF
- editorError.foreground#E69688
- editorGroup.border#3F455D
- editorGroupHeader.border#202335
- editorGroupHeader.noTabsBackground#13151F
- editorGroupHeader.tabsBackground#13151F
- editorGroupHeader.tabsBorder#202335
- editorGutter.addedBackground#9DA471
- editorGutter.background#202335
- editorGutter.deletedBackground#E69688
- editorGutter.modifiedBackground#DF9D6F
- editorIndentGuide.activeBackground#494F6A
- editorIndentGuide.background#3F455D
- editorLineNumber.activeForeground#C3C5CC
- editorLineNumber.foreground#494F6A
- editorOverviewRuler.addedForeground#9DA471
- editorOverviewRuler.border#3F455D
- editorOverviewRuler.deletedForeground#E69688
- editorOverviewRuler.errorForeground#E69688
- editorOverviewRuler.findMatchForeground#3F455D
- editorOverviewRuler.modifiedForeground#DF9D6F
- editorOverviewRuler.rangeHighlightForeground#3F455D
- editorOverviewRuler.selectionHighlightForeground#3F455D
- editorOverviewRuler.warningForeground#DF9D6F
- editorOverviewRuler.wordHighlightForeground#3F455D
- editorOverviewRuler.wordHighlightStrongForeground#3F455D
- editorRuler.foreground#3F455D
- editorWarning.foreground#DF9D6F
- editorWidget.background#202335
- editorWidget.border#3F455D
- errorForeground#E69688
- focusBorder#81A1CA
- foreground#C3C5CC
- gitDecoration.addedResourceForeground#9DA471
- gitDecoration.conflictingResourceForeground#B1A5D9
- gitDecoration.deletedResourceForeground#E69688
- gitDecoration.ignoredResourceForeground#737B9E
- gitDecoration.modifiedResourceForeground#DF9D6F
- gitDecoration.stageDeletedResourceForeground#E69688
- gitDecoration.stageModifiedResourceForeground#DF9D6F
- gitDecoration.untrackedResourceForeground#9DA471
- input.background#202335
- input.border#3F455D
- input.placeholderForeground#737B9E
- inputValidation.errorBackground#202335
- inputValidation.errorBorder#E69688
- inputValidation.errorForeground#E69688
- inputValidation.warningBorder#DF9D6F
- inputValidation.warningForeground#DF9D6F
- list.activeSelectionBackground#3F455D
- list.activeSelectionForeground#F6F8FF
- list.errorForeground#E69688
- list.focusBackground#3F455D
- list.focusForeground#C3C5CC
- list.highlightForeground#F6F8FF
- list.hoverBackground#1C1E29
- list.inactiveSelectionBackground#202335
- list.inactiveSelectionForeground#F6F8FF
- list.warningForeground#DF9D6F
- minimap.errorHighlight#E69688
- minimap.findMatchHighlight#3F455D
- minimap.selectionHighlight#3F455D
- minimap.warningHighlight#DF9D6F
- minimapGutter.addedBackground#9DA471
- minimapGutter.deletedBackground#E69688
- minimapGutter.modifiedBackground#DF9D6F
- minimapSlider.activeBackground#3F455DA0
- minimapSlider.background#3F455D40
- minimapSlider.hoverBackground#3F455D60
- panel.border#3F455D
- peekView.border#494F6A
- peekViewEditor.background#13151F
- peekViewEditor.matchHighlightBackground#3F455D
- peekViewResult.background#1C1E29
- peekViewResult.fileForeground#F6F8FF
- peekViewResult.lineForeground#C3C5CC
- peekViewResult.selectionBackground#3F455D
- peekViewTitle.background#202335
- peekViewTitleDescription.foreground#737B9E
- peekViewTitleLabel.foreground#F6F8FF
- rust_analyzer.inlayHints.foreground#737B9E
- scrollbarSlider.activeBackground#3F455DA0
- scrollbarSlider.background#3F455D40
- scrollbarSlider.hoverBackground#3F455D60
- selection.background#A0AAD6
- sideBar.background#1C1E29
- sideBar.border#3F455D
- sideBarSectionHeader.background#1C1E29
- sideBarSectionHeader.foreground#F6F8FF
- statusBar.background#13151F
- statusBar.border#202335
- statusBar.debuggingBackground#13151F
- statusBar.debuggingForeground#DF9D6F
- statusBar.foreground#737B9E
- statusBar.noFolderBackground#13151F
- tab.activeBackground#202335
- tab.activeForeground#F6F8FF
- tab.border#202335
- tab.inactiveBackground#1C1E29
- tab.inactiveForeground#737B9E
- tab.unfocusedActiveBackground#1C1E29
- tab.unfocusedActiveForeground#737B9E
- tab.unfocusedInactiveBackground#1C1E29
- tab.unfocusedInactiveForeground#494F6A
- terminal.ansiBlack#3F455D
- terminal.ansiBlue#81A1CA
- terminal.ansiBrightBlack#737B9E
- terminal.ansiBrightBlue#81A1CA
- terminal.ansiBrightCyan#7BA7B2
- terminal.ansiBrightGreen#9DA471
- terminal.ansiBrightMagenta#B1A5D9
- terminal.ansiBrightRed#E69688
- terminal.ansiBrightWhite#F6F8FF
- terminal.ansiBrightYellow#DF9D6F
- terminal.ansiCyan#7BA7B2
- terminal.ansiGreen#9DA471
- terminal.ansiMagenta#B1A5D9
- terminal.ansiRed#E69688
- terminal.ansiWhite#C3C5CC
- terminal.ansiYellow#DF9D6F
- terminal.foreground#C3C5CC
- terminalCursor.background#13151F
- terminalCursor.foreground#F6F8FF
- textLink.activeForeground#A9C0DE
- textLink.foreground#81A1CA
- titleBar.activeBackground#13151F
- titleBar.activeForeground#C3C5CC
- titleBar.inactiveBackground#13151F
- titleBar.inactiveForeground#737B9E
- tree.indentGuidesStroke#3F455D
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| punctuation.separator | #A0AAD6 | |
| keyword | #A0AAD6 | |
| storage | #A0AAD6 | |
| variable.language.self | #A0AAD6 | |
| keyword.control.directive | #DF9D6F | |
| keyword.preprocessor | #DF9D6F | |
| punctuation.separator.hash.cs | #DF9D6F | |
| variable.parameter | #DF9D6F | |
| entity.name.variable.parameter | #DF9D6F | |
| comment | #F6F8FF | italic |
| comment.block.documentation | #F6F8FF | |
| comment.block.javadoc | #F6F8FF | |
| entity.name.type | #F6F8FF | |
| entity.name.package | #F6F8FF | |
| entity.name.function.go | #F6F8FF | |
| entity.name.function.python | #F6F8FF | |
| variable.other.enummember | #F6F8FF | |
| string | #7BA7B2 | |
| constant | #B1A5D9 | |
| support.constant | #B1A5D9 | |
| entity.name.variable.preprocessor | #B1A5D9 | |
| entity.name.type.rust | #81A1CA | |
| storage.type.cs | #81A1CA | |
| entity.name.variable.field | #9DA471 | |
| variable.other.object.property | #9DA471 | |
| support.type.property-name | #9DA471 | |
| entity.other.attribute-name.html | #9DA471 | |
| entity.name.namespace | #A0AAD6 | |
| entity.name.type.namespace | #A0AAD6 | |
| entity.name.tag | #81A1CA | |
| punctuation.definition.tag | #737B9E | |
| punctuation.section.embedded.begin.hugo | #737B9E | |
| punctuation.section.embedded.end.hugo | #737B9E | |
| entity.other.attribute-name | #81A1CA | |
| entity.name.function.decorator | #737B9E | |
| markup.heading | #F6F8FF | |
| markup.bold | — | bold |
| markup.italic | — | italic |
| string.other.link.title.markdown | #C3C5CC | |
| constant.other.reference.link.markdown | #C3C5CC | |
| punctuation.definition.heading.markdown | #81A1CA | |
| punctuation.definition.bold.markdown | #81A1CA | |
| punctuation.definition.italic.markdown | #81A1CA | |
| punctuation.definition.raw.markdown | #81A1CA | |
| punctuation.definition.string.begin.markdown | #81A1CA | |
| punctuation.definition.string.end.markdown | #81A1CA | |
| punctuation.definition.metadata.markdown | #81A1CA | |
| punctuation.definition.list.begin.markdown | #81A1CA | |
| punctuation.definition.constant.markdown | #81A1CA | |
| punctuation.definition.constant.begin.markdown | #81A1CA | |
| punctuation.definition.constant.end.markdown | #81A1CA | |
| punctuation.separator.key-value.markdown | #81A1CA | |
| punctuation.definition.markdown | #81A1CA | |
| fenced_code.block.language.markdown | #81A1CA | |
| meta.separator.markdown | #81A1CA | |
| meta.scope.message.git-commit | #F6F8FF | |
| invalid.deprecated.line-too-long.git-commit | #DF9D6F | |
| invalid.illegal.line-too-long.git-commit | #E69688 | |
| markup.inserted | #9DA471 | |
| markup.deleted | #E69688 | |
| markup.changed | #DF9D6F | |
| meta.diff.range | #737B9E | |
| meta.diff.header | #737B9E | |
| meta.diff.index | #737B9E | |
| comment.line.number-sign.git-commit | #737B9E | |
| magit.header | #F6F8FF | |
| magit.subheader | #81A1CA | |
| magit.entity | #B1A5D9 |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...