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#1a1a1a
  • activityBar.border#222426
  • activityBar.foreground#ffffff
  • activityBarBadge.background#ffffff
  • activityBarBadge.foreground#000000
  • badge.background#ffffff
  • badge.foreground#000000
  • button.background#1e1e1e
  • button.foreground#ffffff
  • button.hoverBackground#3f3f3f
  • debugToolBar.background#1a1a1a
  • descriptionForeground#ffffff
  • diffEditor.insertedTextBackground#0096872d
  • diffEditor.removedTextBackground#ff00002d
  • dropdown.background#1a1a1a
  • dropdown.border#1a1a1b
  • dropdown.foreground#ffffff
  • dropdown.listBackground#1a1a1a
  • editor.background#1a1a1a
  • editor.findMatchBackground#606060
  • editor.findMatchBorder#606060
  • editor.findMatchHighlightBackground#1a1a1a
  • editor.findMatchHighlightBorder#606060
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#303030
  • editor.selectionBackground#606060
  • editor.selectionForeground#ffffff
  • editor.selectionHighlightBackground#1a1a1a
  • editor.selectionHighlightBorder#606060
  • editor.wordHighlightBackground#606060
  • editor.wordHighlightBorder#606060
  • editor.wordHighlightStrongBackground#1a1a1a
  • editor.wordHighlightStrongBorder#606060
  • editorBracketHighlight.foreground1#5CC9F5
  • editorBracketHighlight.foreground2#00FF99
  • editorBracketHighlight.foreground3#FFB347
  • editorBracketHighlight.foreground4#FF4FA0
  • editorBracketHighlight.foreground5#2EEAFF
  • editorBracketHighlight.foreground6#9A4DFF
  • editorBracketMatch.background#606060
  • editorBracketMatch.border#222426
  • editorBracketPairGuide.background1#5CC9F580
  • editorBracketPairGuide.background2#00FF9980
  • editorBracketPairGuide.background3#FFB34780
  • editorBracketPairGuide.background4#FF4FA080
  • editorBracketPairGuide.background5#2EEAFF80
  • editorBracketPairGuide.background6#9A4DFF80
  • editorCursor.background#222426
  • editorCursor.foreground#ffffff
  • editorGroup.border#222426
  • editorGroup.dropBackground#222426
  • editorGroupHeader.noTabsBackground#1a1a1a
  • editorGroupHeader.tabsBackground#1a1a1a
  • editorGroupHeader.tabsBorder#222426
  • editorIndentGuide.activeBackground1#888888
  • editorIndentGuide.background1#303030
  • editorLineNumber.foreground#606060
  • editorMarkerNavigation.background#1a1a1a
  • errorForeground#ff0000
  • extensionButton.prominentBackground#222426
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#ffffff
  • focusBorder#ffffff33
  • foreground#ffffff
  • input.background#1a1a1a
  • input.border#606060
  • input.foreground#ffffff
  • input.placeholderForeground#888888
  • inputOption.activeBorder#f78c00
  • inputValidation.errorBackground#1a1a1a
  • inputValidation.errorBorder#ff0000
  • inputValidation.infoBackground#1a1a1a
  • inputValidation.infoBorder#301212
  • inputValidation.warningBackground#1a1a1a
  • inputValidation.warningBorder#e6a23c
  • list.activeSelectionBackground#404040
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#606060
  • list.focusForeground#ffffff
  • list.highlightForeground#00d9ff
  • list.hoverBackground#606060
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#222426
  • list.inactiveSelectionBackground#2a2a2a
  • list.inactiveSelectionForeground#ffffff
  • list.invalidItemForeground#ff4545
  • menu.background#1a1a1a
  • menu.foreground#ffffff
  • menu.selectionBackground#606060
  • menu.selectionForeground#ffffff
  • notificationCenter.border#222426
  • notificationCenterHeader.background#1a1a1a
  • notificationCenterHeader.foreground#ffffff
  • notificationLink.foreground#ffffff
  • notifications.background#1a1a1a
  • notifications.border#1a1a1a
  • notifications.foreground#ffffff
  • notificationToast.border#222426
  • panel.background#1a1a1a
  • panel.border#222426
  • panelTitle.activeBorder#ffffff
  • peekView.border#222426
  • peekViewEditor.background#1a1a1a
  • peekViewTitle.background#1a1a1a
  • pickerGroup.border#222426
  • pickerGroup.foreground#ffffff
  • progressBar.background#ffffff
  • scrollbar.shadow#1a1a1a
  • scrollbarSlider.activeBackground#ffffff
  • scrollbarSlider.background#606060
  • scrollbarSlider.hoverBackground#ffffff
  • selection.background#bbbbbb
  • sideBar.background#1a1a1a
  • sideBar.border#222426
  • sideBar.dropBackground#222426
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.border#ffffff15
  • sideBarSectionHeader.foreground#ffffff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#1a1a1a
  • statusBar.border#222426
  • statusBar.debuggingBackground#1a1a1a
  • statusBar.debuggingBorder#222426
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#1c1c1d
  • statusBarItem.hoverBackground#303030
  • tab.activeBackground#1a1a1a
  • tab.activeBorder#ffffff
  • tab.border#222426
  • tab.hoverBackground#606060
  • tab.hoverBorder#ffffff
  • tab.inactiveBackground#1a1a1a
  • tab.inactiveForeground#aaaaaa
  • tab.unfocusedHoverBackground#1a1a1a
  • tab.unfocusedInactiveForeground#aaaaaa
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#ffffff
  • terminal.ansiBrightBlack#606060
  • terminal.ansiBrightBlue#ffffff
  • terminal.ansiBrightCyan#ffffff
  • terminal.ansiBrightGreen#ffffff
  • terminal.ansiBrightMagenta#ffffff
  • terminal.ansiBrightRed#ffffff
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffffff
  • terminal.ansiCyan#ffffff
  • terminal.ansiGreen#ffffff
  • terminal.ansiMagenta#ffffff
  • terminal.ansiRed#ffffff
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffffff
  • terminal.background#1a1a1a
  • terminal.border#222426
  • terminal.foreground#ffffff
  • terminal.selectionBackground#606060
  • textBlockQuote.background#1a1a1a
  • textBlockQuote.border#222426
  • textCodeBlock.background#1a1a1a
  • textLink.activeForeground#00d9ff
  • textLink.foreground#c0d4fa
  • textPreformat.foreground#ffffff
  • textSeparator.foreground#ffffff
  • titleBar.activeBackground#1a1a1a
  • titleBar.activeForeground#ffffff
  • titleBar.border#222426
  • titleBar.inactiveBackground#1a1a1a
  • titleBar.inactiveForeground#ffffff
  • walkThrough.embeddedEditorBackground#1a1a1a
  • widget.shadow#1a1a1a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ffffff
