apex

Color themes

• 

  Apex

• 

  Apex Dark

• 

  iA Writer

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#f8f9fa
• activityBar.background#fff
• activityBar.border#f8f9fa
• activityBar.foreground#202123
• activityBar.inactiveForeground#adb5db99
• activityBarBadge.background#00b1f3
• activityBarBadge.foreground#fff
• badge.background#00b1f3
• badge.foreground#fff
• button.background#fff
• button.foreground#2f343a
• button.hoverBackground#fff
• dropdown.background#f8f9fa
• dropdown.border#f8f9fa
• editor.background#fff
• editor.findMatchBackground#fff
• editor.findMatchBorder#1862ab
• editor.findMatchHighlightBackground#fff
• editor.findMatchHighlightBorder#329af0
• editor.foreground#495057
• editor.lineHighlightBackground#fff
• editor.rangeHighlightBackground#fff
• editor.selectionBackground#21252911
• editorBracketMatch.background#e8f7ff
• editorBracketMatch.border#0097e8
• editorCursor.background#fff
• editorCursor.foreground#00b1f3
• editorGroupHeader.tabsBackground#fff
• editorGutter.addedBackground#228ae699
• editorGutter.background#fff
• editorGutter.deletedBackground#e6498099
• editorGutter.foldingControlForeground#495057
• editorGutter.modifiedBackground#228ae699
• editorIndentGuide.activeBackground#adb5db
• editorIndentGuide.background#adb5db99
• editorLineNumber.activeForeground#21252999
• editorLineNumber.foreground#868e964f
• editorSuggestWidget.background#fff
• editorSuggestWidget.highlightForeground#212529
• editorSuggestWidget.selectedBackground#f8f9fa
• editorWhitespace.foreground#adb5db99
• focusBorder#fff
• gitDecoration.addedResourceForeground#212529
• gitDecoration.deletedResourceForeground#fa5252
• gitDecoration.ignoredResourceForeground#868e96
• gitDecoration.modifiedResourceForeground#12b886
• gitDecoration.untrackedResourceForeground#228ae6
• input.background#f8f9fa
• list.activeSelectionBackground#ffffff
• list.activeSelectionForeground#212529
• list.focusBackground#fff
• list.focusForeground#212529
• list.inactiveSelectionBackground#fff
• panel.border#f8f9fa
• quickInput.background#f8f9faf2
• quickInput.foreground#868e96
• scrollbar.shadow#f8f9fa
• scrollbarSlider.activeBackground#e9ecef
• scrollbarSlider.background#e9ecef
• scrollbarSlider.hoverBackground#e9ecef
• searchEditor.findMatchBackground#fff
• searchEditor.findMatchBorder#1862ab
• selection.background#21252911
• settings.dropdownBorder#f8f9fa
• settings.headerForeground#495057
• sideBar.background#fff
• sideBar.border#f8f9fa
• sideBar.foreground#2f343a
• sideBarSectionHeader.background#fff
• sideBarSectionHeader.border#f1f3f5
• sideBarSectionHeader.foreground#868e96
• statusBar.background#fff
• statusBar.border#f8f9fa
• statusBar.foreground#2f343a
• statusBar.noFolderBackground#fff
• statusBar.noFolderForeground#2f343a
• tab.activeBorderTop#212529
• tab.activeForeground#212529
• tab.border#fff
• tab.inactiveBackground#fff
• tab.inactiveForeground#868e9699
• terminalCursor.foreground#00b1f3
• titleBar.activeBackground#fff
• titleBar.activeForeground#202123
• titleBar.inactiveBackground#fff
• titleBar.inactiveForeground#202123
• tree.indentGuidesStroke#fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

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

Loading...