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#f52277
  • activityBar.background#100f1a
  • activityBar.border#8c2c56
  • activityBar.foreground#f52277
  • activityBar.inactiveForeground#f5227799
  • activityBarBadge.background#f52277
  • activityBarBadge.foreground#d0fff4
  • badge.background#f52277
  • badge.foreground#d0fff4
  • breadcrumb.activeSelectionForeground#a8ffef
  • breadcrumb.background#12111f
  • breadcrumb.focusForeground#a8ffef
  • breadcrumb.foreground#415e6c
  • breadcrumbPicker.background#262b4be6
  • button.background#ff428e
  • button.foreground#eafefa
  • button.hoverBackground#f52277
  • debugExceptionWidget.background#ff428a73
  • debugExceptionWidget.border#ff1767
  • debugToolBar.background#242560de
  • debugToolBar.border#00000000
  • descriptionForeground#93e0e3
  • diffEditor.border#242560
  • diffEditor.insertedTextBackground#43fdd517
  • diffEditor.removedTextBackground#fe608217
  • dropdown.background#1a1b46
  • dropdown.border#242560
  • dropdown.foreground#90b0b3
  • dropdown.listBackground#262b4be6
  • editor.background#141322
  • editor.findMatchBackground#00000000
  • editor.findMatchBorder#9736c08c
  • editor.findMatchHighlightBackground#00000000
  • editor.findMatchHighlightBorder#f179e1cc
  • editor.findRangeHighlightBackground#fd43cd12
  • editor.focusedStackFrameHighlightBackground#efe9001a
  • editor.foreground#94b4c4
  • editor.hoverHighlightBackground#fd43cd40
  • editor.lineHighlightBackground#d043cf12
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#fd43cd12
  • editor.rangeHighlightBorder#00000000
  • editor.selectionBackground#874df84d
  • editor.selectionHighlightBackground#874df81a
  • editor.selectionHighlightBorder#6e45c7
  • editor.snippetFinalTabstopHighlightBackground#ff428e1a
  • editor.snippetFinalTabstopHighlightBorder#864df8
  • editor.snippetTabstopHighlightBackground#ff428e1a
  • editor.snippetTabstopHighlightBorder#602976
  • editor.stackFrameHighlightBackground#ff53001f
  • editor.wordHighlightBackground#ff53000d
  • editor.wordHighlightBorder#ff530040
  • editor.wordHighlightStrongBackground#efe9000d
  • editor.wordHighlightStrongBorder#efe90040
  • editorBracketHighlight.foreground1#0adb8b
  • editorBracketHighlight.foreground2#00eaff
  • editorBracketHighlight.foreground3#f60e67
  • editorBracketMatch.border#d043cf
  • editorCodeLens.foreground#d043cf80
  • editorCursor.foreground#ff428e
  • editorError.foreground#ff1767
  • editorGroup.border#242560
  • editorGroup.dropBackground#ff428e99
  • editorGroup.focusedEmptyBorder#00000000
  • editorGroupHeader.border#1a1b46
  • editorGroupHeader.tabsBackground#12111f
  • editorGroupHeader.tabsBorder#242560
  • editorGutter.addedBackground#0adb8b
  • editorGutter.deletedBackground#ff427b
  • editorGutter.modifiedBackground#00eaff
  • editorIndentGuide.activeBackground#ff428e99
  • editorInfo.foreground#93e0e3
  • editorLineNumber.activeForeground#d0fff4
  • editorLineNumber.foreground#415e6c
  • editorLink.activeForeground#43fdd5
  • editorMarkerNavigation.background#262b4be6
  • editorMarkerNavigationError.background#ff1767
  • editorMarkerNavigationInfo.background#93e0e3
  • editorMarkerNavigationWarning.background#00eaff
  • editorOverviewRuler.addedForeground#0adb8b
  • editorOverviewRuler.border#242560
  • editorOverviewRuler.commonContentForeground#ffd0004d
  • editorOverviewRuler.currentContentForeground#fc86fe4d
  • editorOverviewRuler.deletedForeground#ff427b
  • editorOverviewRuler.errorForeground#ff1767
  • editorOverviewRuler.incomingContentForeground#008fe94d
  • editorOverviewRuler.infoForeground#93e0e3
  • editorOverviewRuler.modifiedForeground#00eaff
  • editorOverviewRuler.warningForeground#00eaff
  • editorRuler.foreground#ff428e99
  • editorUnnecessaryCode.opacity#0000006e
  • editorWarning.foreground#00eaff
  • editorWidget.background#262b4be6
  • editorWidget.border#7c9c9e
  • editorWidget.resizeBorder#ff6ba6
  • errorForeground#ff1767
  • extensionButton.prominentBackground#ff428e
  • extensionButton.prominentForeground#a8ffef
  • extensionButton.prominentHoverBackground#ff6ba6
  • focusBorder#00000000
  • foreground#7c9c9e
  • gitDecoration.addedResourceForeground#0adb8b
  • gitDecoration.conflictingResourceForeground#ff428a
  • gitDecoration.deletedResourceForeground#ff427b
  • gitDecoration.ignoredResourceForeground#415e6c
  • gitDecoration.modifiedResourceForeground#00eaff
  • gitDecoration.stageDeletedResourceForeground#ff427b
  • gitDecoration.stageModifiedResourceForeground#ff6ba6
  • gitDecoration.submoduleResourceForeground#cc6796
  • gitDecoration.untrackedResourceForeground#0adb8b
  • gitlens.gutterBackgroundColor#141322
  • gitlens.gutterForegroundColor#c6d2d1
  • gitlens.gutterUncommittedForegroundColor#85a5a0
  • gitlens.lineHighlightBackgroundColor#f425fc26
  • gitlens.lineHighlightOverviewRulerColor#f425fc80
  • gitlens.trailingLineForegroundColor#f425fc59
  • input.background#1c1a30
  • input.border#242560
  • input.foreground#7c9c9e
  • input.placeholderForeground#7c9c9e
  • inputOption.activeBackground#ff428e26
  • inputOption.activeBorder#8c2c56
  • inputValidation.errorBackground#ff1767
  • inputValidation.errorBorder#ff1767
  • inputValidation.infoBackground#93e0e3
  • inputValidation.infoBorder#93e0e3
  • inputValidation.warningBackground#00eaff
  • inputValidation.warningBorder#00eaff
  • list.activeSelectionBackground#ff428e1a
  • list.activeSelectionForeground#a8ffef
  • list.dropBackground#ff428e99
  • list.errorForeground#ff1767
  • list.focusBackground#ff428e33
  • list.focusForeground#a8ffef
  • list.highlightForeground#a8ffef
  • list.hoverBackground#ff428e0d
  • list.hoverForeground#7c9c9e
  • list.inactiveSelectionBackground#12111f
  • list.inactiveSelectionForeground#a8ffef
  • list.warningForeground#00eaff
  • merge.border#242560
  • merge.commonContentBackground#ffd00013
  • merge.commonHeaderBackground#ffd00033
  • merge.currentContentBackground#fc86fe13
  • merge.currentHeaderBackground#fc86fe33
  • merge.incomingContentBackground#008fe913
  • merge.incomingHeaderBackground#008fe933
  • minimap.findMatchHighlight#9736c0bf
  • minimapGutter.addedBackground#0adb8b
  • minimapGutter.deletedBackground#ff427b
  • minimapGutter.modifiedBackground#00eaff
  • panel.background#141322
  • panel.border#242560
  • panelTitle.activeBorder#ff428e
  • panelTitle.activeForeground#7c9c9e
  • panelTitle.inactiveForeground#7c9c9e
  • peekView.border#fe6083
  • peekViewEditor.background#12111f
  • peekViewEditor.matchHighlightBackground#fe608326
  • peekViewEditor.matchHighlightBorder#00000000
  • peekViewEditorGutter.background#12111f
  • peekViewResult.background#12111f
  • peekViewResult.fileForeground#7c9c9e
  • peekViewResult.lineForeground#7c9c9e
  • peekViewResult.matchHighlightBackground#fd43cd33
  • peekViewResult.selectionBackground#fd43cd1a
  • peekViewResult.selectionForeground#a8ffef
  • peekViewTitle.background#12111f
  • peekViewTitleDescription.foreground#7c9c9e
  • peekViewTitleLabel.foreground#a8ffef
  • pickerGroup.border#8c2c56
  • pickerGroup.foreground#a8ffef
  • progressBar.background#602976
  • quickInput.background#262b4be6
  • scrollbar.shadow#ff428e80
  • scrollbarSlider.activeBackground#ff428e66
  • scrollbarSlider.background#ff428e1a
  • scrollbarSlider.hoverBackground#ff428e40
  • selection.background#78efc51a
  • sideBar.background#12111f
  • sideBar.border#1d1e7d
  • sideBar.dropBackground#ff428e99
  • sideBar.foreground#90b0b3
  • sideBarSectionHeader.background#12111f
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#7c9c9e
  • sideBarTitle.foreground#7c9c9e
  • statusBar.background#12111f
  • statusBar.border#242560
  • statusBar.debuggingBackground#12111f
  • statusBar.debuggingBorder#ff428e
  • statusBar.debuggingForeground#a8ffef
  • statusBar.foreground#7c9c9e
  • statusBar.noFolderBackground#242560
  • statusBar.noFolderBorder#602976
  • statusBar.noFolderForeground#7c9c9e
  • statusBarItem.activeBackground#602976
  • statusBarItem.hoverBackground#864df833
  • statusBarItem.prominentBackground#602976
  • statusBarItem.prominentHoverBackground#913eb4
  • tab.activeBackground#12111f
  • tab.activeBorder#00000000
  • tab.activeBorderTop#fc0065
  • tab.activeForeground#c9fdf1
  • tab.border#12111f
  • tab.hoverBorder#415e6c
  • tab.inactiveBackground#12111f
  • tab.inactiveForeground#90b0b3
  • terminal.ansiBlack#30317d
  • terminal.ansiBlue#7dd9e4
  • terminal.ansiBrightBlack#391ab5
  • terminal.ansiBrightBlue#84f9fe
  • terminal.ansiBrightCyan#83fee8
  • terminal.ansiBrightGreen#00eaff
  • terminal.ansiBrightMagenta#d5358f
  • terminal.ansiBrightRed#ff427b
  • terminal.ansiBrightWhite#cbfff2
  • terminal.ansiBrightYellow#00eaff
  • terminal.ansiCyan#a8ffef
  • terminal.ansiGreen#0adb8b
  • terminal.ansiMagenta#fa61b8
  • terminal.ansiRed#ff5395
  • terminal.ansiWhite#cff0e8
  • terminal.ansiYellow#00eaff
  • terminal.background#141322
  • terminal.border#242560
  • terminal.foreground#a8d2d4
  • terminal.selectionBackground#874df84d
  • terminalCursor.background#ff428e
  • terminalCursor.foreground#defff7
  • textBlockQuote.background#242560
  • textBlockQuote.border#7c9c9e
  • textCodeBlock.background#602976
  • textLink.activeForeground#baffec
  • textLink.foreground#a8ffef
  • textPreformat.foreground#ff428e
  • titleBar.activeBackground#100f1a
  • titleBar.activeForeground#f52277
  • titleBar.border#8c2c56
  • tree.indentGuidesStroke#242560
  • walkThrough.embeddedEditorBackground#1e2732
  • widget.shadow#ff428e80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#45898Citalic
