Skip to main content
Coding Theme

Color themes

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#94F613
  • activityBar.border#9FFCDF
  • activityBar.foreground#1E3D14
  • activityBarBadge.background#FF0000
  • activityBarBadge.foreground#9FFCDF
  • badge.background#1E3D14
  • badge.foreground#FFF700
  • breadcrumb.activeSelectionForeground#52AD9C
  • breadcrumb.background#1E3D14
  • breadcrumb.focusForeground#9FFCDF
  • breadcrumb.foreground#FFFFFF
  • breadcrumbPicker.background#4C9A32
  • button.background#9FFCDF50
  • contrastBorder#9FFCDF40
  • debugToolBar.background#47624F
  • diffEditor.insertedTextBackground#D2FB9D15
  • diffEditor.removedTextBackground#EE635220
  • dropdown.background#AEF84F
  • dropdown.border#31371510
  • editor.background#94F514
  • editor.findMatchBackground#67B007
  • editor.findMatchBorder#9FFCDF
  • editor.findMatchHighlightBackground#31371593
  • editor.findMatchHighlightBorder31371530
  • editor.foreground#000000
  • editor.lineHighlightBackground#885A8950
  • editor.selectionBackground#885A8930
  • editor.selectionHighlightBackground#885A896b
  • editor.selectionHighlightBorder885A89f0
  • editorBracketMatch.background#9FFCDF
  • editorBracketMatch.border#12F8AF7f
  • editorCursor.foreground#12F8AF
  • editorError.foreground#FF0000
  • editorGroup.border#2E5C1E30
  • editorGroupHeader.tabsBackground#2E5C1E
  • editorGutter.addedBackground#12F8AF60
  • editorGutter.deletedBackground#9ED1C860
  • editorGutter.modifiedBackground#FFB7C360
  • editorHoverWidget.background#3D0814
  • editorHoverWidget.border#3D081410
  • editorIndentGuide.activeBackground#00FFD8
  • editorIndentGuide.background#00FFD870
  • editorInfo.foreground#9657FF70
  • editorLineNumber.activeForeground#9657FF
  • editorLineNumber.foreground#FFF700c0
  • editorLink.activeForeground#E600FF
  • editorMarkerNavigation.background#E600FF05
  • editorOverviewRuler.border#FF0000
  • editorOverviewRuler.errorForeground#FFD8D840
  • editorOverviewRuler.findMatchForeground#FFF700
  • editorOverviewRuler.infoForeground#9657FF40
  • editorOverviewRuler.warningForeground#FF877E70
  • editorRuler.foreground#00FFD8
  • editorSuggestWidget.background#FF0000
  • editorSuggestWidget.border#00F5FF10
  • editorSuggestWidget.foreground#E600FF
  • editorSuggestWidget.highlightForeground#FF877E
  • editorSuggestWidget.selectedBackground#FFF70020
  • editorWarning.foreground#0200FF
  • editorWhitespace.foreground#E600FF40
  • editorWidget.background#FF0000
  • editorWidget.border#FF877E
  • editorWidget.resizeBorder#FFF700
  • extensionButton.prominentBackground#0200FF90
  • extensionButton.prominentHoverBackground#FFD8D8
  • focusBorder#00F5FF00
  • gitDecoration.conflictingResourceForeground#FF877E
  • gitDecoration.deletedResourceForeground#FFD8D8
  • gitDecoration.ignoredResourceForeground#FFF700
  • gitDecoration.modifiedResourceForeground#97D8FF
  • gitDecoration.untrackedResourceForeground#9657FF
  • input.background#FF9B00
  • input.border#00F5FF10
  • input.foreground#E600FF
  • input.placeholderForeground#E600FF60
  • inputOption.activeBackground#E600FF30
  • inputOption.activeBorder#E600FF30
  • inputValidation.errorBorder#FFD8D850
  • inputValidation.infoBorder#9657FF50
  • inputValidation.warningBorder#FF877E50
  • list.activeSelectionBackground#FF0000
  • list.activeSelectionForeground#FFF700
  • list.focusBackground#FF9B00
  • list.focusForeground#9657FF
  • list.highlightForeground#FFF700
  • list.hoverBackground#00FFD8
  • list.hoverForeground#00F5FF
  • list.inactiveSelectionBackground#FF000030
  • list.inactiveSelectionForeground#FFF700
  • list.warningForeground#FF877E
  • listFilterWidget.background#FF000030
  • listFilterWidget.noMatchesOutline#FF000030
  • listFilterWidget.outline#FF000030
  • menu.background#FF0000f8
  • menu.border#FFF70050
  • menu.foreground#E600FF
  • menu.selectionBackground#FF9B00
  • menu.selectionBorder#FF000030
  • menu.selectionForeground#E600FF
  • menu.separatorBackground#E600FF
  • menubar.selectionBackground#FF9B00
  • menubar.selectionBorder#FFF70050
  • menubar.selectionForeground#E600FF
  • minimap.background#12F8AF
  • minimapGutter.addedBackground#FFD8D8
  • minimapGutter.deletedBackground#FF877E
  • minimapGutter.modifiedBackground#0200FF
  • minimapSlider.activeBackground#0200FFb0
  • minimapSlider.background#0200FF80
  • minimapSlider.hoverBackground#0200FFa0
  • notificationLink.foreground#FFF700
  • notifications.background#FF0000
  • notifications.foreground#E600FF
  • panel.background#67B007
  • panel.border#7ED70960
  • panelTitle.activeBorder#7ED709
  • panelTitle.activeForeground#2E5C1E
  • panelTitle.inactiveForeground#9ED1C8
  • peekView.border#FF000030
  • peekViewEditor.background#E600FF05
  • peekViewEditor.matchHighlightBackground#FFF70050
  • peekViewEditorGutter.background#E600FF05
  • peekViewResult.background#E600FF05
  • peekViewResult.matchHighlightBackground#FFF70050
  • peekViewResult.selectionBackground#FFF70070
  • peekViewTitle.background#E600FF05
  • peekViewTitleDescription.foreground#E600FF60
  • pickerGroup.foreground#FFF700
  • progressBar.background#FFF700
  • scrollbar.shadow#FF000000
  • scrollbarSlider.activeBackground#FFF700cc
  • scrollbarSlider.background#FFF700bb
  • scrollbarSlider.hoverBackground#FFF700ee
  • selection.background#FFF700
  • settings.checkboxBackground#FF0000
  • settings.checkboxForeground#E600FF
  • settings.dropdownBackground#FF0000
  • settings.dropdownForeground#E600FF
  • settings.headerForeground#FFF700
  • settings.modifiedItemIndicator#FFF700
  • settings.numberInputBackground#FF0000
  • settings.numberInputForeground#E600FF
  • settings.textInputBackground#FF0000
  • settings.textInputForeground#E600FF
  • sideBar.background#C0F977
  • sideBar.border#FFF70050
  • sideBar.foreground#9657FF
  • sideBarSectionHeader.background#FF0000
  • sideBarSectionHeader.border#FF000060
  • sideBarSectionHeader.foreground#9657FF
  • sideBarTitle.foreground#E600FF
  • statusBar.background#76FFCD
  • statusBar.border#FF000060
  • statusBar.debuggingBackground#FF877E
  • statusBar.debuggingForeground#00F5FF
  • statusBar.foreground#FF59B0
  • statusBar.noFolderBackground#FF0000
  • statusBarItem.hoverBackground#FFF70020
  • statusBarItem.remoteBackground#FFF700
  • statusBarItem.remoteForeground#FF0000
  • tab.activeBackground#9CF52950
  • tab.activeBorder#9CF529
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#FFF700
  • tab.border#1E3E14
  • tab.inactiveBackground#FFF70020
  • tab.inactiveForeground#E600FFaf
  • tab.unfocusedActiveBackground#FFF70040
  • tab.unfocusedActiveBorder#FFF700
  • tab.unfocusedActiveForeground#E600FF
  • tab.unfocusedInactiveBackground#FFF70010
  • tab.unfocusedInactiveForeground#E600FF7f
  • terminal.ansiBlack#FF0000
  • terminal.ansiBlue#9657FF
  • terminal.ansiBrightBlack#FFF700
  • terminal.ansiBrightBlue#9657FF
  • terminal.ansiBrightCyan#3F2E2E
  • terminal.ansiBrightGreen#0200FF
  • terminal.ansiBrightMagenta#FF877E
  • terminal.ansiBrightRed#FFD8D8
  • terminal.ansiBrightWhite#00F5FF
  • terminal.ansiBrightYellow#FF877E
  • terminal.ansiCyan#3F2E2E
  • terminal.ansiGreen#0200FF
  • terminal.ansiMagenta#FF877E
  • terminal.ansiRed#FFD8D8
  • terminal.ansiWhite#00F5FF
  • terminal.ansiYellow#FF877E
  • terminalCursor.background#FF0000
  • terminalCursor.foreground#FF877E
  • textLink.activeForeground#E600FF
  • textLink.foreground#FFF700
  • titleBar.activeBackground#1E3E14
  • titleBar.activeForeground#E600FF
  • titleBar.border#1E3E1460
  • titleBar.inactiveBackground#1E3E14
  • titleBar.inactiveForeground#FFF700
  • tree.indentGuidesStroke#00FFD8
  • widget.shadow#FF000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
AngeCode by Gr8estExtensions - VS Code Theme