Skip to main content
Coding Theme

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#181818
  • activityBar.border#1a1925
  • activityBar.foreground#FF2AFC
  • activityBar.inactiveForeground#666666
  • activityBarBadge.background#00FF80
  • activityBarBadge.foreground#090819
  • badge.background#FF2AFC
  • badge.foreground#181818
  • button.background#FF2AFC
  • button.foreground#181818
  • button.hoverBackground#FF2AFC
  • button.secondaryBackground#2a2935
  • button.secondaryForeground#FF006E
  • button.secondaryHoverBackground#4A7AFF44
  • debugToolBar.background#1a1925
  • debugToolBar.border#2a2935
  • diffEditor.border#2a2935
  • diffEditor.insertedTextBackground#83FF5222
  • diffEditor.insertedTextBorder#83FF52
  • diffEditor.removedTextBackground#FF006E22
  • diffEditor.removedTextBorder#FF006E
  • dropdown.background#202020
  • dropdown.border#FF2AFC
  • dropdown.foreground#FF006E
  • dropdown.listBackground#181818
  • editor.background#181818
  • editor.findMatchBackground#FFD40066
  • editor.findMatchBorder#E5FF00
  • editor.findMatchHighlightBackground#FFD40033
  • editor.findMatchHighlightBorder#FFD400
  • editor.focusedStackFrameHighlightBackground#83FF5233
  • editor.foreground#7011ff
  • editor.lineHighlightBackground#202020
  • editor.lineHighlightBorder#2a2935
  • editor.selectionBackground#4A7AFF44
  • editor.selectionHighlightBackground#E388FF22
  • editor.stackFrameHighlightBackground#E5FF0033
  • editorBracketHighlight.foreground1#FF2AFC
  • editorBracketHighlight.foreground2#00E5FF
  • editorBracketHighlight.foreground3#83FF52
  • editorBracketHighlight.foreground4#E5FF00
  • editorBracketHighlight.foreground5#42C6FF
  • editorBracketHighlight.foreground6#FF006E
  • editorBracketMatch.background#00FFFF44
  • editorBracketMatch.border#00FFFF
  • editorCodeLens.foreground#666666
  • editorCursor.background#181818
  • editorCursor.foreground#00FFFF
  • editorError.border#FF0000
  • editorError.foreground#FF006E
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#1a1925
  • editorGutter.addedBackground#83FF52
  • editorGutter.background#181818
  • editorGutter.deletedBackground#FF006E
  • editorGutter.modifiedBackground#E5FF00
  • editorHint.border#00FF80
  • editorHint.foreground#83FF52
  • editorHoverWidget.background#1a1925
  • editorHoverWidget.border#2a2935
  • editorHoverWidget.foreground#FF006E
  • editorInfo.border#00E5FF
  • editorInfo.foreground#E5FF00
  • editorLightBulb.foreground#E5FF00
  • editorLightBulbAutoFix.foreground#83FF52
  • editorLineNumber.activeForeground#FF2AFC
  • editorLineNumber.foreground#666666
  • editorOverviewRuler.addedForeground#83FF52
  • editorOverviewRuler.border#1a1925
  • editorOverviewRuler.deletedForeground#FF006E
  • editorOverviewRuler.errorForeground#FF006E
  • editorOverviewRuler.findMatchForeground#FFD400
  • editorOverviewRuler.infoForeground#42C6FF
  • editorOverviewRuler.modifiedForeground#E5FF00
  • editorOverviewRuler.rangeHighlightForeground#E388FF
  • editorOverviewRuler.selectionHighlightForeground#4A7AFF
  • editorOverviewRuler.warningForeground#E5FF00
  • editorOverviewRuler.wordHighlightForeground#00E5FF
  • editorOverviewRuler.wordHighlightStrongForeground#FF2AFC
  • editorRuler.foreground#2a2935
  • editorSuggestWidget.background#1a1925
  • editorSuggestWidget.border#2a2935
  • editorSuggestWidget.foreground#FF2AFC
  • editorSuggestWidget.highlightForeground#00FFFF
  • editorSuggestWidget.selectedBackground#4A7AFF44
  • editorSuggestWidget.selectedForeground#F4F6F9
  • editorWarning.border#FFD400
  • editorWarning.foreground#E5FF00
  • editorWidget.background#1a1925
  • editorWidget.border#2a2935
  • editorWidget.foreground#FF006E
  • editorWidget.resizeBorder#E388FF
  • extensionButton.prominentBackground#E388FF
  • extensionButton.prominentForeground#181818
  • extensionButton.prominentHoverBackground#FF2AFC
  • gitDecoration.addedResourceForeground#83FF52
  • gitDecoration.conflictingResourceForeground#FF2AFC
  • gitDecoration.deletedResourceForeground#FF006E
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#E5FF00
  • gitDecoration.submoduleResourceForeground#FF2AFC
  • gitDecoration.untrackedResourceForeground#00E5FF
  • input.background#202020
  • input.border#FF2AFC
  • input.foreground#FF2AFC
  • input.placeholderForeground#666666
  • inputOption.activeBorder#00FF80
  • inputValidation.errorBackground#FF006E22
  • inputValidation.errorBorder#FF006E
  • inputValidation.infoBackground#42C6FF22
  • inputValidation.infoBorder#42C6FF
  • inputValidation.warningBackground#E5FF0022
  • inputValidation.warningBorder#E5FF00
  • list.activeSelectionBackground#4A7AFF44
  • list.activeSelectionForeground#F4F6F9
  • list.focusBackground#4A7AFF33
  • list.focusForeground#FF2AFC
  • list.hoverBackground#E388FF22
  • list.inactiveSelectionBackground#2a2935
  • menu.background#1a1925
  • menu.border#2a2935
  • menu.foreground#F4F6F9
  • menu.selectionBackground#4A7AFF44
  • menu.selectionBorder#00FFFF
  • menu.selectionForeground#F4F6F9
  • menu.separatorBackground#2a2935
  • menubar.selectionBackground#4A7AFF44
  • menubar.selectionBorder#00FFFF
  • menubar.selectionForeground#F4F6F9
  • merge.border#2a2935
  • merge.currentContentBackground#83FF5222
  • merge.currentHeaderBackground#83FF5244
  • merge.incomingContentBackground#42C6FF22
  • merge.incomingHeaderBackground#42C6FF44
  • notificationCenter.border#2a2935
  • notificationCenterHeader.background#1a1925
  • notificationCenterHeader.foreground#E388FF
  • notificationLink.foreground#00E5FF
  • notifications.background#1a1925
  • notifications.border#2a2935
  • notifications.foreground#FF006E
  • notificationToast.border#2a2935
  • panel.background#181818
  • panel.border#2a2935
  • panelTitle.activeBorder#00FFFF
  • panelTitle.activeForeground#FF2AFC
  • panelTitle.inactiveForeground#666666
  • peekView.border#E388FF
  • peekViewEditor.background#181818
  • peekViewEditor.matchHighlightBackground#FFD40044
  • peekViewResult.background#1a1925
  • peekViewResult.fileForeground#FF2AFC
  • peekViewResult.lineForeground#7011ff
  • peekViewResult.matchHighlightBackground#FFD40044
  • peekViewResult.selectionBackground#4A7AFF44
  • peekViewResult.selectionForeground#F4F6F9
  • peekViewTitle.background#181818
  • peekViewTitleDescription.foreground#666666
  • peekViewTitleLabel.foreground#E388FF
  • pickerGroup.border#2a2935
  • pickerGroup.foreground#E388FF
  • progressBar.background#00FF80
  • quickInput.background#181818
  • quickInput.foreground#FF2AFC
  • scrollbar.shadow#181818
  • scrollbarSlider.activeBackground#E388FF44
  • scrollbarSlider.background#2a293544
  • scrollbarSlider.hoverBackground#4A7AFF44
  • settings.checkboxBackground#1a1925
  • settings.checkboxBorder#2a2935
  • settings.checkboxForeground#FF006E
  • settings.dropdownBackground#1a1925
  • settings.dropdownBorder#2a2935
  • settings.dropdownForeground#FF2AFC
  • settings.headerForeground#E388FF
  • settings.modifiedItemIndicator#E5FF00
  • settings.numberInputBackground#1a1925
  • settings.numberInputBorder#2a2935
  • settings.numberInputForeground#FF006E
  • settings.textInputBackground#1a1925
  • settings.textInputBorder#2a2935
  • settings.textInputForeground#FF2AFC
  • sideBar.background#181818
  • sideBar.border#1a1925
  • sideBar.foreground#7011ff
  • sideBarSectionHeader.background#202020
  • sideBarSectionHeader.border#2a2935
  • sideBarSectionHeader.foreground#FF2AFC
  • sideBarTitle.foreground#FF2AFC
  • statusBar.background#181818
  • statusBar.border#1a1925
  • statusBar.debuggingBackground#FF006E
  • statusBar.debuggingForeground#F4F6F9
  • statusBar.foreground#00FF80
  • statusBar.noFolderBackground#181818
  • statusBarItem.activeBackground#4A7AFF44
  • statusBarItem.hoverBackground#2a2935
  • tab.activeBackground#181818
  • tab.activeBorder#00FFFF
  • tab.activeBorderTop#00FFFF
  • tab.activeForeground#FF006E
  • tab.border#1a1925
  • tab.hoverBackground#1a1925
  • tab.hoverForeground#FF2AFC
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#7011ff
  • terminal.ansiBlack#283034
  • terminal.ansiBlue#E388FF
  • terminal.ansiBrightBlack#FF1998
  • terminal.ansiBrightBlue#42C6FF
  • terminal.ansiBrightCyan#3DD8FF
  • terminal.ansiBrightGreen#83FF52
  • terminal.ansiBrightMagenta#FF2AFC
  • terminal.ansiBrightRed#FF006E
  • terminal.ansiBrightWhite#F4F6F9
  • terminal.ansiBrightYellow#E5FF00
  • terminal.ansiCyan#00E5FF
  • terminal.ansiGreen#00FF80
  • terminal.ansiMagenta#9900FF
  • terminal.ansiRed#FF0000
  • terminal.ansiWhite#7011ff
  • terminal.ansiYellow#FFD400
  • terminal.background#181818
  • terminal.foreground#7011ff
  • terminal.selectionBackground#4A7AFF
  • terminalCursor.background#181818
  • terminalCursor.foreground#00FFFF
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#FF2AFC
  • titleBar.border#1a1925
  • titleBar.inactiveBackground#181818
  • titleBar.inactiveForeground#666666
  • widget.shadow#18181844

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#666666italic
variable, string constant.other.placeholder#00ff80
constant.other.color#FF2AFC
invalid, invalid.illegal#FF006E
keyword, storage.type, storage.modifier#FF2AFC
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#00FFFF
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#E388FF
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#FFFF00
meta.block variable.other#00ff80
support.other.variable, string.other.link#00ff80
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#FF8C00
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#00BFFF
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#00FF00
support.type#FF006E
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#FF006E
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF006E
variable.language#FF006Eitalic
entity.name.method.js#FFFF00italic
meta.class-method.js entity.name.function.js, variable.function.constructor#FFFF00
entity.other.attribute-name#FF6600
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FF6600italic
entity.other.attribute-name.class#FF6600
source.sass keyword.control#FFFF00
markup.inserted#00ff80
markup.deleted#FF006E
markup.changed#FF8C00
string.regexp#00BFFF
constant.character.escape#00BFFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#83FF52italic
source.js constant.other.object.key.js string.unquoted.label.js#FF006Eitalic
source.json meta.structure.dictionary.json support.type.property-name.json#E5FF00
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF006E
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#FF2AFC
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#3DD8FF
text.html.markdown, punctuation.definition.list_item.markdown#7011ff
text.html.markdown markup.inline.raw.markdown#E5FF00
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#3DD8FF
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#83FF52
markup.italic#E388FFitalic
markup.bold, markup.bold string#E388FFbold
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#E388FFbold
markup.underline#FF006Eunderline
markup.quote punctuation.definition.blockquote.markdown#3DD8FF
markup.quoteitalic
string.other.link.title.markdown#FF2AFC
string.other.link.description.title.markdown#E5FF00
constant.other.reference.link.markdown#E5FF00
markup.raw.block#E5FF00
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
variable.language.fenced.markdown, support.other.fenced.markdown#3DD8FF
meta.separator#3DD8FFbold
markup.table#7011ff