Bela Dark

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#18181D
• activityBar.foreground#c7c7d1
• activityBar.inactiveForeground#535365
• activityBarBadge.background#18181D
• activityBarBadge.foreground#c7c7d1
• badge.background#25252D
• badge.foreground#c7c7d1
• breadcrumb.activeSelectionForeground#c7c7d1
• breadcrumb.background#18181D
• breadcrumb.focusForeground#c7c7d1
• breadcrumb.foreground#535365
• button.background#25252D
• button.foreground#c7c7d1
• button.hoverBackground#535365
• button.secondaryBackground#25252D
• button.secondaryForeground#c7c7d1
• button.secondaryHoverBackground#535365
• checkbox.background#18181D
• checkbox.border#00000000
• checkbox.foreground#c7c7d1
• debugExceptionWidget.background#18181D
• debugExceptionWidget.border#00000000
• debugToolBar.background#25252D
• debugToolBar.border#00000000
• diffEditor.border#00000000
• diffEditor.insertedTextBackground#B7EDC355
• diffEditor.insertedTextBorder#00000000
• diffEditor.removedTextBackground#F27D8555
• diffEditor.removedTextBorder#00000000
• dropdown.background#18181D
• dropdown.border#00000000
• dropdown.foreground#c7c7d1
• editor.background#18181D
• editor.findMatchBackground#535365
• editor.findMatchHighlightBackground#53536555
• editor.findRangeHighlightBackground#53536555
• editor.foldBackground#53536522
• editor.foreground#c7c7d1
• editor.hoverHighlightBackground#53536555
• editor.inactiveSelectionBackground#53536533
• editor.lineHighlightBackground#00000000
• editor.lineHighlightBorder#00000000
• editor.rangeHighlightBackground#53536555
• editor.selectionBackground#535365
• editor.selectionHighlightBackground#53536555
• editor.wordHighlightBackground#53536555
• editor.wordHighlightBorder#00000000
• editor.wordHighlightStrongBackground#53536555
• editorBracketMatch.background#535365
• editorBracketMatch.border#00000000
• editorCodeLens.foreground#787891
• editorCursor.background#18181D
• editorCursor.foreground#c7c7d1
• editorError.background#00000000
• editorError.border#00000000
• editorError.foreground#F27D8555
• editorGroup.emptyBackground#18181D
• editorGroupHeader.tabsBackground#18181D
• editorGutter.addedBackground#A1A6E3
• editorGutter.background#18181D
• editorGutter.commentRangeForeground#40434f
• editorGutter.deletedBackground#F09D7F
• editorGutter.foldingControlForeground#535365
• editorGutter.modifiedBackground#B7EDC3
• editorHoverWidget.background#18181D
• editorHoverWidget.border#00000000
• editorHoverWidget.foreground#c7c7d1
• editorIndentGuide.activeBackground1#535365
• editorIndentGuide.background1#25252D99
• editorInfo.background#00000000
• editorInfo.border#00000000
• editorInfo.foreground#6E79F855
• editorLineNumber.activeForeground#c7c7d1
• editorLineNumber.foreground#535365
• editorLink.activeForeground#c7c7d1
• editorMarkerNavigation.background#18181D
• editorMarkerNavigationError.background#DC989C
• editorMarkerNavigationInfo.background#A1A6E3
• editorMarkerNavigationWarning.background#E1D2AF
• editorOverviewRuler.background#25252D
• editorOverviewRuler.border#00000000
• editorRuler.foreground#c7c7d1
• editorSuggestWidget.background#18181D
• editorSuggestWidget.border#00000000
• editorSuggestWidget.foreground#c7c7d1
• editorSuggestWidget.highlightForeground#c7c7d1
• editorSuggestWidget.selectedBackground#25252D
• editorWarning.background#00000000
• editorWarning.border#00000000
• editorWarning.foreground#00000000
• editorWhitespace.foreground#00000000
• editorWidget.background#18181D
• editorWidget.foreground#c7c7d1
• editorWidget.resizeBorder#535365
• focusBorder#00000000
• foreground#c7c7d1
• gitDecoration.addedResourceForeground#A1A6E3
• gitDecoration.conflictingResourceForeground#E1D2AF
• gitDecoration.deletedResourceForeground#DC989C
• gitDecoration.ignoredResourceForeground#787891
• gitDecoration.modifiedResourceForeground#B7EDC3
• gitDecoration.stageDeletedResourceForeground#DC989C
• gitDecoration.stageModifiedResourceForeground#B7EDC3
• gitDecoration.submoduleResourceForeground#BA9DDB
• gitDecoration.untrackedResourceForeground#c7c7d1
• icon.foreground#c7c7d1
• input.background#18181D
• input.foreground#c7c7d1
• input.placeholderForeground#535365
• inputOption.activeBackground#25252D
• inputOption.activeForeground#c7c7d1
• list.activeSelectionBackground#25252D
• list.activeSelectionForeground#c7c7d1
• list.dropBackground#25252D
• list.focusBackground#25252D
• list.focusForeground#c7c7d1
• list.highlightForeground#BA9DDB
• list.hoverBackground#25252D
• list.hoverForeground#c7c7d1
• list.inactiveSelectionBackground#25252D
• list.inactiveSelectionForeground#c7c7d1
• listFilterWidget.background#18181D
• listFilterWidget.noMatchesOutline#DC989C
• menu.background#18181D
• menu.foreground#c7c7d1
• menu.selectionBackground#18181D
• menu.selectionForeground#c7c7d1
• menu.separatorBackground#25252D
• menubar.selectionBackground#25252D
• menubar.selectionForeground#c7c7d1
• merge.commonContentBackground#53536555
• merge.commonHeaderBackground#53536555
• merge.currentContentBackground#B7EDC355
• merge.currentHeaderBackground#B7EDC355
• merge.incomingContentBackground#A1A6E355
• merge.incomingHeaderBackground#A1A6E355
• minimap.background#18181D
• minimap.errorHighlight#DC989C55
• minimap.findMatchHighlight#53536555
• minimap.selectionHighlight#53536555
• minimap.warningHighlight#EECD8655
• minimapGutter.addedBackground#A1A6E3
• minimapGutter.deletedBackground#DC989C
• minimapGutter.modifiedBackground#B7EDC3
• notificationCenter.border#00000000
• notificationCenterHeader.background#17181c
• notificationCenterHeader.foreground#c7c7d1
• notifications.background#18181D
• notifications.border#00000000
• notifications.foreground#c7c7d1
• notificationsErrorIcon.foreground#DC989C
• notificationsInfoIcon.foreground#A1A6E3
• notificationsWarningIcon.foreground#E1D2AF
• notificationToast.border#00000000
• panel.background#18181D
• panel.border#25252D
• panelTitle.activeBorder#c7c7d1
• panelTitle.activeForeground#c7c7d1
• panelTitle.inactiveForeground#535365
• peekView.border#00000000
• peekViewEditor.background#18181D
• peekViewEditor.matchHighlightBackground#25252D
• peekViewEditor.matchHighlightBorder#00000000
• peekViewEditorGutter.background#18181D
• peekViewResult.background#18181D
• peekViewResult.fileForeground#c7c7d1
• peekViewResult.matchHighlightBackground#00000000
• peekViewResult.selectionBackground#25252D
• peekViewResult.selectionForeground#c7c7d1
• peekViewTitle.background#18181D
• peekViewTitleDescription.foreground#c7c7d1
• peekViewTitleLabel.foreground#c7c7d1
• pickerGroup.border#25252D
• pickerGroup.foreground#c7c7d1
• progressBar.background#18181D
• scrollbar.shadow#00000000
• scrollbarSlider.activeBackground#18181Dcc
• scrollbarSlider.background#18181D99
• scrollbarSlider.hoverBackground#18181Daa
• settings.focusedRowBackground#51030307
• settings.headerForeground#c7c7d1
• sideBar.background#18181D
• sideBar.border#25252D
• sideBar.dropBackground#00000000
• sideBar.foreground#c7c7d1
• sideBarSectionHeader.background#00000000
• sideBarSectionHeader.foreground#c7c7d1
• sideBarTitle.foreground#c7c7d1
• statusBar.background#18181D
• statusBar.debuggingBackground#DC989C
• statusBar.debuggingForeground#18181D
• statusBar.foreground#c7c7d1
• statusBar.noFolderBackground#18181D
• statusBar.noFolderForeground#c7c7d1
• statusBarItem.activeBackground#535365
• statusBarItem.hoverBackground#25252D
• statusBarItem.remoteBackground#18181D
• statusBarItem.remoteForeground#c7c7d1
• tab.activeBackground#25252D
• tab.activeForeground#c7c7d1
• tab.hoverBackground#25252D
• tab.hoverForeground#c7c7d1
• tab.inactiveBackground#18181D
• tab.inactiveForeground#535365
• terminal.ansiBlack#787891
• terminal.ansiBlue#A1A6E3
• terminal.ansiBrightBlack#787891
• terminal.ansiBrightBlue#BA9DDB
• terminal.ansiBrightCyan#B3C7ED
• terminal.ansiBrightGreen#B7EDC3
• terminal.ansiBrightMagenta#D7A1C5
• terminal.ansiBrightRed#DC989C
• terminal.ansiBrightWhite#c7c7d1
• terminal.ansiBrightYellow#E1D2AF
• terminal.ansiCyan#B3C7ED
• terminal.ansiGreen#B7EDC3
• terminal.ansiMagenta#D7A1C5
• terminal.ansiRed#DC989C
• terminal.ansiWhite#c7c7d1
• terminal.ansiYellow#E1D2AF
• terminal.border#25252D
• terminal.foreground#c7c7d1
• terminal.selectionBackground#535365
• terminalCursor.background#c7c7d1
• terminalCursor.foreground#c7c7d1
• textLink.foreground#B3C7ED
• titleBar.activeBackground#18181D
• titleBar.activeForeground#c7c7d1
• titleBar.inactiveBackground#18181D
• titleBar.inactiveForeground#c7c7d1
• walkThrough.embeddedEditorBackground#18181D
• widget.shadow#25252D55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).