F

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#2a2021
• activityBar.border#2a2021
• activityBar.dropBackground#463d3e
• activityBar.foreground#b5b1b3
• activityBarBadge.background#22d07f
• activityBarBadge.foreground#2a2021
• badge.background#22d07f
• badge.foreground#2a2021
• button.background#22d07f
• button.foreground#2a2021
• debugExceptionWidget.background#463d3e
• debugExceptionWidget.border#463d3e
• debugToolBar.background#463d3e
• diffEditor.insertedTextBackground#22d07f5d
• diffEditor.removedTextBackground#cd61f85d
• dropdown.background#463d3e
• dropdown.border#463d3e
• dropdown.foreground#d1ced1
• editor.background#2A2021
• editor.findMatchBackground#ff5c007f
• editor.findMatchHighlightBackground#ff5c003f
• editor.findRangeHighlightBackground#463d3e
• editor.foreground#EDEBEE
• editor.hoverHighlightBackground#625a5c
• editor.inactiveSelectionBackground#463d3e33
• editor.lineHighlightBackground#140e0e4b
• editor.rangeHighlightBackground#463d3e
• editor.selectionBackground#4aa4f840
• editor.selectionHighlightBackground#22d07f55
• editorBracketMatch.background#463d3e
• editorBracketMatch.border#463d3e
• editorCodeLens.foreground#b5b1b3
• editorCursor.foreground#F8F8F0
• editorError.foreground#f5253e
• editorGroup.border#463d3e
• editorGroup.dropBackground#625a5c7f
• editorGroup.emptyBackground#2a2021
• editorGroupHeader.noTabsBackground#2a2021
• editorGroupHeader.tabsBackground#2a2021
• editorGutter.addedBackground#22d07f
• editorGutter.background#2a2021
• editorGutter.deletedBackground#cd61f8
• editorGutter.modifiedBackground#d9d4ac
• editorHoverWidget.background#463d3e
• editorHoverWidget.border#463d3e
• editorIndentGuide.activeBackground#625a5c
• editorIndentGuide.background#463d3e
• editorLineNumber.activeForeground#22d07f
• editorLineNumber.foreground#22d07f88
• editorLink.activeForeground#6b9fee
• editorMarkerNavigation.background#463d3e
• editorMarkerNavigationError.background#f5253e
• editorMarkerNavigationWarning.background#cd61f8
• editorOverviewRuler.addedForeground#22d07f
• editorOverviewRuler.border#463d3e
• editorOverviewRuler.currentContentForeground#6b9fee
• editorOverviewRuler.deletedForeground#cd61f8
• editorOverviewRuler.errorForeground#f5253e
• editorOverviewRuler.findMatchForeground#ff5c007f
• editorOverviewRuler.incomingContentForeground#22d07f
• editorOverviewRuler.infoForeground#22d07f
• editorOverviewRuler.modifiedForeground#d5d4d3
• editorOverviewRuler.rangeHighlightForeground#625a5c7f
• editorOverviewRuler.selectionHighlightForeground#463d3e7f
• editorOverviewRuler.warningForeground#cd61f8
• editorOverviewRuler.wordHighlightForeground#625a5c7f
• editorOverviewRuler.wordHighlightStrongForeground#7e77797f
• editorRuler.foreground#463d3e
• editorSuggestWidget.background#463d3e
• editorSuggestWidget.border#463d3e
• editorSuggestWidget.foreground#d1ced1
• editorSuggestWidget.highlightForeground#f9238d
• editorSuggestWidget.selectedBackground#625a5c
• editorWarning.foreground#cd61f8
• editorWhitespace.foreground#FFFFFF
• editorWidget.background#463d3e
• editorWidget.border#463d3e
• errorForeground#f5253e
• extensionButton.prominentBackground#22d07f
• extensionButton.prominentForeground#2a2021
• extensionButton.prominentHoverBackground#6b9fee
• focusBorder#22d07f
• foreground#edebee
• gitDecoration.addedResourceForeground#22d07f
• gitDecoration.deletedResourceForeground#8422aa
• gitDecoration.modifiedResourceForeground#d5d4d3
• input.background#2a2021
• input.border#22d07f
• input.foreground#d1ced1
• input.placeholderForeground#625a5c
• inputOption.activeBorder#6b9fee
• inputValidation.errorBackground#463d3e
• inputValidation.errorBorder#f5253e
• inputValidation.infoBackground#463d3e
• inputValidation.infoBorder#22d07f
• inputValidation.warningBackground#463d3e
• inputValidation.warningBorder#cd61f8
• list.activeSelectionBackground#463d3e7f
• list.activeSelectionForeground#d1ced1
• list.dropBackground#463d3e
• list.focusBackground#463d3e
• list.focusForeground#edebee
• list.highlightForeground#ff5c00
• list.hoverBackground#463d3e
• list.hoverForeground#b5b1b3
• list.inactiveSelectionBackground#463d3e
• list.inactiveSelectionForeground#edebee
• menu.background#463d3e
• menu.selectionBackground#7e7779
• merge.currentContentBackground#6b9fee7f
• merge.currentHeaderBackground#6b9fee
• merge.incomingContentBackground#22d07f7f
• merge.incomingHeaderBackground#22d07f
• notificationCenterHeader.background#22d07f
• notificationCenterHeader.foreground#2a2021
• notifications.background#2a2021
• notifications.foreground#edebee
• notificationToast.border#22d07f
• panel.background#2a2021
• panel.border#463d3e
• panelTitle.activeBorder#7e7779
• panelTitle.activeForeground#d1ced1
• panelTitle.inactiveForeground#999496
• peekView.border#f9238d
• peekViewEditor.background#463d3e
• peekViewEditor.matchHighlightBackground#ff5c00
• peekViewEditorGutter.background#463d3e
• peekViewResult.background#463d3e
• peekViewResult.fileForeground#d1ced1
• peekViewResult.lineForeground#625a5c
• peekViewResult.matchHighlightBackground#ff5c00
• peekViewResult.selectionBackground#7e7779
• peekViewResult.selectionForeground#edebee
• peekViewTitle.background#625a5c
• peekViewTitleDescription.foreground#b5b1b3
• peekViewTitleLabel.foreground#edebee
• pickerGroup.border#b5b1b3
• pickerGroup.foreground#edebee
• progressBar.background#d1c6b2
• scrollbar.shadow#2a2021
• scrollbarSlider.activeBackground#b5b1b37f
• scrollbarSlider.background#7e77797f
• scrollbarSlider.hoverBackground#9994967f
• sideBar.background#2a2021
• sideBar.border#463d3e
• sideBar.foreground#d1ced1
• sideBarSectionHeader.background#625a5c
• sideBarSectionHeader.foreground#d1ced1
• sideBarTitle.foreground#b5b1b3
• statusBar.background#22d07f
• statusBar.border#22d07f7f
• statusBar.debuggingBackground#cd61f8
• statusBar.debuggingBorder#cd61f87f
• statusBar.debuggingForeground#2a2021
• statusBar.foreground#2a2021
• statusBar.noFolderBackground#22d07f
• statusBar.noFolderBorder#22d07f7f
• statusBar.noFolderForeground#2a2021
• tab.activeBackground#2a2021
• tab.activeForeground#999496
• tab.border#2a2021
• tab.inactiveBackground#463d3e
• tab.inactiveForeground#b5b1b3
• tab.unfocusedActiveForeground#7e7779
• tab.unfocusedInactiveForeground#625a5c
• terminal.ansiBlack#2a2021
• terminal.ansiBlue#22d07f
• terminal.ansiBrightBlack#463d3e
• terminal.ansiBrightBlue#22d07f
• terminal.ansiBrightCyan#6b9fee
• terminal.ansiBrightGreen#6b9fee
• terminal.ansiBrightMagenta#f9238d
• terminal.ansiBrightRed#cd61f8
• terminal.ansiBrightWhite#edebee
• terminal.ansiBrightYellow#ff5c00
• terminal.ansiCyan#6b9fee
• terminal.ansiGreen#d1c6b2
• terminal.ansiMagenta#f9238d
• terminal.ansiRed#f5253e
• terminal.ansiWhite#d1ced1
• terminal.ansiYellow#ff5c00
• terminal.background#2a2021
• terminal.foreground#d1ced1
• terminal.selectionBackground#22d07f7f
• terminalCursor.background#463d3e
• terminalCursor.foreground#b5b1b3
• titleBar.activeBackground#2a2021
• titleBar.activeForeground#b5b1b3
• titleBar.inactiveBackground#2a2021
• titleBar.inactiveForeground#7e7779
• walkThrough.embeddedEditorBackground#2a2021
• welcomePage.buttonBackground#463d3e
• welcomePage.buttonHoverBackground#625a5c
• widget.shadow#2a2021

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...