SarperBW

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#575c68
• activityBar.foreground#f9f9f9
• badge.background#414141
• badge.foreground#fafafa
• button.background#2a8de7
• button.foreground#e8f7ff
• button.hoverBackground#2481da
• debugToolBar.background#e6e6e6
• debugToolBar.border#ff0000
• diffEditor.insertedTextBackground#41a9521a
• diffEditor.removedTextBackground#f5676726
• dropdown.background#e6e6e6
• dropdown.border#cfd4d9
• dropdown.foreground#51575e
• editor.background#dadada
• editor.findMatchBackground#ffffff
• editor.findMatchHighlightBackground#F6F5F3
• editor.foreground#272843
• editor.inactiveSelectionBackground#adb5bd60
• editor.lineHighlightBackground#ebebeb
• editor.selectionBackground#f0d17b
• editor.selectionHighlightBackground#FCC83E
• editor.wordHighlightBackground#FCC83E
• editorBracketMatch.border#000000
• editorCursor.foreground#000000
• editorError.foreground#d43b3b00
• editorGroup.border#9b9b9b
• editorGroupHeader.noTabsBackground#f8f9fa
• editorGroupHeader.tabsBackground#cdcdcd
• editorHint.foreground#2076c9
• editorInfo.foreground#2076c9
• editorLineNumber.activeForeground#adb5bd
• editorLineNumber.foreground#adb5bd
• editorSuggestWidget.background#eeeeee
• editorSuggestWidget.foreground#51575e
• editorSuggestWidget.selectedBackground#ffffff
• editorWarning.foreground#ba5908
• editorWidget.background#ececec
• errorForeground#ee5656
• focusBorder#329af0
• foreground#51575e
• input.background#e6e6e6
• input.border#cfd4d9
• input.foreground#51575e
• input.placeholderForeground#adb5bd
• list.activeSelectionBackground#fafafa
• list.activeSelectionForeground#212529
• list.errorForeground#d43b3b
• list.focusBackground#fafafa
• list.focusForeground#212529
• list.highlightForeground#d80ac8
• list.hoverBackground#e2e2e2
• list.inactiveSelectionBackground#adb5bd4d
• list.inactiveSelectionForeground#212529
• list.warningForeground#ba5908
• panel.border#9b9b9b
• panelTitle.activeBorder#919191
• peekView.border#565761
• peekViewEditor.background#cfd4d955
• peekViewTitle.background#565761
• peekViewTitleLabel.foreground#eeeeee
• sash.hoverBorder#575c68
• scrollbar.shadow#2125291a
• scrollbarSlider.activeBackground#21252926
• scrollbarSlider.background#21252913
• scrollbarSlider.hoverBackground#21252926
• sideBar.background#d9d9d9
• sideBarSectionHeader.background#767785
• sideBarSectionHeader.foreground#e9e9eb
• sideBarTitle.foreground#212529
• statusBar.background#2f3336
• statusBar.debuggingBackground#50575f
• statusBar.debuggingForeground#cecece
• statusBar.foreground#fafafa
• statusBar.noFolderBackground#50575f
• statusBar.noFolderForeground#cecece
• tab.activeBackground#eeeeee
• tab.activeForeground#212529
• tab.border#cdcdcd
• tab.inactiveBackground#767785
• tab.inactiveForeground#e9e9eb
• titleBar.activeBackground#2f3336
• titleBar.activeForeground#e9ecee
• titleBar.inactiveBackground#767785
• titleBar.inactiveForeground#e9ecee

tokenColors

TextMate scopes and font styles (syntax highlighting rules).