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.activeBorder#5A588C
  • activityBar.background#080808
  • activityBar.foreground#9A99BF
  • activityBarBadge.background#5A588C
  • activityBarBadge.foreground#9A99BF
  • badge.background#5A588C
  • badge.foreground#9A99BF
  • button.background#61638C
  • button.foreground#212126
  • button.hoverBackground#5A588C
  • editor.background#121214
  • editor.foreground#9A99BF
  • editor.inactiveSelectionBackground#24254099
  • editor.lineHighlightBackground#242540
  • editor.selectionBackground#242540
  • editor.selectionForeground#FFFFFF
  • editorCursor.foreground#947ac4
  • editorGroupHeader.tabsBackground#121214
  • editorGroupHeader.tabsBorder#242540
  • editorLineNumber.activeForeground#9A99BF
  • editorLineNumber.foreground#61638C
  • editorWidget.resizeBorder#5A588C
  • input.background#242540
  • input.border#5A588C
  • input.foreground#9A99BF
  • list.activeSelectionBackground#242540
  • list.activeSelectionForeground#9A99BF
  • list.dropBackground#242540
  • list.focusAndSelectionOutline#9A99BF
  • list.focusOutline#9A99BF
  • list.hoverBackground#242540
  • list.hoverForeground#61638C
  • list.inactiveSelectionBackground#212126
  • list.inactiveSelectionForeground#61638C
  • menubar.selectionBackground#212126
  • menubar.selectionForeground#61638C
  • minimap.background#212126c5
  • minimap.errorHighlight#9A99BF
  • minimap.findMatchHighlight#5a588cb9
  • minimap.foregroundOpacity#242540d7
  • minimap.infoHighlight#61638C
  • minimap.selectionHighlight#5A588C99
  • minimap.selectionOccurrenceHighlight#5A588C99
  • minimap.warningHighlight#9A99BF
  • panel.background#121214
  • panel.border#242540
  • panel.dropBorder#5A588C
  • panelInput.border#5A588C
  • panelSection.border#5A588C
  • panelSection.dropBackground#242540
  • panelTitle.activeForeground#9A99BF
  • panelTitleBadge.background#5A588C
  • panelTitleBadge.foreground#9A99BF
  • sideBar.background#121214
  • sideBar.border#242540
  • sideBar.foreground#9A99BF
  • statusBar.background#080808
  • statusBar.border#5A588C
  • statusBar.debuggingBackground#242540cc
  • statusBar.debuggingBorder#5A588C
  • statusBar.debuggingForeground#9A99BF
  • statusBar.focusBorder#9A99BF
  • statusBar.foreground#9A99BF
  • statusBar.noFolderBackground#212126
  • statusBarItem.hoverBackground#242540
  • statusBarItem.hoverForeground#9A99BF
  • statusBarItem.remoteBackground#5A588C
  • statusBarItem.remoteForeground#212126
  • tab.activeBackground#242540
  • tab.activeBorderTop#5A588C
  • tab.activeForeground#9A99BF
  • tab.border#5A588C
  • tab.inactiveBackground#121214
  • tab.inactiveForeground#61638C
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#6272A4
  • terminal.ansiBrightBlack#4D4D4D
  • terminal.ansiBrightBlue#8BE9FD
  • terminal.ansiBrightCyan#9AEDFE
  • terminal.ansiBrightGreen#5AF78E
  • terminal.ansiBrightMagenta#FF92D0
  • terminal.ansiBrightRed#FF6E67
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F4F99D
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#FF79C6
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#BFBFBF
  • terminal.ansiYellow#F1FA8C
  • terminal.background#1e1e1e00
  • terminal.dropBackground#1E1E1E80
  • terminal.findMatchBackground#ff79c5d3
  • terminal.findMatchBorder#FF5555
  • terminal.findMatchHighlightBackground#50fa7acc
  • terminal.findMatchHighlightBorder#70FF73
  • terminal.foreground#ebddfd
  • terminal.hoverHighlightBackground#8be8fd9a
  • terminal.inactiveSelectionBackground#2a1f3eda
  • terminal.initialHintForeground#FFEA00
  • terminal.selectionBackground#3a2083d3
  • terminal.selectionForeground#f3f7ff
  • terminal.tab.activeBorder#FF6E67
  • terminalCommandDecoration.defaultBackground#F1FA8C
  • terminalCommandDecoration.errorBackground#FF5555
  • terminalCommandDecoration.successBackground#70FF73
  • terminalCursor.background#5b7699
  • terminalCursor.foreground#db80f2
  • terminalOverviewRuler.border#FF5555
  • terminalOverviewRuler.cursorForeground#FF6E67
  • terminalOverviewRuler.findMatchForeground#FF79C6
  • terminalStickyScroll.background#4A90E2
  • terminalStickyScroll.border#70FF73
  • terminalStickyScrollHover.background#FF79C6
  • terminalSymbolIcon.aliasForeground#70FF73
  • terminalSymbolIcon.argumentForeground#50525c
  • terminalSymbolIcon.fileForeground#FF79C6
  • terminalSymbolIcon.flagForeground#FFEA00
  • terminalSymbolIcon.folderForeground#4A90E2
  • terminalSymbolIcon.inlineSuggestionForeground#50FA7B
  • terminalSymbolIcon.methodForeground#8BE9FD
  • terminalSymbolIcon.optionForeground#FF6E67
  • terminalSymbolIcon.optionValueForeground#F1FA8C
  • terminalSymbolIcon.symbolicLinkFileForeground#FF5555
  • terminalSymbolIcon.symbolicLinkFolderForeground#FFEA00
  • titleBar.activeBackground#121214
  • titleBar.activeForeground#61638C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#777266italic
string#eecd8f
constant.numeric#D9904E
keyword#d1b99abold
storage, storage.type#D68C6Abold
entity.name.function, support.function#B67F37bold
variable, meta.definition.variable.name, support.variable, entity.name.variable#C8B79D
variable.other.constant#FFB366bold
entity.name.tag, entity.name.tag.html, entity.name.tag.js.jsx, entity.name.tag.tsx#be8863bold
support.class.component.js.jsx#ff7f29bold
punctuation.definition.tag.begin, punctuation.definition.tag.end#B0BEC5
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.class.html, entity.other.attribute-name.id.html, entity.other.attribute-name.class.jsx, entity.other.attribute-name.id.jsx#c48d8ditalic
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#f3cbc8
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#be8863
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css, constant.other.color.rgb-value.css#E6C07B
support.type.property-name.json#a29cfebold
string.quoted.double.json#ccb07c
variable.other.readwrite.js, variable.other.readwrite.ts#C8B79D
string, meta.embedded.assembly#f3cbc8
variable.other.constant.js, variable.other.constant.ts#FFB366bold
Ethereal Nexus by m.metwally - VS Code Theme