BBogdanov VS Code Themes

Color themes

• 

  Themer Dark

• 

  Themer Light

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#444847
• activityBar.border#444847
• activityBar.dropBackground#5a5e5c
• activityBar.foreground#b3b6b2
• activityBarBadge.background#bb91b7
• activityBarBadge.foreground#444847
• badge.background#bb91b7
• badge.foreground#444847
• button.background#7eb9d0
• button.foreground#444847
• button.hoverBackground#71ca98
• debugExceptionWidget.background#5a5e5c
• debugExceptionWidget.border#5a5e5c
• debugToolBar.background#5a5e5c
• diffEditor.insertedTextBackground#a4cc7820
• diffEditor.removedTextBackground#e2928820
• dropdown.background#5a5e5c
• dropdown.border#5a5e5c
• dropdown.foreground#caccc8
• editor.background#444847
• editor.findMatchBackground#dbb66d7f
• editor.findMatchHighlightBackground#dbb66d3f
• editor.findRangeHighlightBackground#5a5e5c
• editor.foreground#e0e2dd
• editor.hoverHighlightBackground#717472
• editor.inactiveSelectionBackground#7eb9d033
• editor.lineHighlightBackground#444847
• editor.lineHighlightBorder#5a5e5c
• editor.rangeHighlightBackground#5a5e5c
• editor.selectionBackground#7eb9d033
• editor.selectionHighlightBackground#5a5e5c
• editor.wordHighlightBackground#bb91b77f
• editor.wordHighlightStrongBackground#c08da47f
• editorBracketMatch.background#5a5e5c
• editorBracketMatch.border#5a5e5c
• editorCodeLens.foreground#b3b6b2
• editorCursor.foreground#bb91b7
• editorError.border#e0e2dd
• editorError.foreground#e29288
• editorGroup.border#5a5e5c
• editorGroup.dropBackground#7174727f
• editorGroup.emptyBackground#444847
• editorGroup.focusedEmptyBorder#5a5e5c
• editorGroupHeader.noTabsBackground#444847
• editorGroupHeader.tabsBackground#444847
• editorGroupHeader.tabsBorder#444847
• editorGutter.addedBackground#a4cc78
• editorGutter.background#444847
• editorGutter.deletedBackground#e29288
• editorGutter.modifiedBackground#dbb66d
• editorHoverWidget.background#5a5e5c
• editorHoverWidget.border#5a5e5c
• editorIndentGuide.activeBackground#717472
• editorIndentGuide.background#5a5e5c
• editorLineNumber.foreground#717472
• editorLink.activeForeground#71ca98
• editorMarkerNavigation.background#5a5e5c
• editorMarkerNavigationError.background#e29288
• editorMarkerNavigationWarning.background#e4a572
• editorOverviewRuler.addedForeground#a4cc787f
• editorOverviewRuler.border#5a5e5c
• editorOverviewRuler.commonContentForeground#bb91b7
• editorOverviewRuler.currentContentForeground#71ca98
• editorOverviewRuler.deletedForeground#e292887f
• editorOverviewRuler.errorForeground#e292887f
• editorOverviewRuler.findMatchForeground#dbb66dbf
• editorOverviewRuler.incomingContentForeground#7eb9d0
• editorOverviewRuler.infoForeground#7eb9d07f
• editorOverviewRuler.modifiedForeground#dbb66d7f
• editorOverviewRuler.rangeHighlightForeground#717472bf
• editorOverviewRuler.selectionHighlightForeground#5a5e5cbf
• editorOverviewRuler.warningForeground#e4a5727f
• editorOverviewRuler.wordHighlightForeground#717472bf
• editorOverviewRuler.wordHighlightStrongForeground#878a87bf
• editorPane.background#444847
• editorRuler.foreground#5a5e5c
• editorSuggestWidget.background#5a5e5c
• editorSuggestWidget.border#5a5e5c
• editorSuggestWidget.foreground#caccc8
• editorSuggestWidget.highlightForeground#c08da4
• editorSuggestWidget.selectedBackground#717472
• editorWarning.border#caccc8
• editorWarning.foreground#e4a572
• editorWhitespace.foreground#5a5e5c
• editorWidget.background#5a5e5c
• editorWidget.border#5a5e5c
• errorForeground#e29288
• extensionButton.prominentBackground#7eb9d0
• extensionButton.prominentForeground#444847
• extensionButton.prominentHoverBackground#71ca98
• focusBorder#bb91b7
• foreground#e0e2dd
• gitDecoration.conflictingResourceForeground#71ca98
• gitDecoration.deletedResourceForeground#e29288
• gitDecoration.ignoredResourceForeground#878a87
• gitDecoration.modifiedResourceForeground#dbb66d
• gitDecoration.untrackedResourceForeground#bb91b7
• input.background#5a5e5c
• input.border#5a5e5c
• input.foreground#caccc8
• input.placeholderForeground#717472
• inputOption.activeBorder#71ca98
• inputValidation.errorBackground#5a5e5c
• inputValidation.errorBorder#e29288
• inputValidation.infoBackground#5a5e5c
• inputValidation.infoBorder#7eb9d0
• inputValidation.warningBackground#5a5e5c
• inputValidation.warningBorder#e4a572
• list.activeSelectionBackground#a4cc787f
• list.activeSelectionForeground#444847
• list.dropBackground#878a87
• list.errorForeground#e29288
• list.focusBackground#878a87
• list.focusForeground#444847
• list.highlightForeground#dbb66d
• list.hoverBackground#5a5e5c
• list.hoverForeground#b3b6b2
• list.inactiveSelectionBackground#5a5e5c
• list.inactiveSelectionForeground#e0e2dd
• list.invalidItemForeground#e29288
• list.warningForeground#dbb66d
• listFilterWidget.background#5a5e5c
• listFilterWidget.noMatchesOutline#e29288
• listFilterWidget.outline#7eb9d0
• merge.border#9da09d
• merge.commonContentBackground#bb91b74c
• merge.commonHeaderBackground#bb91b74c
• merge.currentContentBackground#71ca984c
• merge.currentHeaderBackground#71ca984c
• merge.incomingContentBackground#7eb9d04c
• merge.incomingHeaderBackground#7eb9d04c
• notification.background#5a5e5c
• notification.buttonBackground#7eb9d0
• notification.buttonForeground#444847
• notification.buttonHoverBackground#71ca98
• notification.errorBackground#e29288
• notification.errorForeground#444847
• notification.foreground#e0e2dd
• notification.infoBackground#7eb9d0
• notification.infoForeground#444847
• notification.warningBackground#e4a572
• notification.warningForeground#444847
• panel.background#444847
• panel.border#5a5e5c
• panelTitle.activeBorder#878a87
• panelTitle.activeForeground#caccc8
• panelTitle.inactiveForeground#9da09d
• peekView.border#c08da4
• peekViewEditor.background#5a5e5c
• peekViewEditor.matchHighlightBackground#dbb66d7f
• peekViewEditorGutter.background#5a5e5c
• peekViewResult.background#5a5e5c
• peekViewResult.fileForeground#caccc8
• peekViewResult.lineForeground#717472
• peekViewResult.matchHighlightBackground#dbb66d
• peekViewResult.selectionBackground#878a87
• peekViewResult.selectionForeground#e0e2dd
• peekViewTitle.background#717472
• peekViewTitleDescription.foreground#b3b6b2
• peekViewTitleLabel.foreground#e0e2dd
• pickerGroup.border#b3b6b2
• pickerGroup.foreground#e0e2dd
• progressBar.background#a4cc78
• scrollbar.shadow#444847
• scrollbarSlider.activeBackground#b3b6b27f
• scrollbarSlider.background#878a877f
• scrollbarSlider.hoverBackground#9da09d7f
• selection.background#717472
• sideBar.background#444847
• sideBar.border#5a5e5c
• sideBar.foreground#caccc8
• sideBarSectionHeader.background#717472
• sideBarSectionHeader.foreground#caccc8
• sideBarTitle.foreground#b3b6b2
• statusBar.background#7eb9d0
• statusBar.border#7eb9d07f
• statusBar.debuggingBackground#e4a572
• statusBar.debuggingBorder#e4a5727f
• statusBar.debuggingForeground#444847
• statusBar.foreground#444847
• statusBar.noFolderBackground#bb91b7
• statusBar.noFolderBorder#bb91b77f
• statusBar.noFolderForeground#444847
• statusBarItem.activeBackground#71ca98
• statusBarItem.hoverBackground#a4cc78
• statusBarItem.prominentBackground#71ca98
• statusBarItem.prominentHoverBackground#a4cc78
• tab.activeBackground#444847
• tab.activeForeground#caccc8
• tab.border#444847
• tab.inactiveBackground#5a5e5c
• tab.inactiveForeground#878a87
• tab.unfocusedActiveForeground#878a87
• tab.unfocusedInactiveForeground#717472
• terminal.ansiBlack#444847
• terminal.ansiBlue#7eb9d0
• terminal.ansiBrightBlack#5a5e5c
• terminal.ansiBrightBlue#7eb9d0
• terminal.ansiBrightCyan#71ca98
• terminal.ansiBrightGreen#71ca98
• terminal.ansiBrightMagenta#c08da4
• terminal.ansiBrightRed#e4a572
• terminal.ansiBrightWhite#e0e2dd
• terminal.ansiBrightYellow#dbb66d
• terminal.ansiCyan#71ca98
• terminal.ansiGreen#a4cc78
• terminal.ansiMagenta#c08da4
• terminal.ansiRed#e29288
• terminal.ansiWhite#caccc8
• terminal.ansiYellow#dbb66d
• terminal.background#444847
• terminal.foreground#caccc8
• terminal.selectionBackground#7eb9d07f
• terminalCursor.background#5a5e5c
• terminalCursor.foreground#b3b6b2
• titleBar.activeBackground#444847
• titleBar.activeForeground#b3b6b2
• titleBar.inactiveBackground#444847
• titleBar.inactiveForeground#878a87
• tree.indentGuidesStroke#5a5e5c
• walkThrough.embeddedEditorBackground#444847
• welcomePage.buttonBackground#5a5e5c
• welcomePage.buttonHoverBackground#717472
• widget.shadow#444847

tokenColors

TextMate scopes and font styles (syntax highlighting rules).