Apex UI

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#252525
• activityBar.activeBorder#ff0000
• activityBar.activeFocusBorder#ff0000
• activityBar.background#181818
• activityBar.border#181818
• activityBar.foreground#fff
• activityBar.inactiveForeground#585858
• activityBarBadge.background#00baff
• activityBarBadge.foreground#fff
• badge.background#00b2ff
• badge.foreground#181818
• button.background#00b2ff
• button.border#202020
• button.foreground#fff
• button.hoverBackground#0cf
• dropdown.background#323232
• dropdown.border#323232
• dropdown.foreground#fff
• editor.background#181818
• editor.findMatchBackground#6193ff10
• editor.findMatchBorder#6193ff
• editor.findMatchHighlightBackground#f5a40a33
• editor.findMatchHighlightBorder#fab50066
• editor.foreground#fff
• editor.lineHighlightBackground#00b2ff06
• editor.rangeHighlightBackground#181818aa
• editor.selectionBackground#252525
• editorBracketMatch.border#00b2ff
• editorCursor.foreground#00b2ff
• editorGroupHeader.tabsBackground#181818
• editorGutter.addedBackground#2e96ff66
• editorGutter.background#181818
• editorGutter.deletedBackground#ff3d6e66
• editorGutter.foldingControlForeground#585858
• editorGutter.modifiedBackground#fab50066
• editorIndentGuide.activeBackground1#585858
• editorIndentGuide.background1#323232
• editorLineNumber.activeForeground#fff
• editorLineNumber.foreground#585858
• editorSuggestWidget.background#585858
• editorSuggestWidget.border#7e7e7e
• editorSuggestWidget.focusHighlightForeground#fff
• editorSuggestWidget.foreground#ccc
• editorSuggestWidget.highlightForeground#fff
• editorSuggestWidget.selectedBackground#65b5e3
• editorSuggestWidget.selectedForeground#fff
• editorSuggestWidget.selectedIconForeground#fff
• editorSuggestWidgetStatus.foreground#fff
• editorWhitespace.foreground#252525
• editorWidget.background#585858
• editorWidget.border#7e7e7e
• editorWidget.foreground#fff
• focusBorder#181818
• gitDecoration.deletedResourceForeground#ff3d6e
• gitDecoration.ignoredResourceForeground#585858
• gitDecoration.modifiedResourceForeground#fab500
• gitDecoration.untrackedResourceForeground#2e96ff
• input.background#323232
• input.border#323232
• input.foreground#fff
• input.placeholderForeground#7a7a78
• list.activeSelectionBackground#2e96ffaa
• list.activeSelectionForeground#fff
• list.activeSelectionIconForeground#fff
• list.focusAndSelectionOutline#2e96ffaa
• list.hoverBackground#65b5e3
• list.hoverForeground#fff
• list.inactiveFocusBackground#323232
• list.inactiveFocusOutline#323232
• list.inactiveSelectionBackground#252525
• list.inactiveSelectionForeground#fff
• list.inactiveSelectionIconForeground#fff
• panel.border#7e7e7e
• quickInput.background#585858
• quickInput.foreground#fff
• quickInputList.focusBackground#65b5e3
• quickInputList.focusForeground#fff
• quickInputList.focusIconForeground#fff
• quickInputTitle.background#ff0000
• scrollbar.shadow#252525
• scrollbarSlider.activeBackground#58585866
• scrollbarSlider.background#323232aa
• scrollbarSlider.hoverBackground#585858aa
• selection.background#fff
• settings.dropdownBorder#323232
• settings.headerForeground#2e96ff
• sideBar.background#0c0c0c
• sideBar.border#18181800
• sideBar.foreground#fff
• sideBarSectionHeader.background#181818
• sideBarSectionHeader.border#323232
• sideBarSectionHeader.foreground#fff
• statusBar.background#181818
• statusBar.border#181818
• statusBar.debuggingBackground#ff615c
• statusBar.focusBorder#181818
• statusBar.foreground#717171
• statusBar.noFolderBackground#181818
• statusBar.noFolderBorder#181818
• statusBar.noFolderForeground#fff
• tab.activeBackground#232323
• tab.activeBorderTop#00b2ff
• tab.activeForeground#fff
• tab.border#181818
• tab.inactiveBackground#181818
• tab.inactiveForeground#fff
• terminalCursor.foreground#00b2ff
• textLink.activeForeground#2e96ff
• textLink.foreground#2e96ff
• titleBar.activeBackground#181818
• titleBar.activeForeground#fff
• titleBar.border#181818
• titleBar.inactiveBackground#181818

tokenColors

TextMate scopes and font styles (syntax highlighting rules).