Frontend Themes

Color themes

• 

  Angular Dark

• 

  Angular Gradient Dark

• 

  Angular Gradient Light

• 

  Angular High Contrast Dark

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.activeBorder#5C44E4
• activityBar.background#FFFFFF
• activityBar.border#D8D8DE
• activityBar.foreground#0F0F11
• activityBar.inactiveForeground#6B6B73
• activityBarBadge.background#5C44E4
• activityBarBadge.foreground#FFFFFF
• badge.background#8514F5
• badge.foreground#FFFFFF
• button.background#8514F5
• button.foreground#FFFFFF
• button.hoverBackground#5C44E4
• dropdown.background#EFEFF1
• dropdown.foreground#0F0F11
• editor.background#FFFFFF
• editor.findMatchBackground#8514F555
• editor.findMatchHighlightBackground#8514F522
• editor.foreground#0F0F11
• editor.lineHighlightBackground#EFEFF1
• editor.selectionBackground#8514F544
• editor.selectionHighlightBackground#8514F522
• editor.wordHighlightBackground#8514F522
• editorBracketMatch.background#8514F522
• editorBracketMatch.border#8514F5
• editorCursor.foreground#8514F5
• editorGroup.border#D8D8DE
• editorGroupHeader.tabsBackground#EFEFF1
• editorGroupHeader.tabsBorder#D8D8DE
• editorHoverWidget.background#EFEFF1
• editorHoverWidget.border#D8D8DE
• editorIndentGuide.activeBackground1#8514F5
• editorIndentGuide.background1#D8D8DE
• editorLineNumber.activeForeground#8514F5
• editorLineNumber.foreground#6B6B73
• editorSuggestWidget.highlightForeground#8514F5
• editorSuggestWidget.selectedBackground#8514F533
• editorWhitespace.foreground#D8D8DE
• editorWidget.background#EFEFF1
• editorWidget.border#D8D8DE
• extensionButton.prominentBackground#8514F5
• extensionButton.prominentForeground#FFFFFF
• extensionButton.prominentHoverBackground#5C44E4
• focusBorder#5C44E4
• gitDecoration.modifiedResourceForeground#8514F5
• input.background#EFEFF1
• input.foreground#0F0F11
• input.placeholderForeground#6B6B73
• inputOption.activeBorder#8514F5
• list.activeSelectionBackground#8514F533
• list.activeSelectionForeground#0F0F11
• list.focusOutline#5C44E4
• list.highlightForeground#8514F5
• list.hoverBackground#EFEFF1
• list.inactiveSelectionBackground#8514F51a
• minimap.findMatchHighlight#8514F5
• notificationLink.foreground#8514F5
• panel.background#FFFFFF
• panel.border#D8D8DE
• panelTitle.activeBorder#E90464
• panelTitle.activeForeground#0F0F11
• panelTitle.inactiveForeground#6B6B73
• peekView.border#8514F5
• progressBar.background#8514F5
• scrollbarSlider.activeBackground#8514F588
• scrollbarSlider.background#6B6B7344
• scrollbarSlider.hoverBackground#8514F555
• sideBar.background#FFFFFF
• sideBar.border#D8D8DE
• sideBar.foreground#3A3A42
• sideBarSectionHeader.background#EFEFF1
• sideBarSectionHeader.border#D8D8DE
• sideBarTitle.foreground#3A3A42
• statusBar.background#FFFFFF
• statusBar.border#D8D8DE
• statusBar.debuggingBackground#F637E3
• statusBar.debuggingForeground#000000
• statusBar.foreground#000000
• statusBar.noFolderBackground#FFFFFF
• statusBarItem.hoverBackground#8514F522
• statusBarItem.remoteBackground#F637E3
• statusBarItem.remoteForeground#000000
• tab.activeBackground#FFFFFF
• tab.activeBorderTop#8514F5
• tab.activeForeground#0F0F11
• tab.border#D8D8DE
• tab.inactiveBackground#EFEFF1
• tab.inactiveForeground#6B6B73
• terminal.ansiBlue#5C44E4
• terminal.ansiMagenta#8514F5
• terminal.ansiRed#E90464
• terminal.foreground#0F0F11
• terminalCursor.foreground#8514F5
• textLink.activeForeground#5C44E4
• textLink.foreground#8514F5
• titleBar.activeBackground#FFFFFF
• titleBar.activeForeground#3A3A42
• titleBar.border#D8D8DE
• titleBar.inactiveBackground#FFFFFF
• titleBar.inactiveForeground#6B6B73
• tree.indentGuidesStroke#D8D8DE

tokenColors

TextMate scopes and font styles (syntax highlighting rules).