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#ff5ca8
  • activityBar.activeFocusBorder#f45ce0
  • activityBar.background#0b1714
  • activityBar.border#3fe0d0
  • activityBar.foreground#e6fbff
  • activityBar.inactiveForeground#5f9ca0
  • activityBarBadge.background#ff5ca8
  • activityBarBadge.foreground#3a0a1f
  • activityBarTop.activeBorder#ff5ca8
  • activityBarTop.foreground#e6fbff
  • badge.background#3fe0d0
  • badge.foreground#062622
  • breadcrumb.activeSelectionForeground#ff5ca8
  • breadcrumb.foreground#7fb0b4
  • button.background#ff5ca8
  • button.foreground#3a0a1f
  • button.hoverBackground#ff8fc4
  • button.secondaryBackground#153b3a
  • button.secondaryForeground#e6fbff
  • button.secondaryHoverBackground#1a4a47
  • checkbox.background#0b1714
  • checkbox.border#3fe0d0
  • checkbox.foreground#e6fbff
  • commandCenter.activeBackground#153b3a
  • commandCenter.activeBorder#ff5ca8
  • commandCenter.activeForeground#e6fbff
  • commandCenter.background#091411
  • commandCenter.border#b47aff
  • commandCenter.foreground#b0e4ec
  • contrastActiveBorder#ff5ca8
  • contrastBorder#3fe0d0
  • debugToolBar.border#b47aff
  • descriptionForeground#7fb0b4
  • diffEditor.diagonalFill#2a5a52
  • diffEditor.insertedLineBackground#1a9e7233
  • diffEditor.insertedTextBackground#22c48f55
  • diffEditor.removedLineBackground#9e2a4433
  • diffEditor.removedTextBackground#c43a5a55
  • disabledForeground#4a7a7e
  • dropdown.background#0b1714
  • dropdown.border#3fe0d0
  • dropdown.foreground#e6fbff
  • editor.background#12241f
  • editor.findMatchBackground#a8811aAA
  • editor.findMatchBorder#ffc93d
  • editor.findMatchHighlightBackground#8c6c1666
  • editor.foreground#e6fbff
  • editor.inactiveSelectionBackground#1f7a8055
  • editor.lineHighlightBackground#172e27
  • editor.lineHighlightBorder#1e3b32
  • editor.rangeHighlightBackground#ff5ca81f
  • editor.selectionBackground#2a8a94AA
  • editor.selectionHighlightBackground#3aa8b444
  • editor.wordHighlightBackground#3fe0d026
  • editor.wordHighlightStrongBackground#ff5ca82B
  • editorBracketHighlight.foreground1#ff5ca8
  • editorBracketHighlight.foreground2#3fe0d0
  • editorBracketHighlight.foreground3#b47aff
  • editorBracketHighlight.foreground4#ffc93d
  • editorBracketHighlight.foreground5#ff8a5c
  • editorBracketHighlight.foreground6#5fd0f0
  • editorBracketHighlight.unexpectedBracket.foreground#ff7a8f
  • editorBracketMatch.background#ff5ca826
  • editorBracketMatch.border#ff5ca8
  • editorCodeLens.foreground#5f9ca0
  • editorCursor.foreground#ff5ca8
  • editorError.foreground#ff7a8f
  • editorGroup.border#3fe0d0
  • editorGroupHeader.tabsBackground#0b1714
  • editorGroupHeader.tabsBorder#3fe0d0
  • editorGutter.addedBackground#3fe0d0
  • editorGutter.deletedBackground#ff7a8f
  • editorGutter.modifiedBackground#5fd0f0
  • editorHint.foreground#3fe0d0
  • editorHoverWidget.border#b47aff
  • editorIndentGuide.activeBackground1#3f7a6e
  • editorIndentGuide.background1#20443c
  • editorInfo.foreground#5fd0f0
  • editorInlayHint.background#193a33
  • editorInlayHint.foreground#9ccfd4
  • editorLineNumber.activeForeground#ff5ca8
  • editorLineNumber.foreground#5f9ca0
  • editorLink.activeForeground#f45ce0
  • editorRuler.foreground#20443c
  • editorSuggestWidget.background#0e1d19
  • editorSuggestWidget.border#b47aff
  • editorSuggestWidget.foreground#b0e4ec
  • editorSuggestWidget.highlightForeground#ff5ca8
  • editorSuggestWidget.selectedBackground#153b3a
  • editorWarning.foreground#ffc93d
  • editorWhitespace.foreground#28524a
  • editorWidget.background#0e1d19
  • editorWidget.border#b47aff
  • editorWidget.foreground#e6fbff
  • errorForeground#ff7a8f
  • focusBorder#ff5ca8
  • foreground#e6fbff
  • gitDecoration.addedResourceForeground#3fe0d0
  • gitDecoration.conflictingResourceForeground#ffc93d
  • gitDecoration.deletedResourceForeground#ff7a8f
  • gitDecoration.ignoredResourceForeground#4a7a7e
  • gitDecoration.modifiedResourceForeground#5fd0f0
  • gitDecoration.renamedResourceForeground#b47aff
  • gitDecoration.untrackedResourceForeground#6ff0e8
  • icon.foreground#b0e4ec
  • input.background#0b1714
  • input.border#3fe0d0
  • input.foreground#e6fbff
  • input.placeholderForeground#5f9ca0
  • inputOption.activeBackground#1a4a47
  • inputOption.activeBorder#ff5ca8
  • inputValidation.errorBackground#4a1a26
  • inputValidation.errorBorder#ff7a8f
  • inputValidation.infoBackground#123540
  • inputValidation.infoBorder#5fd0f0
  • inputValidation.warningBackground#3d3315
  • inputValidation.warningBorder#ffc93d
  • list.activeSelectionBackground#153b3a
  • list.activeSelectionForeground#e6fbff
  • list.focusBackground#1a4a47
  • list.focusForeground#e6fbff
  • list.focusOutline#ff5ca8
  • list.highlightForeground#ff5ca8
  • list.hoverBackground#122e27
  • list.hoverForeground#e6fbff
  • list.inactiveSelectionBackground#143630
  • list.inactiveSelectionForeground#e6fbff
  • list.invalidItemForeground#ff7a8f
  • menu.background#0e1d19
  • menu.border#b47aff
  • menu.foreground#e6fbff
  • menu.selectionBackground#153b3a
  • menu.selectionForeground#e6fbff
  • menu.separatorBackground#2a5a52
  • minimap.background#0e1d19
  • minimap.errorHighlight#ff7a8f
  • minimap.findMatchHighlight#ffc93dcb
  • minimap.selectionHighlight#3aa8b4cd
  • minimap.warningHighlight#ffc93d
  • minimapGutter.addedBackground#3fe0d0
  • minimapGutter.deletedBackground#ff7a8f
  • minimapGutter.modifiedBackground#5fd0f0
  • notificationCenterHeader.background#0e1d19
  • notificationLink.foreground#5fd0f0
  • notifications.background#0e1d19
  • notifications.border#b47aff
  • notifications.foreground#e6fbff
  • notificationToast.border#b47aff
  • panel.background#0c1a16
  • panel.border#3fe0d0
  • panelInput.border#3fe0d0
  • panelTitle.activeBorder#ff5ca8
  • panelTitle.activeForeground#e6fbff
  • panelTitle.inactiveForeground#5f9ca0
  • peekView.border#b47aff
  • peekViewEditor.background#091411
  • peekViewEditor.matchHighlightBackground#8c6c1688
  • peekViewResult.background#0b1714
  • peekViewResult.selectionBackground#153b3a
  • peekViewTitle.background#0e1d19
  • pickerGroup.border#b47aff
  • pickerGroup.foreground#ff5ca8
  • progressBar.background#ff5ca8
  • quickInput.background#0e1d19
  • quickInput.foreground#e6fbff
  • quickInputList.focusBackground#153b3a
  • quickInputList.focusForeground#e6fbff
  • scrollbar.shadow#050c0a
  • scrollbarSlider.activeBackground#3aa8b499
  • scrollbarSlider.background#2a8a9455
  • scrollbarSlider.hoverBackground#3aa8b477
  • selection.background#2a8a9466
  • settings.checkboxBorder#3fe0d0
  • settings.dropdownBorder#3fe0d0
  • settings.headerForeground#ff5ca8
  • settings.modifiedItemIndicator#ffc93d
  • settings.textInputBorder#3fe0d0
  • sideBar.background#0e1d19
  • sideBar.border#3fe0d0
  • sideBar.foreground#b0e4ec
  • sideBarActivityBarTop.border#3fe0d0
  • sideBarSectionHeader.background#091411
  • sideBarSectionHeader.border#3fe0d0
  • sideBarSectionHeader.foreground#3fe0d0
  • sideBarTitle.border#3fe0d0
  • sideBarTitle.foreground#ff5ca8
  • statusBar.background#081310
  • statusBar.border#b47aff
  • statusBar.debuggingBackground#a8267a
  • statusBar.debuggingForeground#e6fbff
  • statusBar.foreground#3fe0d0
  • statusBar.noFolderBackground#0b1714
  • statusBarItem.hoverBackground#1a3f38
  • statusBarItem.remoteBackground#ff5ca8
  • statusBarItem.remoteForeground#3a0a1f
  • tab.activeBackground#12241f
  • tab.activeBorder#ff5ca8
  • tab.activeBorderTop#3fe0d0
  • tab.activeForeground#e6fbff
  • tab.activeModifiedBorder#ffc93d
  • tab.border#2a5a52
  • tab.hoverBackground#122e27
  • tab.hoverForeground#e6fbff
  • tab.inactiveBackground#0b1714
  • tab.inactiveForeground#5f9ca0
  • tab.inactiveModifiedBorder#a8842a
  • tab.unfocusedActiveBorderTop#1fa89c
  • terminal.ansiBlack#172e27
  • terminal.ansiBlue#5fd0f0
  • terminal.ansiBrightBlack#5f9ca0
  • terminal.ansiBrightBlue#8fe0ff
  • terminal.ansiBrightCyan#6ff0e8
  • terminal.ansiBrightGreen#7fffbf
  • terminal.ansiBrightMagenta#d0a3ff
  • terminal.ansiBrightRed#ffa3b2
  • terminal.ansiBrightWhite#e6fbff
  • terminal.ansiBrightYellow#ffe08a
  • terminal.ansiCyan#3fe0d0
  • terminal.ansiGreen#a8e86b
  • terminal.ansiMagenta#f45ce0
  • terminal.ansiRed#ff7a8f
  • terminal.ansiWhite#b0e4ec
  • terminal.ansiYellow#ffc93d
  • terminal.background#0b1714
  • terminal.border#3fe0d0
  • terminal.foreground#e6fbff
  • terminal.selectionBackground#2a8a94AA
  • terminalCursor.background#12241f
  • terminalCursor.foreground#ff5ca8
  • textBlockQuote.background#0e1d19
  • textBlockQuote.border#3fe0d0
  • textCodeBlock.background#0b1714
  • textLink.activeForeground#f45ce0
  • textLink.foreground#5fd0f0
  • textPreformat.foreground#3fe0d0
  • titleBar.activeBackground#081310
  • titleBar.activeForeground#3fe0d0
  • titleBar.border#b47aff
  • titleBar.inactiveBackground#060f0d
  • titleBar.inactiveForeground#5f9ca0
  • tree.inactiveIndentGuidesStroke#1b3830
  • tree.indentGuidesStroke#2a5a52
  • window.activeBorder#3fe0d0
  • window.inactiveBorder#1fa89c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5f9ca0italic
