Deep Blue Theme

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#232A35
• activityBar.foreground#F5F9FE
• activityBar.inactiveForeground#9599A6
• activityBarBadge.background#387BFF
• activityBarBadge.foreground#FFFFFF
• breadcrumbPicker.background#2E3743
• button.background#D1D3DB
• button.foreground#000
• button.hoverBackground#EDEFF2
• button.separator#ODOEOF2E
• commandCenter.activeBorder#B0C0F42E
• commandCenter.background#B0C0F40F
• commandCenter.border#B0C0F41F
• commandCenter.inactiveBorder#B0C0F414
• debugIcon.breakpointForeground#F65A5A
• debugToolBar.background#232A35
• descriptionForeground#9599A6
• diffEditor.insertedLineBackground#00A56E47
• diffEditor.insertedTextBackground#00A56E47
• diffEditor.removedLineBackground#D02A2347
• diffEditor.removedTextBackground#D02A2347
• disabledForeground#666B75
• editor.background#181D27
• editor.findMatchHighlightBackground#DADDE552
• editor.foreground#D1D3DB
• editor.hoverHighlightBackground#264f7840
• editor.lineHighlightBackground#282B3A
• editor.selectionBackground#3579FF47
• editor.tab.background#B0C0F40F
• editorBracketPairGuide.background1#B0C0F414
• editorBracketPairGuide.background2#B0C0F414
• editorBracketPairGuide.background3#B0C0F414
• editorBracketPairGuide.background4#B0C0F414
• editorBracketPairGuide.background5#B0C0F414
• editorBracketPairGuide.background6#B0C0F414
• editorCursor.foreground#fff
• editorGroupHeader.tabsBackground#17191A
• editorGroupHeader.tabsBorder#B0C0F414
• editorIndentGuide.activeBackground#B0C0F42E
• editorIndentGuide.activeBackground1#B0C0F42E
• editorIndentGuide.background#B0C0F414
• editorIndentGuide.background1#B0C0F414
• editorLineNumber.activeForeground#E0E3EE
• editorLineNumber.foreground#979AA4
• editorLink.activeForeground#4E94CE
• editorStickyScrollHover.background#282B3A
• editorUnnecessaryCode.opacity#00000080
• errorForeground#CC4B53
• focusBorder#00000000
• foreground#D1D3DB
• icon.foreground#9599A6
• icube--bg-bg-menu#1E242F
• icube.blendColor.btnHover.bg2#32384a
• icube.blendColor.btnTransparent3.bg2#3f475d
• icube.chatIconBg1#fff
• icube.chatIconColor1#FF4A36
• icube.colorBg1#181D27
• icube.colorBg2#232A35
• icube.colorBg3#2E3743
• icube.colorBgCode#181D27
• icube.colorBgTr0#B0C0F40A
• icube.colorBrandTransparent#B0C0F40F
• icube.colorBrandTransparent2#B0C0F417
• icube.colorBrandTransparent3#B0C0F421
• icube.colorBtnHover#B0C0F40F
• icube.colorBtnHover2#B0C0F417
• icube.colorBtnTransparent3#B0C0F421
• icube.colorLine1#B0C0F414
• icube.colorLine2#B0C0F41F
• icube.colorLine3#B0C0F42E
• input.background#B0C0F40A
• input.placeholderForeground#9599A6
• inputOption.activeBorder#B0C0F42E
• inputValidation.errorBorder#F65A5A
• inputValidation.warningBorder#DC8730
• list.activeSelectionBackground#B0C0F417
• list.activeSelectionForeground#F5F9FE
• list.dropBackground#B0C0F40F
• list.errorForeground#CC4B53
• list.highlightForeground#DADDE5
• list.hoverBackground#B0C0F40F
• list.inactiveSelectionBackground#B0C0F40F
• list.inactiveSelectionForeground#F5F9FE
• listFilterWidget.background#232A35
• menu.background#2E3743
• menu.border#B0C0F414
• menu.foreground#D1D3DB
• menu.selectionBackground#B0C0F417
• menu.selectionForeground#F5F9FE
• menu.separatorBackground#B0C0F414
• notifications.background#2E3743
• notificationsErrorIcon.foreground#F65A5A
• notificationsInfoIcon.foreground#387BFF
• notificationsWarningIcon.foreground#DC8730
• panelSectionHeader.background#181D27
• panelSectionHeader.border#B0C0F41F
• panelSectionHeader.foreground#F5F9FE
• panelTitle.activeForeground#F5F9FE
• panelTitle.inactiveForeground#9599A6
• pickerGroup.border#B0C0F414
• pickerGroup.foreground#D1D3DB
• progressBar.background#387BFF
• quickInput.background#1E242F
• quickInput.foreground#D1D3DB
• quickInputList.focusBackground#B0C0F417
• quickInputTitle.background#232A35
• sash.hoverBorder#32F08C
• search.resultsInfoForeground#9599A6
• settings.dropdownBackground#2E3743
• settings.dropdownBorder#B0C0F414
• settings.headerBorder#B0C0F41F
• settings.headerForeground#F5F9FE
• settings.modifiedItemIndicator#DADDE5
• sideBar.background#181D27
• sideBarSectionHeader.background#181D27
• sideBarSectionHeader.border#B0C0F41F
• sideBarSectionHeader.foreground#D1D3DB
• statusBar.background#0000
• statusBar.noFolderBackground#0000
• symbolIcon.methodForeground#B180D7
• tab.activeBackground#B0C0F40F
• tab.activeBorder#181D27
• tab.activeBorderTop#FFFFFF
• tab.activeForeground#F5F9FE
• tab.border#B0C0F414
• tab.inactiveBackground#17191A
• tab.inactiveForeground#9599A6
• tab.unfocusedActiveForeground#D1D3DB
• textLink.activeForeground#979AA4
• textLink.foreground#DADDE5
• titleBar.activeBackground#232A35
• titleBar.activeForeground#9599A6
• titleBar.inactiveBackground#232A35
• toolbar.activeBackground#B0C0F417
• toolbar.hoverBackground#B0C0F40F
• tree.inactiveIndentGuidesStroke#DDE2E914
• tree.indentGuidesStroke#B0C0F414
• widget.shadow#00000029

tokenColors

TextMate scopes and font styles (syntax highlighting rules).