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#ffffff
• activityBar.border#ffffff
• activityBar.dropBackground#e2e2e2
• activityBar.foreground#6d6d6d
• activityBarBadge.background#9d7a9a
• activityBarBadge.foreground#ffffff
• badge.background#9d7a9a
• badge.foreground#ffffff
• button.background#70a4b9
• button.foreground#ffffff
• button.hoverBackground#336600
• debugExceptionWidget.background#e2e2e2
• debugExceptionWidget.border#e2e2e2
• debugToolBar.background#e2e2e2
• diffEditor.insertedTextBackground#66990020
• diffEditor.removedTextBackground#ab5b5120
• dropdown.background#e2e2e2
• dropdown.border#e2e2e2
• dropdown.foreground#505050
• editor.background#ffffff
• editor.findMatchBackground#c49f477f
• editor.findMatchHighlightBackground#c49f473f
• editor.findRangeHighlightBackground#e2e2e2
• editor.foreground#333333
• editor.hoverHighlightBackground#c5c5c5
• editor.inactiveSelectionBackground#70a4b933
• editor.lineHighlightBackground#ffffff
• editor.lineHighlightBorder#e2e2e2
• editor.rangeHighlightBackground#e2e2e2
• editor.selectionBackground#70a4b933
• editor.selectionHighlightBackground#e2e2e2
• editor.wordHighlightBackground#9d7a9a7f
• editor.wordHighlightStrongBackground#b2889b7f
• editorBracketMatch.background#e2e2e2
• editorBracketMatch.border#e2e2e2
• editorCodeLens.foreground#6d6d6d
• editorCursor.foreground#9d7a9a
• editorError.border#333333
• editorError.foreground#ab5b51
• editorGroup.border#e2e2e2
• editorGroup.dropBackground#c5c5c57f
• editorGroup.emptyBackground#ffffff
• editorGroup.focusedEmptyBorder#e2e2e2
• editorGroupHeader.noTabsBackground#ffffff
• editorGroupHeader.tabsBackground#ffffff
• editorGroupHeader.tabsBorder#ffffff
• editorGutter.addedBackground#669900
• editorGutter.background#ffffff
• editorGutter.deletedBackground#ab5b51
• editorGutter.modifiedBackground#c49f47
• editorHoverWidget.background#e2e2e2
• editorHoverWidget.border#e2e2e2
• editorIndentGuide.activeBackground#c5c5c5
• editorIndentGuide.background#e2e2e2
• editorLineNumber.foreground#c5c5c5
• editorLink.activeForeground#336600
• editorMarkerNavigation.background#e2e2e2
• editorMarkerNavigationError.background#ab5b51
• editorMarkerNavigationWarning.background#b97b49
• editorOverviewRuler.addedForeground#6699007f
• editorOverviewRuler.border#e2e2e2
• editorOverviewRuler.commonContentForeground#9d7a9a
• editorOverviewRuler.currentContentForeground#336600
• editorOverviewRuler.deletedForeground#ab5b517f
• editorOverviewRuler.errorForeground#ab5b517f
• editorOverviewRuler.findMatchForeground#c49f47bf
• editorOverviewRuler.incomingContentForeground#70a4b9
• editorOverviewRuler.infoForeground#70a4b97f
• editorOverviewRuler.modifiedForeground#c49f477f
• editorOverviewRuler.rangeHighlightForeground#c5c5c5bf
• editorOverviewRuler.selectionHighlightForeground#e2e2e2bf
• editorOverviewRuler.warningForeground#b97b497f
• editorOverviewRuler.wordHighlightForeground#c5c5c5bf
• editorOverviewRuler.wordHighlightStrongForeground#a8a8a8bf
• editorPane.background#ffffff
• editorRuler.foreground#e2e2e2
• editorSuggestWidget.background#e2e2e2
• editorSuggestWidget.border#e2e2e2
• editorSuggestWidget.foreground#505050
• editorSuggestWidget.highlightForeground#b2889b
• editorSuggestWidget.selectedBackground#c5c5c5
• editorWarning.border#505050
• editorWarning.foreground#b97b49
• editorWhitespace.foreground#e2e2e2
• editorWidget.background#e2e2e2
• editorWidget.border#e2e2e2
• errorForeground#ab5b51
• extensionButton.prominentBackground#70a4b9
• extensionButton.prominentForeground#ffffff
• extensionButton.prominentHoverBackground#336600
• focusBorder#9d7a9a
• foreground#333333
• gitDecoration.conflictingResourceForeground#336600
• gitDecoration.deletedResourceForeground#ab5b51
• gitDecoration.ignoredResourceForeground#a8a8a8
• gitDecoration.modifiedResourceForeground#c49f47
• gitDecoration.untrackedResourceForeground#9d7a9a
• input.background#e2e2e2
• input.border#e2e2e2
• input.foreground#505050
• input.placeholderForeground#c5c5c5
• inputOption.activeBorder#336600
• inputValidation.errorBackground#e2e2e2
• inputValidation.errorBorder#ab5b51
• inputValidation.infoBackground#e2e2e2
• inputValidation.infoBorder#70a4b9
• inputValidation.warningBackground#e2e2e2
• inputValidation.warningBorder#b97b49
• list.activeSelectionBackground#6699007f
• list.activeSelectionForeground#ffffff
• list.dropBackground#a8a8a8
• list.errorForeground#ab5b51
• list.focusBackground#a8a8a8
• list.focusForeground#ffffff
• list.highlightForeground#c49f47
• list.hoverBackground#e2e2e2
• list.hoverForeground#6d6d6d
• list.inactiveSelectionBackground#e2e2e2
• list.inactiveSelectionForeground#333333
• list.invalidItemForeground#ab5b51
• list.warningForeground#c49f47
• listFilterWidget.background#e2e2e2
• listFilterWidget.noMatchesOutline#ab5b51
• listFilterWidget.outline#70a4b9
• merge.border#8a8a8a
• merge.commonContentBackground#9d7a9a4c
• merge.commonHeaderBackground#9d7a9a4c
• merge.currentContentBackground#3366004c
• merge.currentHeaderBackground#3366004c
• merge.incomingContentBackground#70a4b94c
• merge.incomingHeaderBackground#70a4b94c
• notification.background#e2e2e2
• notification.buttonBackground#70a4b9
• notification.buttonForeground#ffffff
• notification.buttonHoverBackground#336600
• notification.errorBackground#ab5b51
• notification.errorForeground#ffffff
• notification.foreground#333333
• notification.infoBackground#70a4b9
• notification.infoForeground#ffffff
• notification.warningBackground#b97b49
• notification.warningForeground#ffffff
• panel.background#ffffff
• panel.border#e2e2e2
• panelTitle.activeBorder#a8a8a8
• panelTitle.activeForeground#505050
• panelTitle.inactiveForeground#8a8a8a
• peekView.border#b2889b
• peekViewEditor.background#e2e2e2
• peekViewEditor.matchHighlightBackground#c49f477f
• peekViewEditorGutter.background#e2e2e2
• peekViewResult.background#e2e2e2
• peekViewResult.fileForeground#505050
• peekViewResult.lineForeground#c5c5c5
• peekViewResult.matchHighlightBackground#c49f47
• peekViewResult.selectionBackground#a8a8a8
• peekViewResult.selectionForeground#333333
• peekViewTitle.background#c5c5c5
• peekViewTitleDescription.foreground#6d6d6d
• peekViewTitleLabel.foreground#333333
• pickerGroup.border#6d6d6d
• pickerGroup.foreground#333333
• progressBar.background#669900
• scrollbar.shadow#33333366
• scrollbarSlider.activeBackground#6d6d6d7f
• scrollbarSlider.background#a8a8a87f
• scrollbarSlider.hoverBackground#8a8a8a7f
• selection.background#c5c5c5
• sideBar.background#ffffff
• sideBar.border#e2e2e2
• sideBar.foreground#505050
• sideBarSectionHeader.background#c5c5c5
• sideBarSectionHeader.foreground#505050
• sideBarTitle.foreground#6d6d6d
• statusBar.background#70a4b9
• statusBar.border#70a4b97f
• statusBar.debuggingBackground#b97b49
• statusBar.debuggingBorder#b97b497f
• statusBar.debuggingForeground#ffffff
• statusBar.foreground#ffffff
• statusBar.noFolderBackground#9d7a9a
• statusBar.noFolderBorder#9d7a9a7f
• statusBar.noFolderForeground#ffffff
• statusBarItem.activeBackground#336600
• statusBarItem.hoverBackground#669900
• statusBarItem.prominentBackground#336600
• statusBarItem.prominentHoverBackground#669900
• tab.activeBackground#ffffff
• tab.activeForeground#505050
• tab.border#ffffff
• tab.inactiveBackground#e2e2e2
• tab.inactiveForeground#a8a8a8
• tab.unfocusedActiveForeground#a8a8a8
• tab.unfocusedInactiveForeground#c5c5c5
• terminal.ansiBlack#ffffff
• terminal.ansiBlue#70a4b9
• terminal.ansiBrightBlack#e2e2e2
• terminal.ansiBrightBlue#70a4b9
• terminal.ansiBrightCyan#336600
• terminal.ansiBrightGreen#336600
• terminal.ansiBrightMagenta#b2889b
• terminal.ansiBrightRed#b97b49
• terminal.ansiBrightWhite#333333
• terminal.ansiBrightYellow#c49f47
• terminal.ansiCyan#336600
• terminal.ansiGreen#669900
• terminal.ansiMagenta#b2889b
• terminal.ansiRed#ab5b51
• terminal.ansiWhite#505050
• terminal.ansiYellow#c49f47
• terminal.background#ffffff
• terminal.foreground#505050
• terminal.selectionBackground#70a4b97f
• terminalCursor.background#e2e2e2
• terminalCursor.foreground#6d6d6d
• titleBar.activeBackground#ffffff
• titleBar.activeForeground#6d6d6d
• titleBar.inactiveBackground#ffffff
• titleBar.inactiveForeground#a8a8a8
• tree.indentGuidesStroke#e2e2e2
• walkThrough.embeddedEditorBackground#ffffff
• welcomePage.buttonBackground#e2e2e2
• welcomePage.buttonHoverBackground#c5c5c5
• widget.shadow#33333366

tokenColors

TextMate scopes and font styles (syntax highlighting rules).