Darker VS 2022 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#252526
• activityBar.border#00000000
• activityBar.foreground#cacaca
• activityBarBadge.background#7160e8
• activityBarBadge.foreground#000000
• button.background#333333
• button.hoverBackground#4d4d4d
• button.secondaryBackground#3d3d3d
• button.secondaryHoverBackground#4d4d4d
• editor.background#1a1a1a
• editor.foldBackground#00000000
• editor.foreground#dcdcdc
• editor.inactiveSelectionBackground#343434
• editor.lineHighlightBackground#00000000
• editor.lineHighlightBorder#46464650
• editor.selectionBackground#264f78
• editor.selectionHighlightBackground#343d47
• editor.selectionHighlightBorder#868686
• editor.wordHighlightBackground#113d6f
• editor.wordHighlightBorder#aaaaaa
• editorBracketMatch.background#113d6f
• editorBracketMatch.border#113d6f
• editorGroupHeader.tabsBackground#1f1f1f
• editorGutter.addedBackground#7160e895
• editorGutter.deletedBackground#7160e8
• editorGutter.foldingControlForeground#7160e8
• editorGutter.modifiedBackground#5f5f5f
• editorIndentGuide.activeBackground1#717171
• editorIndentGuide.background1#2e2e2e
• editorLineNumber.activeForeground#7160e895
• editorLineNumber.foreground#8a8a8a70
• editorSuggestWidget.background#1f1f1f
• editorSuggestWidget.focusHighlightForeground#fafafa
• editorSuggestWidget.highlightForeground#fafafa
• editorWidget.background#242424
• extensionButton.background#333333
• extensionButton.foreground#fafafa
• extensionButton.prominentForeground#fafafa
• extensionButton.prominentHoverBackground#bee6fd
• focusBorder#7160e8
• foreground#fafafa
• gitDecoration.addedResourceForeground#fafafa
• gitDecoration.deletedResourceForeground#fafafa
• gitDecoration.modifiedResourceForeground#fafafa
• gitDecoration.renamedResourceForeground#fafafa
• gitDecoration.stageDeletedResourceForeground#fafafa
• gitDecoration.stageModifiedResourceForeground#fafafa
• gitDecoration.submoduleResourceForeground#fafafa
• gitDecoration.untrackedResourceForeground#fafafa
• input.background#1f1f1f
• input.border#383838
• list.activeSelectionBackground#383838
• list.activeSelectionForeground#999999
• list.errorForeground#fafafa
• list.focusAndSelectionOutline#00000000
• list.hoverBackground#38383890
• list.inactiveSelectionBackground#383838
• list.inactiveSelectionForeground#999999
• menu.background#2e2e2e
• menu.border#424242
• menu.selectionBorder#707070
• menu.separatorBackground#3d3d3d
• menubar.selectionBackground#3d3d3d
• progressBar.background#7160e8
• quickInputList.focusBackground#3d3d3d
• settings.modifiedItemIndicator#7160e8
• sideBar.background#252526
• sideBar.border#00000000
• sideBar.foreground#999999
• sideBarSectionHeader.background#00000000
• statusBar.background#2e2e2e
• statusBar.border#00000000
• statusBar.debuggingBackground#2e2e2e
• statusBar.noFolderBackground#2e2e2e
• statusBarItem.hoverBackground#3d3d3d
• tab.activeBackground#1a1a1a
• tab.activeBorderTop#999999
• tab.activeForeground#fafafa
• tab.border#1a1a1a
• tab.hoverForeground#fafafa
• tab.inactiveBackground#1a1a1a
• tab.inactiveForeground#b2b2b2
• terminal.ansiBlue#2472c8
• terminal.ansiBrightBlack#666666
• terminal.ansiBrightBlue#3b8eea
• terminal.ansiBrightCyan#29b8db
• terminal.ansiBrightGreen#23d18b
• terminal.ansiBrightMagenta#d670d6
• terminal.ansiBrightRed#f14c4c
• terminal.ansiBrightYellow#f5f543
• terminal.ansiCyan#11a8cd
• terminal.ansiGreen#0dbc79
• terminal.ansiMagenta#bc3fbc
• terminal.ansiRed#cd3131
• terminal.ansiWhite#e5e5e5
• terminal.ansiYellow#e5e510
• terminal.foreground#fafafa
• textLink.activeForeground#7160e8
• textLink.foreground#7160e8
• titleBar.activeBackground#1f1f1f
• titleBar.activeForeground#999999
• titleBar.inactiveBackground#1f1f1f
• welcomePage.progress.foreground#7160e8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...