Deep Blue Dark Theme

Name: Deep Blue Dark Theme
Author: Lorenzo Adreani

Publisher: Lorenzo AdreaniThemes in package: 3

A clean and minimal dark blue theme for VS Code. Deep Blue delivers a consistent UI, smooth contrast and a distraction-free coding experience. Includes Flat and Night variants.

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Deep Blue Dark Theme — Deep Blue

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#0d1115
activityBar.border#0d1115
activityBar.foreground#d3dae3
activityBar.inactiveForeground#9298a5
activityBarBadge.background#2b5278
activityBarBadge.foreground#d3dae3
badge.background#2b5278
badge.foreground#d3dae3
button.background#2b3948
button.foreground#d3dae3
button.hoverBackground#35506c
button.secondaryBackground#202933
button.secondaryForeground#d3dae3
button.secondaryHoverBackground#2b3948
commandCenter.activeBackground#202933
commandCenter.background#0d1115
commandCenter.border#1b2128
commandCenter.foreground#d3dae3
descriptionForeground#9298a5
disabledForeground#9298a5
dropdown.background#0d1115
dropdown.border#1b2128
dropdown.foreground#d3dae3
editor.background#0d1115
editor.findMatchBackground#2b5278aa
editor.findMatchHighlightBackground#4c637d55
editor.foreground#d3dae3
editor.hoverHighlightBackground#10151a
editor.inactiveSelectionBackground#4c637d44
editor.lineHighlightBackground#10151a
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#10151a
editor.selectionBackground#2b527866
editor.selectionHighlightBackground#4c637d33
editor.wordHighlightBackground#4c637d33
editor.wordHighlightStrongBackground#4c637d55
editorBracketMatch.background#4c637d33
editorBracketMatch.border#466799
editorCodeLens.foreground#9298a5
editorCursor.foreground#d3dae3
editorGroup.border#0d1115
editorGroupHeader.noTabsBackground#0d1115
editorGroupHeader.tabsBackground#0d1115
editorGroupHeader.tabsBorder#0d1115
editorHoverWidget.background#0d1115
editorHoverWidget.border#1b2128
editorHoverWidget.foreground#d3dae3
editorIndentGuide.activeBackground1#4c637d
editorIndentGuide.background1#10151a
editorLineNumber.activeForeground#9298a5
editorLineNumber.foreground#666a73
editorLink.activeForeground#7dcfff
editorOverviewRuler.border#00000000
editorRuler.foreground#2b3948
editorSuggestWidget.background#0d1115
editorSuggestWidget.border#1b2128
editorSuggestWidget.foreground#d3dae3
editorSuggestWidget.highlightForeground#5d88ca
editorSuggestWidget.selectedBackground#202933
editorSuggestWidget.selectedForeground#d3dae3
editorWhitespace.foreground#2b3948
editorWidget.background#0d1115
editorWidget.border#1b2128
errorForeground#da4453
focusBorder#2b5278
foreground#d3dae3
icon.foreground#9298a5
input.background#0d1115
input.border#1b2128
input.foreground#d3dae3
input.placeholderForeground#7f8793
inputOption.activeBackground#2b527833
inputOption.activeBorder#2b5278
inputOption.activeForeground#d3dae3
inputValidation.errorBackground#2a1418
inputValidation.errorBorder#da4453
inputValidation.infoBackground#162331
inputValidation.infoBorder#2b5278
inputValidation.warningBackground#3a2505
inputValidation.warningBorder#f67400
list.activeSelectionBackground#2b5278
list.activeSelectionForeground#d3dae3
list.focusBackground#2b5278
list.focusForeground#d3dae3
list.focusOutline#00000000
list.highlightForeground#5d88ca
list.hoverBackground#202933
list.hoverForeground#d3dae3
list.inactiveFocusOutline#00000000
list.inactiveSelectionBackground#4c637d55
list.inactiveSelectionForeground#d3dae3
menu.background#0d1115
menu.border#1b2128
menu.foreground#d3dae3
menu.selectionBackground#202933
menu.selectionForeground#d3dae3
menu.separatorBackground#1b2128
minimap.background#0d1115
notificationCenterHeader.background#141a21
notificationCenterHeader.foreground#d3dae3
notifications.background#0d1115
notifications.border#1b2128
notifications.foreground#d3dae3
notificationToast.border#1b2128
panel.background#10151a
panel.border#0d1115
panelTitle.activeBorder#2b5278
panelTitle.activeForeground#d3dae3
panelTitle.inactiveForeground#9298a5
peekView.border#2b5278
peekViewEditor.background#0d1115
peekViewEditor.matchHighlightBackground#4c637d55
peekViewResult.background#0d1115
peekViewResult.fileForeground#d3dae3
peekViewResult.lineForeground#9298a5
peekViewResult.matchHighlightBackground#4c637d55
peekViewTitle.background#0d1115
peekViewTitleDescription.foreground#9298a5
peekViewTitleLabel.foreground#d3dae3
progressBar.background#2b5278
quickInput.background#0d1115
quickInput.foreground#d3dae3
quickInputList.focusBackground#202933
quickInputTitle.background#0d1115
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#4c637daa
scrollbarSlider.background#4c637d66
scrollbarSlider.hoverBackground#4c637d88
selection.background#2b527888
settings.checkboxBackground#0d1115
settings.checkboxBorder#1b2128
settings.dropdownBackground#0d1115
settings.dropdownBorder#1b2128
settings.modifiedItemIndicator#5d88ca
settings.numberInputBackground#0d1115
settings.numberInputBorder#1b2128
settings.textInputBackground#0d1115
settings.textInputBorder#1b2128
sideBar.background#10151a
sideBar.border#0d1115
sideBar.foreground#d3dae3
sideBarSectionHeader.background#0d1115
sideBarSectionHeader.foreground#d3dae3
sideBarTitle.foreground#d3dae3
statusBar.background#141a21
statusBar.border#141a21
statusBar.debuggingBackground#2b5278
statusBar.debuggingForeground#d3dae3
statusBar.foreground#d3dae3
statusBar.noFolderBackground#141a21
statusBarItem.hoverBackground#202933
tab.activeBackground#0d1115
tab.activeBorderTop#00000000
tab.activeForeground#d3dae3
tab.border#0d1115
tab.hoverBackground#141a21
tab.inactiveBackground#0d1115
tab.inactiveForeground#9298a5
tab.unfocusedActiveBackground#0d1115
tab.unfocusedActiveForeground#c6ced9
terminal.background#0d1115
terminal.foreground#d3dae3
textBlockQuote.background#141a21
textBlockQuote.border#2b5278
textCodeBlock.background#141a21
textLink.activeForeground#7aa2d1
textLink.foreground#5d88ca
textPreformat.foreground#9ece6a
textSeparator.foreground#2b3948
titleBar.activeBackground#0d1115
titleBar.activeForeground#d3dae3
titleBar.border#0d1115
titleBar.inactiveBackground#0d1115
titleBar.inactiveForeground#666a73
toolbar.activeBackground#2b3948
toolbar.hoverBackground#202933
welcomePage.tileBackground#141a21
welcomePage.tileHoverBackground#202933
widget.border#1b2128
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#68727e	—
string, string.quoted, string.template, string.regexp	#8fcb6c	—
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined	#de7c2c	—
keyword, storage, storage.type, storage.modifier	#4f79b7	—
entity.name.function, support.function, meta.function-call, variable.function	#62b4d8	—
entity.name.type, entity.name.class, support.class, support.type, entity.name.namespace	#9db2c8	—
variable, meta.definition.variable.name, support.variable	#d1d8e0	—
variable.parameter	#bcc7d2	—
entity.name.tag, meta.tag, punctuation.definition.tag	#4f79b7	—
entity.other.attribute-name	#62b4d8	—
keyword.operator, punctuation.separator, punctuation.terminator	#8fa0b3	—
constant.character.escape, string.regexp.character-class, string.regexp constant.character.escape	#d7b65f	—
invalid, invalid.illegal, invalid.deprecated	#d14d57	—
markup.heading, markup.bold, markup.italic	#8fa9c2	—
markup.inline.raw, markup.fenced_code.block	#8fcb6c	—