Deep Blue Dark Theme

Color themes

• 

  Deep Blue

• 

  Deep Blue Flat

• 

  Deep Blue Night

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#0b1117
• activityBar.border#0b1117
• activityBar.foreground#c2ccd6
• activityBar.inactiveForeground#7a838f
• activityBarBadge.background#254a6b
• activityBarBadge.foreground#c2ccd6
• badge.background#254a6b
• badge.foreground#c2ccd6
• button.background#141f29
• button.hoverBackground#1a2834
• commandCenter.activeBackground#121c25
• commandCenter.background#0b1117
• commandCenter.border#161f28
• commandCenter.foreground#c2ccd6
• disabledForeground#7a838f
• dropdown.background#0b1117
• dropdown.border#161f28
• dropdown.foreground#c2ccd6
• editor.background#0b1117
• editor.findMatchBackground#1f3f5a88
• editor.findMatchHighlightBackground#2a3d4d44
• editor.foreground#c2ccd6
• editor.hoverHighlightBackground#0f151c
• editor.inactiveSelectionBackground#2a3d4d33
• editor.lineHighlightBackground#0f151c
• editor.rangeHighlightBackground#0f151c
• editor.selectionBackground#1f3f5a55
• editor.selectionHighlightBackground#2a3d4d22
• editor.wordHighlightBackground#2a3d4d22
• editor.wordHighlightStrongBackground#2a3d4d33
• editorBracketMatch.background#2a3d4d33
• editorBracketMatch.border#35526e
• editorCursor.foreground#c2ccd6
• editorGroupHeader.noTabsBackground#101820
• editorGroupHeader.tabsBackground#101820
• editorGroupHeader.tabsBorder#101820
• editorHoverWidget.background#0b1117
• editorHoverWidget.border#161f28
• editorHoverWidget.foreground#c2ccd6
• editorIndentGuide.activeBackground1#3a5166
• editorIndentGuide.background1#101820
• editorLineNumber.activeForeground#7a838f
• editorLineNumber.foreground#58616c
• editorMarkerNavigation.background#0b1117
• editorMarkerNavigationError.background#3a161b
• editorMarkerNavigationInfo.background#101820
• editorMarkerNavigationWarning.background#3a290f
• editorSuggestWidget.background#0b1117
• editorSuggestWidget.border#161f28
• editorSuggestWidget.foreground#c2ccd6
• editorSuggestWidget.highlightForeground#5b82bb
• editorSuggestWidget.selectedBackground#121c25
• editorSuggestWidget.selectedForeground#c2ccd6
• editorWhitespace.foreground#1c2732
• editorWidget.background#0b1117
• editorWidget.border#161f28
• focusBorder#254a6b
• foreground#c2ccd6
• input.background#0b1117
• input.border#161f28
• input.foreground#c2ccd6
• inputOption.activeBackground#1e3a5233
• inputOption.activeBorder#254a6b
• inputOption.activeForeground#c2ccd6
• list.activeSelectionBackground#1e3a52
• list.activeSelectionForeground#c2ccd6
• list.focusOutline#00000000
• list.hoverBackground#121c25
• list.hoverForeground#c2ccd6
• list.inactiveFocusOutline#00000000
• list.inactiveSelectionBackground#2a3d4d55
• list.inactiveSelectionForeground#c2ccd6
• menu.background#0b1117
• menu.border#161f28
• menu.foreground#c2ccd6
• menu.selectionBackground#121c25
• menu.selectionForeground#c2ccd6
• menu.separatorBackground#161f28
• minimap.background#0b1117
• notificationCenterHeader.background#101820
• notificationCenterHeader.foreground#c2ccd6
• notifications.background#0b1117
• notifications.border#161f28
• notifications.foreground#c2ccd6
• notificationToast.border#161f28
• panel.background#101820
• panel.border#0b1117
• peekView.border#254a6b
• peekViewEditor.background#0b1117
• peekViewEditor.matchHighlightBackground#2a3d4d44
• peekViewResult.background#0b1117
• peekViewResult.fileForeground#c2ccd6
• peekViewResult.lineForeground#7a838f
• peekViewResult.matchHighlightBackground#2a3d4d44
• peekViewTitle.background#101820
• peekViewTitleDescription.foreground#7a838f
• peekViewTitleLabel.foreground#c2ccd6
• pickerGroup.border#161f28
• pickerGroup.foreground#7a9fc8
• progressBar.background#254a6b
• quickInput.background#0b1117
• quickInput.foreground#c2ccd6
• quickInputList.focusBackground#121c25
• quickInputTitle.background#101820
• scrollbarSlider.background#32445566
• scrollbarSlider.hoverBackground#3c526688
• settings.checkboxBackground#0b1117
• settings.checkboxBorder#161f28
• settings.dropdownBackground#0b1117
• settings.dropdownBorder#161f28
• settings.modifiedItemIndicator#4a6fa8
• settings.numberInputBackground#0b1117
• settings.numberInputBorder#161f28
• settings.textInputBackground#0b1117
• settings.textInputBorder#161f28
• sideBar.background#101820
• sideBar.border#0b1117
• sideBar.foreground#c2ccd6
• sideBarSectionHeader.background#101820
• sideBarSectionHeader.foreground#c2ccd6
• statusBar.background#101820
• statusBar.border#101820
• statusBar.foreground#c2ccd6
• tab.activeBackground#0b1117
• tab.activeForeground#c2ccd6
• tab.border#101820
• tab.hoverBackground#101820
• tab.inactiveBackground#0b1117
• tab.inactiveForeground#7a838f
• tab.unfocusedActiveBackground#101820
• terminal.background#0b1117
• terminal.foreground#c2ccd6
• textBlockQuote.background#101820
• textCodeBlock.background#101820
• titleBar.activeBackground#101820
• titleBar.activeForeground#c2ccd6
• titleBar.border#101820
• titleBar.inactiveBackground#101820
• titleBar.inactiveForeground#6e7782
• toolbar.activeBackground#16212b
• toolbar.hoverBackground#121c25
• welcomePage.tileBackground#101820
• welcomePage.tileHoverBackground#121c25
• widget.border#161f28
• widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).