Semantic Color 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#2f333d
• activityBar.foreground#d7dae0
• activityBarBadge.background#4d78cc
• activityBarBadge.foreground#f8fafd
• badge.background#282c34
• button.background#404754
• debugToolBar.background#21252b
• diffEditor.insertedTextBackground#98c37930
• diffEditor.removedTextBackground#e06c7530
• dropdown.background#1d1f23
• dropdown.border#181a1f
• editor.background#282c34
• editor.findMatchHighlightBackground#314365
• editor.lineHighlightBackground#383e4a
• editor.selectionBackground#484e5b
• editor.selectionHighlightBackground#484e5b
• editor.wordHighlightBackground#484e5b
• editor.wordHighlightStrongBackground#abb2bf26
• editorCursor.foreground#f8f8f0
• editorError.foreground#e06c75
• editorGroup.border#181a1f
• editorGroupHeader.tabsBackground#21252b
• editorGutter.addedBackground#98c379c0
• editorGutter.deletedBackground#e06c75c0
• editorGutter.modifiedBackground#56b5c2c0
• editorHoverWidget.background#21252b
• editorHoverWidget.border#181a1f
• editorIndentGuide.background#3b4048
• editorLineNumber.foreground#495162
• editorMarkerNavigation.background#21252b
• editorOverviewRuler.addedForeground#98c37980
• editorOverviewRuler.deletedForeground#e06c7580
• editorOverviewRuler.modifiedForeground#56b5c280
• editorRuler.foreground#abb2bf26
• editorSuggestWidget.background#21252b
• editorSuggestWidget.border#181a1f
• editorSuggestWidget.selectedBackground#2c313a
• editorWhitespace.foreground#3b4048
• editorWidget.background#21252b
• gitDecoration.deletedResourceForeground#e06c75
• gitDecoration.modifiedResourceForeground#56b5c2
• gitDecoration.untrackedResourceForeground#98c379
• input.background#1d1f23
• list.activeSelectionBackground#2c313a
• list.activeSelectionForeground#d7dae0
• list.focusBackground#383e4a
• list.highlightForeground#c5c5c5
• list.hoverBackground#292d35
• list.inactiveSelectionBackground#2c313a
• list.inactiveSelectionForeground#d7dae0
• peekViewEditor.background#21252b
• peekViewEditor.matchHighlightBackground#314365
• peekViewResult.background#21252b
• peekViewResult.matchHighlightBackground#314365
• scrollbarSlider.activeBackground#747d9180
• scrollbarSlider.background#4e566680
• scrollbarSlider.hoverBackground#5a637580
• sideBar.background#21252b
• sideBarSectionHeader.background#282c34
• statusBar.background#21252b
• statusBar.debuggingBackground#21252b
• statusBar.foreground#9da5b4
• statusBar.noFolderBackground#21252b
• statusBarItem.hoverBackground#2c313a
• tab.activeBackground#2c313a
• tab.border#181a1f
• tab.inactiveBackground#21252b
• terminal.ansiBlack#2D3139
• terminal.ansiBlue#2e8ccf
• terminal.ansiGreen#98c379
• terminal.ansiRed#e06c75
• terminal.ansiYellow#B4881D
• terminal.foreground#C8C8C8
• titleBar.activeBackground#282c34
• titleBar.activeForeground#9da5b4
• titleBar.inactiveBackground#282c34
• titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).