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#0C0814
  • activityBar.foreground#FF4D8A
  • activityBar.inactiveForeground#4A3060
  • activityBarBadge.background#FF4D8A
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF4D8A
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#D8CEE8
  • breadcrumb.focusForeground#FF4D8A
  • breadcrumb.foreground#4A3060
  • button.background#B44AE6
  • button.foreground#FFFFFF
  • button.hoverBackground#CC66FF
  • dropdown.background#0C0814
  • dropdown.border#4A3060
  • dropdown.foreground#D8CEE8
  • editor.background#110B1A
  • editor.findMatchBackground#FF4D8A44
  • editor.findMatchHighlightBackground#FF4D8A22
  • editor.foreground#D8CEE8
  • editor.lineHighlightBackground#1A1225
  • editor.selectionBackground#B44AE640
  • editor.selectionHighlightBackground#B44AE625
  • editor.wordHighlightBackground#B44AE625
  • editor.wordHighlightStrongBackground#B44AE640
  • editorBracketHighlight.foreground1#FF4D8A
  • editorBracketHighlight.foreground2#B44AE6
  • editorBracketHighlight.foreground3#4DA6FF
  • editorBracketHighlight.foreground4#FFAA44
  • editorBracketHighlight.foreground5#44DDBB
  • editorBracketHighlight.foreground6#CC77FF
  • editorBracketMatch.background#B44AE625
  • editorBracketMatch.border#FF4D8A
  • editorCursor.foreground#FF4D8A
  • editorError.foreground#FF4D8A
  • editorGroupHeader.tabsBackground#0C0814
  • editorGutter.addedBackground#4DA6FF
  • editorGutter.deletedBackground#FF4D8A
  • editorGutter.modifiedBackground#B44AE6
  • editorIndentGuide.activeBackground#B44AE6
  • editorIndentGuide.background#2A1E3A
  • editorLineNumber.activeForeground#FF4D8A
  • editorLineNumber.foreground#4A3060
  • editorOverviewRuler.addedForeground#4DA6FF
  • editorOverviewRuler.deletedForeground#FF4D8A
  • editorOverviewRuler.modifiedForeground#B44AE6
  • editorWarning.foreground#FFAA44
  • editorWhitespace.foreground#2A1E3A
  • gitDecoration.addedResourceForeground#4DA6FF
  • gitDecoration.conflictingResourceForeground#FF77AA
  • gitDecoration.deletedResourceForeground#FF4D8A
  • gitDecoration.ignoredResourceForeground#2A1E3A
  • gitDecoration.modifiedResourceForeground#B44AE6
  • gitDecoration.untrackedResourceForeground#4DA6FF
  • input.background#0C0814
  • input.border#4A3060
  • input.foreground#D8CEE8
  • input.placeholderForeground#4A3060
  • inputOption.activeBorder#FF4D8A
  • list.activeSelectionBackground#2A1545
  • list.activeSelectionForeground#FF4D8A
  • list.focusBackground#2A1545
  • list.focusForeground#FF4D8A
  • list.highlightForeground#FF4D8A
  • list.hoverBackground#1A1225
  • list.hoverForeground#D8CEE8
  • list.inactiveSelectionBackground#1A1225
  • list.inactiveSelectionForeground#D8CEE8
  • minimap.selectionHighlight#FF4D8A40
  • notificationCenter.border#B44AE6
  • notifications.background#0C0814
  • notifications.foreground#D8CEE8
  • panel.background#0C0814
  • panel.border#1A1225
  • panelTitle.activeBorder#FF4D8A
  • panelTitle.activeForeground#FF4D8A
  • panelTitle.inactiveForeground#4A3060
  • peekView.border#B44AE6
  • peekViewEditor.background#0C0814
  • peekViewResult.background#0C0814
  • peekViewTitle.background#0C0814
  • peekViewTitleLabel.foreground#FF4D8A
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#B44AE690
  • scrollbarSlider.background#B44AE630
  • scrollbarSlider.hoverBackground#B44AE660
  • sideBar.background#0C0814
  • sideBar.border#1A1225
  • sideBar.foreground#9A8AB0
  • sideBarSectionHeader.background#110B1A
  • sideBarSectionHeader.foreground#B44AE6
  • sideBarTitle.foreground#B44AE6
  • statusBar.background#0C0814
  • statusBar.debuggingBackground#FF4D8A
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#FF4D8A
  • statusBar.noFolderBackground#110B1A
  • tab.activeBackground#110B1A
  • tab.activeBorderTop#FF4D8A
  • tab.activeForeground#FF4D8A
  • tab.border#0C0814
  • tab.inactiveBackground#0C0814
  • tab.inactiveForeground#4A3060
  • terminal.ansiBlack#0C0814
  • terminal.ansiBlue#4DA6FF
  • terminal.ansiBrightBlack#4A3060
  • terminal.ansiBrightBlue#77BBFF
  • terminal.ansiBrightCyan#66EEDD
  • terminal.ansiBrightGreen#77BBFF
  • terminal.ansiBrightMagenta#CC77FF
  • terminal.ansiBrightRed#FF77AA
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCC77
  • terminal.ansiCyan#44DDBB
  • terminal.ansiGreen#4DA6FF
  • terminal.ansiMagenta#B44AE6
  • terminal.ansiRed#FF4D8A
  • terminal.ansiWhite#D8CEE8
  • terminal.ansiYellow#FFAA44
  • terminal.background#0C0814
  • terminal.foreground#D8CEE8
  • titleBar.activeBackground#0C0814
  • titleBar.activeForeground#B44AE6
  • titleBar.inactiveBackground#0C0814
  • titleBar.inactiveForeground#4A3060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#D8CEE8
comment, punctuation.definition.comment#4A3060italic
string, string.quoted, string.template, punctuation.definition.string#FF4D8A
constant.numeric#FFAA44
constant.language#FFAA44italic
constant.character, constant.other#FFAA44
keyword, keyword.control, keyword.operator.new#B44AE6bold
keyword.operator#D8CEE8
storage, storage.type#B44AE6italic
storage.modifier#B44AE6italic
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#4DA6FFunderline
entity.name.function, support.function, meta.function-call#77BBFF
variable.parameter#FFAA44italic
variable, variable.other#D8CEE8
variable.language#FF4D8Aitalic
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#C8B8E0
entity.name.tag#FF4D8A
entity.other.attribute-name#B44AE6italic
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF4D8A
support.type.property-name.css#D8CEE8
support.constant.property-value.css#B44AE6
keyword.other.unit.css#FFAA44
punctuation.separator, punctuation.terminator, punctuation.accessor#9A8AB0
punctuation.section, punctuation.definition.block, meta.brace#9A8AB0
markup.heading, entity.name.section.markdown#FF4D8Abold
markup.bold#B44AE6bold
markup.italic#4DA6FFitalic
markup.underline.link#4DA6FF
markup.inline.raw, markup.fenced_code#44DDBB
support.type.property-name.json#B44AE6
string.quoted.double.json#FF4D8A
entity.name.tag.yaml#B44AE6
meta.decorator, punctuation.decorator#44DDBBitalic
string.regexp#44DDBB
constant.character.escape#44DDBB
support.type, support.class#4DA6FF
support.constant#FFAA44
invalid#FFFFFF
invalid.deprecated#FFFFFF