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.activeBackground#0f0e0f
  • activityBar.activeBorder#d43c3c
  • activityBar.background#0c0b0b
  • activityBar.foreground#d43c3c
  • activityBar.inactiveForeground#6e6a6a
  • activityBarBadge.background#ff4d4d
  • activityBarBadge.foreground#e8e6e3
  • badge.background#d43c3c
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#d43c3c
  • breadcrumb.background#0f0e0f
  • breadcrumb.focusForeground#e8e6e3
  • breadcrumb.foreground#6e6a6a
  • breadcrumbPicker.background#0f0e0f
  • button.background#d43c3c
  • button.foreground#ffffff
  • button.hoverBackground#ff4d4d
  • button.secondaryBackground#1c1919
  • button.secondaryForeground#e8e6e3
  • button.secondaryHoverBackground#262222
  • charts.blue#8c7a6b
  • charts.foreground#e8e6e3
  • charts.green#659e7a
  • charts.lines#d43c3c
  • charts.orange#a86b61
  • charts.purple#c7ae7f
  • charts.red#b85151
  • charts.yellow#b59a68
  • debugToolBar.background#151313
  • debugToolBar.border#d43c3c
  • descriptionForeground#8a8484
  • disabledForeground#6e6a6a
  • editor.background#0f0e0f
  • editor.findMatchBackground#ff4d4d50
  • editor.findMatchHighlightBackground#ff4d4d30
  • editor.focusedStackFrameHighlightBackground#ffffff25
  • editor.foreground#e8e6e3
  • editor.hoverHighlightBackground#1a1818e3
  • editor.lineHighlightBackground#151313
  • editor.lineHighlightBorder#151313
  • editor.rangeHighlightBackground#1a1818e3
  • editor.selectionBackground#d43c3c40
  • editor.selectionHighlightBackground#ffffff25
  • editor.snippetFinalTabstopHighlightBackground#d43c3c20
  • editor.snippetTabstopHighlightBackground#2a2727
  • editor.stackFrameHighlightBackground#d43c3c20
  • editorCursor.foreground#ffffff
  • editorGroup.border#d43c3c
  • editorGroup.emptyBackground#0f0e0f
  • editorGroupHeader.noTabsBackground#0f0e0f
  • editorGroupHeader.tabsBackground#0c0b0b
  • editorLineNumber.activeForeground#ff4d4d
  • editorLineNumber.foreground#2a2727
  • errorForeground#ff4d4d
  • extensionButton.prominentBackground#d43c3c
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#ff4d4d
  • focusBorder#d43c3c
  • foreground#e8e6e3
  • gitDecoration.addedResourceForeground#6f8f72
  • gitDecoration.conflictingResourceForeground#ff4d4d
  • gitDecoration.deletedResourceForeground#ff4d4d
  • gitDecoration.ignoredResourceForeground#6e6a6a
  • gitDecoration.modifiedResourceForeground#a88b63
  • gitDecoration.renamedResourceForeground#d43c3c
  • gitDecoration.submoduleResourceForeground#e8e6e3
  • gitDecoration.untrackedResourceForeground#7a3a3a
  • input.background#0c0b0b
  • input.border#2a2727
  • input.foreground#e8e6e3
  • input.placeholderForeground#6e6a6a
  • inputOption.activeBorder#ff4d4d
  • inputValidation.errorBorder#ff4d4d
  • inputValidation.infoBorder#8a8484
  • inputValidation.warningBorder#a88b63
  • list.activeSelectionBackground#1c1919
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#ff6a6a
  • list.hoverBackground#151313
  • list.inactiveSelectionBackground#151313
  • menu.background#0f0e0f
  • menu.foreground#e8e6e3
  • menu.selectionBackground#d43c3c
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#2a2727
  • merge.border#2a2727
  • merge.commonContentBackground#2a272715
  • merge.commonHeaderBackground#2a272730
  • merge.currentContentBackground#a88b6315
  • merge.currentHeaderBackground#a88b6330
  • merge.incomingContentBackground#d43c3c15
  • merge.incomingHeaderBackground#d43c3c30
  • minimap.background#0f0e0f
  • minimap.findMatchHighlight#ff4d4df5
  • minimapSlider.activeBackground#ffffff40
  • minimapSlider.background#d43c3c20
  • minimapSlider.hoverBackground#d43c3c40
  • notebook.cellBorderColor#2a2727
  • notebook.cellToolbarSeparator#2a2727
  • notebook.focusedCellBorder#d43c3c
  • notebook.focusedEditorBorder#d43c3c
  • notebook.selectedCellBorder#ff4d4d
  • notification.background#151313
  • notification.buttonBackground#d43c3c
  • notification.buttonForeground#ffffff
  • notification.buttonHoverBackground#ff4d4d
  • notification.errorBackground#ff4d4d
  • notification.errorForeground#ffffff
  • notification.foreground#e8e6e3
  • notification.infoBackground#8a8484
  • notification.infoForeground#0f0e0f
  • notification.warningBackground#a88b63
  • notification.warningForeground#0f0e0f
  • panel.background#0f0e0f
  • panel.border#d43c3c
  • panelInput.border#2a2727
  • panelTitle.activeBorder#d43c3c
  • panelTitle.activeForeground#e8e6e3
  • panelTitle.inactiveForeground#6e6a6a
  • pickerGroup.border#2a2727
  • pickerGroup.foreground#d43c3c
  • progressBar.background#d43c3c
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#ffffffcc
  • scrollbarSlider.background#2a272780
  • scrollbarSlider.hoverBackground#d43c3ccc
  • selection.background#d43c3c40
  • settings.checkboxBackground#0c0b0b
  • settings.checkboxBorder#2a2727
  • settings.checkboxForeground#e8e6e3
  • settings.dropdownBackground#0c0b0b
  • settings.dropdownBorder#2a2727
  • settings.dropdownForeground#e8e6e3
  • settings.headerForeground#d43c3c
  • settings.modifiedItemIndicator#ff4d4d
  • settings.numberInputBackground#0c0b0b
  • settings.numberInputBorder#2a2727
  • settings.numberInputForeground#e8e6e3
  • settings.textInputBackground#0c0b0b
  • settings.textInputBorder#2a2727
  • settings.textInputForeground#e8e6e3
  • sideBar.background#0f0e0f
  • sideBar.border#1c1919
  • sideBar.foreground#8a8484
  • sideBarSectionHeader.background#0c0b0b
  • sideBarSectionHeader.foreground#d43c3c
  • sideBarTitle.foreground#d43c3c
  • statusBar.background#d43c3c
  • statusBar.debuggingBackground#ff4d4d
  • statusBar.debuggingForeground#e8e6e3
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#1c1919
  • statusBar.noFolderForeground#d43c3c
  • statusBarItem.activeBackground#b33636
  • statusBarItem.hoverBackground#b33636
  • statusBarItem.prominentBackground#ff4d4d
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.prominentHoverBackground#cc3f3f
  • tab.activeBackground#0f0e0f
  • tab.activeBorder#0f0e0f
  • tab.activeBorderTop#d43c3c
  • tab.activeForeground#ffffff
  • tab.border#0c0b0b
  • tab.hoverBackground#151313
  • tab.inactiveBackground#0c0b0b
  • tab.inactiveForeground#6e6a6a
  • tab.unfocusedActiveBorder#0f0e0f
  • tab.unfocusedActiveForeground#8a8484
  • tab.unfocusedHoverBackground#0c0b0b
  • tab.unfocusedInactiveForeground#6e6a6a
  • terminal.ansiBlack#090d0e
  • terminal.ansiBlue#8c7a6b
  • terminal.ansiBrightBlack#5c7375
  • terminal.ansiBrightBlue#a6863e
  • terminal.ansiBrightCyan#f2eadd
  • terminal.ansiBrightGreen#7eb896
  • terminal.ansiBrightMagenta#d4a020
  • terminal.ansiBrightRed#cc6666
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e6c47a
  • terminal.ansiCyan#c7ae7f
  • terminal.ansiGreen#659e7a
  • terminal.ansiMagenta#a86b61
  • terminal.ansiRed#b85151
  • terminal.ansiWhite#d0dbdc
  • terminal.ansiYellow#b59a68
  • terminal.background#0d1416
  • terminal.foreground#d0dbdc
  • terminal.selectionBackground#d43c3c40
  • terminalCursor.background#000000
  • terminalCursor.foreground#ffffff
  • textLink.activeForeground#ff6a6a
  • textLink.foreground#ff4d4d
  • titleBar.activeBackground#0c0b0b
  • titleBar.activeForeground#e8e6e3
  • titleBar.inactiveBackground#0c0b0b
  • titleBar.inactiveForeground#6e6a6a
  • walkThrough.embeddedEditorBackground#0f0e0f
  • welcomePage.buttonBackground#1c1919
  • welcomePage.buttonHoverBackground#262222
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6e6a6aitalic
keyword, storage.type, storage.modifier#b85151bold
string, punctuation.definition.string#659e7a
entity.name.function, support.function#e6c47aitalic
variable#d0dbdc
constant.numeric, constant.language#a86b61
entity.name.type#b59a68
markup.bold, markup.heading#d43c3cbold
markup.italicitalic
markup.inserted#6f8f72
markup.deleted#ff4d4d