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#000000
  • activityBar.activeBorder#FF609D
  • activityBar.activeFocusBorder#FF609D
  • activityBar.background#0F0019
  • activityBar.border#FF609D
  • activityBar.dropBackground#FF609D
  • activityBar.foreground#F7A10C
  • activityBar.inactiveForeground#FF609D
  • activityBarBadge.background#5D00FF
  • activityBarBadge.foreground#FFFFFF
  • badge.background#000000
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#05F6FF
  • breadcrumb.background#1f0033
  • breadcrumb.focusForeground#0DD9BE
  • breadcrumb.foreground#F7A10C
  • breadcrumbPicker.background#0F0019
  • button.background#F7A10C
  • button.foreground#2E3734
  • button.hoverBackground#0DD9BE
  • checkbox.background#F9E3E5
  • checkbox.border#21ECFF
  • checkbox.foreground#70650A
  • dropdown.background#1f0033
  • dropdown.border#AD416C
  • dropdown.foreground#F7A10C
  • dropdown.listBackground#1f0033
  • editor.background#1f0033
  • editor.foreground#f5e6ff
  • editor.lineHighlightBackground#40006B
  • editor.snippetFinalTabstopHighlightBackground#0000FF
  • editor.snippetFinalTabstopHighlightBorder#0000FF
  • editor.snippetTabstopHighlightBackground#0000FF
  • editor.snippetTabstopHighlightBorder#0000FF
  • editorBracketMatch.background#000000
  • editorBracketMatch.border#F7A10C
  • editorCursor.background#2b7df0
  • editorCursor.foreground#12dfff
  • editorGroup.border#1f0033
  • editorGroup.dropBackground#40006B
  • editorGroup.emptyBackground#0F0019
  • editorGroup.focusedEmptyBorder#000000
  • editorGroupHeader.noTabsBackground#40006B
  • editorGroupHeader.tabsBackground#0F0019
  • editorGroupHeader.tabsBorder#1f0033
  • editorLineNumber.activeForeground#6B4677
  • editorLineNumber.foreground#6B4677
  • editorPane.background#05F6FF
  • input.background#2D004C
  • input.border#4E0087
  • input.foreground#05F6FF
  • input.placeholderForeground#438275
  • inputOption.activeBackground#4E0087
  • inputOption.activeBorder#1f0033
  • inputValidation.errorBackground#B7005E
  • inputValidation.errorBorder#FF609D
  • inputValidation.errorForeground#FFFFFF
  • menu.background#0DD9BE
  • menu.border#000000
  • menu.foreground#000000
  • menu.selectionBackground#000000
  • menu.selectionBorder#F7A10C
  • menu.selectionForeground#F7A10C
  • menu.separatorBackground#05F6FF
  • menubar.selectionBackground#0DD9BE
  • menubar.selectionBorder#05F6FF
  • menubar.selectionForeground#000000
  • notificationCenter.border#F7A10C
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#F7A10C
  • notificationLink.foreground#F7A10C
  • notifications.background#1f0033
  • notifications.border#0EEFEC
  • notifications.foreground#0DD9BE
  • notificationsErrorIcon.foreground#FF0048
  • notificationsInfoIcon.foreground#FF0048
  • notificationsWarningIcon.foreground#FF0048
  • notificationToast.border#40006B
  • scrollbar.shadow#FFFFFF
  • scrollbarSlider.activeBackground#6B4677
  • scrollbarSlider.background#613263
  • scrollbarSlider.hoverBackground#A555A8
  • settings.checkboxBackground#0F0019
  • settings.checkboxBorder#05F6FF
  • settings.checkboxForeground#05F6FF
  • settings.dropdownBackground#0F0019
  • settings.dropdownBorder#C14788
  • settings.dropdownForeground#F7A10C
  • settings.dropdownListBorder#C14788
  • settings.headerForeground#E2930B
  • settings.modifiedItemIndicator#0EEFEC
  • settings.numberInputBackground#0F0019
  • settings.numberInputBorder#C14788
  • settings.numberInputForeground#F7A10C
  • settings.textInputBackground#0F0019
  • settings.textInputBorder#C14788
  • settings.textInputForeground#F7A10C
  • sideBar.background#1f0033
  • sideBar.border#FF609D
  • sideBar.dropBackground#000000
  • sideBar.foreground#0DD9BE
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#09E5E1
  • sideBarSectionHeader.foreground#F7A10C
  • sideBarTitle.foreground#F7A10C
  • statusBar.background#1f0033
  • statusBar.border#000000
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingBorder#000000
  • statusBar.debuggingForeground#FF5EB1
  • statusBar.foreground#FF609D
  • statusBar.noFolderBackground#1f0033
  • statusBar.noFolderBorder#FF609D
  • statusBar.noFolderForeground#F7A10C
  • statusBarItem.activeBackground#0000FF
  • statusBarItem.hoverBackground#000000
  • statusBarItem.prominentBackground#ff0000
  • statusBarItem.prominentForeground#ff0000
  • statusBarItem.prominentHoverBackground#ff0000
  • statusBarItem.remoteBackground#000000
  • statusBarItem.remoteForeground#05F6FF
  • tab.activeBackground#1f0033
  • tab.activeBorder#1f0033
  • tab.activeBorderTop#FF0066
  • tab.activeForeground#F7A10C
  • tab.activeModifiedBorder#40006B
  • tab.border#1f0033
  • tab.hoverBackground#0F0019
  • tab.hoverBorder#0DD9BE
  • tab.inactiveBackground#40006B
  • tab.inactiveForeground#886B8E
  • tab.inactiveModifiedBorder#40006B
  • tab.unfocusedActiveBackground#40006B
  • tab.unfocusedActiveBorder#1f0033
  • tab.unfocusedActiveBorderTop#0DD9BE
  • tab.unfocusedActiveForeground#886B8E
  • tab.unfocusedActiveModifiedBorder#40006B
  • tab.unfocusedHoverBackground#40006B
  • tab.unfocusedHoverBorder#05F6FF
  • tab.unfocusedInactiveForeground#40006B
  • tab.unfocusedInactiveModifiedBorder#40006B
  • terminal.ansiBlack#00E5D6
  • terminal.ansiBlue#000052
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#AE00FF
  • terminal.ansiBrightCyan#00FFFF
  • terminal.ansiBrightGreen#0DD997
  • terminal.ansiBrightMagenta#FF00FF
  • terminal.ansiBrightRed#FF0000
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E0FF00
  • terminal.ansiCyan#00DDD5
  • terminal.ansiGreen#0400FF
  • terminal.ansiMagenta#FF00FF
  • terminal.ansiRed#C90000
  • terminal.ansiWhite#E5E5E5
  • terminal.ansiYellow#E2DF2D
  • terminal.background#1f0033
  • terminal.border#000000
  • terminal.foreground#00E2FF
  • terminalCursor.background#FF00FF
  • terminalCursor.foreground#FF609D
  • titleBar.activeBackground#0F0019
  • titleBar.activeForeground#FF609D
  • titleBar.border#FF609D
  • titleBar.inactiveBackground#0DD9BE
  • titleBar.inactiveForeground#310966
  • walkThrough.embeddedEditorBackground#1f0033
  • welcomePage.background#964555
  • welcomePage.buttonBackground#BC6207
  • welcomePage.buttonHoverBackground#1f0033
  • window.activeBorder#800287
  • window.inactiveBorder#1B0038

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#D4D4D4
emphasisitalic
strongbold
header#000080
comment#965B39
constant.language#e354c9
constant.numeric, entity.name.operator.custom-literal.number, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#b5cea8
constant.regexp#646695
entity.name.tag#e354c9
entity.name.tag.css#d7ba7d
entity.other.attribute-name#FF87BF
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#d7ba7d
invalid#f44747
markup.underlineunderline
markup.bold#e354c9bold
markup.heading#e354c9bold
markup.italicitalic
markup.inserted#b5cea8
markup.deleted#53e6cd
markup.changed#e354c9
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#53e6cd
punctuation.definition.tag#808080
meta.preprocessor, entity.name.function.preprocessor#e354c9
meta.preprocessor.string#53e6cd
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#FF87BF
meta.diff.header#e354c9
storage#e354c9
storage.type#e354c9
storage.modifier, keyword.operator.noexcept#e354c9
string, entity.name.operator.custom-literal.string, meta.embedded.assembly#53e6cd
string.tag#53e6cd
string.value#53e6cd
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#e354c9
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#FF87BF
keyword#e354c9
keyword.control#e354c9
keyword.operator#d4d4d4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#e354c9
keyword.other.unit#b5cea8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#e354c9
support.function.git-rebase#FF87BF
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#e354c9