string, string.quoted, string.template#3fe0d0
constant.character.escape, constant.other.placeholder#6ff0e8
constant.numeric, constant.language, constant.other#ffc93d
keyword, storage.type, storage.modifier#b47aff
keyword.control, keyword.control.flow, keyword.control.conditional#d0a3ffbold
keyword.operator, punctuation.separator, punctuation.accessor#7fb0b4
variable, meta.definition.variable.name#e6fbff
variable.parameter, meta.parameter#ffab87
variable.other.property, support.variable.property, meta.object-literal.key#ff8a5c
entity.name.function, support.function, meta.function-call#ff5ca8
entity.name.type, entity.name.class, support.type, support.class#5fd0f0
entity.name.namespace, entity.name.module, support.module#6ff0e8
entity.name.tag, punctuation.definition.tag#f45ce0
entity.other.attribute-name#ffc93d
string.regexp, constant.regexp#a8e86b
invalid, invalid.illegal#ff7a8f
markup.heading, entity.name.section.markdown#ff5ca8bold
markup.bold, punctuation.definition.bold.markdown#ffc93dbold
markup.italic, punctuation.definition.italic.markdown#d0a3ffitalic
markup.underline.link, string.other.link.title.markdown#5fd0f0underline
markup.inline.raw, markup.fenced_code.block#3fe0d0
markup.inserted, meta.diff.header.to-file#3fe0d0
markup.deleted, meta.diff.header.from-file#ff7a8f
markup.changed#ffc93d