Orange&Black

Color themes

• 

  Orange&Black

• 

  Orange&White

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#15151500
• activityBar.activeBorder#cccccc
• activityBar.activeFocusBorder#00000000
• activityBar.background#ffeeee
• activityBar.border#cccccc
• activityBar.dropBorder#e67e22
• activityBar.foreground#e67e22
• activityBar.inactiveForeground#151111
• activityBarBadge.background#e67e22
• activityBarBadge.foreground#151111
• breadcrumb.activeSelectionForeground#e67e22
• breadcrumb.background#ffeeee
• breadcrumb.focusForeground#e67e22
• breadcrumb.foreground#151111
• button.background#00000000
• button.border#e67e22
• button.foreground#e67e22
• button.hoverBackground#00000000
• button.secondaryBackground#e67e22
• button.secondaryForeground#ffeeee
• button.secondaryHoverBackground#e67e22aa
• debugIcon.breakpointCurrentStackframeForeground#2237cc
• debugIcon.breakpointForeground#cc2237
• debugIcon.pauseForeground#2237cc
• debugIcon.restartForeground#22cc37
• debugIcon.startForeground#ffeeee
• debugIcon.stepBackForeground#ffeeee
• debugIcon.stepIntoForeground#ffeeee
• debugIcon.stepOutForeground#ffeeee
• debugIcon.stepOverForeground#ffeeee
• debugIcon.stopForeground#cc2237
• descriptionForeground#ffeeee
• editor.background#ffffff
• editor.foreground#151111
• editor.lineHighlightBackground#cccccc
• editor.lineHighlightBorder#00000000
• editorCursor.foreground#e67e22
• editorError.border#00000000
• editorError.foreground#cc2237
• editorGroupHeader.border#cccccc
• editorGroupHeader.tabsBackground#ffeeee
• editorGroupHeader.tabsBorder#cccccc
• editorHint.border#00000000
• editorLineNumber.activeForeground#e67e22
• editorLineNumber.foreground#777777
• editorWidget.background#151515
• editorWidget.border#cccccc
• focusBorder#e67e22
• foreground#f8dcba
• gitDecoration.addedResourceForeground#22cc37
• gitDecoration.conflictingResourceForeground#cc2237
• gitDecoration.deletedResourceForeground#cc2237
• gitDecoration.ignoredResourceForeground#ffeeee
• gitDecoration.modifiedResourceForeground#cccc37
• gitDecoration.renamedResourceForeground#cccc37
• gitDecoration.stageDeletedResourceForeground#cc2237
• gitDecoration.untrackedResourceForeground#cccc37
• icon.foreground#ffeeee
• input.background#cccccc00
• input.border#cccccc
• input.foreground#151111
• input.placeholderForeground#777777
• list.activeSelectionBackground#cccccc
• list.activeSelectionForeground#151111
• list.dropBackground#e67e22
• list.errorForeground#ff2237
• list.focusBackground#000000
• list.focusForeground#151111
• list.highlightForeground#151111
• list.hoverBackground#cccccc
• list.hoverForeground#151111
• list.inactiveFocusBackground#cccccc
• list.inactiveSelectionBackground#cccccc
• list.inactiveSelectionForeground#151111
• list.warningForeground#2237ff
• menu.background#ffeeee
• menu.border#cccccc
• menu.foreground#151111
• menu.selectionBackground#e67e22
• menu.selectionBorder#e67e22
• menu.selectionForeground#ffeeee
• menu.separatorBackground#cccccc
• menubar.selectionBackground#cccccc
• menubar.selectionBorder#00000000
• menubar.selectionForeground#e67e22
• minimap.background#ffffff
• minimapSlider.activeBackground#11111155
• minimapSlider.background#ddddddaa
• minimapSlider.hoverBackground#00000055
• notificationCenter.border#cccccc
• notificationCenterHeader.background#ffeeee
• notificationCenterHeader.foreground#e67e22
• notificationLink.foreground#5555ff
• notifications.background#ffeeee
• notifications.border#cccccc
• notifications.foreground#151111
• notificationsErrorIcon.foreground#ff2237
• notificationsInfoIcon.foreground#151111
• notificationsWarningIcon.foreground#e67e22
• notificationToast.border#cccccc
• panel.background#ffeeee
• panel.border#cccccc
• panel.dropBorder#cccccc
• panelInput.border#cccccc
• panelSectionHeader.border#cccccc
• panelTitle.activeBorder#e67e22
• panelTitle.activeForeground#e67e22
• panelTitle.inactiveForeground#e67e22
• scrollbar.shadow#00000000
• scrollbarSlider.activeBackground#ccaaaa
• scrollbarSlider.background#ffeeee
• scrollbarSlider.hoverBackground#ddcccc
• settings.checkboxBackground#151515
• settings.checkboxBorder#e67e22
• settings.checkboxForeground#e67e22
• settings.dropdownBackground#cccccc00
• settings.dropdownBorder#cccccc
• settings.dropdownForeground#151111
• settings.dropdownListBorder#cccccc
• settings.focusedRowBackground#ffeeee
• settings.headerForeground#ff7e22
• settings.numberInputBackground#ffeeeeaa
• settings.numberInputBorder#000000
• settings.numberInputForeground#151111
• settings.textInputBackground#ffeeeeaa
• settings.textInputBorder#cccccc
• settings.textInputForeground#151111
• sideBar.background#ffeeee
• sideBar.border#cccccc
• sideBar.foreground#151111
• sideBarSectionHeader.background#ffeeee
• sideBarSectionHeader.border#000000
• sideBarSectionHeader.foreground#151111
• sideBarTitle.foreground#e67e22
• statusBar.background#e67e22
• statusBar.border#cccccc
• statusBar.debuggingBackground#e67e22
• statusBar.debuggingBorder#000000
• statusBar.debuggingForeground#151515
• statusBar.foreground#151111
• tab.activeBackground#ffeeee
• tab.activeBorder#e67e22
• tab.activeBorderTop#e67e22
• tab.activeForeground#151111
• tab.border#cccccc
• tab.hoverBackground#ffeeee
• tab.hoverBorder#e67e22
• tab.hoverForeground#e67e22
• tab.inactiveBackground#ffeeee
• tab.inactiveForeground#151111
• terminal.background#ffeeee
• terminal.border#000000
• terminal.foreground#151111
• terminalCursor.foreground#e67e22
• textLink.activeForeground#e67e22aa
• textLink.foreground#e67e22
• titleBar.activeBackground#ffeeee
• titleBar.activeForeground#151111
• titleBar.border#cccccc
• titleBar.inactiveBackground#ffeeee
• titleBar.inactiveForeground#151111
• window.activeBorder#cccccc
• window.inactiveBorder#cccccc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).