zzDarkTheme

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.activeBackground#3d3dff00
• activityBar.background#0e0d1a
• activityBar.border#242240
• activityBar.foreground#4040fb
• activityBar.inactiveForeground#3b3861
• activityBarBadge.background#4040fb
• activityBarBadge.foreground#f5f5f5
• badge.background#4040fb
• badge.foreground#f5f5f5
• breadcrumb.activeSelectionForeground#e0e0e0
• breadcrumb.background#161527
• breadcrumb.focusForeground#e0e0e0
• breadcrumb.foreground#cccccccc
• button.background#4040fbcd
• button.foreground#c5c5c5
• button.hoverBackground#4040fb
• button.secondaryBackground#3b3861cd
• button.secondaryForeground#c5c5c5
• button.secondaryHoverBackground#3b3861
• checkbox.background#242240
• checkbox.border#00000000
• checkbox.foreground#f5f5f5
• debugExceptionWidget.background#242240
• debugExceptionWidget.border#3b3861
• debugToolBar.background#242240
• debugToolBar.border#3b3861
• diffEditor.border#444444
• diffEditor.insertedTextBackground#9bb95533
• diffEditor.removedTextBackground#ff000033
• dropdown.background#242240
• dropdown.border#00000000
• dropdown.foreground#f5f5f5
• editor.background#0e0d1a
• editor.findMatchBackground#ff1f8e48
• editor.findMatchBorder#ff1f8e76
• editor.findMatchHighlightBackground#61ff2942
• editor.findMatchHighlightBorder#61ff2970
• editor.findRangeHighlightBackground#3b386150
• editor.findRangeHighlightBorder#ffffff00
• editor.foldBackground#3B38613c
• editor.foreground#c5c5c5
• editor.hoverHighlightBackground#3b3861d5
• editor.inactiveSelectionBackground#3b38619f
• editor.lineHighlightBackground#24224091
• editor.lineHighlightBorder#242240
• editor.rangeHighlightBackground#242240
• editor.rangeHighlightBorder#ffffff00
• editor.selectionBackground#4040fb44
• editor.selectionHighlightBackground#4040fb60
• editor.selectionHighlightBorder#4040fbb3
• editor.wordHighlightBackground#575757b8
• editor.wordHighlightStrongBackground#3b3861d5
• editorBracketMatch.background#4040fb58
• editorBracketMatch.border#4040fb56
• editorCodeLens.foreground#c5c5c5
• editorCursor.background#f5f5f5
• editorCursor.foreground#4040fb
• editorError.background#ff404046
• editorError.border#ff404000
• editorError.foreground#ff4040
• editorGroup.border#242240
• editorGroup.emptyBackground#0e0d1a
• editorGroupHeader.tabsBackground#161527
• editorGutter.addedBackground#5afb00
• editorGutter.background#0e0d1a
• editorGutter.commentRangeForeground#c5c5c5
• editorGutter.deletedBackground#cf00a5
• editorGutter.foldingControlForeground#c5c5c5
• editorGutter.modifiedBackground#00c7ff
• editorHoverWidget.background#242240
• editorHoverWidget.border#3b3861
• editorHoverWidget.foreground#cccccc
• editorIndentGuide.activeBackground#4040fb6c
• editorIndentGuide.background#3b386199
• editorInfo.background#4490bf46
• editorInfo.border#4490BF00
• editorInfo.foreground#75beff
• editorLineNumber.activeForeground#4040fb
• editorLineNumber.foreground#3b3861
• editorLink.activeForeground#6565ff
• editorMarkerNavigation.background#242240
• editorMarkerNavigationError.background#ff4d2981
• editorMarkerNavigationInfo.background#2498ff81
• editorMarkerNavigationWarning.background#ffd51a81
• editorOverviewRuler.background#25252500
• editorOverviewRuler.border#242240
• editorRuler.foreground#4040fb5e
• editorSuggestWidget.background#242240
• editorSuggestWidget.border#3b3861
• editorSuggestWidget.foreground#c5c5c5
• editorSuggestWidget.highlightForeground#4092fb
• editorSuggestWidget.selectedBackground#4040fb76
• editorWarning.background#ffd10046
• editorWarning.border#ffffff00
• editorWarning.foreground#ffd100
• editorWhitespace.foreground#3b3861a5
• editorWidget.background#242240
• editorWidget.foreground#c5c5c5
• editorWidget.resizeBorder#3b3861
• focusBorder#4040fb
• foreground#f5f5f5
• gitDecoration.addedResourceForeground#2bff52
• gitDecoration.conflictingResourceForeground#7490ff
• gitDecoration.deletedResourceForeground#ff4221
• gitDecoration.ignoredResourceForeground#6863ad
• gitDecoration.modifiedResourceForeground#ffa621
• gitDecoration.stageDeletedResourceForeground#ea654e
• gitDecoration.stageModifiedResourceForeground#e0ae63
• gitDecoration.submoduleResourceForeground#70ade6
• gitDecoration.untrackedResourceForeground#4bf586
• icon.foreground#f5f5f5
• input.background#242240
• input.border#00000000
• input.foreground#f5f5f5
• input.placeholderForeground#c5c5c5
• inputOption.activeBackground#4040fb
• inputOption.activeBorder#4040fb
• inputOption.activeForeground#f5f5f5
• list.activeSelectionBackground#4040fb8d
• list.activeSelectionForeground#ffffff
• list.dropBackground#2422406a
• list.focusBackground#3b3861d5
• list.focusForeground#c5c5c5
• list.highlightForeground#4080fb
• list.hoverBackground#4040fb8d
• list.hoverForeground#f5f5f5
• list.inactiveSelectionBackground#242240
• list.inactiveSelectionForeground#c5c5c5
• listFilterWidget.background#4040fba1
• listFilterWidget.noMatchesOutline#4040fb
• listFilterWidget.outline#21212100
• menu.background#242240
• menu.border#3b3861
• menu.foreground#c5c5c5
• menu.selectionBackground#4040fb78
• menu.selectionBorder#4040fb
• menu.selectionForeground#f5f5f5
• menu.separatorBackground#3b3861
• menubar.selectionBackground#4040fb40
• menubar.selectionBorder#ff020200
• menubar.selectionForeground#f5f5f5
• merge.commonContentBackground#282828
• merge.commonHeaderBackground#383838
• merge.currentContentBackground#27403B
• merge.currentHeaderBackground#366d61
• merge.incomingContentBackground#28384B
• merge.incomingHeaderBackground#395F8F
• minimap.background#0e0d1a
• minimap.errorHighlight#ff4040
• minimap.findMatchHighlight#ff1f8e48
• minimap.selectionHighlight#4040fb44
• minimap.warningHighlight#ffd100
• minimapGutter.addedBackground#5afb00
• minimapGutter.deletedBackground#cf00a5
• minimapGutter.modifiedBackground#00c7ff
• notificationCenter.border#3b3861
• notificationCenterHeader.background#3b3861
• notificationCenterHeader.foreground#c5c5c5
• notifications.background#242240
• notifications.border#3b3861
• notifications.foreground#c5c5c5
• notificationsErrorIcon.foreground#ff4040
• notificationsInfoIcon.foreground#2fbbff
• notificationsWarningIcon.foreground#ffff56
• notificationToast.border#3b3861
• panel.background#0e0d1a
• panel.border#242240
• panelSection.border#242240
• panelTitle.activeBorder#4040fb
• panelTitle.activeForeground#f5f5f5
• panelTitle.inactiveForeground#c5c5c5
• peekView.border#007acc
• peekViewEditor.background#001f33
• peekViewEditor.matchHighlightBackground#ff8f0099
• peekViewEditor.matchHighlightBorder#ee931e
• peekViewEditorGutter.background#001f33
• peekViewResult.background#242240
• peekViewResult.fileForeground#ffffff
• peekViewResult.lineForeground#bbbbbb
• peekViewResult.matchHighlightBackground#ea5c004d
• peekViewResult.selectionBackground#3399ff33
• peekViewResult.selectionForeground#ffffff
• peekViewTitle.background#242240
• peekViewTitleDescription.foreground#ccccccb3
• peekViewTitleLabel.foreground#ffffff
• pickerGroup.border#3b3861
• pickerGroup.foreground#40d8fb
• progressBar.background#4040fb
• scrollbar.shadow#242240
• scrollbarSlider.activeBackground#4040fb
• scrollbarSlider.background#3b3861c1
• scrollbarSlider.hoverBackground#3b3861
• selection.background#4040fb
• settings.focusedRowBackground#ffffff07
• settings.headerForeground#f5f5f5
• sideBar.background#0e0d1a
• sideBar.border#242240
• sideBar.dropBackground#2422406a
• sideBar.foreground#c5c5c5
• sideBarSectionHeader.background#3b38618b
• sideBarSectionHeader.border#3b3861
• sideBarSectionHeader.foreground#c5c5c5
• sideBarTitle.foreground#f5f5f5
• statusBar.background#4040fb
• statusBar.border#242240
• statusBar.debuggingBackground#61ff2991
• statusBar.debuggingForeground#f5f5f5
• statusBar.foreground#c5c5c5
• statusBar.noFolderBackground#242240
• statusBar.noFolderForeground#c5c5c5
• statusBarItem.activeBackground#FFFFFF25
• statusBarItem.hoverBackground#6565ff
• statusBarItem.remoteBackground#6565ff
• statusBarItem.remoteForeground#f5f5f5
• tab.activeBackground#242240
• tab.activeBorder#00000000
• tab.activeBorderTop#4040fb
• tab.activeForeground#f5f5f5
• tab.border#242240
• tab.hoverBackground#4040fb
• tab.hoverForeground#f5f5f5
• tab.inactiveBackground#24224044
• tab.inactiveForeground#c5c5c5
• terminal.ansiBlack#413e6f
• terminal.ansiBlue#4040fb
• terminal.ansiBrightBlack#484387
• terminal.ansiBrightBlue#6565ff
• terminal.ansiBrightCyan#29b8db
• terminal.ansiBrightGreen#61ff29
• terminal.ansiBrightMagenta#e5097f
• terminal.ansiBrightRed#ff0000
• terminal.ansiBrightWhite#f5f5f5
• terminal.ansiBrightYellow#f5f543
• terminal.ansiCyan#11a8cd
• terminal.ansiGreen#009929
• terminal.ansiMagenta#9b0247
• terminal.ansiRed#b10005
• terminal.ansiWhite#c5c5c5
• terminal.ansiYellow#e5e510
• terminal.border#242240
• terminal.foreground#c5c5c5
• terminal.selectionBackground#bcb7ff26
• terminalCursor.background#4040fb
• terminalCursor.foreground#f5f5f5
• textLink.foreground#6565ff
• titleBar.activeBackground#0e0d1a
• titleBar.activeForeground#c5c5c5
• titleBar.border#00000000
• titleBar.inactiveBackground#242240
• titleBar.inactiveForeground#c5c5c5
• tree.indentGuidesStroke#3b3861
• walkThrough.embeddedEditorBackground#00000050
• widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).