entity#A6E2E0
invalid#FF427Bitalic bold underline
keyword#D5358F
markup#94B4C4
storage#F37AB0
string#A9FEF7
support#7CB3B6
variable#B4DAE9
comment.block.documentation#75B7BB
comment.block.documentation storage#FDA8BC
comment.block.documentation entity#45898C
variable.other.jsdoc#BAF7FC
support.function#8CE1E7
keyword.import#F272AA
meta.paragraph.markdown#BCCFCF
comment.block.html#48676A
entity.name.section.markdown#FFDFEEbold
punctuation.definition.heading.markdown#A8FFDBbold
markup.inline.raw.string.markdown#FF96AA
punctuation.definition.raw.markdown#FFDFEE
markup.fenced_code.block.markdown#74A39D
meta.separator.markdown#999EE1
meta.link.inline.markdown#9CEEEB
markup.underline.link#A8FFEFADitalic
meta.link.inline.markdown punctuation.definition.string#5AF5F0
constant.other.reference.link#9CEEEB
meta.link.reference.def markup.underline.link#74A39Ditalic
meta.link.reference.def punctuation.definition.constant#75FFFAAD
punctuation.definition.list.begin#A8FFDBAD
markup.bold.markdown#74A39Dbold
markup.italic.markdown#ABDADAitalic
markup.italic.markdown punctuation.definition#ABDADAitalic
entity.name.function#8CE1E7
keyword.control.flow#FF1998
keyword.control.export#FF1998
keyword.operator#FE8DA5
storage.type.function#FB4293
storage.type.function.arrow#FE8DA5
string.template#A4FFE4
support.type.property-name.json#7C9C9E
source.json string#BAF7FC
source.json punctuation.separator, source.json punctuation.definition.dictionary, source.json punctuation.definition.array#45898C
entity.name.tag#6ACBD8
punctuation.definition.tag#639196
support.class.component#7AFFE2
entity.name.tag.yaml#7C9C9E
source.yaml string#BAF7FC
source.yaml punctuation.separator, source.yaml punctuation.definition.sequence#45898C
constant#0ADB8B
constant.language.boolean#0ADB8B
constant.language.null#0ADB8B
keyword.control#0ADB8B
keyword.control.import, keyword.control.from#E45CFF
token.warn-token#00EAFF
token.info-token#6796E6
token.error-token#F44747
token.debug-token#B267E6