variable, string constant.other.placeholder#fff
constant.other.color#969696
invalid, invalid.illegal#FF0000
keyword, storage.type, storage.modifier#969696
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#969696bold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#fff
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#fffbold
meta.block variable.other#fff
support.other.variable, string.other.link#fff
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#fff
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#fff
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#969696
support.type#fff
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#fff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#fff
variable.language#fff
entity.name.method.js#fff
meta.class-method.js entity.name.function.js, variable.function.constructor#fff
entity.other.attribute-name#969696
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#969696
entity.other.attribute-name.class#969696
source.sass keyword.control#969696
markup.inserted#ffffff
markup.deleted#FF0000
markup.changed#FFFA00
string.regexp#ffffff
constant.character.escape#D2D2D2
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#fff
source.js constant.other.object.key.js string.unquoted.label.js#fff
source.json meta.structure.dictionary.json support.type.property-name.json#fff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fff
text.html.markdown, punctuation.definition.list_item.markdown#fff
text.html.markdown markup.inline.raw.markdown#fff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#fff
text.html.markdown meta.dummy.line-break#fff
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#fff
markup.italic#fff
markup.bold, markup.bold string#fffbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#fffbold
markup.underline#fffunderline
markup.strike#fffunderline
markup.quote punctuation.definition.blockquote.markdown#fff
markup.quote#fff
string.other.link.title.markdown#fff
string.other.link.description.title.markdown#fff
constant.other.reference.link.markdown#fff
markup.raw.block#fff
markup.raw.block.fenced.markdown#fff
punctuation.definition.fenced.markdown#fff
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#fff
variable.language.fenced.markdown#fff
meta.separator#fffbold
markup.table#fff
token.info-token#ffffff
token.warn-token#FFFA00
token.error-token#FF0000
token.debug-token#FF0000
string, punctuation.definition.string#ffffff
comment, punctuation.definition.comment#485064
meta.diff.header.git, meta.diff.index.git#969696bold
meta.diff.header.from-file, markup.deleted#bb0000bold
meta.diff.header.to-file, markup.inserted#9bb955bold
VoidLight Theme by Tyrail Leverett - VS Code Theme